Javascript Changes users

app/templates/users/edit_profile.html.j2

@@ -14,6 +14,7 @@
       <div id="user-settings" class="card section scrollspy">
         <form method="POST" enctype="multipart/form-data">
           <div class="card-content">
+            <span class="card-title">User Settings</span>
             <div class="row">
               <div class="col s6">
                 {{ edit_profile_settings_form.hidden_tag() }}
@@ -190,3 +191,50 @@
   </div>
 </div>
 {% endblock modals %}
+
+{% 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', () => {
+  Requests.users.entity.deleteAvatar(currentUserId)
+    .then(
+      (response) => {
+        avatar.src = "{{ url_for('static', filename='images/user_avatar.png') }}";
+      }
+    );
+});
+
+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.js.j2

-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') }}";
-      }
-    );
-});
-
-document.querySelector('#delete-user-button').addEventListener('click', (event) => {
-  Requests.users.entity.delete(currentUserId)
-    .then((response) => {window.location.href = '/';});
-});

app/templates/users/profile.html.j2

@@ -22,7 +22,11 @@
               <div class="col s7">
                 <div class="row">
                   <div class="col s12">
-                    <h3 style="float:left">{{ user.username }}<span class="new badge green" id="public-information-badge" data-badge-caption="" style="margin-top:20px;"></span></h3>
+                    {% if user.is_public %}
+                    <h3 style="float:left">{{ user.username }}<span class="new badge green" id="public-information-badge" data-badge-caption="Your profile is public" style="margin-top:20px;"></span></h3>
+                    {% else %}
+                    <h3 style="float:left">{{ user.username }}<span class="new badge red" id="public-information-badge" data-badge-caption="Your profile is private" style="margin-top:20px;"></span></h3>
+                    {% endif %}
                   </div>
                   <div class="col 12">
                     {% if user.show_last_seen %}
@@ -111,3 +115,12 @@
   </div>
 {% endblock page_content %}
 
+{% block scripts %}
+{{ super() }}
+<script>
+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

-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 }});