From dc4b39fbe0b2f3735fb9c2972ff7897f0dd1eb47 Mon Sep 17 00:00:00 2001 From: AL Eix Date: Wed, 9 Oct 2024 16:14:04 +0200 Subject: [PATCH] add functions to better organise unsocial #169 --- staff/aleix-palau/unsocial.2/.gitkeep | 0 staff/aleix-palau/unsocial.2/data.js | 4 + staff/aleix-palau/unsocial.2/index.html | 20 +++ staff/aleix-palau/unsocial.2/logic.js | 46 ++++++ staff/aleix-palau/unsocial.2/main.js | 192 ++++++++++++++++++++++++ staff/aleix-palau/unsocial.2/style.css | 74 +++++++++ staff/aleix-palau/unsocial.3/.gitkeep | 0 staff/aleix-palau/unsocial.3/data.js | 4 + staff/aleix-palau/unsocial.3/index.html | 21 +++ staff/aleix-palau/unsocial.3/logic.js | 46 ++++++ staff/aleix-palau/unsocial.3/main.js | 6 + staff/aleix-palau/unsocial.3/style.css | 74 +++++++++ staff/aleix-palau/unsocial.3/view.js | 184 +++++++++++++++++++++++ staff/aleix-palau/unsocial/index.html | 2 +- staff/aleix-palau/unsocial/logic.js | 3 + staff/aleix-palau/unsocial/main.js | 188 +---------------------- staff/aleix-palau/unsocial/style.css | 4 +- staff/aleix-palau/unsocial/view.js | 184 +++++++++++++++++++++++ 18 files changed, 862 insertions(+), 190 deletions(-) create mode 100644 staff/aleix-palau/unsocial.2/.gitkeep create mode 100644 staff/aleix-palau/unsocial.2/data.js create mode 100644 staff/aleix-palau/unsocial.2/index.html create mode 100644 staff/aleix-palau/unsocial.2/logic.js create mode 100644 staff/aleix-palau/unsocial.2/main.js create mode 100644 staff/aleix-palau/unsocial.2/style.css create mode 100644 staff/aleix-palau/unsocial.3/.gitkeep create mode 100644 staff/aleix-palau/unsocial.3/data.js create mode 100644 staff/aleix-palau/unsocial.3/index.html create mode 100644 staff/aleix-palau/unsocial.3/logic.js create mode 100644 staff/aleix-palau/unsocial.3/main.js create mode 100644 staff/aleix-palau/unsocial.3/style.css create mode 100644 staff/aleix-palau/unsocial.3/view.js create mode 100644 staff/aleix-palau/unsocial/view.js diff --git a/staff/aleix-palau/unsocial.2/.gitkeep b/staff/aleix-palau/unsocial.2/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/staff/aleix-palau/unsocial.2/data.js b/staff/aleix-palau/unsocial.2/data.js new file mode 100644 index 00000000..b25de723 --- /dev/null +++ b/staff/aleix-palau/unsocial.2/data.js @@ -0,0 +1,4 @@ +var users = [ + { name: 'Forrest Gump', email: 'forrest_gump@runner.com', username: 'runner4life', password: '123123' }, + { name: 'Luke Skywalker', email: 'luke_skywalker@maythe4th.com', username: 'orphanWannabe', password: 'urnotmyfather' }, +] \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.2/index.html b/staff/aleix-palau/unsocial.2/index.html new file mode 100644 index 00000000..81cb39b0 --- /dev/null +++ b/staff/aleix-palau/unsocial.2/index.html @@ -0,0 +1,20 @@ + + + + + + + UN$0C14L + + + + + +

UN$0C14L

