implement home, login, register in ponies b00tc4mp#68

NerinaHctz · Jun 12, 2024 · 9c32eaa · 9c32eaa
1 parent e9cacec
commit 9c32eaa
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 90 deletions.
diff --git a/staff/nerina-castillo/ponies/app/home.html b/staff/nerina-castillo/ponies/app/home.html
@@ -16,29 +16,31 @@ <h1>Home</h1>
     </button>
 
     <script>
-      var users =
-        localStorage.users !== undefined ? JSON.parse(localStorage.users) : [];
+      function getUserName() {
+          var users = localStorage.users !== undefined ? JSON.parse(localStorage.users) : []
 
-      var user = users.find(function (user) {
-        return user.username === sessionStorage.username;
-      });
+          var user = users.find(function (user) {
+              return user.username === sessionStorage.username
+          })
 
-      if (user === undefined) alert("user not found");
-      else {
-        var title = document.querySelector("h1");
+          if (user === undefined)
+              throw new Error('user not found')
 
-        title.innerText = "Hello, " + user.name + "!";
+          return user.name
       }
+  </script>
 
-      var logout = document.querySelector("a");
+  <script>
+      try {
+          var name = getUserName()
 
-      logout.onclick = function (event) {
-        event.preventDefault();
+          var title = document.querySelector('h1')
 
-        delete sessionStorage.username;
-
-        window.location.href = "login.html";
-      };
+          title.innerText = 'Hello, ' + name + '!'
+      } catch (error) {
+          alert(error.message)
+      }
+  </script>
     </script>
   </body>
 </html>
diff --git a/staff/nerina-castillo/ponies/app/login.html b/staff/nerina-castillo/ponies/app/login.html
@@ -87,25 +87,12 @@ <h1>Login</h1>
         var username = usernameInput.value;
         var password = passwordInput.value;
 
-        if (username.trim().length < 4) alert("invalid username");
-        else if (password.trim().length < 8) alert("invalid password");
-        else {
-          var users =
-            localStorage.users !== undefined
-              ? JSON.parse(localStorage.users)
-              : [];
-
-          var user = users.find(function (user) {
-            return user.username === username;
-          });
-
-          if (user === undefined) alert("username does not exist");
-          else if (user.password !== password) alert("wrong password");
-          else {
-            sessionStorage.username = username;
-
-            location.href = "home.html";
-          }
+        try {
+          loginUser(username, password);
+
+          location.href = "home.html";
+        } catch (error) {
+          alert(error.message);
         }
       };
 
@@ -114,8 +101,31 @@ <h1>Login</h1>
       a.onclick = function (event) {
         event.preventDefault();
 
-        window.location.href = "register.html";
+        location.href = "register.html";
       };
     </script>
+
+    <script>
+      function loginUser(username, password) {
+        if (username.trim().length < 4) throw new Error("invalid username");
+
+        if (password.trim().length < 8) throw new Error("invalid password");
+
+        var users =
+          localStorage.users !== undefined
+            ? JSON.parse(localStorage.users)
+            : [];
+
+        var user = users.find(function (user) {
+          return user.username === username;
+        });
+
+        if (user === undefined) throw new Error("username does not exist");
+
+        if (user.password !== password) throw new Error("wrong password");
+
+        sessionStorage.username = username;
+      }
+    </script>
   </body>
 </html>
diff --git a/staff/nerina-castillo/ponies/app/register.html b/staff/nerina-castillo/ponies/app/register.html
@@ -46,11 +46,6 @@ <h1>Register</h1>
     <a href="">Login</a>
 
     <script>
-      var EMAIL_REGEX = /^[a-z0-9._]+@[a-z0-9.-]{3,63}\.[a-z]{2,10}$/;
-      var NAME_REGEX = /^(?!.*\s{2})[a-zA-Z ]{3,16}$/;
-      var USER_REGEX = /^(?!.*\s{2})[a-zA-Z0-9._-]{4,16}$/;
-      var PASSWORD_REGEX = /^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,}$/;
-
       var form = document.querySelector("form");
 
       form.onsubmit = function (event) {
@@ -70,58 +65,75 @@ <h1>Register</h1>
         var password = passwordInput.value;
         var passwordRepeat = passwordRepeatInput.value;
 
-        if (!NAME_REGEX.test(name.trim())) alert("invalid name");
-        else if (!NAME_REGEX.test(surname.trim())) alert("ivalid surname");
-        else if (!EMAIL_REGEX.test(email)) alert("invalid email");
-        else if (!USER_REGEX.test(username)) alert("invalid username");
-        else if (!PASSWORD_REGEX.test(password)) alert("invalid password");
-        else if (password !== passwordRepeat) alert("passwords do not match");
-        else {
-          var users =
-            localStorage.users !== undefined
-              ? JSON.parse(localStorage.users)
-              : [];
-
-          var user = users.find(function (user) {
-            return user.email === email;
-          });
-
-          if (user !== undefined) alert("email already exists");
-          else {
-            var user = users.find(function (user) {
-              return user.username === username;
-            });
-
-            if (user !== undefined) alert("username already exists");
-            else {
-              user = {
-                name: name,
-                surname: surname,
-                email: email,
-                username: username,
-                password: password,
-              };
-
-              //users[users.length] = user
-              users.push(user);
-
-              localStorage.users = JSON.stringify(users);
-
-              alert("user successfully registered");
-
-              location.href = "login.html";
-            }
-          }
+        try {
+          registerUser(
+            name,
+            surname,
+            email,
+            username,
+            password,
+            passwordRepeat
+          );
+
+          alert("user successfully registered");
+
+          location.href = "login.html";
+        } catch (error) {
+          alert(error.message);
         }
       };
+    </script>
+    <script>
+      var EMAIL_REGEX = /^[a-z0-9._]+@[a-z0-9.-]{3,63}\.[a-z]{2,10}$/;
+      var NAME_REGEX = /^(?!.*\s{2})[a-zA-Z ]{3,16}$/;
+      var USER_REGEX = /^(?!.*\s{2})[a-zA-Z0-9._-]{4,16}$/;
+      var PASSWORD_REGEX = /^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,}$/;
 
-      var a = document.querySelector("a");
-
-      a.onclick = function (event) {
-        event.preventDefault();
-
-        location.href = "login.html";
-      };
+      function registerUser(
+        name,
+        surname,
+        email,
+        username,
+        password,
+        passwordRepeat
+      ) {
+        if (!NAME_REGEX.test(name.trim())) throw new Error("invalid name");
+        if (!NAME_REGEX.test(surname.trim())) throw new Error("ivalid surname");
+        if (!EMAIL_REGEX.test(email)) throw new Error("invalid email");
+        if (!USER_REGEX.test(username)) throw new Error("invalid username");
+        if (!PASSWORD_REGEX.test(password)) throw new Error("invalid password");
+        if (password !== passwordRepeat)
+          throw new Error("passwords do not match");
+
+        var users =
+          localStorage.users !== undefined
+            ? JSON.parse(localStorage.users)
+            : [];
+
+        var user = users.find(function (user) {
+          return user.email === email;
+        });
+
+        if (user !== undefined) throw new Error("email already exists");
+
+        var user = users.find(function (user) {
+          return user.username === username;
+        });
+
+        if (user !== undefined) throw new Error("username already exists");
+
+        user = {
+          name: name,
+          surname: surname,
+          email: email,
+          username: username,
+          password: password,
+        };
+
+        users.push(user);
+
+        localStorage.users = JSON.stringify(users);
+      }
     </script>
   </body>
 </html>