diff --git a/staff/jose-pozo/socialcode/app/assets/EditIcon.png b/staff/jose-pozo/socialcode/app/assets/EditIcon.png new file mode 100644 index 000000000..74e8cbe39 Binary files /dev/null and b/staff/jose-pozo/socialcode/app/assets/EditIcon.png differ diff --git a/staff/jose-pozo/socialcode/app/assets/Home.png b/staff/jose-pozo/socialcode/app/assets/Home.png new file mode 100644 index 000000000..323c2831e Binary files /dev/null and b/staff/jose-pozo/socialcode/app/assets/Home.png differ diff --git a/staff/jose-pozo/socialcode/app/assets/SocialCode.png b/staff/jose-pozo/socialcode/app/assets/SocialCode.png new file mode 100644 index 000000000..5b4156823 Binary files /dev/null and b/staff/jose-pozo/socialcode/app/assets/SocialCode.png differ diff --git a/staff/jose-pozo/socialcode/app/components/Component.js b/staff/jose-pozo/socialcode/app/components/Component.js index 9cc2ae2e7..2cee33621 100644 --- a/staff/jose-pozo/socialcode/app/components/Component.js +++ b/staff/jose-pozo/socialcode/app/components/Component.js @@ -11,7 +11,7 @@ class Component { } add(child) { - if (!(child instanceof Component)) throw new error TypeErrror('child is not component') + if (!(child instanceof Component)) throw new TypeError('child is not component') this.children.push(child) @@ -26,7 +26,8 @@ class Component { if (index > -1) this.children.splice(index, 1) - this.container.removeChild(child.container) + if (this.container.contains(child.container)) + this.container.removeChild(child.container) } setText(text) { diff --git a/staff/jose-pozo/socialcode/app/components/core/Button.css b/staff/jose-pozo/socialcode/app/components/core/Button.css index d45aa1b0b..3b6f0aa9c 100644 --- a/staff/jose-pozo/socialcode/app/components/core/Button.css +++ b/staff/jose-pozo/socialcode/app/components/core/Button.css @@ -1,6 +1,7 @@ .Button { padding: .4rem; - background-color: transparent; + background-color: #17191e; font-size: 1rem; border: 1px solid var(--first-color); + border-radius: 0.3rem; } \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/components/core/Field.js b/staff/jose-pozo/socialcode/app/components/core/Field.js index 7c9df1451..201360e2f 100644 --- a/staff/jose-pozo/socialcode/app/components/core/Field.js +++ b/staff/jose-pozo/socialcode/app/components/core/Field.js @@ -4,11 +4,11 @@ class Field extends Component { this.addClass('Field') - const label = new label + const label = new Label label.setText(text) label.setFor(id) - const input = new input + const input = new Input input.setId(id) input.setType(type) diff --git a/staff/jose-pozo/socialcode/app/components/core/Input.css b/staff/jose-pozo/socialcode/app/components/core/Input.css index 6c09b66f6..085f7ab2b 100644 --- a/staff/jose-pozo/socialcode/app/components/core/Input.css +++ b/staff/jose-pozo/socialcode/app/components/core/Input.css @@ -3,4 +3,5 @@ background-color: transparent; font-size: 1rem; border: 1px solid var(--first-color); + border-radius: 0.3rem; } \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/components/core/Input.js b/staff/jose-pozo/socialcode/app/components/core/Input.js index 9fb423dc5..9b6509cd7 100644 --- a/staff/jose-pozo/socialcode/app/components/core/Input.js +++ b/staff/jose-pozo/socialcode/app/components/core/Input.js @@ -1,4 +1,4 @@ -class Input extends Compnent { +class Input extends Component { constructor() { super('input') diff --git a/staff/jose-pozo/socialcode/app/components/core/Label.css b/staff/jose-pozo/socialcode/app/components/core/Label.css new file mode 100644 index 000000000..e69de29bb diff --git a/staff/jose-pozo/socialcode/app/components/core/Label.js b/staff/jose-pozo/socialcode/app/components/core/Label.js index 4bbf3b03e..ec705d8d9 100644 --- a/staff/jose-pozo/socialcode/app/components/core/Label.js +++ b/staff/jose-pozo/socialcode/app/components/core/Label.js @@ -1,6 +1,8 @@ class Label extends Component { constructor() { super('label') + + this.addClass('Label') } setFor(id) { diff --git a/staff/jose-pozo/socialcode/app/components/core/SubmitButton.js b/staff/jose-pozo/socialcode/app/components/core/SubmitButton.js index 8db4cecc5..6cfc25781 100644 --- a/staff/jose-pozo/socialcode/app/components/core/SubmitButton.js +++ b/staff/jose-pozo/socialcode/app/components/core/SubmitButton.js @@ -2,7 +2,7 @@ class SubmitButton extends Button { constructor(text) { super() - this.addClass('submitButton') + this.addClass('SubmitButton') this.setType('submit') this.setText(text) diff --git a/staff/jose-pozo/socialcode/app/components/library/FormWithFeedback.js b/staff/jose-pozo/socialcode/app/components/library/FormWithFeedback.js index 796fee2d2..f36bb7f88 100644 --- a/staff/jose-pozo/socialcode/app/components/library/FormWithFeedback.js +++ b/staff/jose-pozo/socialcode/app/components/library/FormWithFeedback.js @@ -4,15 +4,15 @@ class FormWithFeedback extends Form { this.addClass('FormWithFeedback') - const feedbackPanel = new CompositionEvent('p') + const feedbackPanel = new Component('p') feedbackPanel.addClass('Feedback') this.feedbackPanel = feedbackPanel } setFeedback(message, level) { - if (level === 'succes') - this.feedbackPanel.addClass('succes') + if (level === 'success') + this.feedbackPanel.addClass('success') this.feedbackPanel.setText(message) @@ -23,7 +23,7 @@ class FormWithFeedback extends Form { super.clear() this.feedbackPanel.setText('') - this.feedbackPanel.removeClass('succes') + this.feedbackPanel.removeClass('success') this.remove(this.feedbackPanel) } diff --git a/staff/jose-pozo/socialcode/app/data.js b/staff/jose-pozo/socialcode/app/data.js new file mode 100644 index 000000000..02a1b5b6c --- /dev/null +++ b/staff/jose-pozo/socialcode/app/data.js @@ -0,0 +1,73 @@ +const data = {} + +data.findUser = callback => { + let usersJson = localStorage.users + + if (!usersJson) usersJson = '[]' + + const users = JSON.parse(usersJson) + + const user = users.find(callback) + + return user +} + +data.insertUser = user => { + let usersJson = localStorage.users + + if (!usersJson) usersJson = '[]' + + const users = JSON.parse(usersJson) + + users.push(user) + + usersJson = JSON.stringify(users) + + localStorage.users = usersJson +} + +data.findPosts = callback => { + let postsJson = localStorage.posts + + if (!postsJson) postsJson = '[]' + + const posts = JSON.parse(postsJson) + + const filtered = posts.filter(callback) + + return filtered +} + +data.insertPost = post => { + let postsJson = localStorage.posts + + if (!postsJson) postsJson = '[]' + + const posts = JSON.parse(postsJson) + + post.id = `${Math.random().toString().slice(2)}-${Date.now()}` + + posts.push(post) + + postsJson = JSON.stringify(posts) + + localStorage.posts = postsJson +} + +data.deletePost = callback => { + let postsJson = localStorage.posts + + if (!postsJson) postsJson = '[]' + + const posts = JSON.parse(postsJson) + + const index = posts.findIndex(callback) + + if (index > -1) { + posts.splice(index, 1) + + postsJson = JSON.stringify(posts) + + localStorage.posts = postsJson + } +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/errors.js b/staff/jose-pozo/socialcode/app/errors.js new file mode 100644 index 000000000..f7779d1c8 --- /dev/null +++ b/staff/jose-pozo/socialcode/app/errors.js @@ -0,0 +1,24 @@ +class ContentError extends Error { + constructor(messsage) { + super(message) + + //this.name = ContentError.name + this.name = this.constructor.name + } +} + +class MatchError extends Error { + constructor(message) { + super(message) + + this.name = this.constructor.name + } +} + +class DuplicityError extends Error { + constructor(message) { + super(message) + + this.name = this.constructor.name + } +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/global.css b/staff/jose-pozo/socialcode/app/global.css new file mode 100644 index 000000000..bbf75bf00 --- /dev/null +++ b/staff/jose-pozo/socialcode/app/global.css @@ -0,0 +1,18 @@ +@import url('https://fonts.googleapis.com/css2?family=Freeman&display=swap'); + +/* @import url('https://fonts.googleapis.com/css2?family=Workbench&display=swap'); */ + +:root { + --first-color: #7799E5; + --second-color: #17191e; +} + +* { + font-family: Freeman; + color: var(--first-color); +} + +body { + background-color: var(--second-color); + margin: 0; +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/home/components/CreatePostForm.css b/staff/jose-pozo/socialcode/app/home/components/CreatePostForm.css new file mode 100644 index 000000000..2ec9961a6 --- /dev/null +++ b/staff/jose-pozo/socialcode/app/home/components/CreatePostForm.css @@ -0,0 +1,21 @@ +.CreatePostForm { + width: 85%; + margin-top: 6rem; + position: fixed; + top: 6rem; + background: #17191e; + border: 1px solid #7799E5; + border-radius: 0.3rem; +} + +.Button.SubmitButton.create-post { + width: 100%; + margin-top: 2rem; + /*color: #ff6022;*/ + color: #00E8C4; +} + +.Button.SubmitButton.create-post:hover { + background-color: #f73a1c; + cursor: pointer; +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/home/components/CreatePostForm.js b/staff/jose-pozo/socialcode/app/home/components/CreatePostForm.js new file mode 100644 index 000000000..72e7161cd --- /dev/null +++ b/staff/jose-pozo/socialcode/app/home/components/CreatePostForm.js @@ -0,0 +1,43 @@ +class CreatePostForm extends FormWithFeedback { + constructor() { + super() + + this.addClass('CreatePostForm') + + const titleField = new Field('title', 'text', 'Title') + titleField.setPlaceholder('title') + + const imageField = new Field('image', 'text', 'Image') + imageField.setPlaceholder('image') + + const descriptionField = new Field('description', 'text', 'Desciption') + descriptionField.setPlaceholder('description') + + const submitButton = new SubmitButton('Create') + //submitButton.addClass('SubmitButton') + submitButton.addClass('create-post'); + + this.add(titleField) + this.add(imageField) + this.add(descriptionField) + this.add(submitButton) + } + + getTitle() { + const titleField = this.children[0] + + return titleField.getValue() + } + + getImage() { + const imageField = this.children[1] + + return imageField.getValue() + } + + getDescription() { + const descriptionField = this.children[2] + + return descriptionField.getValue() + } +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/home/components/Post.css b/staff/jose-pozo/socialcode/app/home/components/Post.css new file mode 100644 index 000000000..043cccb8d --- /dev/null +++ b/staff/jose-pozo/socialcode/app/home/components/Post.css @@ -0,0 +1,63 @@ +.Post {} + +.LoggedUser { + color: #70FACB; + margin-top: 2rem; + margin-bottom: 0; +} + +.PostHeader { + display: flex; + justify-content: space-between; + align-items: end; + margin-top: 2rem; + margin-bottom: 0; +} + +.AuthorTitle { + color: #2AC195; +} + +.edit-icon { + width: 1rem; +} + +.edit-icon:hover { + cursor: pointer; +} + +.edit-list { + list-style: none; + position: absolute; + right: 5%; + text-align: right; + font-size: 1.5rem; + background-color: #17191e; +} + +.item-list:hover { + cursor: pointer; +} + +.PostTitle { + color: #f4f4f4; + display: flex; + align-items: center; +} + +.PostImage { + width: 100%; + border-radius: 5px; +} + +.PostDescription { + color: #f4f4f4; +} + +.PostDate { + color: #8190BB; +} + +.StraightLine { + border-color: #7799E5; +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/home/components/Post.js b/staff/jose-pozo/socialcode/app/home/components/Post.js new file mode 100644 index 000000000..358d8f9fd --- /dev/null +++ b/staff/jose-pozo/socialcode/app/home/components/Post.js @@ -0,0 +1,89 @@ +class Post extends Component { + constructor(post) { + super('article') + + this.addClass('Post') + + const authorTitle = new Component('p') + authorTitle.setText(post.author) + + + + const editIcon = new Image + editIcon.setUrl('../assets/EditIcon.png') + editIcon.addClass('edit-icon') + + const postHeader = new Component('div') + postHeader.addClass('PostHeader') + + postHeader.add(authorTitle) + + + + logic.authorLogged = () => { + if (post.author === sessionStorage.username) { + authorTitle.addClass('LoggedUser') + postHeader.add(editIcon) + } else + authorTitle.addClass('AuthorTitle') + } + + logic.authorLogged() + + + const postTitle = new Component('h2') + postTitle.setText(post.title) + postTitle.addClass('PostTitle') + + const editList = new Component('ul') + editList.addClass('edit-list') + + const item1List = new Component('li') + item1List.setText('Edit') + item1List.addClass('item-list') + const item2List = new Component('li') + item2List.setText('Delete') + item2List.addClass('item-list') + + editList.add(item1List) + editList.add(item2List) + + let statusIcon = true + + editIcon.onClick(event => { + event.preventDefault() + + statusIcon = !statusIcon + + if (!statusIcon) + postTitle.add(editList) + + else + postTitle.remove(editList) + }) + + + const postImage = new Image + postImage.setUrl(post.image) + postImage.addClass('PostImage') + + const postDescription = new Component('p') + postDescription.setText(post.description) + postDescription.addClass('PostDescription') + + const postDate = new Component('time') + postDate.setText(post.date) + postDate.addClass('PostDate') + + const straightLine = new Component('hr') + straightLine.addClass('StraightLine') + + + this.add(postHeader) + this.add(postTitle) + this.add(postImage) + this.add(postDescription) + this.add(postDate) + this.add(straightLine) + } +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/home/index.css b/staff/jose-pozo/socialcode/app/home/index.css index c0f481f51..2c47e4c07 100644 --- a/staff/jose-pozo/socialcode/app/home/index.css +++ b/staff/jose-pozo/socialcode/app/home/index.css @@ -1,30 +1,87 @@ .View { display: flex; flex-direction: column; - align-items: center; - margin: 4rem 0; + margin: 0; } .Header { + width: 90%; display: flex; gap: 1rem; - width: 100%; + align-self: center; justify-content: right; + align-items: center; position: fixed; top: 0; - padding: .5rem; box-sizing: border-box; - border-bottom: 1px solid var(--first-color); + /*border-bottom: 1px solid var(--first-color);*/ background-color: var(--second-color); + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.Logo { + height: 50px; + margin-right: auto; +} + +.UsernameTitle { + color: #70FACB; +} + +.LogoutButton:hover { + cursor: pointer; + background-color: #f73a1c; +} + +.Main { + display: flex; + justify-content: center; +} + +.PostList { + width: 90%; + margin-top: 6rem; + margin-bottom: 5rem; + +} + +.Button.logout { + /*margin-right: 0.6rem;*/ } .Footer { width: 100%; + padding: 1rem; display: flex; justify-content: center; + align-items: center; position: fixed; bottom: 0; padding: .5rem 0; - border-top: 1px solid var(--first-color); + /*border-top: 1px solid var(--first-color);*/ background-color: var(--second-color); +} + +.HomeButton { + width: 2rem; + height: 2rem; + background-image: url(../assets/Home.png); + background-size: cover; + border: none; +} + +.PostButton { + width: 2rem; + height: 2rem; + margin: 0.5rem; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; +} + +.PostButton:hover { + cursor: pointer; + background-color: #f73a1c; } \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/home/index.html b/staff/jose-pozo/socialcode/app/home/index.html index 9507167ae..826dd4328 100644 --- a/staff/jose-pozo/socialcode/app/home/index.html +++ b/staff/jose-pozo/socialcode/app/home/index.html @@ -8,13 +8,22 @@ + + + + + + + + + @@ -23,6 +32,15 @@ + + + + + + + + + diff --git a/staff/jose-pozo/socialcode/app/home/index.js b/staff/jose-pozo/socialcode/app/home/index.js new file mode 100644 index 000000000..ba017716e --- /dev/null +++ b/staff/jose-pozo/socialcode/app/home/index.js @@ -0,0 +1,97 @@ +if (!logic.isUserLoggedIn()) + location.href = '../login' + +const view = new Component(document.body) +view.addClass('View') + +const header = new Component('header') +header.addClass('Header') +view.add(header) + +const logo = new Image +logo.setUrl('../assets/SocialCode.png') +logo.addClass('Logo') + +header.add(logo) + +const userName = logic.getUserName() + +const usernameTitle = new Heading(3) +usernameTitle.setText(userName) +usernameTitle.addClass('UsernameTitle') +header.add(usernameTitle) + +const logoutButton = new Button +logoutButton.setText('Logout') +logoutButton.addClass('LogoutButton') + +logoutButton.onClick(() => { + logic.logoutUser() + + location.href = '../login' +}) + +header.add(logoutButton) + +const main = new Component('main') +main.addClass('Main') +view.add(main) + +const postList = new Component('section') +postList.addClass('PostList') +main.add(postList) + +const posts = logic.getAllPosts() + +posts.forEach(post => { + const post2 = new Post(post) + + postList.add(post2) +}); + +const createPostForm = new CreatePostForm + +createPostForm.onSubmit(event => { + event.preventDefault() + + const title = createPostForm.getTitle() + const image = createPostForm.getImage() + const description = createPostForm.getDescription() + + try { + logic.createPost(title, image, description) + + // TODO dismount create post form from main + // TODO refresh post list + location.reload() + + window.scrollTo(0, 0) + + } catch (error) { + if (error instanceof ContentError) + createPostForm.setFeedback(error.message + ', please, correct it') + else + createPostForm.setFeedback('sorry, thre was an error, please tr again later') + } +}) + +//TODO mount creat post form when clicing on plus button + +const footer = new Component('footer') +footer.addClass('Footer') +view.add(footer) + +const homeButton = new Button +//homeButton.setText('+') +homeButton.addClass('HomeButton') +//homeButton.setUrl('../assets/home.png') + +const addPostButton = new Button +addPostButton.setText('+') +addPostButton.addClass('PostButton') + +footer.add(homeButton) +footer.add(addPostButton) + +const statusButton = logic.statusButton() + diff --git a/staff/jose-pozo/socialcode/app/logic.js b/staff/jose-pozo/socialcode/app/logic.js new file mode 100644 index 000000000..055e2de8a --- /dev/null +++ b/staff/jose-pozo/socialcode/app/logic.js @@ -0,0 +1,120 @@ +const logic = {} + +const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ +const USERNAME_REGEX = /^[\w-]+$/ +const PASSWORD_REGEX = /^[\w-$%&=\[\]\{\}\<\>\(\)]{4,}$/ + +const NAME_REGEX = /^[a-zA-Z=\[\]\{\}\<\>\(\)]{1,}$/ + +logic.registerUser = (name, surname, email, username, password, passwordRepeat) => { + if (!NAME_REGEX.test(name)) + throw new ContentError('name is not valid') + + if (!NAME_REGEX.test(surname)) + throw new ContentError('surname is not valid') + + if (!EMAIL_REGEX.test(email)) + throw new ContentError('email is not valid') + + if (!USERNAME_REGEX.test(username)) + throw new ContentError('username is not valid') + + if (!PASSWORD_REGEX.test(password)) + throw new ContentError('password is not valid') + + if (password !== passwordRepeat) + throw new MatchError('passwords don\'t match') + + let user = data.findUser(user => user.email === email || user.username === username) + + if (user) + throw new DuplicityError('user already exists') + + user = { + name: name, + surname: surname, + email: email, + username: username, + password: password + } + + data.insertUser(user) +} + +logic.loginUser = (username, password) => { + if (!USERNAME_REGEX.test(username)) + throw new ContentError('username is not valid') + + if (!PASSWORD_REGEX.test(password)) + throw new ContentError('password is not valid') + + let user = data.findUser(user => user.username === username) + + if (!user) + throw new MatchError('user not found') + + if (user.password !== password) + throw new MatchError('wrong password') + + sessionStorage.username = username +} + +logic.isUserLoggedIn = () => !!sessionStorage.username + +logic.logoutUser = () => delete sessionStorage.username + +logic.getUserName = () => { + const user = data.findUser(user => user.username === sessionStorage.username) + + return user.name +} + +logic.getAllPosts = () => { + const posts = data.findPosts(() => true) + + return posts.reverse() +} + +logic.statusButton = () => { + let statusButton = true + + addPostButton.onClick(event => { + event.preventDefault() + + statusButton = !statusButton + + if (!statusButton) + main.add(createPostForm) + + else + main.remove(createPostForm) + }) +} + + +logic.createPost = (title, image, description) => { + if (typeof title !== 'string' || !title.length || title.length > 50) throw new ContentError('title is not valid') + if (typeof image !== 'string' || !image.startsWith('http')) throw new ContentError('image is not valid') + if (typeof description !== 'string' || !description.length || description.length > 200) throw new ContentError('description is not valid') + + const currentDate = new Date() + + const day = currentDate.getDate() + const month = (currentDate.getMonth() + 1) + const year = currentDate.getFullYear() + const hours = currentDate.getHours() + const minutes = currentDate.getMinutes() + + const postDate = `${day}/${month}/${year}, ${hours}:${minutes}h.`; + + const post = { + author: sessionStorage.username, + title, + image, + description, + date: postDate + } + + data.insertPost(post) +} + diff --git a/staff/jose-pozo/socialcode/app/login/LoginForm.css b/staff/jose-pozo/socialcode/app/login/LoginForm.css new file mode 100644 index 000000000..15e72fe0d --- /dev/null +++ b/staff/jose-pozo/socialcode/app/login/LoginForm.css @@ -0,0 +1,9 @@ +.SubmitLogin { + width: 100%; + margin-top: 2rem; +} + +.SubmitLogin:hover { + background-color: #f73a1c; + cursor: pointer; +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/login/LoginForm.js b/staff/jose-pozo/socialcode/app/login/LoginForm.js new file mode 100644 index 000000000..a3a2f6213 --- /dev/null +++ b/staff/jose-pozo/socialcode/app/login/LoginForm.js @@ -0,0 +1,30 @@ +class LoginForm extends FormWithFeedback { + constructor() { + super() + + this.addClass('LoginForm') + + const usernameField = new Field('username', 'text', 'Username') + + const passwordField = new Field('password', 'password', 'Password') + + const submitButton = new SubmitButton('Login') + submitButton.addClass('SubmitLogin') + + this.add(usernameField) + this.add(passwordField) + this.add(submitButton) + } + + getUsername() { + const usernameField = this.children[0] + + return usernameField.getValue() + } + + getPassword() { + const passwordField = this.children[1] + + return passwordField.getValue() + } +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/login/index.css b/staff/jose-pozo/socialcode/app/login/index.css new file mode 100644 index 000000000..d1c26e12b --- /dev/null +++ b/staff/jose-pozo/socialcode/app/login/index.css @@ -0,0 +1,42 @@ +.View { + display: flex; + flex-direction: column; + align-items: center; +} + +.Header { + width: 90%; + display: flex; + gap: 1rem; + align-self: center; + justify-content: right; + align-items: center; + position: fixed; + top: 0; + box-sizing: border-box; + /*border-bottom: 1px solid var(--first-color);*/ + background-color: var(--second-color); + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.Logo { + height: 50px; + margin-right: auto; +} + +.RegisterLink { + border: 1px solid #7799E5; + border-radius: 0.3rem; + padding: .5rem; + text-decoration: none; +} + +.RegisterLink:hover { + cursor: pointer; + background-color: #f73a1c; +} + +.Title { + margin-top: 8rem; +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/login/index.html b/staff/jose-pozo/socialcode/app/login/index.html new file mode 100644 index 000000000..f02497c7e --- /dev/null +++ b/staff/jose-pozo/socialcode/app/login/index.html @@ -0,0 +1,48 @@ + + + + + + + Login + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/login/index.js b/staff/jose-pozo/socialcode/app/login/index.js new file mode 100644 index 000000000..e6e80e828 --- /dev/null +++ b/staff/jose-pozo/socialcode/app/login/index.js @@ -0,0 +1,59 @@ +if (logic.isUserLoggedIn()) + location.href = '../home' + +const view = new Component(document.body) +view.addClass('View') + +const header = new Component('header') +header.addClass('Header') +view.add(header) + +const logo = new Image +logo.setUrl('../assets/SocialCode.png') +logo.addClass('Logo') + +const registerLink = new Link +registerLink.addClass('RegisterLink') +registerLink.setText('Register') +registerLink.onClick(event => { + event.preventDefault() + + setTimeout(() => location.href = '../register', 500) +}) + +header.add(logo) +header.add(registerLink) + +const title = new Heading(1) +title.setText('Login') +title.addClass('Title') + +const loginForm = new LoginForm +loginForm.addClass('LoginForm') +loginForm.onSubmit(event => { + event.preventDefault() + + const username = loginForm.getUsername() + const password = loginForm.getPassword() + + try { + logic.loginUser(username, password) + + loginForm.clear() + + loginForm.setFeedback('user successfully logged in', 'success') + + setTimeout(() => location.href = '../home', 1000) + } catch (error) { + if (error instanceof ContentError) + loginForm.seFeedback(error.message + ', please, correct it') + else if (error instanceof MatchError) + loginForm.setFeedback('wrong credentials') + else + loginForm.setFeedback('sorry, there was an error, please try again later') + } +}) + +view.add(header) +view.add(title) +view.add(loginForm) \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/register/RegisterForm.js b/staff/jose-pozo/socialcode/app/register/RegisterForm.js new file mode 100644 index 000000000..ecf1b3a65 --- /dev/null +++ b/staff/jose-pozo/socialcode/app/register/RegisterForm.js @@ -0,0 +1,71 @@ +class RegisterForm extends FormWithFeedback { + constructor() { + super() + + this.addClass('RegisterForm') + + const nameField = new Field('name', 'text', 'Name') + nameField.setPlaceholder('name') + + const surnameField = new Field('surname', 'text', 'Surname') + surnameField.setPlaceholder('surname') + + const emailField = new Field('email', 'email', 'E-mail') + emailField.setPlaceholder('name@example.com') + + const usernameField = new Field('username', 'text', 'Username') + usernameField.setPlaceholder('username') + + const passwordField = new Field('password', 'password', 'Password') + passwordField.setPlaceholder('password') + + const passwordRepeatField = new Field('password', 'password', 'Password repeat') + passwordRepeatField.setPlaceholder('repeat password') + + const submitButton = new SubmitButton('Register') + + this.add(nameField) + this.add(surnameField) + this.add(emailField) + this.add(usernameField) + this.add(passwordField) + this.add(passwordRepeatField) + this.add(submitButton) + } + + getName() { + const nameField = this.children[0] + + return nameField.getValue() + } + + getSurname() { + const surnameField = this.children[1] + + return surnameField.getValue() + } + + getEmail() { + const emailField = this.children[2] + + return emailField.getValue() + } + + getUsername() { + const usernameField = this.children[3] + + return usernameField.getValue() + } + + getPassword() { + const passwordField = this.children[4] + + return passwordField.getValue() + } + + getPasswordRepeat() { + const passwordFieldRepeat = this.children[5] + + return passwordFieldRepeat.getValue() + } +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/register/index.css b/staff/jose-pozo/socialcode/app/register/index.css new file mode 100644 index 000000000..bc1b9da85 --- /dev/null +++ b/staff/jose-pozo/socialcode/app/register/index.css @@ -0,0 +1,42 @@ +.View { + display: flex; + flex-direction: column; + align-items: center; +} + +.Header { + width: 90%; + display: flex; + gap: 1rem; + align-self: center; + justify-content: right; + align-items: center; + position: fixed; + top: 0; + box-sizing: border-box; + /*border-bottom: 1px solid var(--first-color);*/ + background-color: var(--second-color); + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.Logo { + height: 50px; + margin-right: auto; +} + +.LoginLink { + border: 1px solid #7799E5; + border-radius: 0.3rem; + padding: .5rem; + text-decoration: none; +} + +.LoginLink:hover { + cursor: pointer; + background-color: #f73a1c; +} + +.Title { + margin-top: 8rem; +} \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/register/index.html b/staff/jose-pozo/socialcode/app/register/index.html new file mode 100644 index 000000000..033c3a8c0 --- /dev/null +++ b/staff/jose-pozo/socialcode/app/register/index.html @@ -0,0 +1,47 @@ + + + + + + + Register + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/staff/jose-pozo/socialcode/app/register/index.js b/staff/jose-pozo/socialcode/app/register/index.js new file mode 100644 index 000000000..f207c2e11 --- /dev/null +++ b/staff/jose-pozo/socialcode/app/register/index.js @@ -0,0 +1,65 @@ +if (logic.isUserLoggedIn()) + location.href = '../home' + +const view = new Component(document.body) +view.addClass('View') + +const header = new Component('header') +header.addClass('Header') +view.add(header) + +const logo = new Image +logo.setUrl('../assets/SocialCode.png') +logo.addClass('Logo') + +const loginLink = new Link +loginLink.addClass('LoginLink') +loginLink.setText('Login') +loginLink.onClick(event => { + event.preventDefault() + + setTimeout(() => location.href = '../login', 500) +}) + +header.add(logo) +header.add(loginLink) + +const title = new Heading(1) +title.addClass('Title') +title.setText('Register') +title.onClick(() => alert('By clicking on this title you wont get anything .P')) + +const registerForm = new RegisterForm +registerForm.onSubmit(event => { + event.preventDefault() + + const name = registerForm.getName() + const surname = registerForm.getSurname() + const email = registerForm.getEmail() + const username = registerForm.getUsername() + const password = registerForm.getPassword() + const passwordRepeat = registerForm.getPasswordRepeat() + + try { + logic.registerUser(name, surname, email, username, password, passwordRepeat) + + registerForm.clear() + + registerForm.setFeedback('user successfully registered', 'success') + + setTimeout(() => location.href = '../login', 1000) + } catch (error) { + if (error instanceof ContentError) + registerForm.setFeedback(error.message + ', please, correct it') + else if (error instanceof MatchError) + registerForm.setFeedback(error.message + ', please, retype them') + else if (error instanceof DuplicityError) + registerForm.setFeedback(error.message + ', please, enter new one') + else + registerForm.setFeedback('sorry, there was an error, please try again later') + } +}) + +view.add(header) +view.add(title) +view.add(registerForm)