+ + + + + + + \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.2/logic.js b/staff/aleix-palau/unsocial.2/logic.js new file mode 100644 index 00000000..d7e1118f --- /dev/null +++ b/staff/aleix-palau/unsocial.2/logic.js @@ -0,0 +1,46 @@ +// REGISTER FORM FUNCTION +function registerUser(name, email, username, password, passwordRepeat) { + if (name.length < 2) + throw new Error('invalid name') + + if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email)) + throw new Error('invalid e-mail') + + if (username.length < 4 || username.length > 12) + throw new Error('invalid username') + + if (password.length < 6) + throw new Error('invalid password') + + if (password !== passwordRepeat) + throw new Error('passwords do not match') + + var user = users.find(function (user) { + return user.username === username || user.email === email + }) + + if (user !== undefined) + throw new Error('user already exists') + + user = { name: name, email: email, username: username, password: password } + + users.push(user) +} + +// LOGIN FORM FUNCTION +function authenticateUser(username, password) { + if (username.length < 4 || username.length > 12) + throw new Error('invalid username') + + if (password.length < 6) + throw new Error('invalid password') + + var user = users.find(function (user) { + return user.username === username && user.password === password + }) + + if (user === undefined) + throw new Error('wrong credentials') + + return user +} \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.2/main.js b/staff/aleix-palau/unsocial.2/main.js new file mode 100644 index 00000000..0652fc00 --- /dev/null +++ b/staff/aleix-palau/unsocial.2/main.js @@ -0,0 +1,192 @@ +var loggedInUser = null + +// LOGIN SECTION +var section = document.createElement('section') +var loginTitle = document.createElement('h2') +loginTitle.innerText = 'Login' +section.appendChild(loginTitle) +var form = document.createElement('form') +section.appendChild(form) +var loginUsernameLabel = document.createElement('label') +loginUsernameLabel.htmlFor = 'login-username' +loginUsernameLabel.innerText = 'Username' +form.appendChild(loginUsernameLabel) +var loginUsernameInput = document.createElement('input') +loginUsernameInput.type = 'text' +loginUsernameInput.id = 'login-username' +loginUsernameInput.required = true +form.appendChild(loginUsernameInput) +var loginPasswordLabel = document.createElement('label') +loginPasswordLabel.htmlFor = 'login-password' +loginPasswordLabel.innerText = 'Password' +form.appendChild(loginPasswordLabel) +var loginPasswordInput = document.createElement('input') +loginPasswordInput.type = 'password' +loginPasswordInput.id = 'login-password' +loginPasswordInput.required = true +form.appendChild(loginPasswordInput) +var submitButton = document.createElement('button') +submitButton.type = 'submit' +submitButton.innerText = 'Login' +form.appendChild(submitButton) + +// LOGIN TAB -> LOGIN BUTTON +form.addEventListener('submit', function (event) { + event.preventDefault() + + var loginUsername = loginUsernameInput.value + var loginPassword = loginPasswordInput.value + + try { + loggedInUser = authenticateUser(loginUsername, loginPassword) + + form.reset() + + section.remove() + + // HOME SECTION + var homeSection = document.createElement('section') + var homeTitle = document.createElement('h2') + homeTitle.innerText = 'Home' + homeSection.appendChild(homeTitle) + var homeUserTitle = document.createElement('h3') + homeUserTitle.innerText = 'Hello, ' + loggedInUser.username + '!' + homeSection.appendChild(homeUserTitle) + var homeLogoutButton = document.createElement('button') + homeLogoutButton.innerText = 'Logout' + homeSection.appendChild(homeLogoutButton) + + // HOME TAB -> LOGOUT BUTTON + homeLogoutButton.addEventListener('click', function (event) { + event.preventDefault() + + loggedInUser = null + + homeSection.remove() + + body.appendChild(section) + }) + + body.appendChild(homeSection) + } catch (error) { + loginPasswordInput.value = '' + + alert(error.message) + + console.error(error) + } +}) + +var loginRegisterLink = document.createElement('a') +loginRegisterLink.href = '' +loginRegisterLink.innerText = 'Register' +section.appendChild(loginRegisterLink) + +// LOGIN TAB -> REGISTER LINK +loginRegisterLink.addEventListener('click', function (event) { + event.preventDefault() + + section.remove() + + // REGISTER SECTION + var registerSection = document.createElement('section') + var registerTitle = document.createElement('h2') + registerTitle.innerText = 'Register' + registerSection.appendChild(registerTitle) + var registerForm = document.createElement('form') + registerSection.appendChild(registerForm) + var registerNameLabel = document.createElement('label') + registerNameLabel.htmlFor = 'register-name' + registerNameLabel.innerText = 'Name' + registerForm.appendChild(registerNameLabel) + var registerNameInput = document.createElement('input') + registerNameInput.type = 'text' + registerNameInput.id = 'register-name' + registerNameInput.required = true + registerForm.appendChild(registerNameInput) + var registerEmailLabel = document.createElement('label') + registerEmailLabel.htmlFor = 'register-email' + registerEmailLabel.innerText = 'E-mail' + registerForm.appendChild(registerEmailLabel) + var registerEmailInput = document.createElement('input') + registerEmailInput.type = 'email' + registerEmailInput.id = 'register-email' + registerEmailInput.required = true + registerForm.appendChild(registerEmailInput) + var registerUsernameLabel = document.createElement('label') + registerUsernameLabel.htmlFor = 'register-username' + registerUsernameLabel.innerText = 'Username' + registerForm.appendChild(registerUsernameLabel) + var registerUsernameInput = document.createElement('input') + registerUsernameInput.type = 'text' + registerUsernameInput.id = 'register-username' + registerUsernameInput.required = true + registerForm.appendChild(registerUsernameInput) + var registerPasswordLabel = document.createElement('label') + registerPasswordLabel.htmlFor = 'register-password' + registerPasswordLabel.innerText = 'Password' + registerForm.appendChild(registerPasswordLabel) + var registerPasswordInput = document.createElement('input') + registerPasswordInput.type = 'password' + registerPasswordInput.id = 'register-password' + registerPasswordInput.required = true + registerForm.appendChild(registerPasswordInput) + var registerPasswordRepeatLabel = document.createElement('label') + registerPasswordRepeatLabel.htmlFor = 'register-password-repeat' + registerPasswordRepeatLabel.innerText = 'Repeat password' + registerForm.appendChild(registerPasswordRepeatLabel) + var registerPasswordRepeatInput = document.createElement('input') + registerPasswordRepeatInput.type = 'password' + registerPasswordRepeatInput.id = 'register-password-repeat' + registerPasswordRepeatInput.required = true + registerForm.appendChild(registerPasswordRepeatInput) + var registerSubmitButton = document.createElement('button') + registerSubmitButton.type = 'submit' + registerSubmitButton.innerText = 'Register' + registerForm.appendChild(registerSubmitButton) + + // REGISTER TAB -> REGISTER BUTTON + registerForm.addEventListener('submit', function (event) { + event.preventDefault() + + var name = registerNameInput.value + var email = registerEmailInput.value + var username = registerUsernameInput.value + var password = registerPasswordInput.value + var passwordRepeat = registerPasswordRepeatInput.value + + try { + registerUser(name, email, username, password, passwordRepeat) + + registerForm.reset() + + registerSection.remove() + + body.appendChild(section) + } catch (error) { + alert(error.message) + + console.error(error) + } + }) + + var registerLoginLink = document.createElement('a') + registerLoginLink.href = '' + registerLoginLink.innerText = 'Login' + registerSection.appendChild(registerLoginLink) + + // REGISTER TAB -> LOGIN LINK + registerLoginLink.addEventListener('click', function (event) { + event.preventDefault() + + registerSection.remove() + + body.appendChild(section) + }) + + body.appendChild(registerSection) +}) + +// BODY SECTION +var body = document.querySelector('body') +body.appendChild(section) \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.2/style.css b/staff/aleix-palau/unsocial.2/style.css new file mode 100644 index 00000000..2f9c535d --- /dev/null +++ b/staff/aleix-palau/unsocial.2/style.css @@ -0,0 +1,74 @@ +@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap'); + +:root { + --color: lime; + --font: 'Tiny5'; + font-family: var(--font); +} + +body { + background-color: #111; + color: var(--color); + font-family: var(--font); + display: flex; + flex-direction: column; + align-items: center; + margin: 0; +} + +h1 { + font-size: 4.25rem; + margin: 2rem 0 1rem 0; +} + +section { + background-color: #111; + padding: 0.75rem 2rem 2rem 2rem; + margin: 1rem 0; + border: 1px solid var(--color); + width: 300px; + border-radius: 8px; +} + +form { + display: flex; + flex-direction: column; + font-family: inherit; +} + +label { + margin-top: 1rem; +} + +input { + background-color: #222; + color: var(--color); + border: 1px solid var(--color); + padding: 0.5rem; + margin-top: 0.5rem; + border-radius: 4px; + font-family: inherit; +} + +button { + background-color: var(--color); + color: #222; + border: none; + padding: 0.75rem; + margin-top: 1.5rem; + cursor: pointer; + border-radius: 4px; + font-weight: bold; + font-family: inherit; +} + +a { + color: var(--color); + text-decoration: none; + margin-top: 1rem; + display: inline-block; +} + +a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.3/.gitkeep b/staff/aleix-palau/unsocial.3/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/staff/aleix-palau/unsocial.3/data.js b/staff/aleix-palau/unsocial.3/data.js new file mode 100644 index 00000000..b25de723 --- /dev/null +++ b/staff/aleix-palau/unsocial.3/data.js @@ -0,0 +1,4 @@ +var users = [ + { name: 'Forrest Gump', email: 'forrest_gump@runner.com', username: 'runner4life', password: '123123' }, + { name: 'Luke Skywalker', email: 'luke_skywalker@maythe4th.com', username: 'orphanWannabe', password: 'urnotmyfather' }, +] \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.3/index.html b/staff/aleix-palau/unsocial.3/index.html new file mode 100644 index 00000000..8ec9a238 --- /dev/null +++ b/staff/aleix-palau/unsocial.3/index.html @@ -0,0 +1,21 @@ + + + + + + + UN$0C14L + + + + + +

