profile page

Netflix-Database · Oct 23, 2023 · 44ceae9 · 44ceae9
1 parent fa9db16
commit 44ceae9
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 57 deletions.
diff --git a/Assets/css/profile.css b/Assets/css/profile.css
@@ -81,6 +81,12 @@ input:hover {
   background-color: #4d4d4d;
 }
 
+input[disabled] {
+  background-color: #222;
+  color: #4d4d4d;
+  cursor: pointer;
+}
+
 button {
   border: 2px solid #4d4d4d;
   background-color: transparent;
@@ -181,7 +187,7 @@ button:active {
 }
 
 .connected-accounts .item.connected > span:nth-child(3) {
-  display: block;
+  display: flex;
 }
 
 .connected-accounts .item.connected > span:nth-child(2) {
@@ -195,4 +201,10 @@ button:active {
 
 .flex.end {
   justify-content: flex-end;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: .5em;
 }
diff --git a/Assets/js/profile.js b/Assets/js/profile.js
@@ -3,19 +3,19 @@ var currentUser;
 LoginManager.isLoggedIn().then(async (e) => {
   if (!e) {
     window.location.href = 'https://login.netdb.at';
-    return;	
+    return;
   }
 
-  const token = LoginManager.getCookie("token");
+  const token = LoginManager.getCookie('token');
 
-  const req = await fetch("https://api.login.netdb.at/user", {
-    method: "GET",
+  const req = await fetch('https://api.login.netdb.at/user', {
+    method: 'GET',
     headers: {
-      "Authorization": "Bearer " + token
-    }
+      Authorization: 'Bearer ' + token,
+    },
   });
 
-  if(req.status == 401) {
+  if (req.status == 401) {
     window.location.href = 'https://login.netdb.at';
     return;
   }
@@ -30,22 +30,19 @@ LoginManager.isLoggedIn().then(async (e) => {
   const user = res.data;
   currentUser = user;
 
-  document.getElementById("username").value = user.username;
-  document.getElementById("firstname").value = user.firstname;
-  document.getElementById("lastname").value = user.lastname;
-  document.getElementById("pi_email").value = user.email;
-  document.getElementById("cp_email").value = user.email;
-  document.getElementById("country").value = user.country;
-  document.getElementById("preferredlang").value = user.preferredLang;
+  document.getElementById('username').value = user.username;
+  document.getElementById('firstname').value = user.firstname;
+  document.getElementById('lastname').value = user.lastname;
+  document.getElementById('pi_email').value = user.email;
+  document.getElementById('cp_email').value = user.email;
+  document.getElementById('country').value = user.country;
+  document.getElementById('preferredlang').value = user.preferredLang;
 
-  if (user.discordId !== null)
-    document.getElementById("ca_discord").classList.add("connected");
+  if (user.discordId !== null) document.getElementById('ca_discord').classList.add('connected');
 
-  if (user.sporifyId !== null)
-    document.getElementById("ca_spotify").classList.add("connected");
+  if (user.sporifyId !== null) document.getElementById('ca_spotify').classList.add('connected');
 
-  if (user.twitchId !== null)
-    document.getElementById("ca_twitch").classList.add("connected");
+  if (user.twitchId !== null) document.getElementById('ca_twitch').classList.add('connected');
 
   // if (user.githubId !== null)
   //   document.getElementById("ca_github").classList.add("connected");
@@ -56,31 +53,34 @@ LoginManager.isLoggedIn().then(async (e) => {
   // if (user.appleId !== null)
   //   document.getElementById("ca_apple").classList.add("connected");
 
-  if (user["2fa"] && user["2faType"] == "App")
-    document.getElementById("cp_2fa").classList.remove("d-none");
+  if (user['2fa'] && user['2faType'] == 'App') document.getElementById('cp_2fa').classList.remove('d-none');
 });
 
-document.getElementById("pi_save").addEventListener("click", savePersonalInformation);
-document.getElementById("cp_save").addEventListener("click", changePassword);
+document.getElementById('pi_save').addEventListener('click', savePersonalInformation);
+document.getElementById('cp_save').addEventListener('click', changePassword);
 
+document.getElementsByTagName('input').forEach((element) => {
+  element.addEventListener('keyup', (e) => e.target.classList.remove('invalid'));
+});
 
 async function savePersonalInformation() {
-  const req = await fetch("https://api.login.netdb.at/user", {
-    method: "PUT",
+  await LoginManager.validateToken();
+  const req = await fetch('https://api.login.netdb.at/user', {
+    method: 'PUT',
     headers: {
-      "Authorization": "Bearer " + LoginManager.getCookie("token"),
-      "Content-Type": "application/json"
+      Authorization: 'Bearer ' + LoginManager.getCookie('token'),
+      'Content-Type': 'application/json',
     },
     body: JSON.stringify({
-      firstname: document.getElementById("firstname").value,
-      lastname: document.getElementById("lastname").value,
-      country: document.getElementById("country").value,
-      preferredLang: document.getElementById("preferredlang").value,
-      username: document.getElementById("username").value,
-    })
+      firstname: document.getElementById('firstname').value,
+      lastname: document.getElementById('lastname').value,
+      country: document.getElementById('country').value,
+      preferredLang: document.getElementById('preferredlang').value,
+      username: document.getElementById('username').value,
+    }),
   });
 
-  if(req.status == 401) {
+  if (req.status == 401) {
     window.location.href = 'https://login.netdb.at';
     return;
   }
@@ -93,24 +93,39 @@ async function savePersonalInformation() {
   }
 }
 
-async function changePassword() { 
+async function changePassword() {
   //move to /user/password
-  // TODO: validate new pw
-  const req = await fetch("https://api.login.netdb.at/resetpassword", {
-    method: "POST",
+
+  const pw = document.getElementById('newPassword1').value;
+  const rpw = document.getElementById('newPassword2').value;
+
+  const error = validatePw(pw, rpw);
+
+  if (error) {
+    document.getElementById('newPassword1').value = '';
+    document.getElementById('newPassword2').value = '';
+
+    document.getElementById('newPassword1').classList.add('invalid');
+    document.getElementById('newPassword2').classList.add('invalid');
+    return;
+  }
+
+  await LoginManager.validateToken();
+  const req = await fetch('https://api.login.netdb.at/resetpassword', {
+    method: 'POST',
     headers: {
-      "Authorization": "Bearer " + LoginManager.getCookie("token"),
-      "Content-Type": "application/json"
+      Authorization: 'Bearer ' + LoginManager.getCookie('token'),
+      'Content-Type': 'application/json',
     },
-    body: {
-      OldPassword: document.getElementById("oldPassword").value,
-      Email: document.getElementById("cp_email").value,
-      Password: document.getElementById("newPassword1").value,
-      TwoFaToken: currentUser["2fa"] ? document.getElementById("cp_2fa").value : null
-    }
+    body: JSON.stringify({
+      OldPassword: document.getElementById('oldPassword').value,
+      Email: document.getElementById('cp_email').value,
+      Password: document.getElementById('newPassword1').value,
+      TwoFaToken: currentUser['2fa'] ? document.getElementById('cp_2fa').value : null,
+    }),
   });
 
-  if(req.status == 401) {
+  if (req.status == 401) {
     window.location.href = 'https://login.netdb.at';
     return;
   }
@@ -123,4 +138,28 @@ async function changePassword() {
   }
 
   window.location.href = 'https://login.netdb.at/?redirect=' + encodeURIComponent(window.location.href);
-}
+}
+
+function validatePw(pw, rpw) {
+  if (pw.length < 8) return 'The password has to be at least 8 characters long';
+
+  if (!isUpperCase(pw)) return 'The password has to contain at least one uppercase letter';
+
+  if (!isLowerCase(pw)) return 'The password has to contain at least one lowercase letter';
+
+  if (!isNumber(pw)) return 'The password has to contain at least one number';
+
+  if (pw != rpw) return 'Passwords do not match';
+}
+
+function isUpperCase(str) {
+  return /[A-Z]/.test(str);
+}
+
+function isLowerCase(str) {
+  return /[a-z]/.test(str);
+}
+
+function isNumber(str) {
+  return /[0-9]/.test(str);
+}
diff --git a/profile/index.html b/profile/index.html
@@ -66,20 +66,24 @@ <h2>Developer</h2>
       <div class="settings-container" style="padding-top: 3em;">
         <div id="personalInformation" class="item">
           <h1>Personal Information</h1>
-          <input type="text" id="username" placeholder="Username">
-          <input type="text" id="firstname" placeholder="Firstname">
-          <input type="text" id="lastname" placeholder="Lastname">
           <input type="text" id="pi_email" disabled placeholder="Email">
-          <input type="text" id="country" placeholder="Country">
-          <input type="text" id="preferredlang" placeholder="Preferred Language">
+          <input type="text" id="username" placeholder="Username">
+          <div class="input-group">
+            <input type="text" id="firstname" placeholder="Firstname">
+            <input type="text" id="lastname" placeholder="Lastname">
+          </div>
+          <div class="input-group">
+            <input type="text" id="country" placeholder="Country">
+            <input type="text" id="preferredlang" placeholder="Preferred Language">
+          </div>
 
           <div class="flex end">
             <button id="pi_save">Save</button>
           </div>
         </div>
         <div id="password" class="item">
           <h1>Password</h1>
-          <input type="text" id="cp_email" placeholder="Email">
+          <input type="text" id="cp_email" placeholder="Email" disabled>
           <input id="oldPassword" type="password" placeholder="Old Password">
           <input id="newPassword1" type="password" placeholder="New Password">
           <input id="newPassword2" type="password" placeholder="Repeat Password">
@@ -93,7 +97,7 @@ <h1>Password</h1>
           <h1>Connected Accounts</h1>
 
           <div class="connected-accounts">
-            <h1 id="ca_spotify" class="item">
+            <h1 id="ca_spotify" class="item connected">
               <span>
                 <img src="https://die-zoellner.de/wp-content/uploads/2019/04/spotify-logo-white-rgb.png" alt="Spotify">
               </span>