diff --git a/assets/js/register.js b/assets/js/register.js new file mode 100644 index 0000000..0771a90 --- /dev/null +++ b/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 = '/'; +} \ No newline at end of file diff --git a/assets/pages/register.html b/assets/pages/register.html index 7eeb6ad..09eaf0c 100644 --- a/assets/pages/register.html +++ b/assets/pages/register.html @@ -21,22 +21,25 @@