UN$0C14L

+ + + + + + + + \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.3/logic.js b/staff/aleix-palau/unsocial.3/logic.js new file mode 100644 index 00000000..d7e1118f --- /dev/null +++ b/staff/aleix-palau/unsocial.3/logic.js @@ -0,0 +1,46 @@ +// REGISTER FORM FUNCTION +function registerUser(name, email, username, password, passwordRepeat) { + if (name.length < 2) + throw new Error('invalid name') + + if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email)) + throw new Error('invalid e-mail') + + if (username.length < 4 || username.length > 12) + throw new Error('invalid username') + + if (password.length < 6) + throw new Error('invalid password') + + if (password !== passwordRepeat) + throw new Error('passwords do not match') + + var user = users.find(function (user) { + return user.username === username || user.email === email + }) + + if (user !== undefined) + throw new Error('user already exists') + + user = { name: name, email: email, username: username, password: password } + + users.push(user) +} + +// LOGIN FORM FUNCTION +function authenticateUser(username, password) { + if (username.length < 4 || username.length > 12) + throw new Error('invalid username') + + if (password.length < 6) + throw new Error('invalid password') + + var user = users.find(function (user) { + return user.username === username && user.password === password + }) + + if (user === undefined) + throw new Error('wrong credentials') + + return user +} \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.3/main.js b/staff/aleix-palau/unsocial.3/main.js new file mode 100644 index 00000000..029a3897 --- /dev/null +++ b/staff/aleix-palau/unsocial.3/main.js @@ -0,0 +1,6 @@ +var loggedInUser = null + +var loginSection = buildLoginSection() + +var body = document.querySelector('body') +body.appendChild(loginSection) \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.3/style.css b/staff/aleix-palau/unsocial.3/style.css new file mode 100644 index 00000000..2f9c535d --- /dev/null +++ b/staff/aleix-palau/unsocial.3/style.css @@ -0,0 +1,74 @@ +@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap'); + +:root { + --color: lime; + --font: 'Tiny5'; + font-family: var(--font); +} + +body { + background-color: #111; + color: var(--color); + font-family: var(--font); + display: flex; + flex-direction: column; + align-items: center; + margin: 0; +} + +h1 { + font-size: 4.25rem; + margin: 2rem 0 1rem 0; +} + +section { + background-color: #111; + padding: 0.75rem 2rem 2rem 2rem; + margin: 1rem 0; + border: 1px solid var(--color); + width: 300px; + border-radius: 8px; +} + +form { + display: flex; + flex-direction: column; + font-family: inherit; +} + +label { + margin-top: 1rem; +} + +input { + background-color: #222; + color: var(--color); + border: 1px solid var(--color); + padding: 0.5rem; + margin-top: 0.5rem; + border-radius: 4px; + font-family: inherit; +} + +button { + background-color: var(--color); + color: #222; + border: none; + padding: 0.75rem; + margin-top: 1.5rem; + cursor: pointer; + border-radius: 4px; + font-weight: bold; + font-family: inherit; +} + +a { + color: var(--color); + text-decoration: none; + margin-top: 1rem; + display: inline-block; +} + +a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/staff/aleix-palau/unsocial.3/view.js b/staff/aleix-palau/unsocial.3/view.js new file mode 100644 index 00000000..20c5078d --- /dev/null +++ b/staff/aleix-palau/unsocial.3/view.js @@ -0,0 +1,184 @@ +function buildFormField(id, text, type) { + var label = document.createElement('label') + label.htmlFor = id + label.innerText = text + + var input = document.createElement('input') + input.type = type + input.id = id + input.required = true + + return [label, input] +} + +function buildButton(text, type) { + var button = document.createElement('button') + button.type = type + button.innerText = text + + return button +} + +function buildHomeSection() { + var section = document.createElement('section') + + var title = document.createElement('h2') + title.innerText = 'Home' + section.appendChild(title) + + var userTitle = document.createElement('h3') + userTitle.innerText = 'Hello, ' + loggedInUser.username + '!' + section.appendChild(userTitle) + + var logoutButton = buildButton('Logout', 'button') + section.appendChild(logoutButton) + + logoutButton.addEventListener('click', function (event) { + event.preventDefault() + + loggedInUser = null + + section.remove() + + body.appendChild(loginSection) + }) + + return section +} + +function buildRegisterSection() { + var section = document.createElement('section') + + var title = document.createElement('h2') + title.innerText = 'Register' + section.appendChild(title) + + var form = document.createElement('form') + section.appendChild(form) + + var nameField = buildFormField('name', 'Name', 'text') + form.appendChild(nameField[0]) + form.appendChild(nameField[1]) + + var emailField = buildFormField('email', 'E-mail', 'email') + form.appendChild(emailField[0]) + form.appendChild(emailField[1]) + + var usernameField = buildFormField('username', 'Username', 'text') + form.appendChild(usernameField[0]) + form.appendChild(usernameField[1]) + + var passwordField = buildFormField('password', 'Password', 'password') + form.appendChild(passwordField[0]) + form.appendChild(passwordField[1]) + + var passwordRepeatField = buildFormField('password-repeat', 'Repeat password', 'password') + form.appendChild(passwordRepeatField[0]) + form.appendChild(passwordRepeatField[1]) + + var submitButton = buildButton('Register', 'submit') + form.appendChild(submitButton) + + form.addEventListener('submit', function (event) { + event.preventDefault() + + var name = nameField[1].value + var email = emailField[1].value + var username = usernameField[1].value + var password = passwordField[1].value + var passwordRepeat = passwordRepeatField[1].value + + try { + registerUser(name, email, username, password, passwordRepeat) + + form.reset() + + section.remove() + + body.appendChild(loginSection) + } catch (error) { + alert(error.message) + + console.error(error) + } + }) + + var loginLink = document.createElement('a') + loginLink.href = '' + loginLink.innerText = 'Login' + section.appendChild(loginLink) + + loginLink.addEventListener('click', function (event) { + event.preventDefault() + + section.remove() + + body.appendChild(loginSection) + }) + + return section +} + +function buildLoginSection() { + var section = document.createElement('section') + + var title = document.createElement('h2') + title.innerText = 'Login' + section.appendChild(title) + + var form = document.createElement('form') + section.appendChild(form) + + var usernameField = buildFormField('username', 'Username', 'text') + form.appendChild(usernameField[0]) + form.appendChild(usernameField[1]) + + var passwordField = buildFormField('password', 'Password', 'password') + form.appendChild(passwordField[0]) + form.appendChild(passwordField[1]) + + var submitButton = buildButton('Login', 'submit') + form.appendChild(submitButton) + + form.addEventListener('submit', function (event) { + event.preventDefault() + + var username = usernameField[1].value + var password = passwordField[1].value + + try { + loggedInUser = authenticateUser(username, password) + + form.reset() + + section.remove() + + var homeSection = buildHomeSection() + + body.appendChild(homeSection) + } catch (error) { + passwordField[1].value = '' + + alert(error.message) + + console.error(error) + } + }) + + var registerLink = document.createElement('a') + registerLink.href = '' + registerLink.innerText = 'Register' + section.appendChild(registerLink) + + registerLink.addEventListener('click', function (event) { + event.preventDefault() + + section.remove() + + var registerSection = buildRegisterSection() + + body.appendChild(registerSection) + }) + + return section +} \ No newline at end of file diff --git a/staff/aleix-palau/unsocial/index.html b/staff/aleix-palau/unsocial/index.html index 2e30a441..8ec9a238 100644 --- a/staff/aleix-palau/unsocial/index.html +++ b/staff/aleix-palau/unsocial/index.html @@ -7,7 +7,6 @@ UN$0C14L - @@ -15,6 +14,7 @@

