enhance modals and terms of use html

app/templates/_base/scripts.html.j2

@@ -83,36 +83,38 @@
 
 {# TODO: Think about implementing the following inside a main.js(.j2) #}
 <script>
-  const app = new nopaque.app.Client();
-  app.init();
+  var app;
+  var currentUserId;
 
-  {% if current_user.is_authenticated %}
-  const currentUserId = {{ current_user.hashid|tojson }};
+  async function main() {
+    app = new nopaque.app.Client();
+    app.init();
 
-  app.userHub.add(currentUserId)
-    .catch((error) => {throw JSON.stringify(error);});
+    {% if not current_user.is_authenticated %}
+    const currentUserId = null;
+    {% else %}
+    currentUserId = {{ current_user.hashid|tojson }};
 
-  {% if not current_user.terms_of_use_accepted %}
-  M.Modal.getInstance(document.querySelector('#terms-of-use-modal')).open();
-  {% endif %}
-  {% else %}
-  const currentUserId = null;
-  {% endif %}
+    try {
+      await app.userHub.add(currentUserId);
+    } catch (error) {
+      app.ui.flash('Failed to load user data.', 'error');
+    }
 
-  // Display flashed messages
-  for (let [category, message] of {{ get_flashed_messages(with_categories=True)|tojson }}) {
-    app.ui.flash(message, message);
+    {% if not current_user.terms_of_use_accepted %}
+    const termsOfUseModalElement = document.querySelector('#terms-of-use-modal');
+    const termsOfUseModal = M.Modal.getInstance(termsOfUseModalElement);
+
+    termsOfUseModal.open();
+    {% endif %}
+    {% endif %}
+
+    const flashedMessages = {{ get_flashed_messages()|tojson }};
+
+    for (let [category, message] of flashedMessages) {
+      app.ui.flash(message, message);
+    }
   }
-</script>
 
-<script>
-  let languageModalSwitch = document.querySelector('#terms-of-use-modal-switch');
-  let termsOfUseModalContent = document.querySelectorAll('.terms-of-use-modal-content');
-  if (languageModalSwitch) {
-    languageModalSwitch.addEventListener('change', () => {
-      termsOfUseModalContent.forEach(content => {
-        content.classList.toggle('hide');
-      });
-    });
-  }
+  main();
 </script>