diff --git a/staff/rafael-infante/unsocial.12/.gitkeep b/staff/rafael-infante/unsocial.12/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/staff/rafael-infante/unsocial.12/compo/Button.js b/staff/rafael-infante/unsocial.12/compo/Button.js
new file mode 100644
index 00000000..4e1c489c
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Button.js
@@ -0,0 +1,13 @@
+/**
+ * Builds a Button instance
+ * @param {string} id name the id of the Button instance
+ * @param {string} type name the type of Button instance
+ * @param {string} text text inside the Button instance
+ */
+function Button(id, type, text) {
+ Compo.call(this, document.createElement('button'))
+ this.container.id = id
+ this.container.type = type
+ this.container.innerText = text
+}
+Button.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Code.js b/staff/rafael-infante/unsocial.12/compo/Code.js
new file mode 100644
index 00000000..0fecd689
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Code.js
@@ -0,0 +1,16 @@
+/**
+ * Builds a Code instance
+ * @param {string} text text inside the Code instance
+ */
+function Code(text) {
+ Compo.call(this, document.createElement('code'))
+ this.container.innerText = text
+}
+Code.extends(Compo)
+
+Code.prototype.setText = function (text) {
+ this.container.innerText = text
+}
+Code.prototype.getText = function () {
+ return this.container.innerText
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Compo.js b/staff/rafael-infante/unsocial.12/compo/Compo.js
new file mode 100644
index 00000000..bc8ee827
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Compo.js
@@ -0,0 +1,29 @@
+/**
+ * Builds Compo instances
+ * @param {HTMLElement} container The DOM container of the compo instance
+ */
+function Compo(container) {
+ this.container = container
+ this.children = []
+ 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 (action, callback) {
+ this.container.addEventListener(action, callback)
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Form.js b/staff/rafael-infante/unsocial.12/compo/Form.js
new file mode 100644
index 00000000..cea714fe
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Form.js
@@ -0,0 +1,13 @@
+/**
+ * Builds a Form instance
+ * @param {string} className Name the CSS class of the Form instance
+ */
+function Form(className) {
+ Compo.call(this, document.createElement('form'))
+ this.container.classList.add(className)
+}
+Form.extends(Compo)
+
+Form.prototype.reset = function () {
+ this.container.reset()
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Header.js b/staff/rafael-infante/unsocial.12/compo/Header.js
new file mode 100644
index 00000000..69a78d74
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Header.js
@@ -0,0 +1,9 @@
+/**
+ * Builds Header instances
+ * @param {string} className Name the CSS class of the Header instance
+ */
+function Header(className) {
+ Compo.call(this, document.createElement('header'))
+ this.container.classList.add(className)
+}
+Header.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Heading.js b/staff/rafael-infante/unsocial.12/compo/Heading.js
new file mode 100644
index 00000000..e167b259
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Heading.js
@@ -0,0 +1,10 @@
+/**
+ * Builds a Heading instance
+ * @param {string} text Text inside the heading tag
+ * @param {number} level Size of the heading
+ */
+function Heading(text, level) {
+ Compo.call(this, document.createElement('h' + level))
+ this.container.innerText = text
+}
+Heading.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Icon.js b/staff/rafael-infante/unsocial.12/compo/Icon.js
new file mode 100644
index 00000000..6b480a7e
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Icon.js
@@ -0,0 +1,7 @@
+function Icon() {
+ Compo.call(this, document.createElement('i'))
+ this.container.classList.add('far')
+ this.container.classList.add('fa-eye')
+ this.container.id = 'icon'
+}
+Icon.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Input.js b/staff/rafael-infante/unsocial.12/compo/Input.js
new file mode 100644
index 00000000..5bb12cee
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Input.js
@@ -0,0 +1,25 @@
+/**
+ * Builds an Input instance
+ * @param {string} id Name the id attribute of the Input instance
+ * @param {string} type Name the type of input
+ * @param {string} placeholder Text inside the Input instance
+ * @param {boolean} required Gives required attribute to the Input instance
+ */
+function Input(id, type, placeholder, required) {
+ Compo.call(this, document.createElement('input'))
+ this.container.id = id
+ this.container.type = type
+ this.container.placeholder = placeholder
+ this.container.required = required
+}
+Input.extends(Compo)
+
+Input.prototype.getValue = function () {
+ return this.container.value
+}
+Input.prototype.setValue = function (value) {
+ this.container.value = value
+}
+Input.prototype.setType = function (type) {
+ this.container.type = type
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Label.js b/staff/rafael-infante/unsocial.12/compo/Label.js
new file mode 100644
index 00000000..259d0ed3
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Label.js
@@ -0,0 +1,11 @@
+/**
+ * Builds a Label instance
+ * @param {string} id Name the for attribute of the Label instance
+ * @param {string} text Text inside the label tag
+ */
+function Label(id, text) {
+ Compo.call(this, document.createElement('label'))
+ this.container.htmlFor = id
+ this.container.innerText = text
+}
+Label.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Link.js b/staff/rafael-infante/unsocial.12/compo/Link.js
new file mode 100644
index 00000000..dde70f42
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Link.js
@@ -0,0 +1,11 @@
+/**
+ * Builds a Link instance
+ * @param {string} text text inside the Link instance
+ * @param {string} href URL of the Link instance
+ */
+function Link(text, href) {
+ Compo.call(this, document.createElement('a'))
+ this.container.innerText = text
+ this.container.href = href
+}
+Link.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Paragraph.js b/staff/rafael-infante/unsocial.12/compo/Paragraph.js
new file mode 100644
index 00000000..77b290d3
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Paragraph.js
@@ -0,0 +1,16 @@
+/**
+ * Builds a Paragraph instance
+ * @param {string} text text inside the Paragraph instance
+ */
+function Paragraph(text) {
+ Compo.call(this, document.createElement('p'))
+ this.container.innerText = text
+}
+Paragraph.extends(Compo)
+
+Paragraph.prototype.setText = function (text) {
+ this.container.innerText = text
+}
+Paragraph.prototype.getText = function () {
+ return this.container.innerText
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/PasswordInput.js b/staff/rafael-infante/unsocial.12/compo/PasswordInput.js
new file mode 100644
index 00000000..5591de87
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/PasswordInput.js
@@ -0,0 +1,30 @@
+function Passwordinput(className, id, type, placeholder, required) {
+ Compo.call(this, document.createElement('div'))
+ this.container.classList.add(className)
+
+ var input = new Input(id, type, placeholder, required)
+ this.add(input)
+
+ var icon = new Icon()
+ this.add(icon)
+
+ var isVisible = false
+ icon.addBehavior('click', function (event) {
+ icon.container.classList.toggle('fa-eye-slash')
+ if (!isVisible) {
+ input.setType('text')
+ isVisible = true
+ } else {
+ input.setType('password')
+ isVisible = false
+ }
+ })
+}
+Passwordinput.extends(Compo)
+
+Passwordinput.prototype.getValue = function () {
+ return this.children[0].container.value
+}
+Passwordinput.prototype.setValue = function (value) {
+ this.children[0].container.value = value
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Picture.js b/staff/rafael-infante/unsocial.12/compo/Picture.js
new file mode 100644
index 00000000..42bfbd16
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Picture.js
@@ -0,0 +1,11 @@
+/**
+ * Builds a Picture instance
+ * @param {string} imageSrc directory/path of the image
+ * @param {string} imageClass Name the CSS class of the Picture instance
+ */
+function Picture(imageSrc, imageClass) {
+ Compo.call(this, document.createElement('img'))
+ this.container.src = imageSrc
+ this.container.classList.add(imageClass)
+}
+Picture.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Preformatted.js b/staff/rafael-infante/unsocial.12/compo/Preformatted.js
new file mode 100644
index 00000000..1fe57e1a
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Preformatted.js
@@ -0,0 +1,16 @@
+/**
+ * Builds a Preformatted instance
+ * @param {string} text text inside the Preformatted instance
+ */
+function Preformatted(text) {
+ Compo.call(this, document.createElement('pre'))
+ this.container.innerText = text
+}
+Preformatted.extends(Compo)
+
+Preformatted.prototype.setText = function (text) {
+ this.container.innerText = text
+}
+Preformatted.prototype.getText = function () {
+ return this.container.innerText
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Snippet.js b/staff/rafael-infante/unsocial.12/compo/Snippet.js
new file mode 100644
index 00000000..491ce9eb
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Snippet.js
@@ -0,0 +1,18 @@
+/**
+ *
+ * @param {*} text
+ */
+function Snippet(title, text) {
+ Compo.call(this, document.createElement('div'))
+
+ var title = new Heading(title, 4)
+ this.add(title)
+
+ var pre = new Preformatted('')
+ var code = new Code(text)
+ pre.add(code)
+
+ this.add(pre)
+}
+
+Snippet.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/Time.js b/staff/rafael-infante/unsocial.12/compo/Time.js
new file mode 100644
index 00000000..769b9e07
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/Time.js
@@ -0,0 +1,16 @@
+/**
+ * Builds a Time instance
+ * @param {string} text text inside the Time instance
+ */
+function Time(text) {
+ Compo.call(this, document.createElement('time'))
+ this.container.innerText = text
+}
+Time.extends(Compo)
+
+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/rafael-infante/unsocial.12/compo/index.html b/staff/rafael-infante/unsocial.12/compo/index.html
new file mode 100644
index 00000000..02284b1d
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+ Compo v0.0.5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/compo/main.js b/staff/rafael-infante/unsocial.12/compo/main.js
new file mode 100644
index 00000000..ca25ddfe
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/compo/main.js
@@ -0,0 +1,24 @@
+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 button = new Button('button', 'button', 'Submit')
+page.add(button)
+
+var snippet = new Snippet('Demo Input', 'var input = new Input(\'password\', \'password\')\npage.add(input)')
+page.add(snippet)
+
+var input = new Input('password', 'password', 'Enter password', true)
+page.add(input)
+
+var linkTitle = new Heading('Link', 2)
+
+var snippet = new Snippet('Demo Link', 'var link = new Link(\'Google\')\npage.add(link)')
+page.add(snippet)
+
+var link = new Link('Google')
+page.add(link)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/data/posts.js b/staff/rafael-infante/unsocial.12/data/posts.js
new file mode 100644
index 00000000..774002a1
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/data/posts.js
@@ -0,0 +1,20 @@
+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
+ },
+ {
+ image: 'https://png.pngtree.com/png-clipart/20231020/original/pngtree-couple-dressed-up-like-a-pirate-and-vampire-taking-a-selfie-png-image_13385873.png',
+ text: 'muajajajaja',
+ username: 'captainhook',
+ date: new Date
+ }
+]
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/data/users.js b/staff/rafael-infante/unsocial.12/data/users.js
new file mode 100644
index 00000000..f98e7df4
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/data/users.js
@@ -0,0 +1,4 @@
+var users = [
+ { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+ { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+]
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/images/boy.png b/staff/rafael-infante/unsocial.12/images/boy.png
new file mode 100644
index 00000000..fc4e8b35
Binary files /dev/null and b/staff/rafael-infante/unsocial.12/images/boy.png differ
diff --git a/staff/rafael-infante/unsocial.12/images/girl.png b/staff/rafael-infante/unsocial.12/images/girl.png
new file mode 100644
index 00000000..27f367db
Binary files /dev/null and b/staff/rafael-infante/unsocial.12/images/girl.png differ
diff --git a/staff/rafael-infante/unsocial.12/images/users-avatar.png b/staff/rafael-infante/unsocial.12/images/users-avatar.png
new file mode 100644
index 00000000..7ac2ff60
Binary files /dev/null and b/staff/rafael-infante/unsocial.12/images/users-avatar.png differ
diff --git a/staff/rafael-infante/unsocial.12/images/users-avatar2.png b/staff/rafael-infante/unsocial.12/images/users-avatar2.png
new file mode 100644
index 00000000..ccee2bf7
Binary files /dev/null and b/staff/rafael-infante/unsocial.12/images/users-avatar2.png differ
diff --git a/staff/rafael-infante/unsocial.12/index.html b/staff/rafael-infante/unsocial.12/index.html
new file mode 100644
index 00000000..8e6169f7
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+ Unsocial
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/logic/authenticateUser.js b/staff/rafael-infante/unsocial.12/logic/authenticateUser.js
new file mode 100644
index 00000000..4ca735ae
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/logic/authenticateUser.js
@@ -0,0 +1,16 @@
+function authenticateUser(loginUsername, loginPassword) {
+ if (loginUsername.length < 4 || loginUsername.length > 12)
+ throw new Error('invalid username')
+
+ if (loginPassword < 8)
+ throw new Error('invalid password')
+
+ var user = users.find(function (user) {
+ return user.username === loginUsername && user.password === loginPassword
+ })
+
+ if (user === undefined)
+ throw new Error('wrong credentials')
+
+ return user
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/logic/createPost.js b/staff/rafael-infante/unsocial.12/logic/createPost.js
new file mode 100644
index 00000000..97dbc099
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/logic/createPost.js
@@ -0,0 +1,14 @@
+function createpost(username, image, text) {
+ if (username.length < 4 || username.length > 12)
+ throw new Error('invalid username')
+ // TODO input validation
+
+ var post = {
+ image: image,
+ text: text,
+ username: username,
+ date: new Date
+ }
+
+ posts.push(post)
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/logic/getposts.js b/staff/rafael-infante/unsocial.12/logic/getposts.js
new file mode 100644
index 00000000..c070f29b
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/logic/getposts.js
@@ -0,0 +1,3 @@
+function getPosts() {
+ return posts
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/logic/registerUser.js b/staff/rafael-infante/unsocial.12/logic/registerUser.js
new file mode 100644
index 00000000..4fb48427
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/logic/registerUser.js
@@ -0,0 +1,25 @@
+function registerUser(name, email, username, password, confirmPassword) {
+ if (name.length < 2)
+ throw new Error('Invalid name')
+
+ if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
+ throw new Error('Invalid email')
+
+ var registeredUser = users.find(function (user) {
+ return user.email === email || user.username === username
+ })
+ if (registeredUser)
+ throw new Error('This user is already registered')
+
+ if (username.length < 4 || username.length > 12)
+ throw new Error('invalid user name')
+
+ if (password.length < 8)
+ throw new Error('invalid password')
+
+ if (password !== confirmPassword)
+ throw new Error('passwords do not match')
+ var user = { name: name, email: email, username: username, password: password }
+
+ users.push(user)
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/main.js b/staff/rafael-infante/unsocial.12/main.js
new file mode 100644
index 00000000..6c38a00d
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/main.js
@@ -0,0 +1,16 @@
+var loggedUser = null
+
+var header = new Header('logo-container')
+var picture = new Picture('images/users-avatar.png', 'logo')
+header.add(picture)
+var heading = new Heading('unSocial', 1)
+header.add(heading)
+
+var login = new Login()
+
+var page = new Compo(document.querySelector('body'))
+
+page.add(header)
+page.add(login)
+
+var home
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/proto-chain/index.js b/staff/rafael-infante/unsocial.12/proto-chain/index.js
similarity index 100%
rename from staff/rafael-infante/unsocial/proto-chain/index.js
rename to staff/rafael-infante/unsocial.12/proto-chain/index.js
diff --git a/staff/rafael-infante/unsocial.12/style.css b/staff/rafael-infante/unsocial.12/style.css
new file mode 100644
index 00000000..41524f1f
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/style.css
@@ -0,0 +1,132 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+
+:root {
+ --font: 'Poppins';
+ font-family: var(--font);
+ background-color: #e4b834;
+}
+
+.logo-container {
+ display: flex;
+ text-decoration: none;
+ color: black;
+ align-items: center;
+ margin: 0;
+ padding-left: 15px;
+}
+
+.logo {
+ max-height: 45px;
+ margin-right: 5px;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 0 15px 15px 15px;
+}
+
+.section-container {
+ background-color: white;
+ padding: 0 20px 20px 20px;
+ margin: 10px;
+ width: 85%;
+ max-width: 500px;
+ min-height: 400px;
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.form-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+label {
+ padding-bottom: 6px;
+ font-size: 14px;
+}
+
+input {
+ margin-bottom: 10px;
+ padding: 10px;
+ border-radius: 5px;
+ border: 1px solid gray;
+}
+
+button {
+ color: white;
+ background-color: black;
+ margin-top: 25px;
+ padding: 15px;
+ border-radius: 15px;
+ cursor: pointer;
+ font-weight: bolder;
+ border: none;
+}
+
+button:hover {
+ color: black;
+ background-color: #e7cc79;
+ border: none;
+}
+
+#btn-register {
+ margin: 0;
+}
+
+#bottom-text,
+p {
+ font-size: 13px;
+ color: grey;
+ margin-top: 15px;
+ margin-bottom: 0;
+}
+
+a {
+ text-decoration: none;
+ font-weight: bold;
+ color: black;
+ cursor: pointer;
+}
+
+a:hover {
+ color: #dda600;
+}
+
+h4 {
+ margin: 20px;
+}
+
+.password-container {
+ position: relative;
+ display: inline-block;
+}
+
+.password-container input {
+ width: 95%;
+}
+
+.password-container i {
+ position: absolute;
+ top: 40%;
+ right: 18px;
+ transform: translateY(-50%);
+ cursor: pointer;
+}
+
+.boy {
+ /* height: 280px; */
+ width: 100%;
+}
+
+@media (max-width: 350px) {
+ .password-container input {
+ width: 92%;
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/view/CreatePost.js b/staff/rafael-infante/unsocial.12/view/CreatePost.js
new file mode 100644
index 00000000..e87602b5
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/view/CreatePost.js
@@ -0,0 +1,46 @@
+function CreatePost(className) {
+ Compo.call(this, document.createElement('div'))
+
+ this.container.classList.add(className)
+
+ var title = new Heading('Create a Post', 3)
+ this.add(title)
+
+ var form = new Form('form-container')
+
+ var imageLabel = new Label('image', 'Image')
+ var imageInput = new Input('image', 'text', 'Select an image', true)
+ form.add(imageLabel)
+ form.add(imageInput)
+
+ var textLabel = new Label('text', 'Text')
+ var textInput = new Input('text', 'text', 'Write a text', true)
+ form.add(textLabel)
+ form.add(textInput)
+
+ var submitButton = new Button('submit', 'submit', 'Create')
+ form.add(submitButton)
+
+ this.add(form)
+
+ form.addBehavior('submit', function (event) {
+ event.preventDefault()
+ var image = imageInput.getValue()
+ var text = textInput.getValue()
+
+ try {
+ createpost(loggedUser.username, image, text)
+ form.reset()
+ this.remove()
+ var postList = new PostList()
+ home.add(postList)
+
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ }.bind(this))
+}
+
+CreatePost.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/view/Home.js b/staff/rafael-infante/unsocial.12/view/Home.js
new file mode 100644
index 00000000..836faa62
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/view/Home.js
@@ -0,0 +1,47 @@
+/**
+ * Builds Home instances
+ */
+function Home() {
+ Compo.call(this, document.createElement('section'))
+
+ this.container.id = 'home'
+ this.container.classList.add('section-container')
+
+ var title = new Heading('Home', 2)
+ this.add(title)
+
+ var text = new Heading('Hello, ' + loggedUser.name + '!', 3)
+ this.add(text)
+
+ var image = new Picture('images/boy.png', 'boy')
+ this.add(image)
+
+ var logoutButton = new Button('btn.logout', 'submit', 'Logout')
+ this.add(logoutButton)
+
+ // Functionality of logout button
+ logoutButton.container.addEventListener('click', function (event) {
+ var condition = prompt('Are you sure? (y/n)')
+ if (condition === 'y') {
+ event.preventDefault()
+ loggedUser = null
+ this.remove()
+ page.add(login)
+ }
+ }.bind(this))
+
+ var postButton = new Button('btn-post', 'button', 'Post')
+ this.add(postButton)
+
+ postButton.addBehavior('click', function () {
+
+ var createPost = new CreatePost('section-container')
+ this.children[this.children.length - 1].remove()
+ this.add(createPost)
+ }.bind(this))
+
+ var postList = new PostList()
+ this.add(postList)
+}
+
+Home.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/view/Login.js b/staff/rafael-infante/unsocial.12/view/Login.js
new file mode 100644
index 00000000..e91f74e5
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/view/Login.js
@@ -0,0 +1,71 @@
+/**
+ * Builds Login instances
+ */
+function Login() {
+ Compo.call(this, document.createElement('section'))
+
+ this.container.classList.add('section-container')
+
+ var paragraph = document.createElement('p')
+ paragraph.innerText = 'Welcome !'
+ this.container.appendChild(paragraph)
+
+ var title = new Heading('Sign in to unSocial', 2)
+ this.add(title)
+
+ var text = new Heading('Write username and password to access', 4)
+ this.add(text)
+
+ var form = (new Form('form-container'))
+ this.add(form)
+
+ form.add(new Label('login-user', 'User name'))
+ var usernameInput = new Input('login-user', 'text', 'Enter your user name', true)
+ form.add(usernameInput)
+
+ form.add(new Label('login-password', 'Password'))
+ var passwordInput = new Passwordinput('password-container', 'password', 'password', 'Enter your password', true)
+ form.add(passwordInput)
+
+ var submitButton = new Button('btn-login', 'submit', 'Login')
+ form.add(submitButton)
+
+ var anchorText = document.createElement('p')
+ anchorText.innerText = "Don't have an account? "
+ this.container.appendChild(anchorText)
+
+ var registerLink = new Link('Register', '#')
+
+ anchorText.appendChild(registerLink.container)
+
+ // Send user to register section when clicking on register link
+ registerLink.addBehavior('click', function (event) {
+ event.preventDefault()
+ this.remove()
+ var register = new Register()
+ page.add(register)
+ }.bind(this))
+ // actions when submitting the login Form
+ form.addBehavior('submit', function (event) {
+ event.preventDefault()
+
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+
+ try {
+ loggedUser = authenticateUser(username, password)
+ form.container.reset()
+ this.remove()
+ home = new Home()
+ page.add(home)
+ }
+ catch (error) {
+ passwordInput.setValue('')
+ alert(error.message)
+ console.error(error)
+ }
+ }.bind(this))
+
+}
+
+Login.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/view/Post.js b/staff/rafael-infante/unsocial.12/view/Post.js
new file mode 100644
index 00000000..686ea9ed
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/view/Post.js
@@ -0,0 +1,17 @@
+function Post(username, image, text, date) {
+ Compo.call(this, document.createElement('div'))
+
+ var userTitle = new Heading(username, 4)
+ this.add(userTitle)
+
+ var picture = new Picture(image, 'boy')
+ this.add(picture)
+
+ var comment = new Paragraph(text)
+ this.add(comment)
+
+ var time = new Time(date)
+ this.add(time)
+}
+
+Post.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/view/PostList.js b/staff/rafael-infante/unsocial.12/view/PostList.js
new file mode 100644
index 00000000..ac376db6
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/view/PostList.js
@@ -0,0 +1,22 @@
+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)
+ }
+}
+
+PostList.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.12/view/Register.js b/staff/rafael-infante/unsocial.12/view/Register.js
new file mode 100644
index 00000000..c901a53d
--- /dev/null
+++ b/staff/rafael-infante/unsocial.12/view/Register.js
@@ -0,0 +1,72 @@
+/**
+ * Builds Register instances
+ */
+function Register() {
+ Compo.call(this, document.createElement('section'))
+
+ this.container.classList.add('section-container')
+
+ var title = new Heading('Register to unSocial', 2)
+ this.add(title)
+
+ var form = new Form('form-container')
+ this.add(form)
+
+ form.add(new Label('name', 'Name'))
+ var nameInput = new Input('name', 'text', 'Enter your name', true)
+ form.add(nameInput)
+
+ form.add(new Label('email', 'Email'))
+ var emailInput = new Input('email', 'email', 'Enter your email', true)
+ form.add(emailInput)
+
+ form.add(new Label('username', 'User name'))
+ var usernameInput = new Input('username', 'text', 'Enter your user name', true)
+ form.add(usernameInput)
+
+ form.add(new Label('password', 'Password'))
+ var passwordInput = new Input('password', 'password', 'Enter your password', true)
+ form.add(passwordInput)
+
+ form.add(new Label('confirm-password', 'Confirm password'))
+ var confirmpasswordInput = new Input('confirm-password', 'password', 'Confirm your password', true)
+ form.add(confirmpasswordInput)
+
+ var registerButton = new Button('btn-register', 'submit', 'Register')
+ form.add(registerButton)
+
+ var registerAnchorText = document.createElement('p')
+ registerAnchorText.innerText = 'Already have an account? '
+ this.container.appendChild(registerAnchorText)
+
+ var loginLink = new Link('Login', '#')
+ registerAnchorText.appendChild(loginLink.container)
+
+ loginLink.addBehavior('click', function (event) {
+ event.preventDefault();
+ this.remove()
+ page.add(login)
+ }.bind(this))
+ // Save data of new user when clicking on register button
+ form.addBehavior('submit', function (event) {
+ event.preventDefault()
+ var name = nameInput.getValue()
+ var email = emailInput.getValue()
+ var username = usernameInput.getValue()
+ var password = passwordInput.getValue()
+ var confirmPassword = confirmpasswordInput.getValue()
+
+ try {
+ registerUser(name, email, username, password, confirmPassword)
+ form.reset()
+ this.remove()
+ page.add(login)
+ }
+ catch (error) {
+ alert(error.message)
+ console.error(error)
+ }
+ }.bind(this))
+}
+
+Register.extends(Compo)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/.gitkeep b/staff/rafael-infante/unsocial.13/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/staff/rafael-infante/unsocial.13/compo/Button.js b/staff/rafael-infante/unsocial.13/compo/Button.js
new file mode 100644
index 00000000..bb66bc97
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Button.js
@@ -0,0 +1,14 @@
+/**
+ * Builds a Button instance
+ * @param {string} id name the id of the Button instance
+ * @param {string} type name the type of Button instance
+ * @param {string} text text inside the Button instance
+ */
+class Button extends Compo {
+ constructor(id, type, text) {
+ super(document.createElement('button'))
+ this.container.id = id
+ this.container.type = type
+ this.container.innerText = text
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Code.js b/staff/rafael-infante/unsocial.13/compo/Code.js
new file mode 100644
index 00000000..e30b1037
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Code.js
@@ -0,0 +1,17 @@
+/**
+ * Builds a Code instance
+ * @param {string} text text inside the Code instance
+ */
+class Code extends Compo {
+ constructor(text) {
+ super(document.createElement('code'))
+ this.container.innerText = text
+ }
+
+ setText(text) {
+ this.container.innerText = text
+ }
+ getText() {
+ return this.container.innerText
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Compo.js b/staff/rafael-infante/unsocial.13/compo/Compo.js
new file mode 100644
index 00000000..6d837bf9
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Compo.js
@@ -0,0 +1,31 @@
+/**
+ * Builds Compo instances
+ * @param {HTMLElement} container The DOM container of the compo instance
+ */
+class Compo {
+ constructor(container) {
+ this.container = container
+ this.children = []
+ this.parent = null
+ }
+
+ add(child) {
+ this.children.push(child)
+ child.parent = this
+ this.container.appendChild(child.container)
+ }
+
+ remove() {
+ 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()
+ }
+
+ addBehavior(action, callback) {
+ this.container.addEventListener(action, callback)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Form.js b/staff/rafael-infante/unsocial.13/compo/Form.js
new file mode 100644
index 00000000..7a14cb82
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Form.js
@@ -0,0 +1,14 @@
+/**
+ * Builds a Form instance
+ * @param {string} className Name the CSS class of the Form instance
+ */
+class Form extends Compo {
+ constructor(className) {
+ super(document.createElement('form'))
+ this.container.classList.add(className)
+ }
+
+ reset() {
+ this.container.reset()
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Header.js b/staff/rafael-infante/unsocial.13/compo/Header.js
new file mode 100644
index 00000000..fb589ece
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Header.js
@@ -0,0 +1,10 @@
+/**
+ * Builds Header instances
+ * @param {string} className Name the CSS class of the Header instance
+ */
+class Header extends Compo {
+ constructor(className) {
+ super(document.createElement('header'))
+ this.container.classList.add(className)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Heading.js b/staff/rafael-infante/unsocial.13/compo/Heading.js
new file mode 100644
index 00000000..e38b7e0e
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Heading.js
@@ -0,0 +1,11 @@
+/**
+ * Builds a Heading instance
+ * @param {string} text Text inside the heading tag
+ * @param {number} level Size of the heading
+ */
+class Heading extends Compo {
+ constructor(text, level) {
+ super(document.createElement('h' + level))
+ this.container.innerText = text
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Icon.js b/staff/rafael-infante/unsocial.13/compo/Icon.js
new file mode 100644
index 00000000..226f6a64
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Icon.js
@@ -0,0 +1,8 @@
+class Icon extends Compo {
+ constructor() {
+ super(document.createElement('i'))
+ this.container.classList.add('far')
+ this.container.classList.add('fa-eye')
+ this.container.id = 'icon'
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Input.js b/staff/rafael-infante/unsocial.13/compo/Input.js
new file mode 100644
index 00000000..0a593bfb
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Input.js
@@ -0,0 +1,26 @@
+/**
+ * Builds an Input instance
+ * @param {string} id Name the id attribute of the Input instance
+ * @param {string} type Name the type of input
+ * @param {string} placeholder Text inside the Input instance
+ * @param {boolean} required Gives required attribute to the Input instance
+ */
+class Input extends Compo {
+ constructor(id, type, placeholder, required) {
+ super(document.createElement('input'))
+ this.container.id = id
+ this.container.type = type
+ this.container.placeholder = placeholder
+ this.container.required = required
+ }
+
+ getValue() {
+ return this.container.value
+ }
+ setValue(value) {
+ this.container.value = value
+ }
+ setType(type) {
+ this.container.type = type
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Label.js b/staff/rafael-infante/unsocial.13/compo/Label.js
new file mode 100644
index 00000000..41c7c631
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Label.js
@@ -0,0 +1,12 @@
+/**
+ * Builds a Label instance
+ * @param {string} id Name the for attribute of the Label instance
+ * @param {string} text Text inside the label tag
+ */
+class Label extends Compo {
+ constructor(id, text) {
+ super(document.createElement('label'))
+ this.container.htmlFor = id
+ this.container.innerText = text
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Link.js b/staff/rafael-infante/unsocial.13/compo/Link.js
new file mode 100644
index 00000000..f11b0c4f
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Link.js
@@ -0,0 +1,12 @@
+/**
+ * Builds a Link instance
+ * @param {string} text text inside the Link instance
+ * @param {string} href URL of the Link instance
+ */
+class Link extends Compo {
+ constructor(text, href) {
+ super(document.createElement('a'))
+ this.container.innerText = text
+ this.container.href = href
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Paragraph.js b/staff/rafael-infante/unsocial.13/compo/Paragraph.js
new file mode 100644
index 00000000..cc7db7a8
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Paragraph.js
@@ -0,0 +1,17 @@
+/**
+ * Builds a Paragraph instance
+ * @param {string} text text inside the Paragraph instance
+ */
+class Paragraph extends Compo {
+ constructor(text) {
+ super(document.createElement('p'))
+ this.container.innerText = text
+ }
+
+ setText(text) {
+ this.container.innerText = text
+ }
+ getText() {
+ return this.container.innerText
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/PasswordInput.js b/staff/rafael-infante/unsocial.13/compo/PasswordInput.js
new file mode 100644
index 00000000..9e1d73ae
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/PasswordInput.js
@@ -0,0 +1,31 @@
+class Passwordinput extends Compo {
+ constructor(className, id, type, placeholder, required) {
+ super(document.createElement('div'))
+ this.container.classList.add(className)
+
+ const input = new Input(id, type, placeholder, required)
+ this.add(input)
+
+ const icon = new Icon()
+ this.add(icon)
+
+ let isVisible = false
+ icon.addBehavior('click', function (event) {
+ icon.container.classList.toggle('fa-eye-slash')
+ if (!isVisible) {
+ input.setType('text')
+ isVisible = true
+ } else {
+ input.setType('password')
+ isVisible = false
+ }
+ })
+ }
+
+ getValue() {
+ return this.children[0].container.value
+ }
+ setValue(value) {
+ this.children[0].container.value = value
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Picture.js b/staff/rafael-infante/unsocial.13/compo/Picture.js
new file mode 100644
index 00000000..10de5ba9
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Picture.js
@@ -0,0 +1,12 @@
+/**
+ * Builds a Picture instance
+ * @param {string} imageSrc directory/path of the image
+ * @param {string} imageClass Name the CSS class of the Picture instance
+ */
+class Picture extends Compo {
+ constructor(imageSrc, imageClass) {
+ super(document.createElement('img'))
+ this.container.src = imageSrc
+ this.container.classList.add(imageClass)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Preformatted.js b/staff/rafael-infante/unsocial.13/compo/Preformatted.js
new file mode 100644
index 00000000..b8f7449d
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Preformatted.js
@@ -0,0 +1,17 @@
+/**
+ * Builds a Preformatted instance
+ * @param {string} text text inside the Preformatted instance
+ */
+class Preformatted extends Compo {
+ constructor(text) {
+ super(document.createElement('pre'))
+ this.container.innerText = text
+ }
+
+ setText(text) {
+ this.container.innerText = text
+ }
+ getText() {
+ return this.container.innerText
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Snippet.js b/staff/rafael-infante/unsocial.13/compo/Snippet.js
new file mode 100644
index 00000000..bd091f05
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Snippet.js
@@ -0,0 +1,18 @@
+/**
+ *
+ * @param {*} text
+ */
+class Snippet extends Compo {
+ constructor(title, text) {
+ super(document.createElement('div'))
+
+ const caption = new Heading(title, 4)
+ this.add(caption)
+
+ const pre = new Preformatted('')
+ const code = new Code(text)
+ pre.add(code)
+
+ this.add(pre)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/Time.js b/staff/rafael-infante/unsocial.13/compo/Time.js
new file mode 100644
index 00000000..2f10b8f8
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/Time.js
@@ -0,0 +1,17 @@
+/**
+ * Builds a Time instance
+ * @param {string} text text inside the Time instance
+ */
+class Time extends Compo {
+ constructor(text) {
+ super(document.createElement('time'))
+ this.container.innerText = text
+ }
+
+ setText(text) {
+ this.container.innerText = text
+ }
+ getText() {
+ return this.container.innerText
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/index.html b/staff/rafael-infante/unsocial.13/compo/index.html
new file mode 100644
index 00000000..02284b1d
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+ Compo v0.0.5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/compo/main.js b/staff/rafael-infante/unsocial.13/compo/main.js
new file mode 100644
index 00000000..3a2da656
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/compo/main.js
@@ -0,0 +1,24 @@
+const page = new Compo(document.body)
+
+const title = new Heading('Compo', 1)
+page.add(title)
+
+const inputTitle = new Heading('Input', 2)
+page.add(inputTitle)
+
+const button = new Button('button', 'button', 'Submit')
+page.add(button)
+
+const snippet = new Snippet('Demo Input', 'var input = new Input(\'password\', \'password\')\npage.add(input)')
+page.add(snippet)
+
+const input = new Input('password', 'password', 'Enter password', true)
+page.add(input)
+
+const linkTitle = new Heading('Link', 2)
+
+const snippet2 = new Snippet('Demo Link', 'var link = new Link(\'Google\')\npage.add(link)')
+page.add(snippet2)
+
+const link = new Link('Google')
+page.add(link)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/data/posts.js b/staff/rafael-infante/unsocial.13/data/posts.js
new file mode 100644
index 00000000..88f613e9
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/data/posts.js
@@ -0,0 +1,20 @@
+const 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
+ },
+ {
+ image: 'https://png.pngtree.com/png-clipart/20231020/original/pngtree-couple-dressed-up-like-a-pirate-and-vampire-taking-a-selfie-png-image_13385873.png',
+ text: 'muajajajaja',
+ username: 'captainhook',
+ date: new Date
+ }
+]
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/data/users.js b/staff/rafael-infante/unsocial.13/data/users.js
new file mode 100644
index 00000000..cea1f4ba
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/data/users.js
@@ -0,0 +1,4 @@
+const users = [
+ { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+ { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+]
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/images/boy.png b/staff/rafael-infante/unsocial.13/images/boy.png
new file mode 100644
index 00000000..fc4e8b35
Binary files /dev/null and b/staff/rafael-infante/unsocial.13/images/boy.png differ
diff --git a/staff/rafael-infante/unsocial.13/images/girl.png b/staff/rafael-infante/unsocial.13/images/girl.png
new file mode 100644
index 00000000..27f367db
Binary files /dev/null and b/staff/rafael-infante/unsocial.13/images/girl.png differ
diff --git a/staff/rafael-infante/unsocial.13/images/users-avatar.png b/staff/rafael-infante/unsocial.13/images/users-avatar.png
new file mode 100644
index 00000000..7ac2ff60
Binary files /dev/null and b/staff/rafael-infante/unsocial.13/images/users-avatar.png differ
diff --git a/staff/rafael-infante/unsocial.13/images/users-avatar2.png b/staff/rafael-infante/unsocial.13/images/users-avatar2.png
new file mode 100644
index 00000000..ccee2bf7
Binary files /dev/null and b/staff/rafael-infante/unsocial.13/images/users-avatar2.png differ
diff --git a/staff/rafael-infante/unsocial.13/index.html b/staff/rafael-infante/unsocial.13/index.html
new file mode 100644
index 00000000..a913c266
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+ Unsocial
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/logic/authenticateUser.js b/staff/rafael-infante/unsocial.13/logic/authenticateUser.js
new file mode 100644
index 00000000..05221c87
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/logic/authenticateUser.js
@@ -0,0 +1,14 @@
+const authenticateUser = (loginUsername, loginPassword) => {
+ if (loginUsername.length < 4 || loginUsername.length > 12)
+ throw new Error('invalid username')
+
+ if (loginPassword < 8)
+ throw new Error('invalid password')
+
+ const user = users.find(user => user.username === loginUsername && user.password === loginPassword)
+
+ if (user === undefined)
+ throw new Error('wrong credentials')
+
+ return user
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/logic/createPost.js b/staff/rafael-infante/unsocial.13/logic/createPost.js
new file mode 100644
index 00000000..af51493d
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/logic/createPost.js
@@ -0,0 +1,14 @@
+const createpost = (username, image, text) => {
+ if (username.length < 4 || username.length > 12)
+ throw new Error('invalid username')
+ // TODO input validation
+
+ const post = {
+ image: image,
+ text: text,
+ username: username,
+ date: new Date
+ }
+
+ posts.push(post)
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/logic/getposts.js b/staff/rafael-infante/unsocial.13/logic/getposts.js
new file mode 100644
index 00000000..0ccae925
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/logic/getposts.js
@@ -0,0 +1 @@
+const getPosts = () => posts
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/logic/registerUser.js b/staff/rafael-infante/unsocial.13/logic/registerUser.js
new file mode 100644
index 00000000..abd496cf
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/logic/registerUser.js
@@ -0,0 +1,23 @@
+const registerUser = (name, email, username, password, confirmPassword) => {
+ if (name.length < 2)
+ throw new Error('Invalid name')
+
+ if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
+ throw new Error('Invalid email')
+
+ const registeredUser = users.find(user => user.email === email || user.username === username)
+ if (registeredUser)
+ throw new Error('This user is already registered')
+
+ if (username.length < 4 || username.length > 12)
+ throw new Error('invalid user name')
+
+ if (password.length < 8)
+ throw new Error('invalid password')
+
+ if (password !== confirmPassword)
+ throw new Error('passwords do not match')
+ const user = { name: name, email: email, username: username, password: password }
+
+ users.push(user)
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/main.js b/staff/rafael-infante/unsocial.13/main.js
new file mode 100644
index 00000000..60ac105d
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/main.js
@@ -0,0 +1,16 @@
+let loggedUser = null
+
+const header = new Header('logo-container')
+const picture = new Picture('images/users-avatar.png', 'logo')
+header.add(picture)
+const heading = new Heading('unSocial', 1)
+header.add(heading)
+
+const login = new Login()
+
+const page = new Compo(document.querySelector('body'))
+
+page.add(header)
+page.add(login)
+
+let home
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/style.css b/staff/rafael-infante/unsocial.13/style.css
new file mode 100644
index 00000000..41524f1f
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/style.css
@@ -0,0 +1,132 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+
+:root {
+ --font: 'Poppins';
+ font-family: var(--font);
+ background-color: #e4b834;
+}
+
+.logo-container {
+ display: flex;
+ text-decoration: none;
+ color: black;
+ align-items: center;
+ margin: 0;
+ padding-left: 15px;
+}
+
+.logo {
+ max-height: 45px;
+ margin-right: 5px;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 0 15px 15px 15px;
+}
+
+.section-container {
+ background-color: white;
+ padding: 0 20px 20px 20px;
+ margin: 10px;
+ width: 85%;
+ max-width: 500px;
+ min-height: 400px;
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.form-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+
+label {
+ padding-bottom: 6px;
+ font-size: 14px;
+}
+
+input {
+ margin-bottom: 10px;
+ padding: 10px;
+ border-radius: 5px;
+ border: 1px solid gray;
+}
+
+button {
+ color: white;
+ background-color: black;
+ margin-top: 25px;
+ padding: 15px;
+ border-radius: 15px;
+ cursor: pointer;
+ font-weight: bolder;
+ border: none;
+}
+
+button:hover {
+ color: black;
+ background-color: #e7cc79;
+ border: none;
+}
+
+#btn-register {
+ margin: 0;
+}
+
+#bottom-text,
+p {
+ font-size: 13px;
+ color: grey;
+ margin-top: 15px;
+ margin-bottom: 0;
+}
+
+a {
+ text-decoration: none;
+ font-weight: bold;
+ color: black;
+ cursor: pointer;
+}
+
+a:hover {
+ color: #dda600;
+}
+
+h4 {
+ margin: 20px;
+}
+
+.password-container {
+ position: relative;
+ display: inline-block;
+}
+
+.password-container input {
+ width: 95%;
+}
+
+.password-container i {
+ position: absolute;
+ top: 40%;
+ right: 18px;
+ transform: translateY(-50%);
+ cursor: pointer;
+}
+
+.boy {
+ /* height: 280px; */
+ width: 100%;
+}
+
+@media (max-width: 350px) {
+ .password-container input {
+ width: 92%;
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/view/CreatePost.js b/staff/rafael-infante/unsocial.13/view/CreatePost.js
new file mode 100644
index 00000000..256795b3
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/view/CreatePost.js
@@ -0,0 +1,46 @@
+class CreatePost extends Compo {
+ constructor(className) {
+ super(document.createElement('div'))
+
+ this.container.classList.add(className)
+
+ const title = new Heading('Create a Post', 3)
+ this.add(title)
+
+ const form = new Form('form-container')
+
+ const imageLabel = new Label('image', 'Image')
+ const imageInput = new Input('image', 'text', 'Select an image', true)
+ form.add(imageLabel)
+ form.add(imageInput)
+
+ const textLabel = new Label('text', 'Text')
+ const textInput = new Input('text', 'text', 'Write a text', true)
+ form.add(textLabel)
+ form.add(textInput)
+
+ const submitButton = new Button('submit', 'submit', 'Create')
+ form.add(submitButton)
+
+ this.add(form)
+
+ form.addBehavior('submit', event => {
+ event.preventDefault()
+ const image = imageInput.getValue()
+ const text = textInput.getValue()
+
+ try {
+ createpost(loggedUser.username, image, text)
+ form.reset()
+ this.remove()
+ const postList = new PostList()
+ home.add(postList)
+
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ })
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/view/Home.js b/staff/rafael-infante/unsocial.13/view/Home.js
new file mode 100644
index 00000000..0870e448
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/view/Home.js
@@ -0,0 +1,47 @@
+/**
+ * Builds Home instances
+ */
+class Home extends Compo {
+ constructor() {
+ super(document.createElement('section'))
+
+ this.container.id = 'home'
+ this.container.classList.add('section-container')
+
+ const title = new Heading('Home', 2)
+ this.add(title)
+
+ const text = new Heading('Hello, ' + loggedUser.name + '!', 3)
+ this.add(text)
+
+ const image = new Picture('images/boy.png', 'boy')
+ this.add(image)
+
+ const logoutButton = new Button('btn.logout', 'submit', 'Logout')
+ this.add(logoutButton)
+
+ // Functionality of logout button
+ logoutButton.container.addEventListener('click', event => {
+ const condition = prompt('Are you sure? (y/n)')
+ if (condition === 'y') {
+ event.preventDefault()
+ loggedUser = null
+ this.remove()
+ page.add(login)
+ }
+ })
+
+ const postButton = new Button('btn-post', 'button', 'Post')
+ this.add(postButton)
+
+ postButton.addBehavior('click', () => {
+
+ const createPost = new CreatePost('section-container')
+ this.children[this.children.length - 1].remove()
+ this.add(createPost)
+ })
+
+ const postList = new PostList()
+ this.add(postList)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/view/Login.js b/staff/rafael-infante/unsocial.13/view/Login.js
new file mode 100644
index 00000000..d3a20e5e
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/view/Login.js
@@ -0,0 +1,70 @@
+/**
+ * Builds Login instances
+ */
+class Login extends Compo {
+ constructor() {
+ super(document.createElement('section'))
+
+ this.container.classList.add('section-container')
+
+ const paragraph = document.createElement('p')
+ paragraph.innerText = 'Welcome !'
+ this.container.appendChild(paragraph)
+
+ const title = new Heading('Sign in to unSocial', 2)
+ this.add(title)
+
+ const text = new Heading('Write username and password to access', 4)
+ this.add(text)
+
+ const form = (new Form('form-container'))
+ this.add(form)
+
+ form.add(new Label('login-user', 'User name'))
+ const usernameInput = new Input('login-user', 'text', 'Enter your user name', true)
+ form.add(usernameInput)
+
+ form.add(new Label('login-password', 'Password'))
+ const passwordInput = new Passwordinput('password-container', 'password', 'password', 'Enter your password', true)
+ form.add(passwordInput)
+
+ const submitButton = new Button('btn-login', 'submit', 'Login')
+ form.add(submitButton)
+
+ const anchorText = document.createElement('p')
+ anchorText.innerText = "Don't have an account? "
+ this.container.appendChild(anchorText)
+
+ const registerLink = new Link('Register', '#')
+
+ anchorText.appendChild(registerLink.container)
+
+ // Send user to register section when clicking on register link
+ registerLink.addBehavior('click', event => {
+ event.preventDefault()
+ this.remove()
+ const register = new Register()
+ page.add(register)
+ })
+
+ // actions when submitting the login Form
+ form.addBehavior('submit', event => {
+ event.preventDefault()
+ const username = usernameInput.getValue()
+ const password = passwordInput.getValue()
+
+ try {
+ loggedUser = authenticateUser(username, password)
+ form.container.reset()
+ this.remove()
+ home = new Home()
+ page.add(home)
+ }
+ catch (error) {
+ passwordInput.setValue('')
+ alert(error.message)
+ console.error(error)
+ }
+ })
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/view/Post.js b/staff/rafael-infante/unsocial.13/view/Post.js
new file mode 100644
index 00000000..ef18a249
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/view/Post.js
@@ -0,0 +1,17 @@
+class Post extends Compo {
+ constructor(username, image, text, date) {
+ super(document.createElement('div'))
+
+ const userTitle = new Heading(username, 4)
+ this.add(userTitle)
+
+ const picture = new Picture(image, 'boy')
+ this.add(picture)
+
+ const comment = new Paragraph(text)
+ this.add(comment)
+
+ const time = new Time(date)
+ this.add(time)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/view/PostList.js b/staff/rafael-infante/unsocial.13/view/PostList.js
new file mode 100644
index 00000000..9e801ea5
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/view/PostList.js
@@ -0,0 +1,22 @@
+class PostList extends Compo {
+ constructor() {
+ super(document.createElement('div'))
+
+ const title = new Heading('Posts', 3)
+ this.add(title)
+
+ try {
+ const posts = getPosts().toReversed()
+
+ posts.forEach(post => {
+ const _post = new Post(post.username, post.image, post.text, post.date)
+ this.add(_post)
+ })
+
+ } catch (error) {
+ alert(error.message)
+
+ console.error(error)
+ }
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial.13/view/Register.js b/staff/rafael-infante/unsocial.13/view/Register.js
new file mode 100644
index 00000000..decac37a
--- /dev/null
+++ b/staff/rafael-infante/unsocial.13/view/Register.js
@@ -0,0 +1,73 @@
+/**
+ * Builds Register instances
+ */
+class Register extends Compo {
+ constructor() {
+ super(document.createElement('section'))
+
+ this.container.classList.add('section-container')
+
+ const title = new Heading('Register to unSocial', 2)
+ this.add(title)
+
+ const form = new Form('form-container')
+ this.add(form)
+
+ form.add(new Label('name', 'Name'))
+ const nameInput = new Input('name', 'text', 'Enter your name', true)
+ form.add(nameInput)
+
+ form.add(new Label('email', 'Email'))
+ const emailInput = new Input('email', 'email', 'Enter your email', true)
+ form.add(emailInput)
+
+ form.add(new Label('username', 'User name'))
+ const usernameInput = new Input('username', 'text', 'Enter your user name', true)
+ form.add(usernameInput)
+
+ form.add(new Label('password', 'Password'))
+ const passwordInput = new Input('password', 'password', 'Enter your password', true)
+ form.add(passwordInput)
+
+ form.add(new Label('confirm-password', 'Confirm password'))
+ const confirmpasswordInput = new Input('confirm-password', 'password', 'Confirm your password', true)
+ form.add(confirmpasswordInput)
+
+ const registerButton = new Button('btn-register', 'submit', 'Register')
+ form.add(registerButton)
+
+ const registerAnchorText = document.createElement('p')
+ registerAnchorText.innerText = 'Already have an account? '
+ this.container.appendChild(registerAnchorText)
+
+ const loginLink = new Link('Login', '#')
+ registerAnchorText.appendChild(loginLink.container)
+
+ loginLink.addBehavior('click', event => {
+ event.preventDefault();
+ this.remove()
+ page.add(login)
+ })
+
+ // Save data of new user when clicking on register button
+ form.addBehavior('submit', event => {
+ event.preventDefault()
+ const name = nameInput.getValue()
+ const email = emailInput.getValue()
+ const username = usernameInput.getValue()
+ const password = passwordInput.getValue()
+ const confirmPassword = confirmpasswordInput.getValue()
+
+ try {
+ registerUser(name, email, username, password, confirmPassword)
+ form.reset()
+ this.remove()
+ page.add(login)
+ }
+ catch (error) {
+ alert(error.message)
+ console.error(error)
+ }
+ })
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Button.js b/staff/rafael-infante/unsocial/compo/Button.js
index 4e1c489c..bb66bc97 100644
--- a/staff/rafael-infante/unsocial/compo/Button.js
+++ b/staff/rafael-infante/unsocial/compo/Button.js
@@ -4,10 +4,11 @@
* @param {string} type name the type of Button instance
* @param {string} text text inside the Button instance
*/
-function Button(id, type, text) {
- Compo.call(this, document.createElement('button'))
- this.container.id = id
- this.container.type = type
- this.container.innerText = text
-}
-Button.extends(Compo)
\ No newline at end of file
+class Button extends Compo {
+ constructor(id, type, text) {
+ super(document.createElement('button'))
+ this.container.id = id
+ this.container.type = type
+ this.container.innerText = text
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Code.js b/staff/rafael-infante/unsocial/compo/Code.js
index 0fecd689..e30b1037 100644
--- a/staff/rafael-infante/unsocial/compo/Code.js
+++ b/staff/rafael-infante/unsocial/compo/Code.js
@@ -2,15 +2,16 @@
* Builds a Code instance
* @param {string} text text inside the Code instance
*/
-function Code(text) {
- Compo.call(this, document.createElement('code'))
- this.container.innerText = text
-}
-Code.extends(Compo)
+class Code extends Compo {
+ constructor(text) {
+ super(document.createElement('code'))
+ this.container.innerText = text
+ }
-Code.prototype.setText = function (text) {
- this.container.innerText = text
-}
-Code.prototype.getText = function () {
- return this.container.innerText
+ setText(text) {
+ this.container.innerText = text
+ }
+ getText() {
+ return this.container.innerText
+ }
}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Compo.js b/staff/rafael-infante/unsocial/compo/Compo.js
index bc8ee827..6d837bf9 100644
--- a/staff/rafael-infante/unsocial/compo/Compo.js
+++ b/staff/rafael-infante/unsocial/compo/Compo.js
@@ -2,28 +2,30 @@
* Builds Compo instances
* @param {HTMLElement} container The DOM container of the compo instance
*/
-function Compo(container) {
- this.container = container
- this.children = []
- this.parent = null
-}
+class Compo {
+ constructor(container) {
+ this.container = container
+ this.children = []
+ this.parent = null
+ }
-Compo.prototype.add = function (child) {
- this.children.push(child)
- child.parent = this
- this.container.appendChild(child.container)
-}
+ add(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))
+ remove() {
+ var index = this.parent.children.findIndex(function (child) {
+ return child === this
+ }.bind(this))
- if (index > -1) this.parent.children.splice(index, 1)
+ if (index > -1) this.parent.children.splice(index, 1)
- this.container.remove()
-}
+ this.container.remove()
+ }
-Compo.prototype.addBehavior = function (action, callback) {
- this.container.addEventListener(action, callback)
+ addBehavior(action, callback) {
+ this.container.addEventListener(action, callback)
+ }
}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Form.js b/staff/rafael-infante/unsocial/compo/Form.js
index cea714fe..7a14cb82 100644
--- a/staff/rafael-infante/unsocial/compo/Form.js
+++ b/staff/rafael-infante/unsocial/compo/Form.js
@@ -2,12 +2,13 @@
* Builds a Form instance
* @param {string} className Name the CSS class of the Form instance
*/
-function Form(className) {
- Compo.call(this, document.createElement('form'))
- this.container.classList.add(className)
-}
-Form.extends(Compo)
+class Form extends Compo {
+ constructor(className) {
+ super(document.createElement('form'))
+ this.container.classList.add(className)
+ }
-Form.prototype.reset = function () {
- this.container.reset()
+ reset() {
+ this.container.reset()
+ }
}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Header.js b/staff/rafael-infante/unsocial/compo/Header.js
index 69a78d74..fb589ece 100644
--- a/staff/rafael-infante/unsocial/compo/Header.js
+++ b/staff/rafael-infante/unsocial/compo/Header.js
@@ -2,8 +2,9 @@
* Builds Header instances
* @param {string} className Name the CSS class of the Header instance
*/
-function Header(className) {
- Compo.call(this, document.createElement('header'))
- this.container.classList.add(className)
-}
-Header.extends(Compo)
\ No newline at end of file
+class Header extends Compo {
+ constructor(className) {
+ super(document.createElement('header'))
+ this.container.classList.add(className)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Heading.js b/staff/rafael-infante/unsocial/compo/Heading.js
index e167b259..e38b7e0e 100644
--- a/staff/rafael-infante/unsocial/compo/Heading.js
+++ b/staff/rafael-infante/unsocial/compo/Heading.js
@@ -3,8 +3,9 @@
* @param {string} text Text inside the heading tag
* @param {number} level Size of the heading
*/
-function Heading(text, level) {
- Compo.call(this, document.createElement('h' + level))
- this.container.innerText = text
-}
-Heading.extends(Compo)
\ No newline at end of file
+class Heading extends Compo {
+ constructor(text, level) {
+ super(document.createElement('h' + level))
+ this.container.innerText = text
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Icon.js b/staff/rafael-infante/unsocial/compo/Icon.js
index 6b480a7e..226f6a64 100644
--- a/staff/rafael-infante/unsocial/compo/Icon.js
+++ b/staff/rafael-infante/unsocial/compo/Icon.js
@@ -1,7 +1,8 @@
-function Icon() {
- Compo.call(this, document.createElement('i'))
- this.container.classList.add('far')
- this.container.classList.add('fa-eye')
- this.container.id = 'icon'
-}
-Icon.extends(Compo)
\ No newline at end of file
+class Icon extends Compo {
+ constructor() {
+ super(document.createElement('i'))
+ this.container.classList.add('far')
+ this.container.classList.add('fa-eye')
+ this.container.id = 'icon'
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Input.js b/staff/rafael-infante/unsocial/compo/Input.js
index 5bb12cee..0a593bfb 100644
--- a/staff/rafael-infante/unsocial/compo/Input.js
+++ b/staff/rafael-infante/unsocial/compo/Input.js
@@ -5,21 +5,22 @@
* @param {string} placeholder Text inside the Input instance
* @param {boolean} required Gives required attribute to the Input instance
*/
-function Input(id, type, placeholder, required) {
- Compo.call(this, document.createElement('input'))
- this.container.id = id
- this.container.type = type
- this.container.placeholder = placeholder
- this.container.required = required
-}
-Input.extends(Compo)
+class Input extends Compo {
+ constructor(id, type, placeholder, required) {
+ super(document.createElement('input'))
+ this.container.id = id
+ this.container.type = type
+ this.container.placeholder = placeholder
+ this.container.required = required
+ }
-Input.prototype.getValue = function () {
- return this.container.value
-}
-Input.prototype.setValue = function (value) {
- this.container.value = value
-}
-Input.prototype.setType = function (type) {
- this.container.type = type
+ getValue() {
+ return this.container.value
+ }
+ setValue(value) {
+ this.container.value = value
+ }
+ setType(type) {
+ this.container.type = type
+ }
}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Label.js b/staff/rafael-infante/unsocial/compo/Label.js
index 259d0ed3..41c7c631 100644
--- a/staff/rafael-infante/unsocial/compo/Label.js
+++ b/staff/rafael-infante/unsocial/compo/Label.js
@@ -3,9 +3,10 @@
* @param {string} id Name the for attribute of the Label instance
* @param {string} text Text inside the label tag
*/
-function Label(id, text) {
- Compo.call(this, document.createElement('label'))
- this.container.htmlFor = id
- this.container.innerText = text
-}
-Label.extends(Compo)
\ No newline at end of file
+class Label extends Compo {
+ constructor(id, text) {
+ super(document.createElement('label'))
+ this.container.htmlFor = id
+ this.container.innerText = text
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Link.js b/staff/rafael-infante/unsocial/compo/Link.js
index dde70f42..f11b0c4f 100644
--- a/staff/rafael-infante/unsocial/compo/Link.js
+++ b/staff/rafael-infante/unsocial/compo/Link.js
@@ -3,9 +3,10 @@
* @param {string} text text inside the Link instance
* @param {string} href URL of the Link instance
*/
-function Link(text, href) {
- Compo.call(this, document.createElement('a'))
- this.container.innerText = text
- this.container.href = href
-}
-Link.extends(Compo)
\ No newline at end of file
+class Link extends Compo {
+ constructor(text, href) {
+ super(document.createElement('a'))
+ this.container.innerText = text
+ this.container.href = href
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Paragraph.js b/staff/rafael-infante/unsocial/compo/Paragraph.js
index 77b290d3..cc7db7a8 100644
--- a/staff/rafael-infante/unsocial/compo/Paragraph.js
+++ b/staff/rafael-infante/unsocial/compo/Paragraph.js
@@ -2,15 +2,16 @@
* Builds a Paragraph instance
* @param {string} text text inside the Paragraph instance
*/
-function Paragraph(text) {
- Compo.call(this, document.createElement('p'))
- this.container.innerText = text
-}
-Paragraph.extends(Compo)
+class Paragraph extends Compo {
+ constructor(text) {
+ super(document.createElement('p'))
+ this.container.innerText = text
+ }
-Paragraph.prototype.setText = function (text) {
- this.container.innerText = text
-}
-Paragraph.prototype.getText = function () {
- return this.container.innerText
+ setText(text) {
+ this.container.innerText = text
+ }
+ getText() {
+ return this.container.innerText
+ }
}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/PasswordInput.js b/staff/rafael-infante/unsocial/compo/PasswordInput.js
index 5591de87..9e1d73ae 100644
--- a/staff/rafael-infante/unsocial/compo/PasswordInput.js
+++ b/staff/rafael-infante/unsocial/compo/PasswordInput.js
@@ -1,30 +1,31 @@
-function Passwordinput(className, id, type, placeholder, required) {
- Compo.call(this, document.createElement('div'))
- this.container.classList.add(className)
+class Passwordinput extends Compo {
+ constructor(className, id, type, placeholder, required) {
+ super(document.createElement('div'))
+ this.container.classList.add(className)
- var input = new Input(id, type, placeholder, required)
- this.add(input)
+ const input = new Input(id, type, placeholder, required)
+ this.add(input)
- var icon = new Icon()
- this.add(icon)
+ const icon = new Icon()
+ this.add(icon)
- var isVisible = false
- icon.addBehavior('click', function (event) {
- icon.container.classList.toggle('fa-eye-slash')
- if (!isVisible) {
- input.setType('text')
- isVisible = true
- } else {
- input.setType('password')
- isVisible = false
- }
- })
-}
-Passwordinput.extends(Compo)
+ let isVisible = false
+ icon.addBehavior('click', function (event) {
+ icon.container.classList.toggle('fa-eye-slash')
+ if (!isVisible) {
+ input.setType('text')
+ isVisible = true
+ } else {
+ input.setType('password')
+ isVisible = false
+ }
+ })
+ }
-Passwordinput.prototype.getValue = function () {
- return this.children[0].container.value
-}
-Passwordinput.prototype.setValue = function (value) {
- this.children[0].container.value = value
+ getValue() {
+ return this.children[0].container.value
+ }
+ setValue(value) {
+ this.children[0].container.value = value
+ }
}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Picture.js b/staff/rafael-infante/unsocial/compo/Picture.js
index 42bfbd16..10de5ba9 100644
--- a/staff/rafael-infante/unsocial/compo/Picture.js
+++ b/staff/rafael-infante/unsocial/compo/Picture.js
@@ -3,9 +3,10 @@
* @param {string} imageSrc directory/path of the image
* @param {string} imageClass Name the CSS class of the Picture instance
*/
-function Picture(imageSrc, imageClass) {
- Compo.call(this, document.createElement('img'))
- this.container.src = imageSrc
- this.container.classList.add(imageClass)
-}
-Picture.extends(Compo)
\ No newline at end of file
+class Picture extends Compo {
+ constructor(imageSrc, imageClass) {
+ super(document.createElement('img'))
+ this.container.src = imageSrc
+ this.container.classList.add(imageClass)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Preformatted.js b/staff/rafael-infante/unsocial/compo/Preformatted.js
index 1fe57e1a..b8f7449d 100644
--- a/staff/rafael-infante/unsocial/compo/Preformatted.js
+++ b/staff/rafael-infante/unsocial/compo/Preformatted.js
@@ -2,15 +2,16 @@
* Builds a Preformatted instance
* @param {string} text text inside the Preformatted instance
*/
-function Preformatted(text) {
- Compo.call(this, document.createElement('pre'))
- this.container.innerText = text
-}
-Preformatted.extends(Compo)
+class Preformatted extends Compo {
+ constructor(text) {
+ super(document.createElement('pre'))
+ this.container.innerText = text
+ }
-Preformatted.prototype.setText = function (text) {
- this.container.innerText = text
-}
-Preformatted.prototype.getText = function () {
- return this.container.innerText
+ setText(text) {
+ this.container.innerText = text
+ }
+ getText() {
+ return this.container.innerText
+ }
}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Snippet.js b/staff/rafael-infante/unsocial/compo/Snippet.js
index 491ce9eb..bd091f05 100644
--- a/staff/rafael-infante/unsocial/compo/Snippet.js
+++ b/staff/rafael-infante/unsocial/compo/Snippet.js
@@ -2,17 +2,17 @@
*
* @param {*} text
*/
-function Snippet(title, text) {
- Compo.call(this, document.createElement('div'))
+class Snippet extends Compo {
+ constructor(title, text) {
+ super(document.createElement('div'))
- var title = new Heading(title, 4)
- this.add(title)
+ const caption = new Heading(title, 4)
+ this.add(caption)
- var pre = new Preformatted('')
- var code = new Code(text)
- pre.add(code)
+ const pre = new Preformatted('')
+ const code = new Code(text)
+ pre.add(code)
- this.add(pre)
-}
-
-Snippet.extends(Compo)
\ No newline at end of file
+ this.add(pre)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/Time.js b/staff/rafael-infante/unsocial/compo/Time.js
index 769b9e07..2f10b8f8 100644
--- a/staff/rafael-infante/unsocial/compo/Time.js
+++ b/staff/rafael-infante/unsocial/compo/Time.js
@@ -2,15 +2,16 @@
* Builds a Time instance
* @param {string} text text inside the Time instance
*/
-function Time(text) {
- Compo.call(this, document.createElement('time'))
- this.container.innerText = text
-}
-Time.extends(Compo)
+class Time extends Compo {
+ constructor(text) {
+ super(document.createElement('time'))
+ this.container.innerText = text
+ }
-Time.prototype.setText = function (text) {
- this.container.innerText = text
-}
-Time.prototype.getText = function () {
- return this.container.innerText
+ setText(text) {
+ this.container.innerText = text
+ }
+ getText() {
+ return this.container.innerText
+ }
}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/compo/main.js b/staff/rafael-infante/unsocial/compo/main.js
index ca25ddfe..3a2da656 100644
--- a/staff/rafael-infante/unsocial/compo/main.js
+++ b/staff/rafael-infante/unsocial/compo/main.js
@@ -1,24 +1,24 @@
-var page = new Compo(document.body)
+const page = new Compo(document.body)
-var title = new Heading('Compo', 1)
+const title = new Heading('Compo', 1)
page.add(title)
-var inputTitle = new Heading('Input', 2)
+const inputTitle = new Heading('Input', 2)
page.add(inputTitle)
-var button = new Button('button', 'button', 'Submit')
+const button = new Button('button', 'button', 'Submit')
page.add(button)
-var snippet = new Snippet('Demo Input', 'var input = new Input(\'password\', \'password\')\npage.add(input)')
+const snippet = new Snippet('Demo Input', 'var input = new Input(\'password\', \'password\')\npage.add(input)')
page.add(snippet)
-var input = new Input('password', 'password', 'Enter password', true)
+const input = new Input('password', 'password', 'Enter password', true)
page.add(input)
-var linkTitle = new Heading('Link', 2)
+const linkTitle = new Heading('Link', 2)
-var snippet = new Snippet('Demo Link', 'var link = new Link(\'Google\')\npage.add(link)')
-page.add(snippet)
+const snippet2 = new Snippet('Demo Link', 'var link = new Link(\'Google\')\npage.add(link)')
+page.add(snippet2)
-var link = new Link('Google')
+const link = new Link('Google')
page.add(link)
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/data/posts.js b/staff/rafael-infante/unsocial/data/posts.js
index 774002a1..88f613e9 100644
--- a/staff/rafael-infante/unsocial/data/posts.js
+++ b/staff/rafael-infante/unsocial/data/posts.js
@@ -1,4 +1,4 @@
-var posts = [
+const posts = [
{
image: 'https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg',
text: 'here we are',
diff --git a/staff/rafael-infante/unsocial/data/users.js b/staff/rafael-infante/unsocial/data/users.js
index f98e7df4..cea1f4ba 100644
--- a/staff/rafael-infante/unsocial/data/users.js
+++ b/staff/rafael-infante/unsocial/data/users.js
@@ -1,4 +1,4 @@
-var users = [
+const users = [
{ name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
{ name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
]
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/index.html b/staff/rafael-infante/unsocial/index.html
index 8e6169f7..a913c266 100644
--- a/staff/rafael-infante/unsocial/index.html
+++ b/staff/rafael-infante/unsocial/index.html
@@ -20,8 +20,6 @@
-
-
diff --git a/staff/rafael-infante/unsocial/logic/authenticateUser.js b/staff/rafael-infante/unsocial/logic/authenticateUser.js
index 4ca735ae..05221c87 100644
--- a/staff/rafael-infante/unsocial/logic/authenticateUser.js
+++ b/staff/rafael-infante/unsocial/logic/authenticateUser.js
@@ -1,13 +1,11 @@
-function authenticateUser(loginUsername, loginPassword) {
+const authenticateUser = (loginUsername, loginPassword) => {
if (loginUsername.length < 4 || loginUsername.length > 12)
throw new Error('invalid username')
if (loginPassword < 8)
throw new Error('invalid password')
- var user = users.find(function (user) {
- return user.username === loginUsername && user.password === loginPassword
- })
+ const user = users.find(user => user.username === loginUsername && user.password === loginPassword)
if (user === undefined)
throw new Error('wrong credentials')
diff --git a/staff/rafael-infante/unsocial/logic/createPost.js b/staff/rafael-infante/unsocial/logic/createPost.js
index 97dbc099..af51493d 100644
--- a/staff/rafael-infante/unsocial/logic/createPost.js
+++ b/staff/rafael-infante/unsocial/logic/createPost.js
@@ -1,9 +1,9 @@
-function createpost(username, image, text) {
+const createpost = (username, image, text) => {
if (username.length < 4 || username.length > 12)
throw new Error('invalid username')
// TODO input validation
- var post = {
+ const post = {
image: image,
text: text,
username: username,
diff --git a/staff/rafael-infante/unsocial/logic/getposts.js b/staff/rafael-infante/unsocial/logic/getposts.js
index c070f29b..0ccae925 100644
--- a/staff/rafael-infante/unsocial/logic/getposts.js
+++ b/staff/rafael-infante/unsocial/logic/getposts.js
@@ -1,3 +1 @@
-function getPosts() {
- return posts
-}
\ No newline at end of file
+const getPosts = () => posts
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/logic/registerUser.js b/staff/rafael-infante/unsocial/logic/registerUser.js
index 4fb48427..abd496cf 100644
--- a/staff/rafael-infante/unsocial/logic/registerUser.js
+++ b/staff/rafael-infante/unsocial/logic/registerUser.js
@@ -1,13 +1,11 @@
-function registerUser(name, email, username, password, confirmPassword) {
+const registerUser = (name, email, username, password, confirmPassword) => {
if (name.length < 2)
throw new Error('Invalid name')
if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
throw new Error('Invalid email')
- var registeredUser = users.find(function (user) {
- return user.email === email || user.username === username
- })
+ const registeredUser = users.find(user => user.email === email || user.username === username)
if (registeredUser)
throw new Error('This user is already registered')
@@ -19,7 +17,7 @@ function registerUser(name, email, username, password, confirmPassword) {
if (password !== confirmPassword)
throw new Error('passwords do not match')
- var user = { name: name, email: email, username: username, password: password }
+ const user = { name: name, email: email, username: username, password: password }
users.push(user)
}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/main.js b/staff/rafael-infante/unsocial/main.js
index 6c38a00d..60ac105d 100644
--- a/staff/rafael-infante/unsocial/main.js
+++ b/staff/rafael-infante/unsocial/main.js
@@ -1,16 +1,16 @@
-var loggedUser = null
+let loggedUser = null
-var header = new Header('logo-container')
-var picture = new Picture('images/users-avatar.png', 'logo')
+const header = new Header('logo-container')
+const picture = new Picture('images/users-avatar.png', 'logo')
header.add(picture)
-var heading = new Heading('unSocial', 1)
+const heading = new Heading('unSocial', 1)
header.add(heading)
-var login = new Login()
+const login = new Login()
-var page = new Compo(document.querySelector('body'))
+const page = new Compo(document.querySelector('body'))
page.add(header)
page.add(login)
-var home
\ No newline at end of file
+let home
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/view/CreatePost.js b/staff/rafael-infante/unsocial/view/CreatePost.js
index e87602b5..256795b3 100644
--- a/staff/rafael-infante/unsocial/view/CreatePost.js
+++ b/staff/rafael-infante/unsocial/view/CreatePost.js
@@ -1,46 +1,46 @@
-function CreatePost(className) {
- Compo.call(this, document.createElement('div'))
+class CreatePost extends Compo {
+ constructor(className) {
+ super(document.createElement('div'))
- this.container.classList.add(className)
+ this.container.classList.add(className)
- var title = new Heading('Create a Post', 3)
- this.add(title)
+ const title = new Heading('Create a Post', 3)
+ this.add(title)
- var form = new Form('form-container')
+ const form = new Form('form-container')
- var imageLabel = new Label('image', 'Image')
- var imageInput = new Input('image', 'text', 'Select an image', true)
- form.add(imageLabel)
- form.add(imageInput)
+ const imageLabel = new Label('image', 'Image')
+ const imageInput = new Input('image', 'text', 'Select an image', true)
+ form.add(imageLabel)
+ form.add(imageInput)
- var textLabel = new Label('text', 'Text')
- var textInput = new Input('text', 'text', 'Write a text', true)
- form.add(textLabel)
- form.add(textInput)
+ const textLabel = new Label('text', 'Text')
+ const textInput = new Input('text', 'text', 'Write a text', true)
+ form.add(textLabel)
+ form.add(textInput)
- var submitButton = new Button('submit', 'submit', 'Create')
- form.add(submitButton)
+ const submitButton = new Button('submit', 'submit', 'Create')
+ form.add(submitButton)
- this.add(form)
+ this.add(form)
- form.addBehavior('submit', function (event) {
- event.preventDefault()
- var image = imageInput.getValue()
- var text = textInput.getValue()
+ form.addBehavior('submit', event => {
+ event.preventDefault()
+ const image = imageInput.getValue()
+ const text = textInput.getValue()
- try {
- createpost(loggedUser.username, image, text)
- form.reset()
- this.remove()
- var postList = new PostList()
- home.add(postList)
+ try {
+ createpost(loggedUser.username, image, text)
+ form.reset()
+ this.remove()
+ const postList = new PostList()
+ home.add(postList)
- } catch (error) {
- alert(error.message)
+ } catch (error) {
+ alert(error.message)
- console.error(error)
- }
- }.bind(this))
-}
-
-CreatePost.extends(Compo)
\ No newline at end of file
+ console.error(error)
+ }
+ })
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/view/Home.js b/staff/rafael-infante/unsocial/view/Home.js
index 836faa62..0870e448 100644
--- a/staff/rafael-infante/unsocial/view/Home.js
+++ b/staff/rafael-infante/unsocial/view/Home.js
@@ -1,47 +1,47 @@
/**
* Builds Home instances
*/
-function Home() {
- Compo.call(this, document.createElement('section'))
-
- this.container.id = 'home'
- this.container.classList.add('section-container')
-
- var title = new Heading('Home', 2)
- this.add(title)
-
- var text = new Heading('Hello, ' + loggedUser.name + '!', 3)
- this.add(text)
-
- var image = new Picture('images/boy.png', 'boy')
- this.add(image)
-
- var logoutButton = new Button('btn.logout', 'submit', 'Logout')
- this.add(logoutButton)
-
- // Functionality of logout button
- logoutButton.container.addEventListener('click', function (event) {
- var condition = prompt('Are you sure? (y/n)')
- if (condition === 'y') {
- event.preventDefault()
- loggedUser = null
- this.remove()
- page.add(login)
- }
- }.bind(this))
-
- var postButton = new Button('btn-post', 'button', 'Post')
- this.add(postButton)
-
- postButton.addBehavior('click', function () {
-
- var createPost = new CreatePost('section-container')
- this.children[this.children.length - 1].remove()
- this.add(createPost)
- }.bind(this))
-
- var postList = new PostList()
- this.add(postList)
-}
-
-Home.extends(Compo)
\ No newline at end of file
+class Home extends Compo {
+ constructor() {
+ super(document.createElement('section'))
+
+ this.container.id = 'home'
+ this.container.classList.add('section-container')
+
+ const title = new Heading('Home', 2)
+ this.add(title)
+
+ const text = new Heading('Hello, ' + loggedUser.name + '!', 3)
+ this.add(text)
+
+ const image = new Picture('images/boy.png', 'boy')
+ this.add(image)
+
+ const logoutButton = new Button('btn.logout', 'submit', 'Logout')
+ this.add(logoutButton)
+
+ // Functionality of logout button
+ logoutButton.container.addEventListener('click', event => {
+ const condition = prompt('Are you sure? (y/n)')
+ if (condition === 'y') {
+ event.preventDefault()
+ loggedUser = null
+ this.remove()
+ page.add(login)
+ }
+ })
+
+ const postButton = new Button('btn-post', 'button', 'Post')
+ this.add(postButton)
+
+ postButton.addBehavior('click', () => {
+
+ const createPost = new CreatePost('section-container')
+ this.children[this.children.length - 1].remove()
+ this.add(createPost)
+ })
+
+ const postList = new PostList()
+ this.add(postList)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/view/Login.js b/staff/rafael-infante/unsocial/view/Login.js
index e91f74e5..d3a20e5e 100644
--- a/staff/rafael-infante/unsocial/view/Login.js
+++ b/staff/rafael-infante/unsocial/view/Login.js
@@ -1,71 +1,70 @@
/**
* Builds Login instances
*/
-function Login() {
- Compo.call(this, document.createElement('section'))
+class Login extends Compo {
+ constructor() {
+ super(document.createElement('section'))
- this.container.classList.add('section-container')
+ this.container.classList.add('section-container')
- var paragraph = document.createElement('p')
- paragraph.innerText = 'Welcome !'
- this.container.appendChild(paragraph)
+ const paragraph = document.createElement('p')
+ paragraph.innerText = 'Welcome !'
+ this.container.appendChild(paragraph)
- var title = new Heading('Sign in to unSocial', 2)
- this.add(title)
+ const title = new Heading('Sign in to unSocial', 2)
+ this.add(title)
- var text = new Heading('Write username and password to access', 4)
- this.add(text)
+ const text = new Heading('Write username and password to access', 4)
+ this.add(text)
- var form = (new Form('form-container'))
- this.add(form)
+ const form = (new Form('form-container'))
+ this.add(form)
- form.add(new Label('login-user', 'User name'))
- var usernameInput = new Input('login-user', 'text', 'Enter your user name', true)
- form.add(usernameInput)
+ form.add(new Label('login-user', 'User name'))
+ const usernameInput = new Input('login-user', 'text', 'Enter your user name', true)
+ form.add(usernameInput)
- form.add(new Label('login-password', 'Password'))
- var passwordInput = new Passwordinput('password-container', 'password', 'password', 'Enter your password', true)
- form.add(passwordInput)
+ form.add(new Label('login-password', 'Password'))
+ const passwordInput = new Passwordinput('password-container', 'password', 'password', 'Enter your password', true)
+ form.add(passwordInput)
- var submitButton = new Button('btn-login', 'submit', 'Login')
- form.add(submitButton)
+ const submitButton = new Button('btn-login', 'submit', 'Login')
+ form.add(submitButton)
- var anchorText = document.createElement('p')
- anchorText.innerText = "Don't have an account? "
- this.container.appendChild(anchorText)
+ const anchorText = document.createElement('p')
+ anchorText.innerText = "Don't have an account? "
+ this.container.appendChild(anchorText)
- var registerLink = new Link('Register', '#')
+ const registerLink = new Link('Register', '#')
- anchorText.appendChild(registerLink.container)
+ anchorText.appendChild(registerLink.container)
- // Send user to register section when clicking on register link
- registerLink.addBehavior('click', function (event) {
- event.preventDefault()
- this.remove()
- var register = new Register()
- page.add(register)
- }.bind(this))
- // actions when submitting the login Form
- form.addBehavior('submit', function (event) {
- event.preventDefault()
-
- var username = usernameInput.getValue()
- var password = passwordInput.getValue()
-
- try {
- loggedUser = authenticateUser(username, password)
- form.container.reset()
+ // Send user to register section when clicking on register link
+ registerLink.addBehavior('click', event => {
+ event.preventDefault()
this.remove()
- home = new Home()
- page.add(home)
- }
- catch (error) {
- passwordInput.setValue('')
- alert(error.message)
- console.error(error)
- }
- }.bind(this))
-
-}
-
-Login.extends(Compo)
\ No newline at end of file
+ const register = new Register()
+ page.add(register)
+ })
+
+ // actions when submitting the login Form
+ form.addBehavior('submit', event => {
+ event.preventDefault()
+ const username = usernameInput.getValue()
+ const password = passwordInput.getValue()
+
+ try {
+ loggedUser = authenticateUser(username, password)
+ form.container.reset()
+ this.remove()
+ home = new Home()
+ page.add(home)
+ }
+ catch (error) {
+ passwordInput.setValue('')
+ alert(error.message)
+ console.error(error)
+ }
+ })
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/view/Post.js b/staff/rafael-infante/unsocial/view/Post.js
index 686ea9ed..ef18a249 100644
--- a/staff/rafael-infante/unsocial/view/Post.js
+++ b/staff/rafael-infante/unsocial/view/Post.js
@@ -1,17 +1,17 @@
-function Post(username, image, text, date) {
- Compo.call(this, document.createElement('div'))
+class Post extends Compo {
+ constructor(username, image, text, date) {
+ super(document.createElement('div'))
- var userTitle = new Heading(username, 4)
- this.add(userTitle)
+ const userTitle = new Heading(username, 4)
+ this.add(userTitle)
- var picture = new Picture(image, 'boy')
- this.add(picture)
+ const picture = new Picture(image, 'boy')
+ this.add(picture)
- var comment = new Paragraph(text)
- this.add(comment)
+ const comment = new Paragraph(text)
+ this.add(comment)
- var time = new Time(date)
- this.add(time)
-}
-
-Post.extends(Compo)
\ No newline at end of file
+ const time = new Time(date)
+ this.add(time)
+ }
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/view/PostList.js b/staff/rafael-infante/unsocial/view/PostList.js
index ac376db6..9e801ea5 100644
--- a/staff/rafael-infante/unsocial/view/PostList.js
+++ b/staff/rafael-infante/unsocial/view/PostList.js
@@ -1,22 +1,22 @@
-function PostList() {
- Compo.call(this, document.createElement('div'))
+class PostList extends Compo {
+ constructor() {
+ super(document.createElement('div'))
- var title = new Heading('Posts', 3)
- this.add(title)
+ const title = new Heading('Posts', 3)
+ this.add(title)
- try {
- var posts = getPosts().toReversed()
+ try {
+ const posts = getPosts().toReversed()
- posts.forEach(function (post) {
- var _post = new Post(post.username, post.image, post.text, post.date)
- this.add(_post)
- }.bind(this))
+ posts.forEach(post => {
+ const _post = new Post(post.username, post.image, post.text, post.date)
+ this.add(_post)
+ })
- } catch (error) {
- alert(error.message)
+ } catch (error) {
+ alert(error.message)
- console.error(error)
+ console.error(error)
+ }
}
-}
-
-PostList.extends(Compo)
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/view/Register.js b/staff/rafael-infante/unsocial/view/Register.js
index c901a53d..decac37a 100644
--- a/staff/rafael-infante/unsocial/view/Register.js
+++ b/staff/rafael-infante/unsocial/view/Register.js
@@ -1,72 +1,73 @@
/**
* Builds Register instances
*/
-function Register() {
- Compo.call(this, document.createElement('section'))
+class Register extends Compo {
+ constructor() {
+ super(document.createElement('section'))
- this.container.classList.add('section-container')
+ this.container.classList.add('section-container')
- var title = new Heading('Register to unSocial', 2)
- this.add(title)
+ const title = new Heading('Register to unSocial', 2)
+ this.add(title)
- var form = new Form('form-container')
- this.add(form)
+ const form = new Form('form-container')
+ this.add(form)
- form.add(new Label('name', 'Name'))
- var nameInput = new Input('name', 'text', 'Enter your name', true)
- form.add(nameInput)
+ form.add(new Label('name', 'Name'))
+ const nameInput = new Input('name', 'text', 'Enter your name', true)
+ form.add(nameInput)
- form.add(new Label('email', 'Email'))
- var emailInput = new Input('email', 'email', 'Enter your email', true)
- form.add(emailInput)
+ form.add(new Label('email', 'Email'))
+ const emailInput = new Input('email', 'email', 'Enter your email', true)
+ form.add(emailInput)
- form.add(new Label('username', 'User name'))
- var usernameInput = new Input('username', 'text', 'Enter your user name', true)
- form.add(usernameInput)
+ form.add(new Label('username', 'User name'))
+ const usernameInput = new Input('username', 'text', 'Enter your user name', true)
+ form.add(usernameInput)
- form.add(new Label('password', 'Password'))
- var passwordInput = new Input('password', 'password', 'Enter your password', true)
- form.add(passwordInput)
+ form.add(new Label('password', 'Password'))
+ const passwordInput = new Input('password', 'password', 'Enter your password', true)
+ form.add(passwordInput)
- form.add(new Label('confirm-password', 'Confirm password'))
- var confirmpasswordInput = new Input('confirm-password', 'password', 'Confirm your password', true)
- form.add(confirmpasswordInput)
+ form.add(new Label('confirm-password', 'Confirm password'))
+ const confirmpasswordInput = new Input('confirm-password', 'password', 'Confirm your password', true)
+ form.add(confirmpasswordInput)
- var registerButton = new Button('btn-register', 'submit', 'Register')
- form.add(registerButton)
+ const registerButton = new Button('btn-register', 'submit', 'Register')
+ form.add(registerButton)
- var registerAnchorText = document.createElement('p')
- registerAnchorText.innerText = 'Already have an account? '
- this.container.appendChild(registerAnchorText)
+ const registerAnchorText = document.createElement('p')
+ registerAnchorText.innerText = 'Already have an account? '
+ this.container.appendChild(registerAnchorText)
- var loginLink = new Link('Login', '#')
- registerAnchorText.appendChild(loginLink.container)
+ const loginLink = new Link('Login', '#')
+ registerAnchorText.appendChild(loginLink.container)
- loginLink.addBehavior('click', function (event) {
- event.preventDefault();
- this.remove()
- page.add(login)
- }.bind(this))
- // Save data of new user when clicking on register button
- form.addBehavior('submit', function (event) {
- event.preventDefault()
- var name = nameInput.getValue()
- var email = emailInput.getValue()
- var username = usernameInput.getValue()
- var password = passwordInput.getValue()
- var confirmPassword = confirmpasswordInput.getValue()
-
- try {
- registerUser(name, email, username, password, confirmPassword)
- form.reset()
+ loginLink.addBehavior('click', event => {
+ event.preventDefault();
this.remove()
page.add(login)
- }
- catch (error) {
- alert(error.message)
- console.error(error)
- }
- }.bind(this))
-}
+ })
+
+ // Save data of new user when clicking on register button
+ form.addBehavior('submit', event => {
+ event.preventDefault()
+ const name = nameInput.getValue()
+ const email = emailInput.getValue()
+ const username = usernameInput.getValue()
+ const password = passwordInput.getValue()
+ const confirmPassword = confirmpasswordInput.getValue()
-Register.extends(Compo)
\ No newline at end of file
+ try {
+ registerUser(name, email, username, password, confirmPassword)
+ form.reset()
+ this.remove()
+ page.add(login)
+ }
+ catch (error) {
+ alert(error.message)
+ console.error(error)
+ }
+ })
+ }
+}
\ No newline at end of file