From 55f092cc06d0bee0543a736ee864dc3f2dd0e952 Mon Sep 17 00:00:00 2001 From: Claudi1991 Date: Tue, 15 Oct 2024 16:32:58 +0200 Subject: [PATCH] WIP app unsocial update to install surge #183 --- staff/claudi-cano/unsocial5/Compo/Button.js | 14 ++++ staff/claudi-cano/unsocial5/Compo/Code.js | 19 +++++ staff/claudi-cano/unsocial5/Compo/Compo.js | 32 +++++++++ staff/claudi-cano/unsocial5/Compo/Form.js | 12 ++++ staff/claudi-cano/unsocial5/Compo/Heading.js | 13 ++++ staff/claudi-cano/unsocial5/Compo/Image.js | 11 +++ staff/claudi-cano/unsocial5/Compo/Input.js | 32 +++++++++ staff/claudi-cano/unsocial5/Compo/index.html | 34 +++++++++ staff/claudi-cano/unsocial5/Data/posts.js | 14 ++++ staff/claudi-cano/unsocial5/Data/users.js | 4 ++ .../unsocial5/Logic/authenticateUser.js | 16 +++++ .../claudi-cano/unsocial5/Logic/createPost.js | 13 ++++ staff/claudi-cano/unsocial5/Logic/getPosts.js | 3 + .../unsocial5/Logic/registerUser.js | 27 +++++++ .../unsocial5/Proto-Chain/index.js | 4 ++ staff/claudi-cano/unsocial5/index.html | 39 ++++++++-- staff/claudi-cano/unsocial5/main.js | 7 +- .../claudi-cano/unsocial5/view/CreatePost.js | 46 ++++++++++++ staff/claudi-cano/unsocial5/view/Home.js | 42 +++++++++++ staff/claudi-cano/unsocial5/view/Login.js | 64 +++++++++++++++++ staff/claudi-cano/unsocial5/view/PostItem.js | 17 +++++ staff/claudi-cano/unsocial5/view/PostList.js | 22 ++++++ staff/claudi-cano/unsocial5/view/Register.js | 71 +++++++++++++++++++ 23 files changed, 551 insertions(+), 5 deletions(-) diff --git a/staff/claudi-cano/unsocial5/Compo/Button.js b/staff/claudi-cano/unsocial5/Compo/Button.js index e69de29bb..c05550664 100644 --- a/staff/claudi-cano/unsocial5/Compo/Button.js +++ b/staff/claudi-cano/unsocial5/Compo/Button.js @@ -0,0 +1,14 @@ +/** + * Constructs Button instances + * + * @param {string} text The text of the button + * @param {string} type the button type + */ +function Button(text, type) { + Compo.call(this, document.createElement("button")) + + this.container.innerText = text + this.container.type = type +} + +Button.extends(Compo) \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Compo/Code.js b/staff/claudi-cano/unsocial5/Compo/Code.js index e69de29bb..07728e7de 100644 --- a/staff/claudi-cano/unsocial5/Compo/Code.js +++ b/staff/claudi-cano/unsocial5/Compo/Code.js @@ -0,0 +1,19 @@ +/** + * + * @param {*} text + */ +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/claudi-cano/unsocial5/Compo/Compo.js b/staff/claudi-cano/unsocial5/Compo/Compo.js index e69de29bb..b982c6e47 100644 --- a/staff/claudi-cano/unsocial5/Compo/Compo.js +++ b/staff/claudi-cano/unsocial5/Compo/Compo.js @@ -0,0 +1,32 @@ +/** + * Constructs Compo instances + * + * @param {HTMLElement} container The DOM container of the Compo instance + */ +function Compo(container) { + this.children = [] + this.container = container + this.parent = null +} + +Compo.prototype.add = function (child) { + this.children.push(child) + child.parent = this + + this.container.appendChild(child.container) +} + +Compo.prototype.removeSelf = function () { + var index = this.parent.children.findIndex(function (child) { + return child === this + }.bind(this)) + + if (index > -1) + this.parent.children.splice(index, 1) + + this.container.remove() +} + +Compo.prototype.addBehavior = function (type, callback) { + this.container.addEventListener(type, callback) +} \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Compo/Form.js b/staff/claudi-cano/unsocial5/Compo/Form.js index e69de29bb..81844bac0 100644 --- a/staff/claudi-cano/unsocial5/Compo/Form.js +++ b/staff/claudi-cano/unsocial5/Compo/Form.js @@ -0,0 +1,12 @@ +/** + * Constructs Form intances + */ +function Form() { + Compo.call(this, document.createElement("form")) +} + +Form.extends(Compo) + +Form.prototype.reset = function () { + this.container.reset() +} \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Compo/Heading.js b/staff/claudi-cano/unsocial5/Compo/Heading.js index e69de29bb..378329469 100644 --- a/staff/claudi-cano/unsocial5/Compo/Heading.js +++ b/staff/claudi-cano/unsocial5/Compo/Heading.js @@ -0,0 +1,13 @@ +/** + * Constructs Heading instances + * + * @param {string} text The text of the heading + * @param {number} level The heading level + */ +function Heading(text, level) { + Compo.call(this, document.createElement("h" + level)) + + this.container.innerText = text +} + +Heading.extends(Compo) \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Compo/Image.js b/staff/claudi-cano/unsocial5/Compo/Image.js index e69de29bb..a98cad19d 100644 --- a/staff/claudi-cano/unsocial5/Compo/Image.js +++ b/staff/claudi-cano/unsocial5/Compo/Image.js @@ -0,0 +1,11 @@ +/** + * Constructs Image instances + */ +function Image(address) { + Compo.call(this, document.createElement("img")) + + this.container.src = address + this.container.style.width = "100%" +} + +Image.extends(Compo) \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Compo/Input.js b/staff/claudi-cano/unsocial5/Compo/Input.js index e69de29bb..e394c2b02 100644 --- a/staff/claudi-cano/unsocial5/Compo/Input.js +++ b/staff/claudi-cano/unsocial5/Compo/Input.js @@ -0,0 +1,32 @@ +/** + * Constructs Input instances + * + * @param {string} type The input type + * @param {string} id The input id + */ +function Input(type, id) { + Compo.call(this, document.createElement("input")) + this.container.style.width = "100%" + this.container.style.boxSizing = "border-box" + + this.container.type = type + this.container.id = id +} + +Input.extends(Compo) + +Input.prototype.getValue = function () { + return this.container.value +} + +Input.prototype.setValue = function (value) { + this.container.value = value +} + +Input.prototype.getType = function () { + return this.container.type +} + +Input.prototype.setType = function (type) { + this.container.type = type +} \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Compo/index.html b/staff/claudi-cano/unsocial5/Compo/index.html index e69de29bb..229dd7f2a 100644 --- a/staff/claudi-cano/unsocial5/Compo/index.html +++ b/staff/claudi-cano/unsocial5/Compo/index.html @@ -0,0 +1,34 @@ + + + + + + + Compo v0.0.0 + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Data/posts.js b/staff/claudi-cano/unsocial5/Data/posts.js index e69de29bb..45f17f139 100644 --- a/staff/claudi-cano/unsocial5/Data/posts.js +++ b/staff/claudi-cano/unsocial5/Data/posts.js @@ -0,0 +1,14 @@ +var posts = [ + { + image: "https://i.pinimg.com/originals/8c/60/1a/8c601a25311a1a5098896f751a784b54.jpg", + text: "Here we are", + username: "peterpan", + date: new Date + }, + { + image: "https://pm1.aminoapps.com/8360/ad07e2d2cdf6e1733328d6e7b7848b87db38a2bbr1-1536-2048v2_hq.jpg", + text: "Here I am", + username: "wendydarling", + date: new Date + } +] \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Data/users.js b/staff/claudi-cano/unsocial5/Data/users.js index e69de29bb..c3ad2c9e1 100644 --- a/staff/claudi-cano/unsocial5/Data/users.js +++ b/staff/claudi-cano/unsocial5/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/claudi-cano/unsocial5/Logic/authenticateUser.js b/staff/claudi-cano/unsocial5/Logic/authenticateUser.js index e69de29bb..39b72153e 100644 --- a/staff/claudi-cano/unsocial5/Logic/authenticateUser.js +++ b/staff/claudi-cano/unsocial5/Logic/authenticateUser.js @@ -0,0 +1,16 @@ +function authenticateUser(username, password) { + if (username.length < 4 || username.length > 12) + throw new Error("Invalid username") + + if (password.length < 8) + throw new Error("Invalid password") + + var user = users.find(function (user) { + return user.username === username && user.password === password + }) + + if (user === undefined) + throw new Error("Wrong credentials") + + return user +} \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Logic/createPost.js b/staff/claudi-cano/unsocial5/Logic/createPost.js index e69de29bb..63aae4e02 100644 --- a/staff/claudi-cano/unsocial5/Logic/createPost.js +++ b/staff/claudi-cano/unsocial5/Logic/createPost.js @@ -0,0 +1,13 @@ +function createPost(username, image, text) { + if (username.length < 4 || username.length > 12) + throw new Error("Invalid username") + + var post = { + image: image, + text: text, + username: username, + date: new Date + } + + postMessage.push(post) +} \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Logic/getPosts.js b/staff/claudi-cano/unsocial5/Logic/getPosts.js index e69de29bb..db2988858 100644 --- a/staff/claudi-cano/unsocial5/Logic/getPosts.js +++ b/staff/claudi-cano/unsocial5/Logic/getPosts.js @@ -0,0 +1,3 @@ +function getPosts() { + return posts +} \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Logic/registerUser.js b/staff/claudi-cano/unsocial5/Logic/registerUser.js index e69de29bb..61241486e 100644 --- a/staff/claudi-cano/unsocial5/Logic/registerUser.js +++ b/staff/claudi-cano/unsocial5/Logic/registerUser.js @@ -0,0 +1,27 @@ +function registerUser(name, email, username, password, passwordRepeat) { + if (name.length < 2) + throw new Error("Invalid name") + + if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email)) + throw new Error("Invalid e-mail") + + if (username.length < 4 || username.length > 12) + throw new Error("Invalid username") + + if (password.length < 8) + throw new Error("Invalid password") + + if (password !== passwordRepeat) + throw new Error("Passwords do not match") + + var user = users.find(function (user) { + return user.username === username || user.email === email + }) + + if (user !== undefined) + throw new Error("User already exists") + + user = { name: name, email: email, username: username, password: password } + + user.push(user) +} \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/Proto-Chain/index.js b/staff/claudi-cano/unsocial5/Proto-Chain/index.js index e69de29bb..d6bdaab8d 100644 --- a/staff/claudi-cano/unsocial5/Proto-Chain/index.js +++ b/staff/claudi-cano/unsocial5/Proto-Chain/index.js @@ -0,0 +1,4 @@ +Function.prototype.extends = function (form) { + this.prototype = Object.create(form.prototype) + this.prototype.constructor = this +} \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/index.html b/staff/claudi-cano/unsocial5/index.html index 22d5ff5ea..1c4fda029 100644 --- a/staff/claudi-cano/unsocial5/index.html +++ b/staff/claudi-cano/unsocial5/index.html @@ -14,10 +14,41 @@ - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/staff/claudi-cano/unsocial5/main.js b/staff/claudi-cano/unsocial5/main.js index 7f35da47f..290dfb422 100644 --- a/staff/claudi-cano/unsocial5/main.js +++ b/staff/claudi-cano/unsocial5/main.js @@ -6,4 +6,9 @@ var title = new Heading("Unsocial", 1) page.add(title) var login = new Login() -page.add(login) \ No newline at end of file +page.add(login) + +// loggedInUser = users[0] +var home +// home = new Home() +// page.add(home) \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/view/CreatePost.js b/staff/claudi-cano/unsocial5/view/CreatePost.js index e69de29bb..a222755b1 100644 --- a/staff/claudi-cano/unsocial5/view/CreatePost.js +++ b/staff/claudi-cano/unsocial5/view/CreatePost.js @@ -0,0 +1,46 @@ +function CreatePost() { + Compo.call(this, document.createElement("div")) + + var title = new Heading("Create Post", 3) + this.Heading(title) + + var form = new Form() + + var imageLabel = new Label("Image", "image") + var imageInput = new Input("text", "image") + form.add(imageLabel) + form.add(imageInput) + + var textLabel = new Label("Text", "text") + var textInput = new Input("text", "text") + form.add(textLabel) + form.add(textInput) + + var submitButton = new Button("Create", "submit") + form.add(submitButton) + + this.add(form) + + form.addBehavior("submit", function (event) { + event.prevenDefault() + + var image = imageInput.getValue() + var text = textInput.getValue() + + try { + createPost(loggedInUser.username, image, text) + + this.removeSelf() + + 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/claudi-cano/unsocial5/view/Home.js b/staff/claudi-cano/unsocial5/view/Home.js index e69de29bb..427f9b86c 100644 --- a/staff/claudi-cano/unsocial5/view/Home.js +++ b/staff/claudi-cano/unsocial5/view/Home.js @@ -0,0 +1,42 @@ +/** + * Contructs Home instances + */ +function Home() { + Compo.call(this, document.createElement("section")) + + var title = new Heading("Home", 2) + this.add(title) + + var userTitle = new Heading("Hello there, " + loggedInUser.name + "!", 3) + this.add(userTitle) + + var logoutButton = new Button("Logout", "button") + this.add(logoutButton) + + logoutButton.addBehavior("click", function (event) { + event.preventDefaukt() + + loggedInUser = null + + this.removeSelf() + + page.add(login) + }.bind(this)) + + var addPostButton = new Button("➕", "button") + this.add(addPostButton) + + addPostButton.addBehavior("click", function () { + var createPost = new CreatePost() + + //postList.removeSelf() + this.children[this.children.lenght - 1].removeSelf() + + this.add(createPost) + }.bind(this)) + + var postList = new PostList() + this.add(postList) +} + +Home.extens(Compo) \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/view/Login.js b/staff/claudi-cano/unsocial5/view/Login.js index e69de29bb..3451181be 100644 --- a/staff/claudi-cano/unsocial5/view/Login.js +++ b/staff/claudi-cano/unsocial5/view/Login.js @@ -0,0 +1,64 @@ +/** + * Constructs Login instances + */ +function Login() { + Compo.call(this, document.createElement("section")) + + var title = new Heading("Login", 2) + this.add(title) + + var form = new Form() + this.add(form) + + form.add(new Label("Username", "username")) + var usernameInput = new Input("text", "username") + form.add(usernameInput) + + form.add(new Label("Password", "password")) + var paswordInput = new PasswordInput("password") + form.add(usernameInput) + + var submitButton = new Button("Login", "submit") + form.add(submitButton) + + form.addBehavior("submit", function (event) { + event.preventDefault() + + var username = usernameInput.getValue() + var password = passwordInput.getValue() + + try { + loggedInUser = authenticateUser(username, password) + + form.reset() + + this.removeSelf() + + home = new Home() + + page.add(home) + } catch (error) { + paswordInput.setValue("") + + alert(error.message) + + console.error(error) + } + }.bind(this)) + + + var registerLink = new Link("Register") + this.add(registerLink) + + registerLink.addBehavior("click", function (event) { + event.preventDefault() + + this.removeSelf() + + var register = new Register() + + page.add(register) + }.bind(this)) +} + +Login.extends(Compo) \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/view/PostItem.js b/staff/claudi-cano/unsocial5/view/PostItem.js index e69de29bb..fe3ec6f6c 100644 --- a/staff/claudi-cano/unsocial5/view/PostItem.js +++ b/staff/claudi-cano/unsocial5/view/PostItem.js @@ -0,0 +1,17 @@ +function PostItem(username, image, text, date) { + Compo.call(this, document.createElement("article")) + + var userTitle = new Heading(username, 4) + this.add(userTitle) + + var picture = new Image(image) + this.add(picture) + + var comment = new Paragraph(text) + this.add(comment) + + var time = new Time(date) + this.add(date) +} + +PostItem.extends(Compo) \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/view/PostList.js b/staff/claudi-cano/unsocial5/view/PostList.js index e69de29bb..e290d3b60 100644 --- a/staff/claudi-cano/unsocial5/view/PostList.js +++ b/staff/claudi-cano/unsocial5/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 postItem = new PostItem(post.username, post.image, post.text, post.date) + + this.add(postItem) + }.bind(this)) + } catch (error) { + alert(error.message) + + console.error(error) + } +} + +PostList.extends(Compo) \ No newline at end of file diff --git a/staff/claudi-cano/unsocial5/view/Register.js b/staff/claudi-cano/unsocial5/view/Register.js index e69de29bb..4d5b94ce8 100644 --- a/staff/claudi-cano/unsocial5/view/Register.js +++ b/staff/claudi-cano/unsocial5/view/Register.js @@ -0,0 +1,71 @@ +/** + * Constructs Register instances + */ +function Register() { + Compo.call(this, document.createElement("section")) + + var title = new Heading("Register", 2) + this.add(title) + + var form = new Form() + this.add(form) + + form.add(new Label("Name", "name")) + var nameInput = new Input("text", "name") + form.add(nameInput) + + form.add(new Label("E-mail", "email")) + var emailInput = new Input("email", "email") + form.add(emailInput) + + form.add(new Label("Username", "username")) + var usernameInput = new Input("text", "username") + form.add(usernameInput) + + form.add(new Label("Password", "password")) + var passwordInput = new PasswordInput("password") + form.add(passwordInput) + + form.add(new Label("Repeat Password", "password-repeat")) + var passwordRepeatInput = new passwordInput("password-repeat") + form.add(passwordInput) + + var submitButton = new Button("Register", "submit") + form.add(submitButton) + + form.addBehavior("submit", function (event) { + event.preventDefault() + + var name = nameInput.getValue() + var email = emailInput.getValue() + var username = usernameInput.getValue() + var password = passwordInput.getValue() + var passwordRepeat = passwordRepeatInput.getValue() + + try { + registerUser(name, email, username, password, passwordRepeat) + + form.reset() + + this.removeSelf() + + page.add(login) + } catch (error) { + alert(error.message) + + console.error(error) + } + }.bind(this)) + + var loginLink = new Link("Login") + this.add(loginLink) + + loginLink.addBehavior("click", function (event) { + event.preventDefault() + + this.removeSelf() + page.add(login) + }.bind(this)) +} + +Register.extends(Compo) \ No newline at end of file