diff --git a/staff/juanp-arias/unsocial/compo.js b/staff/juanp-arias/unsocial/compo.js new file mode 100644 index 00000000..5e764bfe --- /dev/null +++ b/staff/juanp-arias/unsocial/compo.js @@ -0,0 +1,13 @@ +//creación de función constructora para hacer todo apartir de ella. +//todos los elementos que creemos como 'new compo' aplican sus propiedades, es decir heredan ser de propiedad array y container.(container sirve para añadir elementos) + + +function Compo(container){ + this.children = [] + this.container = container +} + +Compo.prototype.add = function (child){ + this.children.push(child)//Esto significa que todas las propiedades de tipo Compo, tienen esta función push. añaden elementos + this.container.appendChild(child.container)//y añaden containers de sus childrens +} \ No newline at end of file diff --git a/staff/juanp-arias/unsocial/index.html b/staff/juanp-arias/unsocial/index.html index 846c01a5..000ede9f 100644 --- a/staff/juanp-arias/unsocial/index.html +++ b/staff/juanp-arias/unsocial/index.html @@ -13,7 +13,11 @@

UNSOCIAL

+ + + + diff --git a/staff/juanp-arias/unsocial/main.js b/staff/juanp-arias/unsocial/main.js index 3f0f903f..b317d082 100644 --- a/staff/juanp-arias/unsocial/main.js +++ b/staff/juanp-arias/unsocial/main.js @@ -1,196 +1,7 @@ //Presentation var loggedInUser = null -var loginSection = document.createElement('section') -var loginTitle = document.createElement('h2') -loginTitle.innerText = 'LOGIN' -loginSection.appendChild(loginTitle) +var loginSection = buildLoginSection() -var loginForm = document.createElement('form') -loginSection.appendChild(loginForm) - -var loginUsernameLabel = document.createElement('label') -loginUsernameLabel.htmlFor = 'username' -loginUsernameLabel.innerText = 'Username' -loginForm.appendChild(loginUsernameLabel) - -var loginUsernameInput = document.createElement('input') -loginUsernameInput.type = 'text' -loginUsernameInput.id = 'username' -loginForm.appendChild(loginUsernameInput) - -var loginPasswordLabel = document.createElement('label') -loginPasswordLabel.htmlFor = 'password' -loginPasswordLabel.innerText = 'Password' -loginForm.appendChild(loginPasswordLabel) - -var loginPasswordInput = document.createElement('input') -loginPasswordInput.type = 'password' -loginPasswordInput.id = 'password' -loginForm.appendChild(loginPasswordInput) - -var loginSubmitButton = document.createElement('button') -loginSubmitButton.type = 'submit' -loginSubmitButton.innerText = 'Login' -loginSubmitButton.href = '' -loginForm.appendChild(loginSubmitButton) - -loginForm.addEventListener('submit', function (event) { - event.preventDefault() - - var username = loginUsernameInput.value - var password = loginPasswordInput.value - - try { - loggedInUser = authenticateUser(username, password) - - loginForm.reset() - - loginSection.remove() - - //SECCIÓN HOME - var homeSection = document.createElement('section') - - var homeTitle = document.createElement('h2') - homeTitle.innerText = 'HOME' - homeSection.appendChild(homeTitle) - - var homeWelcome = document.createElement('h3') - homeWelcome.innerText = 'Welcome, ' + loggedInUser.name + '!' - homeSection.appendChild(homeWelcome) - - var logOut = document.createElement('button') - logOut.type = 'button' - logOut.innerText = 'LogOut' - logOut.href = '' - homeSection.appendChild(logOut) - - logOut.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) - } -}) - -//CREACIÓN LINK TIPO ANCHOR QUE TE LLEVA A LA SECCIÓN DE REGISTRO -var loginRegisterLink = document.createElement('a') -loginRegisterLink.href = '' -loginRegisterLink.innerText = 'Register' -loginSection.appendChild(loginRegisterLink) - -loginRegisterLink.addEventListener('click', function (event) { - event.preventDefault() - - loginSection.remove() - - //SECCIÓN DE REGISTRO - 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 = 'name' - registerNameLabel.innerText = 'Name' - registerForm.appendChild(registerNameLabel) - var registerNameInput = document.createElement('input') - registerNameInput.type = 'text' - registerNameInput.id = 'name' - registerForm.appendChild(registerNameInput) - - var registerEmailLabel = document.createElement('label') - registerEmailLabel.htmlFor = 'email' - registerEmailLabel.innerText = 'E-mail' - registerForm.appendChild(registerEmailLabel) - var registerEmailInput = document.createElement('input') - registerEmailInput.type = 'email' - registerEmailInput.id = 'email' - registerForm.appendChild(registerEmailInput) - - var registerUsernameLabel = document.createElement('label') - registerUsernameLabel.htmlFor = 'username' - registerUsernameLabel.innerText = 'Username' - registerForm.appendChild(registerUsernameLabel) - var registerUsernameInput = document.createElement('input') - registerUsernameInput.type = 'text' - registerUsernameInput.id = 'username' - registerForm.appendChild(registerUsernameInput) - - var registerPasswordLabel = document.createElement('label') - registerPasswordLabel.htmlFor = 'password' - registerPasswordLabel.innerText = 'Password' - registerForm.appendChild(registerPasswordLabel) - var registerPasswordInput = document.createElement('input') - registerPasswordInput.type = 'password' - registerPasswordInput.id = 'password' - registerForm.appendChild(registerPasswordInput) - - var registerPasswordRepeatLabel = document.createElement('label') - registerPasswordRepeatLabel.htmlFor = 'password-repeat' - registerPasswordRepeatLabel.innerText = 'Repeat password' - registerForm.appendChild(registerPasswordRepeatLabel) - var registerPasswordRepeatInput = document.createElement('input') - registerPasswordRepeatInput.type = 'password' - registerPasswordRepeatInput.id = 'password-repeat' - registerForm.appendChild(registerPasswordRepeatInput) - - var registerSubmitButton = document.createElement('button') - registerSubmitButton.type = 'submit' - registerSubmitButton.innerText = 'Register' - registerForm.appendChild(registerSubmitButton) - - registerForm.addEventListener('submit', function (event) { - event.preventDefault() - - var name = registerNameInput.value - var email = registerEmailInput.value - var username = registerUsernameInput.value - var password = registerPasswordInput.value - var repeatpassword = registerPasswordRepeatInput.value - - try { - registerUser(name, email, username, password, repeatpassword) - - 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) - - registerLoginLink.addEventListener('click', function (event) { - event.preventDefault() - - registerSection.remove() - body.appendChild(loginSection) - }) - - body.appendChild(registerSection) -}) - -var body = document.querySelector('body') -body.appendChild(loginSection) \ No newline at end of file +var body = new Compo(document.querySelector('body')) +body.add(loginSection) \ No newline at end of file diff --git a/staff/juanp-arias/unsocial/style2.css b/staff/juanp-arias/unsocial/style2.css index 0c34072d..cd852428 100644 --- a/staff/juanp-arias/unsocial/style2.css +++ b/staff/juanp-arias/unsocial/style2.css @@ -32,6 +32,7 @@ input { text-align: center; align-items: center; font-family: inherit; + font-size: 28px; } diff --git a/staff/juanp-arias/unsocial/view.js b/staff/juanp-arias/unsocial/view.js new file mode 100644 index 00000000..504e4527 --- /dev/null +++ b/staff/juanp-arias/unsocial/view.js @@ -0,0 +1,191 @@ +//function form +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.innerText = text + + return [label, input] +} +//function button +function buildButton(text, type) { + var button = document.createElement('button') + button.type = type + button.innerText = text + + return button +} + + +//function de login +function buildLoginSection() { + var compo = new Compo(document.createElement('section')) + var section = compo.container + + 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() + + //SECCIÓN HOME + var homeSection = buildHomeSection() + + body.add(homeSection) + + } catch (error) { + passwordField[1].value = '' + + alert(error.message) + + console.error(error) + } + }) + + //CREACIÓN LINK TIPO ANCHOR QUE TE LLEVA A LA SECCIÓN DE REGISTRO + var registerLink = document.createElement('a') + registerLink.href = '' + registerLink.innerText = 'Register' + section.appendChild(registerLink) + + registerLink.addEventListener('click', function (event) { + event.preventDefault() + + section.remove() + + //SECCIÓN DE REGISTRO + var registerSection = buildRegisterSection() + + body.add(registerSection) + }) + return compo +} + +//function de register +function buildRegisterSection() { + var compo = new Compo(document.createElement('section')) + var section = compo.container + + 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 repeatpassword = passwordRepeatField[1].value + + try { + registerUser(name, email, username, password, repeatpassword) + + form.reset() + section.remove() + body.add(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.add(loginSection) + }) + return compo +} + +//function de home +function buildHomeSection() { + var compo = new Compo(document.createElement('section')) + + var section = compo.container + + var title = document.createElement('h2') + title.innerText = 'HOME' + section.appendChild(title) + + var welcome = document.createElement('h3') + welcome.innerText = 'Welcome, ' + loggedInUser.name + '!' + section.appendChild(welcome) + + var logout = document.createElement('button') + logout.type = 'button' + logout.innerText = 'Logout' + logout.href = '' + section.appendChild(logout) + + logout.addEventListener('click', function (event) { + event.preventDefault() + loggedInUser = null + section.remove() + body.add(loginSection) + }) + return compo +} \ No newline at end of file