diff --git a/staff/rafael-infante/unsocial .1/.gitkeep b/staff/rafael-infante/unsocial.1/.gitkeep
similarity index 100%
rename from staff/rafael-infante/unsocial .1/.gitkeep
rename to staff/rafael-infante/unsocial.1/.gitkeep
diff --git a/staff/rafael-infante/unsocial .1/images/boy.png b/staff/rafael-infante/unsocial.1/images/boy.png
similarity index 100%
rename from staff/rafael-infante/unsocial .1/images/boy.png
rename to staff/rafael-infante/unsocial.1/images/boy.png
diff --git a/staff/rafael-infante/unsocial .1/images/girl.png b/staff/rafael-infante/unsocial.1/images/girl.png
similarity index 100%
rename from staff/rafael-infante/unsocial .1/images/girl.png
rename to staff/rafael-infante/unsocial.1/images/girl.png
diff --git a/staff/rafael-infante/unsocial .1/images/users-avatar.png b/staff/rafael-infante/unsocial.1/images/users-avatar.png
similarity index 100%
rename from staff/rafael-infante/unsocial .1/images/users-avatar.png
rename to staff/rafael-infante/unsocial.1/images/users-avatar.png
diff --git a/staff/rafael-infante/unsocial .1/images/users-avatar2.png b/staff/rafael-infante/unsocial.1/images/users-avatar2.png
similarity index 100%
rename from staff/rafael-infante/unsocial .1/images/users-avatar2.png
rename to staff/rafael-infante/unsocial.1/images/users-avatar2.png
diff --git a/staff/rafael-infante/unsocial .1/index.1.html b/staff/rafael-infante/unsocial.1/index.1.html
similarity index 100%
rename from staff/rafael-infante/unsocial .1/index.1.html
rename to staff/rafael-infante/unsocial.1/index.1.html
diff --git a/staff/rafael-infante/unsocial .1/index.2.html b/staff/rafael-infante/unsocial.1/index.2.html
similarity index 100%
rename from staff/rafael-infante/unsocial .1/index.2.html
rename to staff/rafael-infante/unsocial.1/index.2.html
diff --git a/staff/rafael-infante/unsocial .1/index.3.html b/staff/rafael-infante/unsocial.1/index.3.html
similarity index 100%
rename from staff/rafael-infante/unsocial .1/index.3.html
rename to staff/rafael-infante/unsocial.1/index.3.html
diff --git a/staff/rafael-infante/unsocial .1/index.4.html b/staff/rafael-infante/unsocial.1/index.4.html
similarity index 100%
rename from staff/rafael-infante/unsocial .1/index.4.html
rename to staff/rafael-infante/unsocial.1/index.4.html
diff --git a/staff/rafael-infante/unsocial .1/index.5.html b/staff/rafael-infante/unsocial.1/index.5.html
similarity index 100%
rename from staff/rafael-infante/unsocial .1/index.5.html
rename to staff/rafael-infante/unsocial.1/index.5.html
diff --git a/staff/rafael-infante/unsocial .1/index.6.html b/staff/rafael-infante/unsocial.1/index.6.html
similarity index 100%
rename from staff/rafael-infante/unsocial .1/index.6.html
rename to staff/rafael-infante/unsocial.1/index.6.html
diff --git a/staff/rafael-infante/unsocial .1/index.html b/staff/rafael-infante/unsocial.1/index.html
similarity index 100%
rename from staff/rafael-infante/unsocial .1/index.html
rename to staff/rafael-infante/unsocial.1/index.html
diff --git a/staff/rafael-infante/unsocial.2/.gitkeep b/staff/rafael-infante/unsocial.2/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/staff/rafael-infante/unsocial.2/data.js b/staff/rafael-infante/unsocial.2/data.js
new file mode 100644
index 00000000..f98e7df4
--- /dev/null
+++ b/staff/rafael-infante/unsocial.2/data.js
@@ -0,0 +1,4 @@
+var users = [
+ { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+ { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+]
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.2/images/boy.png b/staff/rafael-infante/unsocial.2/images/boy.png
new file mode 100644
index 00000000..fc4e8b35
Binary files /dev/null and b/staff/rafael-infante/unsocial.2/images/boy.png differ
diff --git a/staff/rafael-infante/unsocial.2/images/girl.png b/staff/rafael-infante/unsocial.2/images/girl.png
new file mode 100644
index 00000000..27f367db
Binary files /dev/null and b/staff/rafael-infante/unsocial.2/images/girl.png differ
diff --git a/staff/rafael-infante/unsocial.2/images/users-avatar.png b/staff/rafael-infante/unsocial.2/images/users-avatar.png
new file mode 100644
index 00000000..7ac2ff60
Binary files /dev/null and b/staff/rafael-infante/unsocial.2/images/users-avatar.png differ
diff --git a/staff/rafael-infante/unsocial.2/images/users-avatar2.png b/staff/rafael-infante/unsocial.2/images/users-avatar2.png
new file mode 100644
index 00000000..ccee2bf7
Binary files /dev/null and b/staff/rafael-infante/unsocial.2/images/users-avatar2.png differ
diff --git a/staff/rafael-infante/unsocial.2/index.html b/staff/rafael-infante/unsocial.2/index.html
new file mode 100644
index 00000000..5a0c6398
--- /dev/null
+++ b/staff/rafael-infante/unsocial.2/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Unsocial
+
+
+
+
+
+
+
+ 
+ unSocial
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.2/logic.js b/staff/rafael-infante/unsocial.2/logic.js
new file mode 100644
index 00000000..772def94
--- /dev/null
+++ b/staff/rafael-infante/unsocial.2/logic.js
@@ -0,0 +1,42 @@
+function registerUser(name, email, username, password, confirmPassword) {
+ if (name.length < 2)
+ throw new Error('Invalid name')
+
+ if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
+ throw new Error('Invalid email')
+
+ var registeredUser = users.find(function (user) {
+ return user.email === email || user.username === username
+ })
+ if (registeredUser)
+ throw new Error('This user is already registered')
+
+ if (username.length < 4 || username.length > 12)
+ throw new Error('invalid user name')
+
+ if (password.length < 8)
+ throw new Error('invalid password')
+
+ if (password !== confirmPassword)
+ throw new Error('passwords do not match')
+ var user = { name: name, email: email, username: username, password: password }
+
+ users.push(user)
+}
+
+function authenticateUser(loginUsername, loginPassword) {
+ if (loginUsername.length < 4 || loginUsername.length > 12)
+ throw new Error('invalid username')
+
+ if (loginPassword < 8)
+ throw new Error('invalid password')
+
+ var user = users.find(function (user) {
+ return user.username === loginUsername && user.password === loginPassword
+ })
+
+ if (user === undefined)
+ throw new Error('wrong credentials')
+
+ return user
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.2/main.js b/staff/rafael-infante/unsocial.2/main.js
new file mode 100644
index 00000000..a1e5152d
--- /dev/null
+++ b/staff/rafael-infante/unsocial.2/main.js
@@ -0,0 +1,237 @@
+var loggedUser = null
+// Login section
+var loginSection = document.createElement('section')
+var loginParagraph = document.createElement('p')
+var loginTitle = document.createElement('h2')
+var loginText = document.createElement('h4')
+var loginForm = document.createElement('form')
+var loginUsernameLabel = document.createElement('label')
+var loginUsernameInput = document.createElement('input')
+var loginPasswordLabel = document.createElement('label')
+var loginPasswordInputContainer = document.createElement('div')
+var loginPasswordIcon = document.createElement('i')
+var loginPasswordInput = document.createElement('input')
+var loginButton = document.createElement('button')
+var loginBottomText = document.createElement('p')
+
+loginParagraph.innerText = 'Welcome !'
+loginTitle.innerText = 'Sign in to unSocial'
+loginText.innerText = 'Write username and password to access'
+loginSection.appendChild(loginParagraph)
+loginSection.appendChild(loginTitle)
+loginSection.appendChild(loginText)
+loginSection.classList.add('section-container')
+loginSection.appendChild(loginForm)
+loginForm.classList.add('form-container')
+loginForm.appendChild(loginUsernameLabel)
+loginForm.appendChild(loginUsernameInput)
+loginUsernameLabel.htmlFor = 'login-user'
+loginUsernameLabel.innerText = 'User name'
+loginUsernameInput.id = 'login-user'
+loginUsernameInput.placeholder = 'Enter your user name'
+loginUsernameInput.required = true
+loginForm.appendChild(loginPasswordLabel)
+loginForm.appendChild(loginPasswordInputContainer)
+loginPasswordInputContainer.classList.add('password-container')
+loginPasswordInputContainer.appendChild(loginPasswordInput)
+loginPasswordLabel.htmlFor = 'login-password'
+loginPasswordLabel.innerText = 'Password'
+loginPasswordLabel.id = 'login-password'
+loginPasswordInput.type = 'password'
+loginPasswordInput.id = 'password'
+loginPasswordInput.placeholder = 'Enter your Password'
+loginPasswordInput.required = true
+loginPasswordInputContainer.appendChild(loginPasswordIcon)
+loginPasswordIcon.classList.add('far')
+loginPasswordIcon.classList.add('fa-eye')
+loginPasswordIcon.id = 'icon'
+loginForm.appendChild(loginButton)
+loginButton.id = 'btn-login'
+loginButton.type = 'submit'
+loginButton.innerText = 'Login'
+loginSection.appendChild(loginBottomText)
+loginBottomText.id = 'bottom-text'
+loginBottomText.innerHTML = `Don't have an account? Register`
+
+var body = document.querySelector('body')
+body.appendChild(loginSection)
+
+var icon = document.querySelector('#icon')
+var input = document.querySelector('#password')
+var isVisible = false
+
+icon.addEventListener('click', function (event) {
+ icon.classList.toggle('fa-eye-slash')
+ if (!isVisible) {
+ input.type = 'text'
+ isVisible = true
+ } else {
+ input.type = 'password'
+ isVisible = false
+ }
+})
+
+var registerAnchor = document.getElementById('registerAnchor')
+// Send user to register section when clicking on register anchor
+registerAnchor.addEventListener('click', function (event) {
+ event.preventDefault()
+ loginSection.remove()
+ // Register Section
+ var registerSection = document.createElement('section')
+ var registerTitle = document.createElement('h2')
+ var registerForm = document.createElement('form')
+ var registerNameLabel = document.createElement('label')
+ var registerNameInput = document.createElement('input')
+ var registerEmailLabel = document.createElement('label')
+ var registerEmailInput = document.createElement('input')
+ var registerUsernameLabel = document.createElement('label')
+ var registerUsernameInput = document.createElement('input')
+ var registerPasswordLabel = document.createElement('label')
+ var registerPasswordInput = document.createElement('input')
+ var registerConfirmPasswordLabel = document.createElement('label')
+ var registerConfirmPasswordInput = document.createElement('input')
+ var registerButton = document.createElement('button')
+
+
+ registerSection.classList.add('section-container')
+ body.appendChild(registerSection)
+ registerTitle.id = 'register-title'
+ registerTitle.innerText = 'Register to unSocial'
+ registerSection.appendChild(registerTitle)
+ registerForm.classList.add('form-container')
+ registerSection.appendChild(registerForm)
+ registerNameLabel.htmlFor = 'name'
+ registerNameLabel.innerText = 'Name'
+ registerEmailLabel.htmlFor = 'email'
+ registerEmailLabel.innerText = 'E-mail'
+ registerUsernameLabel.htmlFor = 'username'
+ registerUsernameLabel.innerText = 'User name'
+ registerPasswordLabel.htmlFor = 'password'
+ registerPasswordLabel.innerText = 'Password'
+ registerConfirmPasswordLabel.htmlFor = 'confirm-password'
+ registerConfirmPasswordLabel.innerText = 'Confirm Password'
+
+ registerNameInput.type = 'text'
+ registerNameInput.id = 'name'
+ registerNameInput.placeholder = 'Enter your name'
+ registerNameInput.required = true
+
+ registerEmailInput.type = 'email'
+ registerEmailInput.id = 'email'
+ registerEmailInput.placeholder = 'Enter your E-mail'
+ registerEmailInput.required = true
+
+ registerUsernameInput.type = 'text'
+ registerUsernameInput.id = 'username'
+ registerUsernameInput.placeholder = 'Enter your user name'
+ registerUsernameInput.required = true
+
+ registerPasswordInput.type = 'password'
+ registerPasswordInput.id = 'password'
+ registerPasswordInput.placeholder = 'Enter your password'
+ registerPasswordInput.required = true
+
+ registerConfirmPasswordInput.type = 'password'
+ registerConfirmPasswordInput.id = 'confirm-password'
+ registerConfirmPasswordInput.placeholder = 'Confirm your password'
+ registerConfirmPasswordInput.required = true
+
+ registerForm.appendChild(registerNameLabel)
+ registerForm.appendChild(registerNameInput)
+ registerForm.appendChild(registerEmailLabel)
+ registerForm.appendChild(registerEmailInput)
+ registerForm.appendChild(registerUsernameLabel)
+ registerForm.appendChild(registerUsernameInput)
+ registerForm.appendChild(registerPasswordLabel)
+ registerForm.appendChild(registerPasswordInput)
+ registerForm.appendChild(registerConfirmPasswordLabel)
+ registerForm.appendChild(registerConfirmPasswordInput)
+
+ registerButton.id = 'btn-register'
+ registerButton.type = 'submit'
+ registerButton.innerText = 'Register'
+ registerForm.appendChild(registerButton)
+
+ var registerAnchorText = document.createElement('p')
+ registerAnchorText.innerText = 'Already have an account? '
+ registerSection.appendChild(registerAnchorText)
+ var registerLoginLink = document.createElement('a')
+ registerLoginLink.id = 'loginAnchor'
+ registerLoginLink.innerText = 'Login'
+ registerLoginLink.href = ''
+ registerAnchorText.appendChild(registerLoginLink)
+ // Send user to login section when clicking on login anchor
+ registerLoginLink.addEventListener('click', function (event) {
+ event.preventDefault();
+ registerSection.remove()
+ body.appendChild(loginSection)
+ })
+ // Save data of new user when clicking on 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 confirmPassword = registerConfirmPasswordInput.value
+
+ try {
+ registerUser(name, email, username, password, confirmPassword)
+ registerForm.reset()
+ registerSection.remove()
+ body.appendChild(loginSection)
+ }
+ catch (error) {
+ alert(error.message)
+ console.error(error)
+ }
+
+ })
+})
+// Compare data entered by the user with our users list
+loginForm.addEventListener('submit', function (event) {
+ event.preventDefault()
+ var loginUsername = loginUsernameInput.value
+ var loginPassword = loginPasswordInput.value
+
+ try {
+ loggedUser = authenticateUser(loginUsername, loginPassword)
+ loginForm.reset()
+ loginSection.remove()
+ // Home section
+ var homeSection = document.createElement('section')
+ var homeTitle = document.createElement('h2')
+ var homeText = document.createElement('h3')
+ var image = document.createElement('img')
+ var logoutButton = document.createElement('button')
+
+ body.appendChild(homeSection)
+ homeSection.appendChild(homeTitle)
+ homeSection.appendChild(homeText)
+ homeSection.appendChild(image)
+ homeSection.appendChild(logoutButton)
+ homeSection.id = 'home'
+ homeSection.classList.add('section-container')
+ homeTitle.innerText = 'Home'
+ homeText.innerText = 'Hello, ' + loggedUser.name + '!'
+ image.style.height = '300px'
+ image.src = '/staff/rafael-infante/unsocial/images/boy.png'
+ logoutButton.id = 'btn-logout'
+ logoutButton.innerText = 'Logout'
+ // Functionality of logout button
+ logoutButton.addEventListener('click', function (event) {
+ var condition = prompt('Are you sure? (y/n)')
+ if (condition === 'y') {
+ event.preventDefault()
+ loggedUser = null
+ homeSection.remove()
+ body.appendChild(loginSection)
+ }
+ })
+ }
+ catch (error) {
+ loginPasswordInput.value = ''
+ alert(error.message)
+ console.error(error)
+ }
+})
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.2/style.css b/staff/rafael-infante/unsocial.2/style.css
new file mode 100644
index 00000000..5359d6fb
--- /dev/null
+++ b/staff/rafael-infante/unsocial.2/style.css
@@ -0,0 +1,127 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+
+:root {
+ --font: 'Poppins';
+ font-family: var(--font);
+ background-color: #e4b834;
+}
+
+.logo-container {
+ display: flex;
+ text-decoration: none;
+ color: black;
+ align-items: center;
+ margin: 0;
+ padding-left: 15px;
+}
+
+.logo {
+ max-height: 45px;
+ margin-right: 5px;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 0 15px 15px 15px;
+}
+
+.section-container {
+ background-color: white;
+ padding: 0 20px 20px 20px;
+ margin: 10px;
+ width: 85%;
+ max-width: 500px;
+ min-height: 500px;
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.form-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+label {
+ padding-bottom: 6px;
+ font-size: 14px;
+}
+
+input {
+ margin-bottom: 10px;
+ padding: 10px;
+ border-radius: 5px;
+ border: 1px solid gray;
+}
+
+button {
+ color: white;
+ background-color: black;
+ margin-top: 25px;
+ padding: 15px;
+ border-radius: 15px;
+ cursor: pointer;
+ font-weight: bolder;
+ border: none;
+}
+
+button:hover {
+ color: black;
+ background-color: #e7cc79;
+ border: none;
+}
+
+#btn-register {
+ margin: 0;
+}
+
+#bottom-text,
+p {
+ font-size: 13px;
+ color: grey;
+ margin-top: 15px;
+ margin-bottom: 0;
+}
+
+a {
+ text-decoration: none;
+ font-weight: bold;
+ color: black;
+ cursor: pointer;
+}
+
+a:hover {
+ color: #dda600;
+}
+
+h4 {
+ margin: 20px;
+}
+
+.password-container {
+ position: relative;
+ display: inline-block;
+}
+
+.password-container input {
+ width: 95%;
+}
+
+.password-container i {
+ position: absolute;
+ top: 40%;
+ right: 18px;
+ transform: translateY(-50%);
+ cursor: pointer;
+}
+
+@media (max-width: 350px) {
+ .password-container input {
+ width: 92%;
+ }
+}
\ No newline at end of file