Simplify "Share with others" UX

src/angular-app/languageforge/lexicon/shared/share-with-others/invite-member-form.component.html

@@ -2,17 +2,17 @@
   <b>Invite a new member</b>
   <div class="inline-invite-form" style="margin-top: 8px;">
     <label>via: </label>
-    <input type="email" class="form-control" placeholder="Email" ng-model="$ctrl.inviteEmail">
-    <button type="button" class="btn btn-primary"
-            ng-click="$ctrl.sendEmailInvite()" data-ng-disabled="$ctrl.inviteEmailDisabled()">
-      <i class="fa fa-paper-plane"></i>
-    </button>
+    <input type="email" ng-form="email" class="form-control" placeholder="Email" ng-model="$ctrl.inviteEmail">
     <role-dropdown class="sm-no-margin"
                    ng-if="$ctrl.currentUserIsManager"
                    target="'email_invite'"
                    roles="$ctrl.emailInviteRoles"
                    selected-role="$ctrl.emailInviteRole"
                    on-role-changed="$ctrl.onRoleChanged($event)"></role-dropdown>
+    <button type="button" class="btn btn-primary"
+            ng-click="$ctrl.sendEmailInvite()" data-ng-disabled="! ($ctrl.inviteEmail && email.$valid)">
+      <i class="fa fa-paper-plane pr-1"></i> Send
+    </button>
   </div>
 
   <div ng-if="$ctrl.currentUserIsManager || !$ctrl.inviteLink">
@@ -33,6 +33,10 @@
                     roles="$ctrl.reusableInviteLinkRoles"
                     selected-role="$ctrl.getInviteRole()"
                     on-role-changed="$ctrl.onRoleChanged($event)"></role-dropdown>
+      <button type="button" class="btn btn-primary"
+              ng-click="$ctrl.copy()" data-ng-disabled="! $ctrl.inviteLink">
+        <i class="fa fa-clipboard pr-1"></i> Copy
+      </button>
     </div>
   </div>
 </div>

src/angular-app/languageforge/lexicon/shared/share-with-others/invite-member-form.component.ts