UN$0C14L

+ diff --git a/staff/aleix-palau/unsocial/logic.js b/staff/aleix-palau/unsocial/logic.js index a5d245c6..d7e1118f 100644 --- a/staff/aleix-palau/unsocial/logic.js +++ b/staff/aleix-palau/unsocial/logic.js @@ -32,6 +32,9 @@ function authenticateUser(username, password) { if (username.length < 4 || username.length > 12) throw new Error('invalid username') + if (password.length < 6) + throw new Error('invalid password') + var user = users.find(function (user) { return user.username === username && user.password === password }) diff --git a/staff/aleix-palau/unsocial/main.js b/staff/aleix-palau/unsocial/main.js index 182d32f2..029a3897 100644 --- a/staff/aleix-palau/unsocial/main.js +++ b/staff/aleix-palau/unsocial/main.js @@ -1,192 +1,6 @@ var loggedInUser = null -// LOGIN SECTION -var loginSection = document.createElement('section') -var loginTitle = document.createElement('h2') -loginTitle.innerText = 'Login' -loginSection.appendChild(loginTitle) -var loginForm = document.createElement('form') -loginSection.appendChild(loginForm) -var loginUsernameLabel = document.createElement('label') -loginUsernameLabel.htmlFor = 'login-username' -loginUsernameLabel.innerText = 'Username' -loginForm.appendChild(loginUsernameLabel) -var loginUsernameInput = document.createElement('input') -loginUsernameInput.type = 'text' -loginUsernameInput.id = 'login-username' -loginUsernameInput.required = true -loginForm.appendChild(loginUsernameInput) -var loginPasswordLabel = document.createElement('label') -loginPasswordLabel.htmlFor = 'login-password' -loginPasswordLabel.innerText = 'Password' -loginForm.appendChild(loginPasswordLabel) -var loginPasswordInput = document.createElement('input') -loginPasswordInput.type = 'password' -loginPasswordInput.id = 'login-password' -loginPasswordInput.required = true -loginForm.appendChild(loginPasswordInput) -var loginSubmitButton = document.createElement('button') -loginSubmitButton.type = 'submit' -loginSubmitButton.innerText = 'Login' -loginForm.appendChild(loginSubmitButton) +var loginSection = buildLoginSection() -// LOGIN TAB -> LOGIN BUTTON -loginForm.addEventListener('submit', function (event) { - event.preventDefault() - - var loginUsername = loginUsernameInput.value - var loginPassword = loginPasswordInput.value - - try { - loggedInUser = authenticateUser(loginUsername, loginPassword) - - loginForm.reset() - - loginSection.remove() - - // HOME SECTION - var homeSection = document.createElement('section') - var homeTitle = document.createElement('h2') - homeTitle.innerText = 'Home' - homeSection.appendChild(homeTitle) - var homeUserTitle = document.createElement('h3') - homeUserTitle.innerText = 'Hello, ' + loggedInUser.username + '!' - homeSection.appendChild(homeUserTitle) - var homeLogoutButton = document.createElement('button') - homeLogoutButton.innerText = 'Logout' - homeSection.appendChild(homeLogoutButton) - - // HOME TAB -> LOGOUT BUTTON - homeLogoutButton.addEventListener('click', function (event) { - event.preventDefault() - - loggedInUser = null - - homeSection.remove() - - body.appendChild(loginSection) - }) - - body.appendChild(homeSection) - } catch (error) { - loginPasswordInput.value = '' - - alert(error.message) - - console.error(error) - } -}) - -var loginRegisterLink = document.createElement('a') -loginRegisterLink.href = '' -loginRegisterLink.innerText = 'Register' -loginSection.appendChild(loginRegisterLink) - -// LOGIN TAB -> REGISTER LINK -loginRegisterLink.addEventListener('click', function (event) { - event.preventDefault() - - loginSection.remove() - - // REGISTER SECTION - var registerSection = document.createElement('section') - var registerTitle = document.createElement('h2') - registerTitle.innerText = 'Register' - registerSection.appendChild(registerTitle) - var registerForm = document.createElement('form') - registerSection.appendChild(registerForm) - var registerNameLabel = document.createElement('label') - registerNameLabel.htmlFor = 'register-name' - registerNameLabel.innerText = 'Name' - registerForm.appendChild(registerNameLabel) - var registerNameInput = document.createElement('input') - registerNameInput.type = 'text' - registerNameInput.id = 'register-name' - registerNameInput.required = true - registerForm.appendChild(registerNameInput) - var registerEmailLabel = document.createElement('label') - registerEmailLabel.htmlFor = 'register-email' - registerEmailLabel.innerText = 'E-mail' - registerForm.appendChild(registerEmailLabel) - var registerEmailInput = document.createElement('input') - registerEmailInput.type = 'email' - registerEmailInput.id = 'register-email' - registerEmailInput.required = true - registerForm.appendChild(registerEmailInput) - var registerUsernameLabel = document.createElement('label') - registerUsernameLabel.htmlFor = 'register-username' - registerUsernameLabel.innerText = 'Username' - registerForm.appendChild(registerUsernameLabel) - var registerUsernameInput = document.createElement('input') - registerUsernameInput.type = 'text' - registerUsernameInput.id = 'register-username' - registerUsernameInput.required = true - registerForm.appendChild(registerUsernameInput) - var registerPasswordLabel = document.createElement('label') - registerPasswordLabel.htmlFor = 'register-password' - registerPasswordLabel.innerText = 'Password' - registerForm.appendChild(registerPasswordLabel) - var registerPasswordInput = document.createElement('input') - registerPasswordInput.type = 'password' - registerPasswordInput.id = 'register-password' - registerPasswordInput.required = true - registerForm.appendChild(registerPasswordInput) - var registerPasswordRepeatLabel = document.createElement('label') - registerPasswordRepeatLabel.htmlFor = 'register-password-repeat' - registerPasswordRepeatLabel.innerText = 'Repeat password' - registerForm.appendChild(registerPasswordRepeatLabel) - var registerPasswordRepeatInput = document.createElement('input') - registerPasswordRepeatInput.type = 'password' - registerPasswordRepeatInput.id = 'register-password-repeat' - registerPasswordRepeatInput.required = true - registerForm.appendChild(registerPasswordRepeatInput) - var registerSubmitButton = document.createElement('button') - registerSubmitButton.type = 'submit' - registerSubmitButton.innerText = 'Register' - registerForm.appendChild(registerSubmitButton) - - // REGISTER TAB -> REGISTER BUTTON - registerForm.addEventListener('submit', function (event) { - event.preventDefault() - - var name = registerNameInput.value - var email = registerEmailInput.value - var username = registerUsernameInput.value - var password = registerPasswordInput.value - var passwordRepeat = registerPasswordRepeatInput.value - - try { - registerUser(name, email, username, password, passwordRepeat) - - registerForm.reset() - - registerSection.remove() - - body.appendChild(loginSection) - } catch (error) { - alert(error.message) - - console.error(error) - } - }) - - var registerLoginLink = document.createElement('a') - registerLoginLink.href = '' - registerLoginLink.innerText = 'Login' - registerSection.appendChild(registerLoginLink) - - // REGISTER TAB -> LOGIN LINK - registerLoginLink.addEventListener('click', function (event) { - event.preventDefault() - - registerSection.remove() - - body.appendChild(loginSection) - }) - - body.appendChild(registerSection) -}) - -// BODY SECTION var body = document.querySelector('body') body.appendChild(loginSection) \ No newline at end of file diff --git a/staff/aleix-palau/unsocial/style.css b/staff/aleix-palau/unsocial/style.css index e5ba5967..2f9c535d 100644 --- a/staff/aleix-palau/unsocial/style.css +++ b/staff/aleix-palau/unsocial/style.css @@ -7,7 +7,7 @@ } body { - background-color: black; + background-color: #111; color: var(--color); font-family: var(--font); display: flex; @@ -52,7 +52,7 @@ input { button { background-color: var(--color); - color: black; + color: #222; border: none; padding: 0.75rem; margin-top: 1.5rem; diff --git a/staff/aleix-palau/unsocial/view.js b/staff/aleix-palau/unsocial/view.js new file mode 100644 index 00000000..20c5078d --- /dev/null +++ b/staff/aleix-palau/unsocial/view.js @@ -0,0 +1,184 @@ +function buildFormField(id, text, type) { + var label = document.createElement('label') + label.htmlFor = id + label.innerText = text + + var input = document.createElement('input') + input.type = type + input.id = id + input.required = true + + return [label, input] +} + +function buildButton(text, type) { + var button = document.createElement('button') + button.type = type + button.innerText = text + + return button +} + +function buildHomeSection() { + var section = document.createElement('section') + + var title = document.createElement('h2') + title.innerText = 'Home' + section.appendChild(title) + + var userTitle = document.createElement('h3') + userTitle.innerText = 'Hello, ' + loggedInUser.username + '!' + section.appendChild(userTitle) + + var logoutButton = buildButton('Logout', 'button') + section.appendChild(logoutButton) + + logoutButton.addEventListener('click', function (event) { + event.preventDefault() + + loggedInUser = null + + section.remove() + + body.appendChild(loginSection) + }) + + return section +} + +function buildRegisterSection() { + var section = document.createElement('section') + + var title = document.createElement('h2') + title.innerText = 'Register' + section.appendChild(title) + + var form = document.createElement('form') + section.appendChild(form) + + var nameField = buildFormField('name', 'Name', 'text') + form.appendChild(nameField[0]) + form.appendChild(nameField[1]) + + var emailField = buildFormField('email', 'E-mail', 'email') + form.appendChild(emailField[0]) + form.appendChild(emailField[1]) + + var usernameField = buildFormField('username', 'Username', 'text') + form.appendChild(usernameField[0]) + form.appendChild(usernameField[1]) + + var passwordField = buildFormField('password', 'Password', 'password') + form.appendChild(passwordField[0]) + form.appendChild(passwordField[1]) + + var passwordRepeatField = buildFormField('password-repeat', 'Repeat password', 'password') + form.appendChild(passwordRepeatField[0]) + form.appendChild(passwordRepeatField[1]) + + var submitButton = buildButton('Register', 'submit') + form.appendChild(submitButton) + + form.addEventListener('submit', function (event) { + event.preventDefault() + + var name = nameField[1].value + var email = emailField[1].value + var username = usernameField[1].value + var password = passwordField[1].value + var passwordRepeat = passwordRepeatField[1].value + + try { + registerUser(name, email, username, password, passwordRepeat) + + form.reset() + + section.remove() + + body.appendChild(loginSection) + } catch (error) { + alert(error.message) + + console.error(error) + } + }) + + var loginLink = document.createElement('a') + loginLink.href = '' + loginLink.innerText = 'Login' + section.appendChild(loginLink) + + loginLink.addEventListener('click', function (event) { + event.preventDefault() + + section.remove() + + body.appendChild(loginSection) + }) + + return section +} + +function buildLoginSection() { + var section = document.createElement('section') + + var title = document.createElement('h2') + title.innerText = 'Login' + section.appendChild(title) + + var form = document.createElement('form') + section.appendChild(form) + + var usernameField = buildFormField('username', 'Username', 'text') + form.appendChild(usernameField[0]) + form.appendChild(usernameField[1]) + + var passwordField = buildFormField('password', 'Password', 'password') + form.appendChild(passwordField[0]) + form.appendChild(passwordField[1]) + + var submitButton = buildButton('Login', 'submit') + form.appendChild(submitButton) + + form.addEventListener('submit', function (event) { + event.preventDefault() + + var username = usernameField[1].value + var password = passwordField[1].value + + try { + loggedInUser = authenticateUser(username, password) + + form.reset() + + section.remove() + + var homeSection = buildHomeSection() + + body.appendChild(homeSection) + } catch (error) { + passwordField[1].value = '' + + alert(error.message) + + console.error(error) + } + }) + + var registerLink = document.createElement('a') + registerLink.href = '' + registerLink.innerText = 'Register' + section.appendChild(registerLink) + + registerLink.addEventListener('click', function (event) { + event.preventDefault() + + section.remove() + + var registerSection = buildRegisterSection() + + body.appendChild(registerSection) + }) + + return section +} \ No newline at end of file