Added register functionality v0.0.3

assets/js/register.js

@@ -0,0 +1,122 @@
+const url = "https://task-api.fstropii.com";
+const localhostUrl = "http://localhost:8000";
+const registerBtn = document.getElementById('register-submit-btn');
+const tooltip = document.getElementById('tooltip');
+
+registerBtn.addEventListener("click", function(e) {
+  e.preventDefault();
+  const name = document.querySelector(".register-name-input").value;
+  const username = document.querySelector(".register-username-input").value;
+  const email = document.querySelector(".register-email-input").value;
+  const password = document.querySelector(".register-password-input").value;
+  const verifyPassword = document.querySelector(".register-verify-password-input").value;
+
+  // register the user in the db. will return a promise
+  setTimeout
+  const registerUserPromise = registerUser(name, username, email, password, verifyPassword);
+  registerUserPromise.then((res) => res.json()).then((json => {
+    if (json.detail == "Email already registered") {
+      setTooltip("error", "Email already registered");
+      return;
+    } else if (json.detail == "Username already registered") {
+      setTooltip("error", "Username already registered");
+      return;
+    }
+    setTooltip("success", "Account created");
+    
+    // get user token. will return a promise
+    const tokenPromise = getUserToken();
+    tokenPromise.then((res) => res.json()).then((json => {
+      const token = json.access_token;
+      const type = json.token_type;
+      const expiresInDays = json.expires_days;
+
+      // save a cookie
+      const cookieText = `token=${token},type=${type},expires_days=${expiresInDays}`;
+      setCookie(token, type, expiresInDays);
+      
+
+      // return to home. at a later point set it to the user page
+      window.location.href = '/';
+    }));
+  }))
+});
+
+const setTooltip = (type, message) => {
+  tooltip.classList.add(type);
+  tooltip.classList.add('visible');
+  tooltip.innerText = message
+  tooltip.style.display = "block";
+};
+
+const registerUser = (name, username, email, password, verifyPassword) => {
+  if (verifyPassword != password) {
+    setTooltip("error", "The passwords do not match");
+    return null;
+  }
+
+  const res = fetch(`${url}/user/create`, {
+    method: "POST",
+    body: JSON.stringify({
+      name: name,
+      username: username,
+      email: email,
+      password: password
+    }),
+    headers: {
+      "Content-type": "application/json"
+    }
+  });
+
+  return res;
+}
+
+const getUserToken = async () => {
+  const form = document.getElementById("register-form");
+  const formData = new FormData(form);
+
+  const res = fetch(`${url}/token`, {
+    method: "POST",
+    body: formData,
+  });
+
+  return res;
+}
+
+const setCookie = (token, type, expires_days) => {
+  const d = new Date();
+  d.setTime(d.getTime() + (expires_days*24*60*60*1000))
+  let expires = `expires=${d.toUTCString()}`;
+  document.cookie = `token=${token},type=${type},${expires}`;
+}
+
+const getCookie = (returnType) => {
+  let decodedCookie = decodeURIComponent(document.cookie);
+  if (decodedCookie == "") {
+    return;
+  }
+
+  let ca = decodedCookie.split(',');
+
+  const token = ca[0].split("token=")[1];
+  const type = ca[1].split("type=")[1];
+  const expiresDay = ca[2].split("expires=")[1];
+  const expiresDate = ca[3]
+  const expires = `${expiresDay}${expiresDate}`
+  
+  if (returnType == "token") {
+    return token;
+  } else if (returnType == "type") {
+    return type
+  } else if (returnType == "expires") {
+    return expires;
+  }
+
+  return null;
+}
+
+const token = getCookie("token");
+
+if (token != undefined) {
+  window.location.href = '/';
+}

assets/pages/register.html

@@ -21,22 +21,25 @@
         </div>
 
         <div class="register-form-div">
-          <form class="register-form">
+          <div id='tooltip' class="tooltip" style="display: none;"></div>
+          <form id="register-form" class="register-form">
             <label for="name" class="register-label-name">Name</label>
             <input id="name" type="text" class="register-name-input" placeholder="John Doe" />
             <label for="username" class="register-label-username">Username</label>
             <input id="username" type="text" class="register-username-input" placeholder="johndoe23" />
             <label for="email" class="register-label-email">Email</label>
             <input id="email" type="text" class="register-email-input" placeholder="johndoe23@gmail.com" />
-            <label for="password" class="register-label-empassword">Password</label>
+            <label for="password" class="register-label-password">Password</label>
-            <input id="password" type="password" class="register-email-password" />
+            <input id="password" type="password" class="register-password-input" />
-            <label for="email" class="register-label-password">Verify Password</label>
+            <label for="verify-password" class="register-label-password">Verify Password</label>
-            <input id="email" type="password" class="register-email-password" />
+            <input id="verify-password" type="password" class="register-verify-password-input" />
 
             <button type="submit" id="register-submit-btn">Register!</button>
           </form>
         </div>
       </div>
     </section>
+
+    <script src="/assets/js/register.js"></script>
   </body>
 </html>