better create group ui

src/index.html

@@ -154,11 +154,10 @@
         <p id="my-qr-code" class="qr-container" style="display:none"></p>
         <p><small>Beware of sharing your chat link publicly: you might get spammed with message requests. Publicly share your <a class="profile-link">profile link</a> instead.</small></p>
         <h3>New group</h3>
-        <p><small>Group chats are under development: data loss may occur.</small></p>
+        <p>
-        <p><input id="new-group-participant" type="text" placeholder="Participant chat link"></p>
+          <input id="new-group-name" type="text" placeholder="Group name">
-        <div id="new-group-participants"></div>
+          <button id="new-group-create">Create</button>
-        <p><input id="new-group-name" type="text" placeholder="Group name"></p>
+        </p>
-        <p><button id="new-group-create">Create</button></p>
         <hr/>
         <h3>Your Chat Links</h3>
         <p><button id="generate-chat-link">Create new chat link</button></p>
@@ -294,12 +293,11 @@
         <div class="content">
           <div id="profile-group-settings">
             <div id="profile-group-name-container">Group name: <input id="profile-group-name" placeholder="Group name"></div>
-            <p>Participants:</p>
+            <p>Members:</p>
             <div id="profile-group-participants"></div>
             <div id="profile-add-participant" style="display:none;">
-              <p>Add participant</p>
+              <p>Add member:</p>
-              <p><input id="profile-add-participant-input" type="text" placeholder="Participant chat link"></p>
+              <p><input id="profile-add-participant-input" type="text" placeholder="New member's chat link"></p>
-              <p><button id="profile-add-participant-button">Add participant</button></p>
             </div>
             <hr>
           </div>

src/js/app.js

@@ -406,34 +406,6 @@ $('#paste-chat-link').on('input', event => {
   $(event.target).val('');
 });
 
-var newGroupParticipants = [];
-$('#new-group-participant').on('input', event => {
-  var val = $(event.target).val();
-  if (val.length < 30) {
-    return;
-  }
-  var s = val.split('?');
-  if (s.length !== 2) { return; }
-  var pub = getUrlParameter('chatWith', s[1]);
-  if (pub) {
-    if (newGroupParticipants.indexOf(pub) >= 0) { $('#new-group-participant').val(''); return; }
-    var identicon = getIdenticon(pub, 40).css({'margin-right':15});
-    var nameEl = $('<span>');
-    gun.user(pub).get('profile').get('name').on(name => nameEl.text(name));
-    var el = $('<p>').css({display:'flex', 'align-items': 'center'});
-    var removeBtn = $('<button>').css({'margin-right': 15}).text('Remove').click(() => {
-      el.remove();
-      newGroupParticipants.forEach((p, i) => {if (p===pub) { newGroupParticipants.splice(i, 1); }})
-    });
-    el.append(removeBtn);
-    el.append(identicon);
-    el.append(nameEl);
-    $('#new-group-participants').append(el);
-    newGroupParticipants.push(pub);
-  }
-  $(event.target).val('');
-});
-
 $('#new-group-create').click(createGroup);
 function createGroup(e) {
   e.preventDefault();
@@ -441,14 +413,12 @@ function createGroup(e) {
     var c = new iris.Channel({
       gun,
       key,
-      participants: newGroupParticipants,
+      participants: [],
     });
-    newGroupParticipants = [];
     c.put('name', $('#new-group-name').val());
-    $('#new-group-participants').empty();
     $('#new-group-name').val('');
     addChat(c);
-    showChat(c.uuid);
+    showProfile(c.uuid);
   }
 }
 
@@ -856,32 +826,35 @@ $('#profile-add-participant').on('input', event => {
   var s = val.split('?');
   if (s.length !== 2) { return; }
   var pub = getUrlParameter('chatWith', s[1]);
+  $('#profile-add-participant-input').hide();
   if (pub) {
     $('#profile-add-participant-candidate').remove();
     var identicon = getIdenticon(pub, 40).css({'margin-right':15});
     var nameEl = $('<span>');
     gun.user(pub).get('profile').get('name').on(name => nameEl.text(name));
     var el = $('<p>').css({display:'flex', 'align-items': 'center'}).attr('id', 'profile-add-participant-candidate');
-    var removeBtn = $('<button>').css({'margin-right': 15}).text('Cancel').click(() => {
+    var addBtn = $('<button>').css({'margin-left': 15}).text('Add').click(() => {
+      if (newGroupParticipant) {
+        chats[activeProfile].addParticipant(newGroupParticipant);
+        newGroupParticipant = null;
+        $('#profile-add-participant-input').val('').show();
+        $('#profile-add-participant-candidate').remove();
+      }
+    });
+    var removeBtn = $('<button>').css({'margin-left': 15}).text('Cancel').click(() => {
       el.remove();
+      $('#profile-add-participant-input').val('').show();
       newGroupParticipant = null;
     });
-    el.append(removeBtn);
     el.append(identicon);
     el.append(nameEl);
+    el.append(addBtn);
+    el.append(removeBtn);
     newGroupParticipant = pub;
     $('#profile-add-participant-input').after(el);
   }
   $(event.target).val('');
 });
-$('#profile-add-participant-button').click(() => {
-  if (newGroupParticipant) {
-    chats[activeProfile].addParticipant(newGroupParticipant);
-    newGroupParticipant = null;
-    $('#profile-add-participant-input').val('');
-    $('#profile-add-participant-candidate').remove();
-  }
-});
 
 function renderGroupParticipants(pub) {
   if (!(chats[pub] && chats[pub].uuid)) {