@@ -17,7 +17,8 @@ export class InviteMemberFormController implements angular.IController {
   emailInviteRoles: ProjectRole[];
   emailInviteRole: ProjectRole;
   displayManagerElements: boolean;
-  onSendEmailInvite: () => void;
+  onEmailSent: () => void;
+  onUrlCopied: () => void;
 
   static $inject = ['projectService', 'sessionService', 'userService'];
   constructor(private readonly projectService: ProjectService,
@@ -39,7 +40,7 @@ export class InviteMemberFormController implements angular.IController {
       LexRoles.NONE
     ];
 
-    this.sessionService.getSession().then(session => {
+    this.sessionService.getSession().then((session: Session) => {
       this.session = session;
       this.project = session.data.project;
       this.currentUserIsManager =
@@ -53,23 +54,24 @@ export class InviteMemberFormController implements angular.IController {
       }
 
       if (this.project.inviteToken.token) {
-        this.projectService.getInviteLink().then(result => {
+        this.projectService.getInviteLink().then((result: any) => {
           this.inviteLink = result.data;
         });
       }
     });
   }
 
+  $postLink(): void {
+    angular.element('input[type=email]')[0].focus();
+  }
+
   sendEmailInvite() {
     this.userService.sendInvite(this.inviteEmail, this.emailInviteRole.key).then(() => {
-      if (this.onSendEmailInvite) this.onSendEmailInvite();
+      this.inviteEmail = '';
+      this.onEmailSent();
     });
   }
 
-  inviteEmailDisabled() {
-    return !/^\S+@\S+\.\S+$/.test(this.inviteEmail);
-  }
-
   onRoleChanged($event: {roleDetail: RoleDetail, target: any}) {
     if ($event.target === 'email_invite') this.emailInviteRole = $event.roleDetail.role;
     if ($event.target === 'reusable_invite_link') this.handleInviteLinkChange($event.roleDetail.role);
@@ -84,7 +86,7 @@ export class InviteMemberFormController implements angular.IController {
     } else {
       // if the invite link was just disabled, create a new one. Otherwise, update it.
       if (!this.inviteLink) {
-        this.projectService.createInviteLink(newRole.key).then(result => {
+        this.projectService.createInviteLink(newRole.key).then((result: any) => {
           this.project.inviteToken.defaultRole = newRole.key;
           this.inviteLink = result.data;
         });
@@ -99,12 +101,18 @@ export class InviteMemberFormController implements angular.IController {
   getInviteRole() {
     return this.reusableInviteLinkRoles.find(role => role.key === this.project.inviteToken.defaultRole);
   }
+
+  async copy() {
+    await navigator.clipboard.writeText(this.inviteLink);
 
+    this.onUrlCopied();
+  }
 }
 
 export const InviteMemberFormComponent: angular.IComponentOptions = {
   bindings: {
-    onSendEmailInvite: '&'
+    onEmailSent: '&',
+    onUrlCopied: '&',
   },
   controller: InviteMemberFormController,
   templateUrl: '/angular-app/languageforge/lexicon/shared/share-with-others/invite-member-form.component.html'

src/angular-app/languageforge/lexicon/shared/share-with-others/share-with-others.component.ts

@@ -1,4 +1,5 @@
 import * as angular from 'angular';
+import { NoticeService } from '../../../../bellows/core/notice/notice.service';
 import { Session, SessionService } from '../../../../bellows/core/session.service';
 import { Project } from '../../../../bellows/shared/model/project.model';
 import { LexiconProjectService } from '../../core/lexicon-project.service';
@@ -12,12 +13,13 @@ export class ShareWithOthersModalInstanceController implements angular.IControll
   session: Session;
   currentUserIsManager: boolean;
 
-  static $inject = ['lexProjectService', 'sessionService'];
+  static $inject = ['lexProjectService', 'sessionService', 'silNoticeService'];
   constructor(private readonly lexProjectService: LexiconProjectService,
-              private readonly sessionService: SessionService) {}
+              private readonly sessionService: SessionService,
+              private readonly notice: NoticeService) {}
 
   $onInit(): void {
-    this.sessionService.getSession().then(session => {
+    this.sessionService.getSession().then((session: Session) => {
       this.session = session;
       this.project = session.data.project;
       this.currentUserIsManager =
@@ -27,23 +29,24 @@ export class ShareWithOthersModalInstanceController implements angular.IControll
   }
 
   setProjectSharability(): void {
-    this.lexProjectService.updateProject({allowSharing: this.project.allowSharing}).then(result => {
-      this.sessionService.getSession(true).then(session => {
+    this.lexProjectService.updateProject({allowSharing: this.project.allowSharing}).then((result: any) => {
+      this.sessionService.getSession(true).then((session: Session) => {
         this.session = session;
         this.project = session.data.project;
       });
     });
   }
 
-  setProjectListability(): void {
-    console.log('TODO: actually set project.listProject = ' + this.listProject);
+  dismissWithNotification(message: string): void {
+    this.modalInstance.dismiss();
+
+    this.notice.push(this.notice.SUCCESS, message);
   }
 }
 
 export const ShareWithOthersComponent: angular.IComponentOptions = {
   bindings: {
     modalInstance: '<',
-    close: '&',
     dismiss: '&'
   },
   controller: ShareWithOthersModalInstanceController,

src/angular-app/languageforge/lexicon/shared/share-with-others/share-with-others.modal.html

@@ -3,9 +3,11 @@
     <h3 class="modal-title">Share with Others</h3>
     <i ng-click="$ctrl.dismiss()" class="close-modal fa fa-times"></i>
   </div>
+
   <div class="modal-body">
-    <user-management project="$ctrl.project" session="$ctrl.session" ng-if="$ctrl.currentUserIsManager"></user-management>
-    <invite-member-form style="max-width: 30em;" ng-if="!$ctrl.currentUserIsManager"></invite-member-form>
+    <invite-member-form style="max-width: 30em;" on-email-sent="$ctrl.dismissWithNotification('An invitation email has been sent')" on-url-copied="$ctrl.dismissWithNotification('An invitation link has been copied to your clipboard')"></invite-member-form>
+
+    <user-management ng-if="$ctrl.currentUserIsManager" project="$ctrl.project" session="$ctrl.session"></user-management>
 
     <div id="sharing-checkboxes" class="form-group" ng-if="$ctrl.currentUserIsManager">
       <div class="form-check">
@@ -15,17 +17,6 @@ <h3 class="modal-title">Share with Others</h3>
           Allow others to share <i class="fa fa-share-alt"></i>
         </label>
       </div>
-      <!-- <div class="form-check">
-        <input class="form-check-input" type="checkbox" value="" id="sharing-check-2" ng-model="$ctrl.listProject" ng-change="$ctrl.setProjectListability()">
-        <label class="form-check-label" for="sharing-check-2">
-          Project is publicly listed on languageforge.org
-        </label>
-      </div> -->
     </div>
   </div>
-  <div class="modal-footer d-block clearfix">
-    <button class="btn btn-primary float-right" id="apply-sharing-config-button" ng-click="$ctrl.close()">
-      Done
-    </button>
-  </div>
 </div>

src/angular-app/languageforge/lexicon/shared/share-with-others/user-management.component.html

@@ -1,5 +1,3 @@
-<invite-member-form style="max-width: 30em;" on-send-email-invite="$ctrl.loadMemberData()"></invite-member-form>
-
 <div id="who-has-access" style="max-width: 30em;">
   <div class="row" style="position: relative;">
     <div class="col-6">
@@ -15,28 +13,6 @@
 
   <listview search="$ctrl.loadMemberData()" items="$ctrl.allMembers" items-filter="$ctrl.userFilter" visible-items="$ctrl.visibleMembers" select="">
     <ul class="list-group">
-      <!-- <li class="list-group-item user-summary-item">
-        <div>
-          <img src="/Site/views/shared/image/globe.png" class="rounded-circle" id="smallAvatarURL"/>
-        </div>
-        <div style="flex-grow: 1;">
-          <span ng-class="{'text-muted': $ctrl.project.anonymousUserRole === 'none'}">Anyone</span><br>
-          <div style="display: flex; flex-direction: row;">
-            <span ng-class="{'text-muted': $ctrl.project.anonymousUserRole === 'none'}">via</span>
-            <input ng-if="$ctrl.project.anonymousUserRole === 'none'" type="text" disabled
-                   class="form-control" value="{{$ctrl.projectUrl}}" ng-readonly="true">
-            <input ng-if="$ctrl.project.anonymousUserRole !== 'none'" type="text"
-                   class="form-control" value="{{$ctrl.projectUrl}}" ng-readonly="true" onfocus="this.select();">
-          </div>
-        </div>
-        <role-dropdown target="'anonymous_user'"
-                              roles="$ctrl.anonymousUserRoles"
-                              selected-role="$ctrl.anonymousUser.role"
-                              on-role-changed=$ctrl.onSpecialRoleChanged($event)
-                              class="sm-no-margin"></role-dropdown>
-        <div class="delete-member d-none d-md-block"></div>
-      </li> -->
-
       <li class="list-group-item user-summary-item" data-ng-repeat="user in $ctrl.visibleMembers">
         <div>
           <img ng-src="{{$ctrl.getAvatarUrl(user.avatar_ref)}}" class="rounded-circle" id="smallAvatarURL" />

src/angular-app/languageforge/lexicon/shared/share-with-others/user-management.component.ts

@@ -66,7 +66,7 @@ export class UserManagementController implements angular.IController {
   }
 
   loadMemberData(): angular.IPromise<void> {
-    return this.projectService.listUsers().then( result => {
+    return this.projectService.listUsers().then((result: any) => {
       if (result.ok) {
         // include invitees in the list of members
         this.allMembers = result.data.users.concat(result.data.invitees.map((invitee: User) => {