diff --git a/staff/aleix-palau/unsocial/.gitkeep b/staff/aleix-palau/unsocial.4/.gitkeep
similarity index 100%
rename from staff/aleix-palau/unsocial/.gitkeep
rename to staff/aleix-palau/unsocial.4/.gitkeep
diff --git a/staff/aleix-palau/unsocial.4/compo.js b/staff/aleix-palau/unsocial.4/compo.js
new file mode 100644
index 00000000..d88f89bb
--- /dev/null
+++ b/staff/aleix-palau/unsocial.4/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/aleix-palau/unsocial.4/data.js b/staff/aleix-palau/unsocial.4/data.js
new file mode 100644
index 00000000..b25de723
--- /dev/null
+++ b/staff/aleix-palau/unsocial.4/data.js
@@ -0,0 +1,4 @@
+var users = [
+ { name: 'Forrest Gump', email: 'forrest_gump@runner.com', username: 'runner4life', password: '123123' },
+ { name: 'Luke Skywalker', email: 'luke_skywalker@maythe4th.com', username: 'orphanWannabe', password: 'urnotmyfather' },
+]
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial.4/index.html b/staff/aleix-palau/unsocial.4/index.html
new file mode 100644
index 00000000..15d74518
--- /dev/null
+++ b/staff/aleix-palau/unsocial.4/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+ UN$0C14L
+
+
+
+
+
+ UN$0C14L
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial.4/logic.js b/staff/aleix-palau/unsocial.4/logic.js
new file mode 100644
index 00000000..d7e1118f
--- /dev/null
+++ b/staff/aleix-palau/unsocial.4/logic.js
@@ -0,0 +1,46 @@
+// REGISTER FORM FUNCTION
+function registerUser(name, email, username, password, passwordRepeat) {
+ if (name.length < 2)
+ throw new Error('invalid name')
+
+ if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
+ throw new Error('invalid e-mail')
+
+ if (username.length < 4 || username.length > 12)
+ throw new Error('invalid username')
+
+ if (password.length < 6)
+ throw new Error('invalid password')
+
+ if (password !== passwordRepeat)
+ throw new Error('passwords do not match')
+
+ var user = users.find(function (user) {
+ return user.username === username || user.email === email
+ })
+
+ if (user !== undefined)
+ throw new Error('user already exists')
+
+ user = { name: name, email: email, username: username, password: password }
+
+ users.push(user)
+}
+
+// LOGIN FORM FUNCTION
+function authenticateUser(username, password) {
+ if (username.length < 4 || username.length > 12)
+ throw new Error('invalid username')
+
+ if (password.length < 6)
+ throw new Error('invalid password')
+
+ var user = users.find(function (user) {
+ return user.username === username && user.password === password
+ })
+
+ if (user === undefined)
+ throw new Error('wrong credentials')
+
+ return user
+}
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial.4/main.js b/staff/aleix-palau/unsocial.4/main.js
new file mode 100644
index 00000000..70b254fe
--- /dev/null
+++ b/staff/aleix-palau/unsocial.4/main.js
@@ -0,0 +1,6 @@
+var loggedInUser = null
+
+var loginSection = buildLoginSection()
+
+var body = new Compo(document.querySelector('body'))
+body.add(loginSection)
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial.4/style.css b/staff/aleix-palau/unsocial.4/style.css
new file mode 100644
index 00000000..2f9c535d
--- /dev/null
+++ b/staff/aleix-palau/unsocial.4/style.css
@@ -0,0 +1,74 @@
+@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');
+
+:root {
+ --color: lime;
+ --font: 'Tiny5';
+ font-family: var(--font);
+}
+
+body {
+ background-color: #111;
+ color: var(--color);
+ font-family: var(--font);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0;
+}
+
+h1 {
+ font-size: 4.25rem;
+ margin: 2rem 0 1rem 0;
+}
+
+section {
+ background-color: #111;
+ padding: 0.75rem 2rem 2rem 2rem;
+ margin: 1rem 0;
+ border: 1px solid var(--color);
+ width: 300px;
+ border-radius: 8px;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ font-family: inherit;
+}
+
+label {
+ margin-top: 1rem;
+}
+
+input {
+ background-color: #222;
+ color: var(--color);
+ border: 1px solid var(--color);
+ padding: 0.5rem;
+ margin-top: 0.5rem;
+ border-radius: 4px;
+ font-family: inherit;
+}
+
+button {
+ background-color: var(--color);
+ color: #222;
+ border: none;
+ padding: 0.75rem;
+ margin-top: 1.5rem;
+ cursor: pointer;
+ border-radius: 4px;
+ font-weight: bold;
+ font-family: inherit;
+}
+
+a {
+ color: var(--color);
+ text-decoration: none;
+ margin-top: 1rem;
+ display: inline-block;
+}
+
+a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial.4/view.js b/staff/aleix-palau/unsocial.4/view.js
new file mode 100644
index 00000000..c952c907
--- /dev/null
+++ b/staff/aleix-palau/unsocial.4/view.js
@@ -0,0 +1,190 @@
+function buildFormField(id, text, type) {
+ var label = document.createElement('label')
+ label.htmlFor = id
+ label.innerText = text
+
+ var input = document.createElement('input')
+ input.type = type
+ input.id = id
+ input.required = true
+
+ return [label, input]
+}
+
+function buildButton(text, type) {
+ var button = document.createElement('button')
+ button.type = type
+ button.innerText = text
+
+ return button
+}
+
+function buildHomeSection() {
+ var compo = new Compo(document.createElement('section'))
+
+ var section = compo.container
+
+ var title = document.createElement('h2')
+ title.innerText = 'Home'
+ section.appendChild(title)
+
+ var userTitle = document.createElement('h3')
+ userTitle.innerText = 'Hello, ' + loggedInUser.username + '!'
+ section.appendChild(userTitle)
+
+ var logoutButton = buildButton('Logout', 'button')
+ section.appendChild(logoutButton)
+
+ logoutButton.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ section.remove()
+
+ body.add(loginSection)
+ })
+
+ 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 passwordRepeatField = buildFormField('password-repeat', 'Repeat password', 'password')
+ form.appendChild(passwordRepeatField[0])
+ form.appendChild(passwordRepeatField[1])
+
+ var submitButton = buildButton('Register', 'submit')
+ form.appendChild(submitButton)
+
+ form.addEventListener('submit', function (event) {
+ event.preventDefault()
+
+ var name = nameField[1].value
+ var email = emailField[1].value
+ var username = usernameField[1].value
+ var password = passwordField[1].value
+ var passwordRepeat = passwordRepeatField[1].value
+
+ try {
+ registerUser(name, email, username, password, passwordRepeat)
+
+ form.reset()
+
+ section.remove()
+
+ body.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 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 registerLink = document.createElement('a')
+ registerLink.href = ''
+ registerLink.innerText = 'Register'
+ section.appendChild(registerLink)
+
+ registerLink.addEventListener('click', function (event) {
+ event.preventDefault()
+
+ section.remove()
+
+ var registerSection = buildRegisterSection()
+
+ body.add(registerSection)
+ })
+
+ return compo
+}
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial/compo.demo.html b/staff/aleix-palau/unsocial/compo.demo.html
new file mode 100644
index 00000000..51961149
--- /dev/null
+++ b/staff/aleix-palau/unsocial/compo.demo.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Compo v0.0.0
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial/compo.demo.js b/staff/aleix-palau/unsocial/compo.demo.js
new file mode 100644
index 00000000..3b3bce34
--- /dev/null
+++ b/staff/aleix-palau/unsocial/compo.demo.js
@@ -0,0 +1,28 @@
+var page = new Compo(document.body)
+
+var title = new Heading('Compo', 1)
+page.add(title)
+
+{
+ var inputTitle = new Heading('Input', 2)
+ page.add(inputTitle)
+
+ var input = new Input('password', 'password')
+ page.add(input)
+}
+
+{
+ var linkTitle = new Heading('Link', 2)
+ page.add(linkTitle)
+
+ var link = new Link('Google')
+ page.add(link)
+}
+
+{
+ var passwordInputTitle = new Heading('PasswordInput', 2)
+ page.add(passwordInputTitle)
+
+ var passwordInput = new PasswordInput('password')
+ page.add(passwordInput)
+}
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial/compo.js b/staff/aleix-palau/unsocial/compo.js
index d88f89bb..a1d33009 100644
--- a/staff/aleix-palau/unsocial/compo.js
+++ b/staff/aleix-palau/unsocial/compo.js
@@ -1,9 +1,283 @@
+/**
+ * Constructs Compo instances
+ *
+ * @param {HTMLElement} container The DOM container of the Compo instance
+ */
function Compo(container) {
this.children = []
this.container = container
+ this.parent = null
}
Compo.prototype.add = function (child) {
this.children.push(child)
+ child.parent = this
+
this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+ var index = this.parent.children.findIndex(function (child) {
+ return child === this
+ }.bind(this))
+
+ if (index > -1)
+ this.parent.children.splice(index, 1)
+
+ 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.style.width = '100%'
+ this.container.style.boxSizing = 'border-box'
+
+ 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
+}
+
+Input.prototype.getType = function () {
+ return this.container.type
+}
+
+Input.prototype.setType = function (type) {
+ this.container.type = type
+}
+
+/**
+ * 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
+
+/**
+ * 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
+
+/**
+ * Constructs Span instances
+ *
+ * @param {string} text The text inside span
+ */
+function Span(text) {
+ Compo.call(this, document.createElement('span'))
+
+ this.container.innerText = text
+}
+
+Span.prototype = Object.create(Compo.prototype)
+Span.prototype.constructor = Span
+
+Span.prototype.setText = function (text) {
+ this.container.innerText = text
+}
+
+Span.prototype.getText = function () {
+ return this.container.innerText
+}
+
+/**
+ * Constructs PasswordInput instances
+ *
+ * @param {string} id The input id
+ */
+function PasswordInput(id) {
+ Compo.call(this, document.createElement('div'))
+ this.container.style.display = 'flex'
+
+ var input = new Input('password', id)
+ input.container.style.paddingRight = '18px'
+ this.add(input)
+
+ var span = new Span('😌')
+ span.container.style.cursor = 'pointer'
+ span.container.style.position = 'absolute'
+ span.container.style.right = '10px'
+ this.add(span)
+
+ span.addBehavior('click', function () {
+ if (span.getText() === '😌') {
+ input.setType('text')
+ span.setText('😳')
+ } else {
+ input.setType('password')
+ span.setText('😌')
+ }
+ })
+}
+
+PasswordInput.prototype = Object.create(Compo.prototype)
+PasswordInput.prototype.constructor = PasswordInput
+
+PasswordInput.prototype.getValue = function () {
+ return this.children[0].container.value
+}
+
+
+PasswordInput.prototype.setValue = function (value) {
+ this.container.value = value
+}
+
+/**
+ *
+ */
+function UnorderedList() {
+ Compo.call(this, document.createElement('ul'))
+}
+
+UnorderedList.prototype = Object.create(Compo.prototype)
+UnorderedList.prototype.constructor = UnorderedList
+
+/**
+ *
+ */
+function ListItem() {
+ Compo.call(this, document.createElement('li'))
+}
+
+ListItem.prototype = Object.create(Compo.prototype)
+ListItem.prototype.constructor = ListItem
+
+/**
+ *
+ */
+function Image(address) {
+ Compo.call(this, document.createElement('img'))
+
+ this.container.src = address
+ this.container.style.width = '100%'
+}
+
+Image.prototype = Object.create(Compo.prototype)
+Image.prototype.constructor = Image
+
+/**
+ *
+ * @param {*} text
+ */
+function Paragraph(text) {
+ Compo.call(this, document.createElement('p'))
+
+ this.container.innerText = text
+}
+
+Paragraph.prototype = Object.create(Compo.prototype)
+Paragraph.prototype.constructor = Paragraph
+
+Paragraph.prototype.setText = function (text) {
+ this.container.innerText = text
+}
+
+Paragraph.prototype.getText = function () {
+ return this.container.innerText
+}
+
+/**
+ *
+ * @param {*} text
+ */
+function Time(text) {
+ Compo.call(this, document.createElement('time'))
+
+ this.container.innerText = text
+}
+
+Time.prototype = Object.create(Compo.prototype)
+Time.prototype.constructor = Time
+
+Time.prototype.setText = function (text) {
+ this.container.innerText = text
+}
+
+Time.prototype.getText = function () {
+ return this.container.innerText
}
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial/data.js b/staff/aleix-palau/unsocial/data.js
index b25de723..a7a29b92 100644
--- a/staff/aleix-palau/unsocial/data.js
+++ b/staff/aleix-palau/unsocial/data.js
@@ -1,4 +1,19 @@
var users = [
{ name: 'Forrest Gump', email: 'forrest_gump@runner.com', username: 'runner4life', password: '123123' },
{ name: 'Luke Skywalker', email: 'luke_skywalker@maythe4th.com', username: 'orphanWannabe', password: 'urnotmyfather' },
+]
+
+var posts = [
+ {
+ image: 'https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg',
+ text: 'here we are',
+ username: 'peterpan',
+ date: new Date
+ },
+ {
+ image: 'https://pm1.aminoapps.com/8360/ad07e2d2cdf6e1733328d6e7b7848b87db38a2bbr1-1536-2048v2_hq.jpg',
+ text: 'here i am',
+ username: 'wendydarling',
+ date: new Date
+ }
]
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial/index.html b/staff/aleix-palau/unsocial/index.html
index 15d74518..3d6a513f 100644
--- a/staff/aleix-palau/unsocial/index.html
+++ b/staff/aleix-palau/unsocial/index.html
@@ -5,13 +5,13 @@
UN$0C14L
+
+
- UN$0C14L
-
diff --git a/staff/aleix-palau/unsocial/logic.js b/staff/aleix-palau/unsocial/logic.js
index d7e1118f..4e556f80 100644
--- a/staff/aleix-palau/unsocial/logic.js
+++ b/staff/aleix-palau/unsocial/logic.js
@@ -1,4 +1,3 @@
-// REGISTER FORM FUNCTION
function registerUser(name, email, username, password, passwordRepeat) {
if (name.length < 2)
throw new Error('invalid name')
@@ -27,7 +26,6 @@ function registerUser(name, email, username, password, passwordRepeat) {
users.push(user)
}
-// LOGIN FORM FUNCTION
function authenticateUser(username, password) {
if (username.length < 4 || username.length > 12)
throw new Error('invalid username')
@@ -43,4 +41,24 @@ function authenticateUser(username, password) {
throw new Error('wrong credentials')
return user
+}
+
+function createPost(username, image, text) {
+ if (username.length < 4 || username.length > 12)
+ throw new Error('invalid username')
+
+ // TODO input validation (and throw error)
+
+ var post = {
+ image: image,
+ text: text,
+ username: username,
+ date: new Date
+ }
+
+ posts.push(post)
+}
+
+function getPosts() {
+ return posts
}
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial/main.js b/staff/aleix-palau/unsocial/main.js
index 70b254fe..1b22c238 100644
--- a/staff/aleix-palau/unsocial/main.js
+++ b/staff/aleix-palau/unsocial/main.js
@@ -1,6 +1,14 @@
var loggedInUser = null
-var loginSection = buildLoginSection()
+var page = new Compo(document.querySelector('body'))
-var body = new Compo(document.querySelector('body'))
-body.add(loginSection)
\ No newline at end of file
+var title = new Heading('UN$0C14L', 1)
+page.add(title)
+
+var login = new Login()
+page.add(login)
+
+// loggedInUser = users[0]
+var home
+// home = new Home()
+// page.add(home)
\ No newline at end of file
diff --git a/staff/aleix-palau/unsocial/view.js b/staff/aleix-palau/unsocial/view.js
index c952c907..2b5a94bc 100644
--- a/staff/aleix-palau/unsocial/view.js
+++ b/staff/aleix-palau/unsocial/view.js
@@ -1,190 +1,273 @@
-function buildFormField(id, text, type) {
- var label = document.createElement('label')
- label.htmlFor = id
- label.innerText = text
+/**
+ * Constructs Login instances
+ */
+function Login() {
+ Compo.call(this, document.createElement('section'))
- var input = document.createElement('input')
- input.type = type
- input.id = id
- input.required = true
+ var title = new Heading('Login', 2)
+ this.add(title)
- return [label, input]
-}
+ var form = new Form()
+ this.add(form)
-function buildButton(text, type) {
- var button = document.createElement('button')
- button.type = type
- button.innerText = text
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
- return button
-}
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new PasswordInput('password')
+ form.add(passwordInput)
-function buildHomeSection() {
- var compo = new Compo(document.createElement('section'))
+ var submitButton = new Button('Login', 'submit')
+ form.add(submitButton)
- var section = compo.container
+ form.addBehavior('submit', function (event) {
+ event.preventDefault()
- var title = document.createElement('h2')
- title.innerText = 'Home'
- section.appendChild(title)
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
- var userTitle = document.createElement('h3')
- userTitle.innerText = 'Hello, ' + loggedInUser.username + '!'
- section.appendChild(userTitle)
+ try {
+ loggedInUser = authenticateUser(username, password)
- var logoutButton = buildButton('Logout', 'button')
- section.appendChild(logoutButton)
+ form.reset()
- logoutButton.addEventListener('click', function (event) {
- event.preventDefault()
+ this.remove()
- loggedInUser = null
+ home = new Home()
+
+ page.add(home)
+ } catch (error) {
+ passwordInput.setValue('')
- section.remove()
+ alert(error.message)
+
+ console.error(error)
+ }
+ }.bind(this))
- body.add(loginSection)
- })
- return compo
+ var registerLink = new Link('Register')
+ this.add(registerLink)
+
+ registerLink.addBehavior('click', function (event) {
+ event.preventDefault()
+
+ this.remove()
+
+ var register = new Register()
+
+ page.add(register)
+ }.bind(this))
}
-function buildRegisterSection() {
- var compo = new Compo(document.createElement('section'))
+Login.prototype = Object.create(Compo.prototype)
+Login.prototype.constructor = Login
- var section = compo.container
+/**
+ * Constructs Register instances
+ */
+function Register() {
+ Compo.call(this, document.createElement('section'))
- var title = document.createElement('h2')
- title.innerText = 'Register'
- section.appendChild(title)
+ var title = new Heading('Register', 2)
+ this.add(title)
- var form = document.createElement('form')
- section.appendChild(form)
+ var form = new Form()
+ this.add(form)
- var nameField = buildFormField('name', 'Name', 'text')
- form.appendChild(nameField[0])
- form.appendChild(nameField[1])
+ form.add(new Label('Name', 'name'))
+ var nameInput = new Input('text', 'name')
+ form.add(nameInput)
- var emailField = buildFormField('email', 'E-mail', 'email')
- form.appendChild(emailField[0])
- form.appendChild(emailField[1])
+ form.add(new Label('E-mail', 'email'))
+ var emailInput = new Input('email', 'email')
+ form.add(emailInput)
- var usernameField = buildFormField('username', 'Username', 'text')
- form.appendChild(usernameField[0])
- form.appendChild(usernameField[1])
+ form.add(new Label('Username', 'username'))
+ var usernameInput = new Input('text', 'username')
+ form.add(usernameInput)
- var passwordField = buildFormField('password', 'Password', 'password')
- form.appendChild(passwordField[0])
- form.appendChild(passwordField[1])
+ form.add(new Label('Password', 'password'))
+ var passwordInput = new PasswordInput('password')
+ form.add(passwordInput)
- var passwordRepeatField = buildFormField('password-repeat', 'Repeat password', 'password')
- form.appendChild(passwordRepeatField[0])
- form.appendChild(passwordRepeatField[1])
+ form.add(new Label('Repeat Password', 'password-repeat'))
+ var passwordRepeatInput = new PasswordInput('password-repeat')
+ form.add(passwordRepeatInput)
- var submitButton = buildButton('Register', 'submit')
- form.appendChild(submitButton)
+ var submitButton = new Button('Register', 'submit')
+ form.add(submitButton)
- form.addEventListener('submit', function (event) {
+ 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 = passwordRepeatField[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()
+ this.remove()
- body.add(loginSection)
+ page.add(login)
} catch (error) {
alert(error.message)
console.error(error)
}
- })
+ }.bind(this))
- var loginLink = document.createElement('a')
- loginLink.href = ''
- loginLink.innerText = 'Login'
- section.appendChild(loginLink)
+ var loginLink = new Link('Login')
+ this.add(loginLink)
- loginLink.addEventListener('click', function (event) {
+ loginLink.addBehavior('click', function (event) {
event.preventDefault()
- section.remove()
+ this.remove()
+ page.add(login)
+ }.bind(this))
+}
+
+Register.prototype = Object.create(Compo.prototype)
+Register.prototype.constructor = Register
- body.add(loginSection)
- })
+/**
+ * Constructs Home instances
+ */
+function Home() {
+ Compo.call(this, document.createElement('section'))
- return compo
+ var title = new Heading('Home', 2)
+ this.add(title)
+
+ var userTitle = new Heading('Hello, ' + loggedInUser.name + '!', 3)
+ this.add(userTitle)
+
+ var logoutButton = new Button('Logout', 'button')
+ this.add(logoutButton)
+
+ logoutButton.addBehavior('click', function (event) {
+ event.preventDefault()
+
+ loggedInUser = null
+
+ this.remove()
+
+ page.add(login)
+ }.bind(this))
+
+ var addPostButton = new Button('âž•', 'button')
+ this.add(addPostButton)
+
+ addPostButton.addBehavior('click', function () {
+ var createPost = new CreatePost()
+
+ //postList.remove()
+ this.children[this.children.length - 1].remove()
+
+ this.add(createPost)
+ }.bind(this))
+
+ var postList = new PostList()
+ this.add(postList)
}
-function buildLoginSection() {
- var compo = new Compo(document.createElement('section'))
+Home.prototype = Object.create(Compo.prototype)
+Home.prototype.constructor = Home
- var section = compo.container
+function CreatePost() {
+ Compo.call(this, document.createElement('div'))
- var title = document.createElement('h2')
- title.innerText = 'Login'
- section.appendChild(title)
+ var title = new Heading('Create Post', 3)
+ this.add(title)
- var form = document.createElement('form')
- section.appendChild(form)
+ var form = new Form()
- var usernameField = buildFormField('username', 'Username', 'text')
- form.appendChild(usernameField[0])
- form.appendChild(usernameField[1])
+ var imageLabel = new Label('Image', 'image')
+ var imageInput = new Input('text', 'image')
+ form.add(imageLabel)
+ form.add(imageInput)
- var passwordField = buildFormField('password', 'Password', 'password')
- form.appendChild(passwordField[0])
- form.appendChild(passwordField[1])
+ var textLabel = new Label('Text', 'text')
+ var textInput = new Input('text', 'text')
+ form.add(textLabel)
+ form.add(textInput)
- var submitButton = buildButton('Login', 'submit')
- form.appendChild(submitButton)
+ var submitButton = new Button('Create', 'submit')
+ form.add(submitButton)
- form.addEventListener('submit', function (event) {
+ this.add(form)
+
+ form.addBehavior('submit', function (event) {
event.preventDefault()
- var username = usernameField[1].value
- var password = passwordField[1].value
+ var image = imageInput.getValue()
+ var text = textInput.getValue()
try {
- loggedInUser = authenticateUser(username, password)
-
- form.reset()
-
- section.remove()
+ createPost(loggedInUser.username, image, text)
- var homeSection = buildHomeSection()
+ this.remove()
- body.add(homeSection)
+ var postList = new PostList()
+ home.add(postList)
} catch (error) {
- passwordField[1].value = ''
-
alert(error.message)
console.error(error)
}
- })
- var registerLink = document.createElement('a')
- registerLink.href = ''
- registerLink.innerText = 'Register'
- section.appendChild(registerLink)
+ }.bind(this))
+}
- registerLink.addEventListener('click', function (event) {
- event.preventDefault()
+CreatePost.prototype = Object.create(Compo.prototype)
+CreatePost.prototype.constructor = CreatePost
+
+function Post(username, image, text, date) {
+ Compo.call(this, document.createElement('div'))
+
+ var userTitle = new Heading(username, 4)
+ this.add(userTitle)
- section.remove()
+ var picture = new Image(image)
+ this.add(picture)
+
+ var comment = new Paragraph(text)
+ this.add(comment)
+
+ var time = new Time(date)
+ this.add(time)
+}
- var registerSection = buildRegisterSection()
+Post.prototype = Object.create(Compo.prototype)
+Post.prototype.constructor = Post
- body.add(registerSection)
- })
+function PostList() {
+ Compo.call(this, document.createElement('div'))
+
+ var title = new Heading('Posts', 3)
+ this.add(title)
+
+ try {
+ var posts = getPosts().toReversed()
+
+ posts.forEach(function (post) {
+ var _post = new Post(post.username, post.image, post.text, post.date)
+
+ this.add(_post)
+ }.bind(this))
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+}
- return compo
-}
\ No newline at end of file
+PostList.prototype = Object.create(Compo.prototype)
+PostList.prototype.constructor = PostList
\ No newline at end of file