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