Reviewed User package and invite user optical fix

app/templates/_scripts.html.j2

@@ -64,7 +64,8 @@
   'js/Requests/corpora/corpora.js',
   'js/Requests/corpora/files.js',
   'js/Requests/corpora/followers.js',
-  'js/Requests/jobs/jobs.js'
+  'js/Requests/jobs/jobs.js',
+  'js/Requests/users/users.js'
 %}
 <script src="{{ ASSET_URL }}"></script>
 {%- endassets %}

app/templates/_sidenav.html.j2

@@ -39,7 +39,7 @@
   <li><div class="divider"></div></li>
   <li><a class="subheader">Account</a></li>
   <li><a href="{{ url_for('settings.settings') }}"><i class="material-icons">settings</i>General Settings</a></li>
-  <li><a href="{{ url_for('users.edit_profile', user_id=current_user.id) }}"><i class="material-icons left">contact_page</i>Profile settings</a></li>
+  <li><a href="{{ url_for('users.edit_profile', user_id=current_user.id) }}"><i class="material-icons left">contact_page</i>Profile Settings</a></li>
   <li><a href="{{ url_for('auth.logout') }}">Log out</a></li>
   {% if current_user.can('ADMINISTRATE') or current_user.can('USE_API') %}
   <li><div class="divider"></div></li>

app/templates/corpora/corpus.js.j2

