add create post and list posts functionalities b00tc4mp#181

staff/rafael-infante/unsocial.9/compo.js

@@ -0,0 +1,188 @@
+/**
+ * Builds Compo instances
+ * @param {HTMLElement} container The DOM container of the compo instance
+ */
+function Compo(container) {
+  this.container = container
+  this.children = []
+}
+
+Compo.prototype.add = function (child) {
+  this.children.push(child)
+  this.container.appendChild(child.container)
+}
+
+Compo.prototype.remove = function () {
+  this.container.remove()
+}
+
+Compo.prototype.addBehavior = function (action, callback) {
+  this.container.addEventListener(action, callback)
+}
+/**
+ * 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.prototype = Object.create(Compo.prototype)
+Header.prototype.constructor = Header
+/**
+ * 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.prototype = Object.create(Compo.prototype)
+Heading.prototype.constructor = Heading
+/**
+ * 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.prototype = Object.create(Compo.prototype)
+Picture.prototype.constructor = Picture
+/**
+ * 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.prototype = Object.create(Compo.prototype)
+Form.prototype.constructor = Form
+
+Form.prototype.reset = function () {
+  this.container.reset()
+}
+/**
+ * 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.prototype = Object.create(Compo.prototype)
+Label.prototype.constructor = Label
+/**
+ * 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.prototype = Object.create(Compo.prototype)
+Input.prototype.constructor = Input
+
+Input.prototype.getValue = function () {
+  return this.container.value
+}
+
+Input.prototype.setValue = function (value) {
+  this.container.value = value
+}
+Input.prototype.setType = function (type) {
+  this.container.type = type
+}
+
+function Icon() {
+  Compo.call(this, document.createElement('i'))
+  this.container.classList.add('far')
+  this.container.classList.add('fa-eye')
+  this.container.id = 'icon'
+}
+
+Icon.prototype = Object.create(Compo.prototype)
+Icon.prototype.constructor = Icon
+
+/**
+ * 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.prototype = Object.create(Compo.prototype)
+Button.prototype.constructor = Button
+/**
+ * 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.prototype = Object.create(Compo.prototype)
+Link.prototype.constructor = Link
+
+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.prototype = Object.create(Compo.prototype)
+Passwordinput.prototype.constructor = Passwordinput
+
+Passwordinput.prototype.getValue = function () {
+  return this.children[0].container.value
+}
+
+Passwordinput.prototype.setValue = function (value) {
+  this.children[0].container.value = value
+}

staff/rafael-infante/unsocial.9/data.js

@@ -0,0 +1,19 @@
+var users = [
+  { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+  { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
+]
+
+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
+  }
+]

staff/rafael-infante/unsocial.9/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Unsocial</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <link rel="shortcut icon" href="/staff/rafael-infante/unsocial/images/users-avatar2.png" type="image/x-icon">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <script src="data.js"></script>
+
+  <script src="logic.js"></script>
+
+  <script src="compo.js"></script>
+
+  <script src="view.js"></script>
+
+  <script src="main.js"></script>
+
+</body>
+
+</html>

staff/rafael-infante/unsocial.9/logic.js

@@ -0,0 +1,61 @@
+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)
+}
+
+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
+}
+
+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)
+}
+
+function getPosts() {
+  return posts
+}

staff/rafael-infante/unsocial.9/main.js

@@ -0,0 +1,18 @@
+var loggedUser = null
+
+var header = new Header('logo-container')
+var picture = new Picture('/staff/rafael-infante/unsocial/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)
+
+// loggedUser = users[1]
+// var home = new Home()
+// page.add(home)