diff --git a/staff/luis-morlets/unsocial.5/.gitkeep b/staff/luis-morlets/unsocial.5/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/staff/luis-morlets/unsocial.5/compo.js b/staff/luis-morlets/unsocial.5/compo.js
new file mode 100644
index 000000000..d88f89bbc
--- /dev/null
+++ b/staff/luis-morlets/unsocial.5/compo.js
@@ -0,0 +1,9 @@
+function Compo(container) {
+ this.children = []
+ this.container = container
+}
+
+Compo.prototype.add = function (child) {
+ this.children.push(child)
+ this.container.appendChild(child.container)
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.5/data.js b/staff/luis-morlets/unsocial.5/data.js
new file mode 100644
index 000000000..7478bdcb7
--- /dev/null
+++ b/staff/luis-morlets/unsocial.5/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/luis-morlets/unsocial.5/index.html b/staff/luis-morlets/unsocial.5/index.html
new file mode 100644
index 000000000..5721dbf8d
--- /dev/null
+++ b/staff/luis-morlets/unsocial.5/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Unsocial
+
+
+
+
+
+ Unsocial
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.5/logic.js b/staff/luis-morlets/unsocial.5/logic.js
new file mode 100644
index 000000000..5c3479cd1
--- /dev/null
+++ b/staff/luis-morlets/unsocial.5/logic.js
@@ -0,0 +1,47 @@
+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 > 14)
+ throw new Error('invalid username')
+
+
+ if (password.length < 8)
+ 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 aleready exists')
+
+ user = { name: name, email: email, username: username, password: password, passwordRepeat: passwordRepeat }
+
+ users.push(user)
+
+}
+
+function authenticateUser(username, password) {
+ if (username.length < 4 || username.length > 14)
+ throw new Error('invalid username')
+
+ if (password.length < 8)
+ 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, try again')
+
+ return user
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.5/main.js b/staff/luis-morlets/unsocial.5/main.js
new file mode 100644
index 000000000..351ace0ec
--- /dev/null
+++ b/staff/luis-morlets/unsocial.5/main.js
@@ -0,0 +1,6 @@
+var loggedInUser = null
+
+var loginSection = buildLoginSection()
+
+var body = new Compo(document.querySelector('body'))
+body.add(loginSection)
diff --git a/staff/luis-morlets/unsocial.5/style.css b/staff/luis-morlets/unsocial.5/style.css
new file mode 100644
index 000000000..48a09f271
--- /dev/null
+++ b/staff/luis-morlets/unsocial.5/style.css
@@ -0,0 +1,36 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+:root {
+ --color: rgb(170, 60, 43);
+ --font: 'Press Start 2P';
+ font-family: var(--font);
+}
+
+body {
+ background-color: rgb(179, 176, 176);
+ color: var(--color);
+ margin: 50px;
+ min-width: 370px;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ min-width: 100px;
+ width: 300px;
+ gap: 5px;
+}
+
+input {
+ background-color: inherit;
+ font-family: inherit;
+}
+
+button {
+ width: fit-content;
+}
+
+a:visited {
+ color: var(--color);
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.5/view.js b/staff/luis-morlets/unsocial.5/view.js
new file mode 100644
index 000000000..819513b1a
--- /dev/null
+++ b/staff/luis-morlets/unsocial.5/view.js
@@ -0,0 +1,199 @@
+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 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()
+
+ var homeSection = buildHomeSection()
+
+ body.add(homeSection)
+ } catch (error) {
+ passwordField[1].value = ''
+
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = "Don't have an account? "
+ section.appendChild(anchorText)
+
+ var registerLink = document.createElement('a')
+ registerLink.href = ''
+ registerLink.innerText = 'Register'
+ anchorText.appendChild(registerLink)
+
+ registerLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ section.remove()
+
+ var registerSection = buildRegisterSection()
+
+ body.add(registerSection)
+ })
+
+ return compo
+}
+
+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 repeatPasswordField = buildFormField('password-repeat', 'Repeat Password', 'password')
+ form.appendChild(repeatPasswordField[0])
+ form.appendChild(repeatPasswordField[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 = repeatPasswordField[1].value
+
+ try {
+ registerUser(name, email, username, password, passwordRepeat)
+
+ form.reset()
+
+ section.remove()
+
+ body.add(loginSection)
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = 'Already have an account? '
+ section.appendChild(anchorText)
+
+ var loginLink = document.createElement('a')
+ loginLink.href = ''
+ loginLink.innerText = 'Login'
+ anchorText.appendChild(loginLink)
+
+ loginLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ section.remove()
+ body.add(loginSection)
+ })
+ return compo
+}
+
+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 greeting = document.createElement('h3')
+ greeting.innerText = "Hey " + loggedInUser.name + ", you're finally awake!"
+ section.appendChild(greeting)
+
+ var logoutButton = document.createElement('button')
+ logoutButton.innerText = 'Logout'
+ section.appendChild(logoutButton)
+
+ logoutButton.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ section.remove()
+
+ body.add(loginSection)
+ })
+
+ return compo
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.6/.gitkeep b/staff/luis-morlets/unsocial.6/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/staff/luis-morlets/unsocial.6/compo.js b/staff/luis-morlets/unsocial.6/compo.js
new file mode 100644
index 000000000..d88f89bbc
--- /dev/null
+++ b/staff/luis-morlets/unsocial.6/compo.js
@@ -0,0 +1,9 @@
+function Compo(container) {
+ this.children = []
+ this.container = container
+}
+
+Compo.prototype.add = function (child) {
+ this.children.push(child)
+ this.container.appendChild(child.container)
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.6/data.js b/staff/luis-morlets/unsocial.6/data.js
new file mode 100644
index 000000000..7478bdcb7
--- /dev/null
+++ b/staff/luis-morlets/unsocial.6/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/luis-morlets/unsocial.6/index.html b/staff/luis-morlets/unsocial.6/index.html
new file mode 100644
index 000000000..5721dbf8d
--- /dev/null
+++ b/staff/luis-morlets/unsocial.6/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Unsocial
+
+
+
+
+
+ Unsocial
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.6/logic.js b/staff/luis-morlets/unsocial.6/logic.js
new file mode 100644
index 000000000..5c3479cd1
--- /dev/null
+++ b/staff/luis-morlets/unsocial.6/logic.js
@@ -0,0 +1,47 @@
+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 > 14)
+ throw new Error('invalid username')
+
+
+ if (password.length < 8)
+ 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 aleready exists')
+
+ user = { name: name, email: email, username: username, password: password, passwordRepeat: passwordRepeat }
+
+ users.push(user)
+
+}
+
+function authenticateUser(username, password) {
+ if (username.length < 4 || username.length > 14)
+ throw new Error('invalid username')
+
+ if (password.length < 8)
+ 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, try again')
+
+ return user
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.6/main.js b/staff/luis-morlets/unsocial.6/main.js
new file mode 100644
index 000000000..351ace0ec
--- /dev/null
+++ b/staff/luis-morlets/unsocial.6/main.js
@@ -0,0 +1,6 @@
+var loggedInUser = null
+
+var loginSection = buildLoginSection()
+
+var body = new Compo(document.querySelector('body'))
+body.add(loginSection)
diff --git a/staff/luis-morlets/unsocial.6/style.css b/staff/luis-morlets/unsocial.6/style.css
new file mode 100644
index 000000000..48a09f271
--- /dev/null
+++ b/staff/luis-morlets/unsocial.6/style.css
@@ -0,0 +1,36 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+:root {
+ --color: rgb(170, 60, 43);
+ --font: 'Press Start 2P';
+ font-family: var(--font);
+}
+
+body {
+ background-color: rgb(179, 176, 176);
+ color: var(--color);
+ margin: 50px;
+ min-width: 370px;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ min-width: 100px;
+ width: 300px;
+ gap: 5px;
+}
+
+input {
+ background-color: inherit;
+ font-family: inherit;
+}
+
+button {
+ width: fit-content;
+}
+
+a:visited {
+ color: var(--color);
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.6/view.js b/staff/luis-morlets/unsocial.6/view.js
new file mode 100644
index 000000000..e2a5b5fb5
--- /dev/null
+++ b/staff/luis-morlets/unsocial.6/view.js
@@ -0,0 +1,203 @@
+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]
+}
+
+//We built this function and modified every form with compo.container
+function buildForm() {
+ var compo = new Compo(document.createElement('form'))
+
+ return compo
+}
+
+//We built this function and modified every button after
+function buildButton(text, type) {
+ var compo = new Compo(document.createElement('button'))
+
+ compo.container.type = type
+ compo.container.innerText = text
+
+ return compo
+}
+
+function buildLoginSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ //section is now compo.container because line 33 variable
+
+ var title = document.createElement('h2')
+ title.innerText = 'Login'
+ compo.container.appendChild(title)
+
+ var form = buildForm()
+ compo.add(form)
+
+ var usernameField = buildFormField('username', 'Username', 'text')
+ form.container.appendChild(usernameField[0])
+ form.container.appendChild(usernameField[1])
+
+ var passwordField = buildFormField('password', 'Password', 'password')
+ form.container.appendChild(passwordField[0])
+ form.container.appendChild(passwordField[1])
+
+ var submitButton = buildButton('Login', 'submit')
+ form.add(submitButton)
+
+ form.container.addEventListener('submit', function (event) {
+ event.preventDefault()
+
+ var username = usernameField[1].value
+ var password = passwordField[1].value
+
+ try {
+ loggedInUser = authenticateUser(username, password)
+
+ form.container.reset()
+
+ compo.container.remove()
+
+ var homeSection = buildHomeSection()
+
+ body.add(homeSection)
+ } catch (error) {
+ passwordField[1].value = ''
+
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = "Don't have an account? "
+ compo.container.appendChild(anchorText)
+
+ var registerLink = document.createElement('a')
+ registerLink.href = ''
+ registerLink.innerText = 'Register'
+ anchorText.appendChild(registerLink)
+
+ registerLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.container.remove()
+
+ var registerSection = buildRegisterSection()
+
+ body.add(registerSection)
+ })
+
+ return compo
+}
+
+function buildRegisterSection() {
+ var compo = new Compo(document.createElement('section'))
+
+ var title = document.createElement('h2')
+ title.innerText = 'Register'
+ compo.container.appendChild(title)
+
+ var form = buildForm()
+ compo.add(form)
+
+ var nameField = buildFormField('name', 'Name', 'text')
+ form.container.appendChild(nameField[0])
+ form.container.appendChild(nameField[1])
+
+ var emailField = buildFormField('email', 'E-mail', 'email')
+ form.container.appendChild(emailField[0])
+ form.container.appendChild(emailField[1])
+
+ var usernameField = buildFormField('username', 'Username', 'text')
+ form.container.appendChild(usernameField[0])
+ form.container.appendChild(usernameField[1])
+
+ var passwordField = buildFormField('password', 'Password', 'password')
+ form.container.appendChild(passwordField[0])
+ form.container.appendChild(passwordField[1])
+
+ var repeatPasswordField = buildFormField('password-repeat', 'Repeat Password', 'password')
+ form.container.appendChild(repeatPasswordField[0])
+ form.container.appendChild(repeatPasswordField[1])
+
+ var submitButton = buildButton('Register', 'submit')
+ form.container.appendChild(submitButton.container)
+
+ form.container.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 = repeatPasswordField[1].value
+
+ try {
+ registerUser(name, email, username, password, passwordRepeat)
+
+ form.container.reset()
+
+ compo.container.remove()
+
+ body.add(loginSection)
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = 'Already have an account? '
+ compo.container.appendChild(anchorText)
+
+ var loginLink = document.createElement('a')
+ loginLink.href = ''
+ loginLink.innerText = 'Login'
+ anchorText.appendChild(loginLink)
+
+ loginLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.container.remove()
+ body.add(loginSection)
+ })
+ return compo
+}
+
+function buildHomeSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = document.createElement('h2')
+ title.innerText = 'Home'
+ compo.container.appendChild(title)
+
+ var greeting = document.createElement('h3')
+ greeting.innerText = "Hey " + loggedInUser.name + ", you're finally awake!"
+ compo.container.appendChild(greeting)
+
+ var logoutButton = buildButton('Logout', 'button')
+ compo.add(logoutButton)
+
+ logoutButton.container.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ compo.container.remove()
+
+ body.add(loginSection)
+ })
+
+ return compo
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/.gitkeep b/staff/luis-morlets/unsocial.7/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/staff/luis-morlets/unsocial.7/compo.1.js b/staff/luis-morlets/unsocial.7/compo.1.js
new file mode 100644
index 000000000..037e606df
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/compo.1.js
@@ -0,0 +1,34 @@
+function Compo(container) {
+ this.children = []
+ this.container = container
+}
+
+Compo.prototype.add = function (child) {
+ this.children.push(child)
+ this.container.appendChild(child.container)
+}
+
+//Added remove method
+Compo.prototype.remove = function () {
+ this.container.remove()
+}
+
+//Created new Form constructor function
+function Form(container) {
+ this.children = []
+ this.container = container
+}
+
+Form.prototype.add = function (child) {
+ this.children.push(child)
+ this.container.appendChild(child.container)
+}
+
+Form.prototype.remove = function () {
+ this.container.remove()
+}
+
+//Added reset method for forms
+Form.prototype.reset = function () {
+ this.container.reset()
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/compo.2.js b/staff/luis-morlets/unsocial.7/compo.2.js
new file mode 100644
index 000000000..84e475b16
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/compo.2.js
@@ -0,0 +1,25 @@
+function Compo(container) {
+ this.children = []
+ this.container = container
+}
+
+Compo.prototype.add = function (child) {
+ this.children.push(child)
+ this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+ this.container.remove()
+}
+
+//Added Compo properties to our Form function with call method
+function Form(container) {
+ Compo.call(this, container)
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+ this.container.reset()
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/compo.3.js b/staff/luis-morlets/unsocial.7/compo.3.js
new file mode 100644
index 000000000..b31839314
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/compo.3.js
@@ -0,0 +1,68 @@
+function Compo(container) {
+ this.children = []
+ this.container = container
+}
+
+Compo.prototype.add = function (child) {
+ this.children.push(child)
+ this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+ this.container.remove()
+}
+
+//Added the container as the parameter
+function Form() {
+ Compo.call(this, document.createElement('form'))
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+ this.container.reset()
+}
+
+//Added button constructor
+function Button(text, type) {
+ Compo.call(this, document.createElement('button'))
+
+ this.container.innerText = text
+ this.container.type = type
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+
+//Added Label constructor
+function Label(text, id) {
+ Compo.call(this, document.createElement('label'))
+
+ this.container.innerText = text
+ this.container.htmlFor = id
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+//Added input constructor
+function Input(type, id) {
+ Compo.call(this, document.createElement('input'))
+
+ this.container.type = type
+ this.container.id = id
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+//Added getValue and setValue method for inputs
+Input.prototype.getValue = function () {
+ return this.container.value
+}
+
+Input.prototype.setValue = function () {
+ this.container.value = value
+}
+
diff --git a/staff/luis-morlets/unsocial.7/compo.4.js b/staff/luis-morlets/unsocial.7/compo.4.js
new file mode 100644
index 000000000..65874f063
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/compo.4.js
@@ -0,0 +1,77 @@
+function Compo(container) {
+ this.children = []
+ this.container = container
+}
+
+Compo.prototype.add = function (child) {
+ this.children.push(child)
+ this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+ this.container.remove()
+}
+
+//Added the container as the parameter
+function Form() {
+ Compo.call(this, document.createElement('form'))
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+ this.container.reset()
+}
+
+//Added button constructor
+function Button(text, type) {
+ Compo.call(this, document.createElement('button'))
+
+ this.container.innerText = text
+ this.container.type = type
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+
+//Added Label constructor
+function Label(text, id) {
+ Compo.call(this, document.createElement('label'))
+
+ this.container.innerText = text
+ this.container.htmlFor = id
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+//Added input constructor
+function Input(type, id) {
+ Compo.call(this, document.createElement('input'))
+
+ this.container.type = type
+ this.container.id = id
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+//Added getValue and setValue method for inputs
+Input.prototype.getValue = function () {
+ return this.container.value
+}
+
+Input.prototype.setValue = function () {
+ this.container.value = value
+}
+
+//Added Heading constructor
+function Heading(text, level) {
+ Compo.call(this, document.createElement('h' + level))
+
+ this.container.innerText = text
+}
+
+Heading.prototype = Object.create(Compo.prototype)
+Heading.prototype.constructor = Heading
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/compo.5.js b/staff/luis-morlets/unsocial.7/compo.5.js
new file mode 100644
index 000000000..6eb777a94
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/compo.5.js
@@ -0,0 +1,96 @@
+function Compo(container) {
+ this.children = []
+ this.container = container
+}
+
+Compo.prototype.add = function (child) {
+ this.children.push(child)
+ this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+ this.container.remove()
+}
+
+//Added the container as the parameter
+function Form() {
+ Compo.call(this, document.createElement('form'))
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+ this.container.reset()
+}
+
+//Added button constructor
+function Button(text, type) {
+ Compo.call(this, document.createElement('button'))
+
+ this.container.innerText = text
+ this.container.type = type
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+
+//Added Label constructor
+function Label(text, id) {
+ Compo.call(this, document.createElement('label'))
+
+ this.container.innerText = text
+ this.container.htmlFor = id
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+//Added input constructor
+function Input(type, id) {
+ Compo.call(this, document.createElement('input'))
+
+ this.container.type = type
+ this.container.id = id
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+//Added getValue and setValue method for inputs
+Input.prototype.getValue = function () {
+ return this.container.value
+}
+
+Input.prototype.setValue = function () {
+ this.container.value = value
+}
+
+//Added Heading constructor
+function Heading(text, level) {
+ Compo.call(this, document.createElement('h' + level))
+
+ this.container.innerText = text
+}
+
+Heading.prototype = Object.create(Compo.prototype)
+Heading.prototype.constructor = Heading
+
+function Paragraph(text) {
+ Compo.call(this, document.createElement('p'))
+
+ this.container.innerText = text
+}
+
+Paragraph.prototype = Object.create(Compo.prototype)
+Paragraph.prototype.constructor = Paragraph
+
+function Link(text) {
+ Compo.call(this, document.createElement('a'))
+
+ this.container.innerText = text
+ this.container.href = ''
+}
+
+Link.prototype = Object.create(Compo.prototype)
+Link.prototype.constructor = Link
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/compo.js b/staff/luis-morlets/unsocial.7/compo.js
new file mode 100644
index 000000000..f372530f7
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/compo.js
@@ -0,0 +1,95 @@
+function Compo(container) {
+ this.children = []
+ this.container = container
+}
+
+Compo.prototype.add = function (child) {
+ this.children.push(child)
+ this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+ this.container.remove()
+}
+
+//added behavior method to compo
+Compo.prototype.addBehavior = function (type, callback) {
+ this.container.addEventListener(type, callback)
+}
+
+function Form() {
+ Compo.call(this, document.createElement('form'))
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+ this.container.reset()
+}
+
+function Button(text, type) {
+ Compo.call(this, document.createElement('button'))
+
+ this.container.innerText = text
+ this.container.type = type
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+
+function Label(text, id) {
+ Compo.call(this, document.createElement('label'))
+
+ this.container.innerText = text
+ this.container.htmlFor = id
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+function Input(type, id) {
+ Compo.call(this, document.createElement('input'))
+
+ this.container.type = type
+ this.container.id = id
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.getValue = function () {
+ return this.container.value
+}
+
+Input.prototype.setValue = function (value) {
+ this.container.value = value
+}
+
+function Heading(text, level) {
+ Compo.call(this, document.createElement('h' + level))
+
+ this.container.innerText = text
+}
+
+Heading.prototype = Object.create(Compo.prototype)
+Heading.prototype.constructor = Heading
+
+function Paragraph(text) {
+ Compo.call(this, document.createElement('p'))
+
+ this.container.innerText = text
+}
+
+Paragraph.prototype = Object.create(Compo.prototype)
+Paragraph.prototype.constructor = Paragraph
+
+function Link(text) {
+ Compo.call(this, document.createElement('a'))
+
+ this.container.innerText = text
+ this.container.href = ''
+}
+
+Link.prototype = Object.create(Compo.prototype)
+Link.prototype.constructor = Link
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/data.js b/staff/luis-morlets/unsocial.7/data.js
new file mode 100644
index 000000000..7478bdcb7
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/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/luis-morlets/unsocial.7/index.html b/staff/luis-morlets/unsocial.7/index.html
new file mode 100644
index 000000000..a62837f44
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ Unsocial
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/logic.js b/staff/luis-morlets/unsocial.7/logic.js
new file mode 100644
index 000000000..5c3479cd1
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/logic.js
@@ -0,0 +1,47 @@
+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 > 14)
+ throw new Error('invalid username')
+
+
+ if (password.length < 8)
+ 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 aleready exists')
+
+ user = { name: name, email: email, username: username, password: password, passwordRepeat: passwordRepeat }
+
+ users.push(user)
+
+}
+
+function authenticateUser(username, password) {
+ if (username.length < 4 || username.length > 14)
+ throw new Error('invalid username')
+
+ if (password.length < 8)
+ 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, try again')
+
+ return user
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/main.1.js b/staff/luis-morlets/unsocial.7/main.1.js
new file mode 100644
index 000000000..ccd4e44db
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/main.1.js
@@ -0,0 +1,11 @@
+var loggedInUser = null
+
+var body = new Compo(document.querySelector('body'))
+
+var title = document.createElement('h1')
+title.innerText = 'Unsocial'
+body.container.appendChild(title)
+
+var loginSection = buildLoginSection()
+
+body.add(loginSection)
diff --git a/staff/luis-morlets/unsocial.7/main.2.js b/staff/luis-morlets/unsocial.7/main.2.js
new file mode 100644
index 000000000..17339fc04
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/main.2.js
@@ -0,0 +1,10 @@
+var loggedInUser = null
+
+var body = new Compo(document.querySelector('body'))
+
+var title = new Heading('Unsocial', 1)
+body.add(title)
+
+var loginSection = buildLoginSection()
+
+body.add(loginSection)
diff --git a/staff/luis-morlets/unsocial.7/main.js b/staff/luis-morlets/unsocial.7/main.js
new file mode 100644
index 000000000..a6334771f
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/main.js
@@ -0,0 +1,10 @@
+var loggedInUser = null
+
+var body = new Compo(document.querySelector('body'))
+
+var title = new Heading('Unsocial', 1)
+body.add(title)
+
+var login = new Login()
+
+body.add(login)
diff --git a/staff/luis-morlets/unsocial.7/style.css b/staff/luis-morlets/unsocial.7/style.css
new file mode 100644
index 000000000..48a09f271
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/style.css
@@ -0,0 +1,36 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+:root {
+ --color: rgb(170, 60, 43);
+ --font: 'Press Start 2P';
+ font-family: var(--font);
+}
+
+body {
+ background-color: rgb(179, 176, 176);
+ color: var(--color);
+ margin: 50px;
+ min-width: 370px;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ min-width: 100px;
+ width: 300px;
+ gap: 5px;
+}
+
+input {
+ background-color: inherit;
+ font-family: inherit;
+}
+
+button {
+ width: fit-content;
+}
+
+a:visited {
+ color: var(--color);
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/view.1.js b/staff/luis-morlets/unsocial.7/view.1.js
new file mode 100644
index 000000000..8a8e3eaa3
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/view.1.js
@@ -0,0 +1,199 @@
+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 buildForm() {
+ var compo = new Compo(document.createElement('form'))
+
+ return compo
+}
+
+function buildButton(text, type) {
+ var compo = new Compo(document.createElement('button'))
+
+ compo.container.type = type
+ compo.container.innerText = text
+
+ return compo
+}
+
+function buildLoginSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = document.createElement('h2')
+ title.innerText = 'Login'
+ compo.container.appendChild(title)
+
+ var form = buildForm()
+ compo.add(form)
+
+ var usernameField = buildFormField('username', 'Username', 'text')
+ form.container.appendChild(usernameField[0])
+ form.container.appendChild(usernameField[1])
+
+ var passwordField = buildFormField('password', 'Password', 'password')
+ form.container.appendChild(passwordField[0])
+ form.container.appendChild(passwordField[1])
+
+ var submitButton = buildButton('Login', 'submit')
+ form.add(submitButton)
+
+ form.container.addEventListener('submit', function (event) {
+ event.preventDefault()
+
+ var username = usernameField[1].value
+ var password = passwordField[1].value
+
+ try {
+ loggedInUser = authenticateUser(username, password)
+
+ form.reset()
+
+ compo.remove()
+
+ var homeSection = buildHomeSection()
+
+ body.add(homeSection)
+ } catch (error) {
+ passwordField[1].value = ''
+
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = "Don't have an account? "
+ compo.container.appendChild(anchorText)
+
+ var registerLink = document.createElement('a')
+ registerLink.href = ''
+ registerLink.innerText = 'Register'
+ anchorText.appendChild(registerLink)
+
+ registerLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+
+ var registerSection = buildRegisterSection()
+
+ body.add(registerSection)
+ })
+
+ return compo
+}
+
+function buildRegisterSection() {
+ var compo = new Compo(document.createElement('section'))
+
+ var title = document.createElement('h2')
+ title.innerText = 'Register'
+ compo.container.appendChild(title)
+
+ var form = buildForm()
+ compo.add(form)
+
+ var nameField = buildFormField('name', 'Name', 'text')
+ form.container.appendChild(nameField[0])
+ form.container.appendChild(nameField[1])
+
+ var emailField = buildFormField('email', 'E-mail', 'email')
+ form.container.appendChild(emailField[0])
+ form.container.appendChild(emailField[1])
+
+ var usernameField = buildFormField('username', 'Username', 'text')
+ form.container.appendChild(usernameField[0])
+ form.container.appendChild(usernameField[1])
+
+ var passwordField = buildFormField('password', 'Password', 'password')
+ form.container.appendChild(passwordField[0])
+ form.container.appendChild(passwordField[1])
+
+ var repeatPasswordField = buildFormField('password-repeat', 'Repeat Password', 'password')
+ form.container.appendChild(repeatPasswordField[0])
+ form.container.appendChild(repeatPasswordField[1])
+
+ var submitButton = buildButton('Register', 'submit')
+ form.container.appendChild(submitButton.container)
+
+ form.container.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 = repeatPasswordField[1].value
+
+ try {
+ registerUser(name, email, username, password, passwordRepeat)
+
+ form.reset()
+
+ compo.remove()
+
+ body.add(loginSection)
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = 'Already have an account? '
+ compo.container.appendChild(anchorText)
+
+ var loginLink = document.createElement('a')
+ loginLink.href = ''
+ loginLink.innerText = 'Login'
+ anchorText.appendChild(loginLink)
+
+ loginLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+ body.add(loginSection)
+ })
+ return compo
+}
+
+function buildHomeSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = document.createElement('h2')
+ title.innerText = 'Home'
+ compo.container.appendChild(title)
+
+ var greeting = document.createElement('h3')
+ greeting.innerText = "Hey " + loggedInUser.name + ", you're finally awake!"
+ compo.container.appendChild(greeting)
+
+ var logoutButton = buildButton('Logout', 'button')
+ compo.add(logoutButton)
+
+ logoutButton.container.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ compo.remove()
+
+ body.add(loginSection)
+ })
+
+ return compo
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/view.2.js b/staff/luis-morlets/unsocial.7/view.2.js
new file mode 100644
index 000000000..c16d9c70a
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/view.2.js
@@ -0,0 +1,185 @@
+function buildLoginSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = document.createElement('h2')
+ title.innerText = 'Login'
+ compo.container.appendChild(title)
+
+ //added
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ var submitButton = new Button('Login', 'submit') //till here
+ form.add(submitButton)
+
+ form.container.addEventListener('submit', function (event) {
+ event.preventDefault()
+
+ var username = usernameInput.getValue() //added
+ var password = passwordInput.getValue() //added
+
+ try {
+ loggedInUser = authenticateUser(username, password)
+
+ form.reset()
+
+ compo.remove()
+
+ var homeSection = buildHomeSection()
+
+ body.add(homeSection)
+ } catch (error) {
+ passwordInput.setValue('')
+
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = "Don't have an account? "
+ compo.container.appendChild(anchorText)
+
+ var registerLink = document.createElement('a')
+ registerLink.href = ''
+ registerLink.innerText = 'Register'
+ anchorText.appendChild(registerLink)
+
+ registerLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+
+ var registerSection = buildRegisterSection()
+
+ body.add(registerSection)
+ })
+
+ return compo
+}
+
+function buildRegisterSection() {
+ var compo = new Compo(document.createElement('section'))
+
+ var title = document.createElement('h2')
+ title.innerText = 'Register'
+ compo.container.appendChild(title)
+
+ //added
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Name', 'name'))
+ var nameInput = new Input('text', 'name')
+ form.add(nameInput)
+
+ form.add(new Label('E-mail', 'email'))
+ var emailInput = new Input('email', 'email')
+ form.add(emailInput)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ form.add(new Label('Repeat Password', 'password-repeat'))
+ var passwordRepeatInput = new Input('password', 'password-repeat')
+ form.add(passwordRepeatInput)
+
+ var submitButton = new Button('Register', 'submit') //till here
+ form.add(submitButton)
+
+ form.container.addEventListener('submit', function (event) {
+ event.preventDefault()
+
+ //var name = form.container.name.value
+ //var name = event.target.name.value
+ //var name = this.name.value
+ //var name = nameInput.container.value
+ var name = nameInput.getValue()
+ //var email = this.email.value
+ //var email = emailInput.container.value
+ var email = emailInput.getValue()
+ //var username = this.username.value
+ //var username = usernameInput.container.value
+ var username = usernameInput.getValue()
+ //var password = this.password.value
+ //var password = passwordInput.container.value
+ var password = passwordInput.getValue()
+ //var passwordRepeat = this['password-repeat'].value
+ //var passwordRepeat = passwordRepeatInput.container.value
+ var passwordRepeat = passwordRepeatInput.getValue()
+
+ try {
+ registerUser(name, email, username, password, passwordRepeat)
+
+ form.reset()
+
+ compo.remove()
+
+ body.add(loginSection)
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = 'Already have an account? '
+ compo.container.appendChild(anchorText)
+
+ var loginLink = document.createElement('a')
+ loginLink.href = ''
+ loginLink.innerText = 'Login'
+ anchorText.appendChild(loginLink)
+
+ loginLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+ body.add(loginSection)
+ })
+ return compo
+}
+
+function buildHomeSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = document.createElement('h2')
+ title.innerText = 'Home'
+ compo.container.appendChild(title)
+
+ var greeting = document.createElement('h3')
+ greeting.innerText = "Hey " + loggedInUser.name + ", you're finally awake!"
+ compo.container.appendChild(greeting)
+
+ var logoutButton = new Button('Logout', 'button') //added
+ compo.add(logoutButton)
+
+ logoutButton.container.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ compo.remove()
+
+ body.add(loginSection)
+ })
+
+ return compo
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/view.3.js b/staff/luis-morlets/unsocial.7/view.3.js
new file mode 100644
index 000000000..d9d3216ef
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/view.3.js
@@ -0,0 +1,169 @@
+function buildLoginSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ //added
+ var title = new Heading('Login', 2)
+ compo.add(title)
+ //till here
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ var submitButton = new Button('Login', 'submit')
+ form.add(submitButton)
+
+ form.container.addEventListener('submit', function (event) {
+ event.preventDefault()
+
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+
+ try {
+ loggedInUser = authenticateUser(username, password)
+
+ form.reset()
+
+ compo.remove()
+
+ var homeSection = buildHomeSection()
+
+ body.add(homeSection)
+ } catch (error) {
+ passwordInput.setValue('')
+
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = "Don't have an account? "
+ compo.container.appendChild(anchorText)
+
+ var registerLink = document.createElement('a')
+ registerLink.href = ''
+ registerLink.innerText = 'Register'
+ anchorText.appendChild(registerLink)
+
+ registerLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+
+ var registerSection = buildRegisterSection()
+
+ body.add(registerSection)
+ })
+
+ return compo
+}
+
+function buildRegisterSection() {
+ var compo = new Compo(document.createElement('section'))
+
+ var title = new Heading('Register', 2)
+ compo.add(title)
+
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Name', 'name'))
+ var nameInput = new Input('text', 'name')
+ form.add(nameInput)
+
+ form.add(new Label('E-mail', 'email'))
+ var emailInput = new Input('email', 'email')
+ form.add(emailInput)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ form.add(new Label('Repeat Password', 'password-repeat'))
+ var passwordRepeatInput = new Input('password', 'password-repeat')
+ form.add(passwordRepeatInput)
+
+ var submitButton = new Button('Register', 'submit')
+ form.add(submitButton)
+
+ form.container.addEventListener('submit', function (event) {
+ event.preventDefault()
+
+
+ var name = nameInput.getValue()
+ var email = emailInput.getValue()
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+ var passwordRepeat = passwordRepeatInput.getValue()
+
+ try {
+ registerUser(name, email, username, password, passwordRepeat)
+
+ form.reset()
+
+ compo.remove()
+
+ body.add(loginSection)
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = 'Already have an account? '
+ compo.container.appendChild(anchorText)
+
+ var loginLink = document.createElement('a')
+ loginLink.href = ''
+ loginLink.innerText = 'Login'
+ anchorText.appendChild(loginLink)
+
+ loginLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+ body.add(loginSection)
+ })
+ return compo
+}
+
+function buildHomeSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = new Heading('Home', 2)
+ compo.add(title)
+
+ var greeting = new Heading("Hey " + loggedInUser.name + ", you're finally awake!")
+ compo.add(greeting)
+
+ var logoutButton = new Button('Logout', 'button')
+ compo.add(logoutButton)
+
+ logoutButton.container.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ compo.remove()
+
+ body.add(loginSection)
+ })
+
+ return compo
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/view.4.js b/staff/luis-morlets/unsocial.7/view.4.js
new file mode 100644
index 000000000..2232373cb
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/view.4.js
@@ -0,0 +1,162 @@
+function buildLoginSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = new Heading('Login', 2)
+ compo.add(title)
+
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ var submitButton = new Button('Login', 'submit')
+ form.add(submitButton)
+
+ form.container.addEventListener('submit', function (event) {
+ event.preventDefault()
+
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+
+ try {
+ loggedInUser = authenticateUser(username, password)
+
+ form.reset()
+
+ compo.remove()
+
+ var homeSection = buildHomeSection()
+
+ body.add(homeSection)
+ } catch (error) {
+ passwordInput.setValue('')
+
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = new Paragraph("Don't have an account? ")
+ compo.add(anchorText)
+
+ var registerLink = new Link('Register')
+ anchorText.add(registerLink)
+
+ registerLink.container.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+
+ var registerSection = buildRegisterSection()
+
+ body.add(registerSection)
+ })
+
+ return compo
+}
+
+function buildRegisterSection() {
+ var compo = new Compo(document.createElement('section'))
+
+ var title = new Heading('Register', 2)
+ compo.add(title)
+
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Name', 'name'))
+ var nameInput = new Input('text', 'name')
+ form.add(nameInput)
+
+ form.add(new Label('E-mail', 'email'))
+ var emailInput = new Input('email', 'email')
+ form.add(emailInput)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ form.add(new Label('Repeat Password', 'password-repeat'))
+ var passwordRepeatInput = new Input('password', 'password-repeat')
+ form.add(passwordRepeatInput)
+
+ var submitButton = new Button('Register', 'submit')
+ form.add(submitButton)
+
+ form.container.addEventListener('submit', function (event) {
+ event.preventDefault()
+
+
+ var name = nameInput.getValue()
+ var email = emailInput.getValue()
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+ var passwordRepeat = passwordRepeatInput.getValue()
+
+ try {
+ registerUser(name, email, username, password, passwordRepeat)
+
+ form.reset()
+
+ compo.remove()
+
+ body.add(loginSection)
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = new Paragraph('Already have an account? ')
+ compo.add(anchorText)
+
+ var loginLink = new Link('Login')
+ anchorText.add(loginLink)
+
+ loginLink.container.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+ body.add(loginSection)
+ })
+ return compo
+}
+
+function buildHomeSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = new Heading('Home', 2)
+ compo.add(title)
+
+ var greeting = new Heading("Hey " + loggedInUser.name + ", you're finally awake!")
+ compo.add(greeting)
+
+ var logoutButton = new Button('Logout', 'button')
+ compo.add(logoutButton)
+
+ logoutButton.container.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ compo.remove()
+
+ body.add(loginSection)
+ })
+
+ return compo
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/view.5.js b/staff/luis-morlets/unsocial.7/view.5.js
new file mode 100644
index 000000000..6de00e5af
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/view.5.js
@@ -0,0 +1,162 @@
+function buildLoginSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = new Heading('Login', 2)
+ compo.add(title)
+
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ var submitButton = new Button('Login', 'submit')
+ form.add(submitButton)
+
+ //added behavior method on view
+ form.addBehavior('submit', function (event) {
+ event.preventDefault()
+
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+
+ try {
+ loggedInUser = authenticateUser(username, password)
+
+ form.reset()
+
+ compo.remove()
+
+ var homeSection = buildHomeSection()
+
+ body.add(homeSection)
+ } catch (error) {
+ passwordInput.setValue('')
+
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = new Paragraph("Don't have an account? ")
+ compo.add(anchorText)
+
+ var registerLink = new Link('Register')
+ anchorText.add(registerLink)
+
+ registerLink.addBehavior('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+
+ var registerSection = buildRegisterSection()
+
+ body.add(registerSection)
+ })
+
+ return compo
+}
+
+function buildRegisterSection() {
+ var compo = new Compo(document.createElement('section'))
+
+ var title = new Heading('Register', 2)
+ compo.add(title)
+
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Name', 'name'))
+ var nameInput = new Input('text', 'name')
+ form.add(nameInput)
+
+ form.add(new Label('E-mail', 'email'))
+ var emailInput = new Input('email', 'email')
+ form.add(emailInput)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ form.add(new Label('Repeat Password', 'password-repeat'))
+ var passwordRepeatInput = new Input('password', 'password-repeat')
+ form.add(passwordRepeatInput)
+
+ var submitButton = new Button('Register', 'submit')
+ form.add(submitButton)
+
+ form.addBehavior('submit', function (event) {
+ event.preventDefault()
+
+ var name = nameInput.getValue()
+ var email = emailInput.getValue()
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+ var passwordRepeat = passwordRepeatInput.getValue()
+
+ try {
+ registerUser(name, email, username, password, passwordRepeat)
+
+ form.reset()
+
+ compo.remove()
+
+ body.add(loginSection)
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = new Paragraph('Already have an account? ')
+ compo.add(anchorText)
+
+ var loginLink = new Link('Login')
+ anchorText.add(loginLink)
+
+ loginLink.addBehavior('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+ body.add(loginSection)
+ })
+ return compo
+}
+
+function buildHomeSection() {
+
+ var compo = new Compo(document.createElement('section'))
+
+ var title = new Heading('Home', 2)
+ compo.add(title)
+
+ var greeting = new Heading("Hey " + loggedInUser.name + ", you're finally awake!")
+ compo.add(greeting)
+
+ var logoutButton = new Button('Logout', 'button')
+ compo.add(logoutButton)
+
+ logoutButton.addBehavior('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ compo.remove()
+
+ body.add(loginSection)
+ })
+
+ return compo
+}
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial.7/view.js b/staff/luis-morlets/unsocial.7/view.js
new file mode 100644
index 000000000..1bd534c0b
--- /dev/null
+++ b/staff/luis-morlets/unsocial.7/view.js
@@ -0,0 +1,172 @@
+function Login() {
+
+ Compo.call(this, document.createElement('section'))
+
+ var compo = this
+
+ var title = new Heading('Login', 2)
+ compo.add(title)
+
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ var submitButton = new Button('Login', 'submit')
+ form.add(submitButton)
+
+ form.addBehavior('submit', function (event) {
+ event.preventDefault()
+
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+
+ try {
+ loggedInUser = authenticateUser(username, password)
+
+ form.reset()
+
+ compo.remove()
+
+ var home = new Home()
+
+ body.add(home)
+ } catch (error) {
+ passwordInput.setValue('')
+
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = new Paragraph("Don't have an account? ")
+ compo.add(anchorText)
+
+ var registerLink = new Link('Register')
+ anchorText.add(registerLink)
+
+ registerLink.addBehavior('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+
+ var register = new Register()
+
+ body.add(register)
+ })
+}
+
+Login.prototype = Object.create(Compo.prototype)
+Login.prototype.constructor = Login
+
+function Register() {
+
+ Compo.call(this, document.createElement('section'))
+
+ var compo = this
+
+ var title = new Heading('Register', 2)
+ compo.add(title)
+
+ var form = new Form()
+ compo.add(form)
+
+ form.add(new Label('Name', 'name'))
+ var nameInput = new Input('text', 'name')
+ form.add(nameInput)
+
+ form.add(new Label('E-mail', 'email'))
+ var emailInput = new Input('email', 'email')
+ form.add(emailInput)
+
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
+
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
+
+ form.add(new Label('Repeat Password', 'password-repeat'))
+ var passwordRepeatInput = new Input('password', 'password-repeat')
+ form.add(passwordRepeatInput)
+
+ var submitButton = new Button('Register', 'submit')
+ form.add(submitButton)
+
+ form.addBehavior('submit', function (event) {
+ event.preventDefault()
+
+ var name = nameInput.getValue()
+ var email = emailInput.getValue()
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+ var passwordRepeat = passwordRepeatInput.getValue()
+
+ try {
+ registerUser(name, email, username, password, passwordRepeat)
+
+ form.reset()
+
+ compo.remove()
+
+ body.add(login)
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+
+ var anchorText = new Paragraph('Already have an account? ')
+ compo.add(anchorText)
+
+ var loginLink = new Link('Login')
+ anchorText.add(loginLink)
+
+ loginLink.addBehavior('click', function (event) {
+ event.preventDefault()
+
+ compo.remove()
+ body.add(login)
+ })
+}
+
+Register.prototype = Object.create(Compo.prototype)
+Register.prototype.constructor = Register
+
+function Home() {
+
+ Compo.call(this, document.createElement('section'))
+
+ var compo = this
+
+ var title = new Heading('Home', 2)
+ compo.add(title)
+
+ var greeting = new Heading("Hey " + loggedInUser.name + ", you're finally awake!", 3)
+ compo.add(greeting)
+
+ var logoutButton = new Button('Logout', 'button')
+ compo.add(logoutButton)
+
+ logoutButton.addBehavior('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ compo.remove()
+
+ body.add(login)
+ })
+}
+
+Home.prototype = Object.create(Compo.prototype)
+Home.prototype.constructor = Home
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial/compo.js b/staff/luis-morlets/unsocial/compo.js
index d88f89bbc..8f451bc0f 100644
--- a/staff/luis-morlets/unsocial/compo.js
+++ b/staff/luis-morlets/unsocial/compo.js
@@ -1,3 +1,8 @@
+/**
+ * Constructs Compo instances
+ *
+ * @param {HTMLElement} container The DOM container of the Compo instance
+ */
function Compo(container) {
this.children = []
this.container = container
@@ -6,4 +11,126 @@ function Compo(container) {
Compo.prototype.add = function (child) {
this.children.push(child)
this.container.appendChild(child.container)
-}
\ No newline at end of file
+}
+
+Compo.prototype.remove = function () {
+ this.container.remove()
+}
+
+Compo.prototype.addBehavior = function (type, callback) {
+ this.container.addEventListener(type, callback)
+}
+
+/**
+ * Constructs Form instances
+ */
+function Form() {
+ Compo.call(this, document.createElement('form'))
+}
+
+Form.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+ this.container.reset()
+}
+
+/**
+ * Constructs Button instances
+ *
+ * @param {string} text The text of the button
+ * @param {string} type The button type
+ */
+function Button(text, type) {
+ Compo.call(this, document.createElement('button'))
+
+ this.container.innerText = text
+ this.container.type = type
+}
+
+Button.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+
+/**
+ * Constructs Label instances
+ *
+ * @param {string} text The text of the label
+ * @param {string} id The id of the input to relate with
+ */
+function Label(text, id) {
+ Compo.call(this, document.createElement('label'))
+
+ this.container.innerText = text
+ this.container.htmlFor = id
+}
+
+Label.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+
+/**
+ * Constructs Input instances
+ *
+ * @param {string} type The input type
+ * @param {string} id The input id
+ */
+function Input(type, id) {
+ Compo.call(this, document.createElement('input'))
+
+ this.container.type = type
+ this.container.id = id
+}
+
+Input.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.getValue = function () {
+ return this.container.value
+}
+
+Input.prototype.setValue = function (value) {
+ this.container.value = value
+}
+
+/**
+ * Constructs Heading instances
+ *
+ * @param {string} text The text of the heading
+ * @param {number} level The heading level
+ */
+function Heading(text, level) {
+ Compo.call(this, document.createElement('h' + level))
+
+ this.container.innerText = text
+}
+
+Heading.prototype = Object.create(Compo.prototype)
+Heading.prototype.constructor = Heading
+
+/**
+ * Contructs Paragraph instances
+ *
+ * @param {string} text The paragrahp text
+ */
+function Paragraph(text) {
+ Compo.call(this, document.createElement('p'))
+
+ this.container.innerText = text
+}
+
+Paragraph.prototype = Object.create(Compo.prototype)
+Paragraph.prototype.constructor = Paragraph
+
+/**
+ * Constructs Link instances
+ *
+ * @param {string} text The text of the link
+ */
+function Link(text) {
+ Compo.call(this, document.createElement('a'))
+
+ this.container.innerText = text
+ this.container.href = ''
+}
+
+Link.prototype = Object.create(Compo.prototype)
+Link.prototype.constructor = Link
\ No newline at end of file
diff --git a/staff/luis-morlets/unsocial/index.html b/staff/luis-morlets/unsocial/index.html
index 5721dbf8d..a62837f44 100644
--- a/staff/luis-morlets/unsocial/index.html
+++ b/staff/luis-morlets/unsocial/index.html
@@ -10,8 +10,6 @@
- Unsocial
-
diff --git a/staff/luis-morlets/unsocial/main.js b/staff/luis-morlets/unsocial/main.js
index 351ace0ec..5643c4a29 100644
--- a/staff/luis-morlets/unsocial/main.js
+++ b/staff/luis-morlets/unsocial/main.js
@@ -1,6 +1,10 @@
var loggedInUser = null
-var loginSection = buildLoginSection()
+var page = new Compo(document.querySelector('body'))
-var body = new Compo(document.querySelector('body'))
-body.add(loginSection)
+var title = new Heading('Unsocial', 1)
+page.add(title)
+
+var login = new Login()
+
+page.add(login)
diff --git a/staff/luis-morlets/unsocial/view.js b/staff/luis-morlets/unsocial/view.js
index 819513b1a..547f2df66 100644
--- a/staff/luis-morlets/unsocial/view.js
+++ b/staff/luis-morlets/unsocial/view.js
@@ -1,66 +1,47 @@
-function buildFormField(id, text, type) {
- var label = document.createElement('label')
- label.htmlFor = id
- label.innerText = text
+/**
+ * Constructs Login instances
+ */
+function Login() {
- var input = document.createElement('input')
- input.type = type
- input.id = id
- input.required = true
+ Compo.call(this, document.createElement('section'))
- return [label, input]
-}
-
-function buildButton(text, type) {
- var button = document.createElement('button')
- button.type = type
- button.innerText = text
-
- return button
-}
-
-function buildLoginSection() {
-
- var compo = new Compo(document.createElement('section'))
+ var compo = this
- var section = compo.container
+ var title = new Heading('Login', 2)
+ compo.add(title)
- var title = document.createElement('h2')
- title.innerText = 'Login'
- section.appendChild(title)
+ var form = new Form()
+ compo.add(form)
- var form = document.createElement('form')
- section.appendChild(form)
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
- var usernameField = buildFormField('username', 'Username', 'text')
- form.appendChild(usernameField[0])
- form.appendChild(usernameField[1])
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
- var passwordField = buildFormField('password', 'Password', 'password')
- form.appendChild(passwordField[0])
- form.appendChild(passwordField[1])
+ var submitButton = new Button('Login', 'submit')
+ form.add(submitButton)
- var submitButton = buildButton('Login', 'submit')
- form.appendChild(submitButton)
-
- form.addEventListener('submit', function (event) {
+ form.addBehavior('submit', function (event) {
event.preventDefault()
- var username = usernameField[1].value
- var password = passwordField[1].value
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
try {
loggedInUser = authenticateUser(username, password)
form.reset()
- section.remove()
+ compo.remove()
- var homeSection = buildHomeSection()
+ var home = new Home()
- body.add(homeSection)
+ page.add(home)
} catch (error) {
- passwordField[1].value = ''
+ passwordInput.setValue('')
alert(error.message)
@@ -68,80 +49,81 @@ function buildLoginSection() {
}
})
- var anchorText = document.createElement('p')
- anchorText.innerText = "Don't have an account? "
- section.appendChild(anchorText)
+ var anchorText = new Paragraph("Don't have an account? ")
+ compo.add(anchorText)
- var registerLink = document.createElement('a')
- registerLink.href = ''
- registerLink.innerText = 'Register'
- anchorText.appendChild(registerLink)
+ var registerLink = new Link('Register')
+ anchorText.add(registerLink)
- registerLink.addEventListener('click', function (event) {
+ registerLink.addBehavior('click', function (event) {
event.preventDefault()
- section.remove()
+ compo.remove()
- var registerSection = buildRegisterSection()
+ var register = new Register()
- body.add(registerSection)
+ page.add(register)
})
-
- return compo
}
-function buildRegisterSection() {
- var compo = new Compo(document.createElement('section'))
+Login.prototype = Object.create(Compo.prototype)
+Login.prototype.constructor = Login
+
+/**
+ * Construcs Register instances
+ */
+function Register() {
- var section = compo.container
+ Compo.call(this, document.createElement('section'))
- var title = document.createElement('h2')
- title.innerText = 'Register'
- section.appendChild(title)
+ var compo = this
- var form = document.createElement('form')
- section.appendChild(form)
+ var title = new Heading('Register', 2)
+ compo.add(title)
- var nameField = buildFormField('name', 'Name', 'text')
- form.appendChild(nameField[0])
- form.appendChild(nameField[1])
+ var form = new Form()
+ compo.add(form)
- var emailField = buildFormField('email', 'E-mail', 'email')
- form.appendChild(emailField[0])
- form.appendChild(emailField[1])
+ form.add(new Label('Name', 'name'))
+ var nameInput = new Input('text', 'name')
+ form.add(nameInput)
- var usernameField = buildFormField('username', 'Username', 'text')
- form.appendChild(usernameField[0])
- form.appendChild(usernameField[1])
+ form.add(new Label('E-mail', 'email'))
+ var emailInput = new Input('email', 'email')
+ form.add(emailInput)
- var passwordField = buildFormField('password', 'Password', 'password')
- form.appendChild(passwordField[0])
- form.appendChild(passwordField[1])
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
- var repeatPasswordField = buildFormField('password-repeat', 'Repeat Password', 'password')
- form.appendChild(repeatPasswordField[0])
- form.appendChild(repeatPasswordField[1])
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new Input('password', 'password')
+ form.add(passwordInput)
- var submitButton = buildButton('Register', 'submit')
- form.appendChild(submitButton)
+ form.add(new Label('Repeat Password', 'password-repeat'))
+ var passwordRepeatInput = new Input('password', 'password-repeat')
+ form.add(passwordRepeatInput)
- form.addEventListener('submit', function (event) {
+ var submitButton = new Button('Register', 'submit')
+ form.add(submitButton)
+
+ form.addBehavior('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 = repeatPasswordField[1].value
+ var name = nameInput.getValue()
+ var email = emailInput.getValue()
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+ var passwordRepeat = passwordRepeatInput.getValue()
try {
registerUser(name, email, username, password, passwordRepeat)
form.reset()
- section.remove()
+ compo.remove()
- body.add(loginSection)
+ page.add(login)
} catch (error) {
alert(error.message)
@@ -149,51 +131,51 @@ function buildRegisterSection() {
}
})
- var anchorText = document.createElement('p')
- anchorText.innerText = 'Already have an account? '
- section.appendChild(anchorText)
+ var anchorText = new Paragraph('Already have an account? ')
+ compo.add(anchorText)
- var loginLink = document.createElement('a')
- loginLink.href = ''
- loginLink.innerText = 'Login'
- anchorText.appendChild(loginLink)
+ var loginLink = new Link('Login')
+ anchorText.add(loginLink)
- loginLink.addEventListener('click', function (event) {
+ loginLink.addBehavior('click', function (event) {
event.preventDefault()
- section.remove()
- body.add(loginSection)
+ compo.remove()
+ page.add(login)
})
- return compo
}
-function buildHomeSection() {
+Register.prototype = Object.create(Compo.prototype)
+Register.prototype.constructor = Register
+
+/**
+ * Constructs Home instances
+ */
+function Home() {
- var compo = new Compo(document.createElement('section'))
+ Compo.call(this, document.createElement('section'))
- var section = compo.container
+ var compo = this
- var title = document.createElement('h2')
- title.innerText = 'Home'
- section.appendChild(title)
+ var title = new Heading('Home', 2)
+ compo.add(title)
- var greeting = document.createElement('h3')
- greeting.innerText = "Hey " + loggedInUser.name + ", you're finally awake!"
- section.appendChild(greeting)
+ var greeting = new Heading("Hey " + loggedInUser.name + ", you're finally awake!", 3)
+ compo.add(greeting)
- var logoutButton = document.createElement('button')
- logoutButton.innerText = 'Logout'
- section.appendChild(logoutButton)
+ var logoutButton = new Button('Logout', 'button')
+ compo.add(logoutButton)
- logoutButton.addEventListener('click', function (event) {
+ logoutButton.addBehavior('click', function (event) {
event.preventDefault()
loggedInUser = null
- section.remove()
+ compo.remove()
- body.add(loginSection)
+ page.add(login)
})
+}
- return compo
-}
\ No newline at end of file
+Home.prototype = Object.create(Compo.prototype)
+Home.prototype.constructor = Home
\ No newline at end of file