@@ -26,16 +26,17 @@ deleteModalDeleteButtonElement.addEventListener('click', (event) => {
 let inviteUserModalElement = document.querySelector('#invite-user-modal');
 let inviteUserModalSearchElement = document.querySelector('#invite-user-modal-search');
 let inviteUserModalInviteButtonElement = document.querySelector('#invite-user-modal-invite-button');
+const users = {};
+
+for (let user of {{ users|tojson }}) {
+  users[user.username] = user.avatar ? `/users/${user.id}/avatar` : '/static/images/user_avatar.png';
+}
 
 let inviteUserModalSearch = M.Chips.init(
   inviteUserModalSearchElement,
   {
     autocompleteOptions: {
-      data: {
-        'nopaque': '/users/3V8Aqpg74JvxOd9o/avatar',
-        'pjentsch': '/users/3V8Aqpg74JvxOd9o/avatar',
-        'pjentsch2': '/users/3V8Aqpg74JvxOd9o/avatar'
-      }
+      data: users
     },
     limit: 3,
     onChipAdd: (a, chipElement) => {
@@ -43,7 +44,7 @@ let inviteUserModalSearch = M.Chips.init(
         chipElement.firstElementChild.click();
       }
     },
-    placeholder: 'Enter a username',
+    placeholder: 'Enter username',
     secondaryPlaceholder: 'Add more users'
   }
 );

app/templates/settings/settings.html.j2

@@ -51,7 +51,7 @@
           </ul>
         </div>
         <div class="card-action right-align">
-          <a class="btn red waves-effect waves-light" id="delete-user"><i class="material-icons left">delete</i>Delete</a>
+          <a class="btn red waves-effect waves-light modal-trigger" href="#delete-user"><i class="material-icons left">delete</i>Delete</a>
         </div>
       </div>
     </div>
@@ -59,12 +59,26 @@
 </div>
 {% endblock page_content %}
 
+{% block modals%}
+<div class="modal" id="delete-user">
+  <div class="modal-content">
+    <h4>Confirm User deletion</h4>
+    <p>Do you really want to delete the User <b>{{ current_user.username }}</b>? All files will be permanently deleted!</p>
+  </div>
+  <div class="modal-footer">
+    <a class="btn modal-close waves-effect waves-light">Cancel</a>
+    <a class="btn modal-close red waves-effect waves-light" id="delete-user-button">Delete</a>
+  </div>
+</div>
+{% endblock modals %}
+
 {% block scripts %}
 {{ super() }}
 <script>
-document.querySelector('#delete-user').addEventListener('click', (event) => {
-  Utils.deleteUserRequest(currentUserId)
+document.querySelector('#delete-user-button').addEventListener('click', (event) => {
+  Requests.users.entity.delete(currentUserId)
     .then((response) => {window.location.href = '/';});
 });
+
 </script>
 {% endblock scripts %}

app/templates/users/edit_profile.html.j2

@@ -79,7 +79,7 @@
                 <div class="row">
                   <div class="col s2">
                     <div class="center-align">
-                      <a class="action-button btn-floating red waves-effect waves-light" style="margin-top:15px;" id="delete-avatar"><i class="material-icons">delete</i></a>
+                      <a class="btn-floating red waves-effect waves-light modal-trigger" style="margin-top:15px;" href="#delete-avatar-modal"><i class="material-icons">delete</i></a>
                     </div>
                   </div>
                   <div class="col s10">
@@ -111,44 +111,15 @@
 </div>
 {% endblock page_content %}
 
-{% block scripts %}
-{{ super() }}
-<script>
-let publicProfile = document.querySelector('#public-profile');
-let disableButtons = document.querySelectorAll('[data-action="disable"]');
-let deleteButton = document.querySelector('#delete-avatar');
-let avatar = document.querySelector('#avatar');
-let avatarUpload = document.querySelector('#avatar-upload');
-
-for (let disableButton of disableButtons) {
-  disableButton.disabled = !publicProfile.checked;
-}
-
-publicProfile.addEventListener('change', () => {
-  if (publicProfile.checked) {
-    for (let disableButton of disableButtons) {
-      disableButton.disabled = false;
-    }
-  } else {
-    for (let disableButton of disableButtons) {
-      disableButton.checked = false;
-      disableButton.disabled = true;
-    }
-  }
-});
-
-avatarUpload.addEventListener('change', function() {
-  let file = this.files[0];
-  avatar.src = URL.createObjectURL(file);
-});
-
-deleteButton.addEventListener('click', () => {
-  Utils.deleteProfileAvatarRequest({{ user.hashid|tojson }})
-    .then(
-      (response) => {
-        avatar.src = "{{ url_for('static', filename='images/user_avatar.png') }}";
-      }
-    );
-});
-</script>
-{% endblock scripts %}
+{% block modals %}
+<div class="modal" id="delete-avatar-modal">
+  <div class="modal-content">
+    <h4>Confirm Avatar deletion</h4>
+    <p>Do you really want to delete your Avatar?</p>
+  </div>
+  <div class="modal-footer">
+    <a class="btn modal-close waves-effect waves-light">Cancel</a>
+    <a class="btn modal-close red waves-effect waves-light" id="delete-avatar">Delete</a>
+  </div>
+</div>
+{% endblock modals %}

app/templates/users/edit_profile.js.j2

@@ -0,0 +1,36 @@
+let publicProfile = document.querySelector('#public-profile');
+let disableButtons = document.querySelectorAll('[data-action="disable"]');
+let deleteButton = document.querySelector('#delete-avatar');
+let avatar = document.querySelector('#avatar');
+let avatarUpload = document.querySelector('#avatar-upload');
+
+for (let disableButton of disableButtons) {
+  disableButton.disabled = !publicProfile.checked;
+}
+
+publicProfile.addEventListener('change', () => {
+  if (publicProfile.checked) {
+    for (let disableButton of disableButtons) {
+      disableButton.disabled = false;
+    }
+  } else {
+    for (let disableButton of disableButtons) {
+      disableButton.checked = false;
+      disableButton.disabled = true;
+    }
+  }
+});
+
+avatarUpload.addEventListener('change', function() {
+  let file = this.files[0];
+  avatar.src = URL.createObjectURL(file);
+});
+
+deleteButton.addEventListener('click', () => {
+  Requests.users.entity.deleteAvatar({{ user.hashid|tojson }})
+    .then(
+      (response) => {
+        avatar.src = "{{ url_for('static', filename='images/user_avatar.png') }}";
+      }
+    );
+});

app/templates/users/profile.html.j2

@@ -111,28 +111,3 @@
   </div>
 {% endblock page_content %}
 
-{% block scripts %}
-{{ super() }}
-<script>
-let publicInformationBadge = document.querySelector('#public-information-badge');
-if ("{{ user.id }}" == "{{ current_user.hashid }}") {
-  if ("{{ user.is_public }}" == "True") {
-    publicInformationBadge.dataset.badgeCaption = 'Your profile is public';
-    publicInformationBadge.classList.add('green');
-    publicInformationBadge.classList.remove('red');
-  } else {
-    publicInformationBadge.dataset.badgeCaption = 'Your profile is private';
-    publicInformationBadge.classList.add('red');
-    publicInformationBadge.classList.remove('green');
-  }
-} else {
-  publicInformationBadge.remove();
-}
-
-let followedCorpusList = new FollowedCorpusList(document.querySelector('.followed-corpus-list'));
-followedCorpusList.add({{ followed_corpora|tojson }});
-let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
-publicCorpusList.add({{ own_public_corpora|tojson }});
-</script>
-{% endblock scripts %}
-

app/templates/users/profile.js.j2

@@ -0,0 +1,19 @@
+let publicInformationBadge = document.querySelector('#public-information-badge');
+if ("{{ user.id }}" == "{{ current_user.hashid }}") {
+  if ("{{ user.is_public }}" == "True") {
+    publicInformationBadge.dataset.badgeCaption = 'Your profile is public';
+    publicInformationBadge.classList.add('green');
+    publicInformationBadge.classList.remove('red');
+  } else {
+    publicInformationBadge.dataset.badgeCaption = 'Your profile is private';
+    publicInformationBadge.classList.add('red');
+    publicInformationBadge.classList.remove('green');
+  }
+} else {
+  publicInformationBadge.remove();
+}
+
+let followedCorpusList = new FollowedCorpusList(document.querySelector('.followed-corpus-list'));
+followedCorpusList.add({{ followed_corpora|tojson }});
+let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
+publicCorpusList.add({{ own_public_corpora|tojson }});