Showing
11 changed files
with
160 additions
and
35 deletions
jeongmin/login/app/src/databases/users.json
0 → 100644
| ... | @@ -7,18 +7,31 @@ class User { | ... | @@ -7,18 +7,31 @@ class User { |
| 7 | this.body = body; | 7 | this.body = body; |
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | - login() { | 10 | + async login() { |
| 11 | - const body = this.body | 11 | + const client = this.body; |
| 12 | - const {id, password} = UserStorage.getUserInfo(body.id); | 12 | + const {id, password} = await UserStorage.getUserInfo(client.id); |
| 13 | // console.log(id, password); | 13 | // console.log(id, password); |
| 14 | + | ||
| 14 | if (id) { | 15 | if (id) { |
| 15 | - if (id === body.id && password === body.password) { | 16 | + if (id === client.id && password === client.password) { |
| 16 | return { success: true}; | 17 | return { success: true}; |
| 17 | } | 18 | } |
| 18 | return { success : false, msg: "비밀번호가 틀렸습니다."}; | 19 | return { success : false, msg: "비밀번호가 틀렸습니다."}; |
| 19 | } | 20 | } |
| 20 | return {success: false, msg: "존재하지 않는 아이디입니다."}; | 21 | return {success: false, msg: "존재하지 않는 아이디입니다."}; |
| 21 | } | 22 | } |
| 23 | + | ||
| 24 | + async register() { | ||
| 25 | + const client = this.body; | ||
| 26 | + try { | ||
| 27 | + const response = await UserStorage.save(client); | ||
| 28 | + // console.log(response); | ||
| 29 | + return response; | ||
| 30 | + } catch (err) { | ||
| 31 | + | ||
| 32 | + return {success: false, msg : err}; | ||
| 33 | + } | ||
| 34 | + } | ||
| 22 | } | 35 | } |
| 23 | 36 | ||
| 24 | module.exports = User; | 37 | module.exports = User; |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| 1 | 'use strict'; | 1 | 'use strict'; |
| 2 | +//파일시스템 이용해서 파일 접근 및 DB 관리 | ||
| 3 | +const fs = require("fs").promises; | ||
| 2 | 4 | ||
| 3 | class UserStorage { | 5 | class UserStorage { |
| 4 | - //더미데이터 | 6 | + |
| 5 | - // # = private 변수로 은닉화 | 7 | + static #getUserInfo(data, id) { |
| 6 | - static #users = { | 8 | + const users = JSON.parse(data); |
| 7 | - id: ["jeongmin", "jumi"], | 9 | + const idx = users.id.indexOf(id); |
| 8 | - password: ["1234", "1234"], | 10 | + const userKeys = Object.keys(users); // [id, password, name] |
| 9 | - name: ["정민", "주미"], | 11 | + const userInfo = userKeys.reduce((newUser, info) => { |
| 10 | - }; | 12 | + newUser[info] = users[info][idx]; |
| 11 | - | 13 | + return newUser; |
| 12 | - static getUsers(...fields) { | 14 | + }, {}); |
| 13 | - const users = this.#users; | 15 | + // console.log(userInfo); |
| 16 | + return userInfo; | ||
| 17 | + } | ||
| 18 | + | ||
| 19 | + static #getUsers(data, isAll, fields) { | ||
| 20 | + const users = JSON.parse(data); | ||
| 21 | + if (isAll) return users; | ||
| 22 | + | ||
| 14 | const newUsers = fields.reduce((newUsers, field) => { | 23 | const newUsers = fields.reduce((newUsers, field) => { |
| 15 | if (users.hasOwnProperty(field)) { | 24 | if (users.hasOwnProperty(field)) { |
| 16 | newUsers[field] = users[field]; | 25 | newUsers[field] = users[field]; |
| ... | @@ -20,16 +29,35 @@ class UserStorage { | ... | @@ -20,16 +29,35 @@ class UserStorage { |
| 20 | return newUsers; | 29 | return newUsers; |
| 21 | } | 30 | } |
| 22 | 31 | ||
| 32 | + static getUsers(isAll, ...fields) { | ||
| 33 | + return fs | ||
| 34 | + .readFile("./src/databases/users.json") | ||
| 35 | + .then((data) => { | ||
| 36 | + return this.#getUsers(data, isAll, fields); | ||
| 37 | + }) | ||
| 38 | + .catch((err) => console.error); | ||
| 39 | + } | ||
| 40 | + | ||
| 23 | static getUserInfo(id) { | 41 | static getUserInfo(id) { |
| 24 | - const users = this.#users; | 42 | + return fs |
| 25 | - const idx = users.id.indexOf(id); | 43 | + .readFile("./src/databases/users.json") |
| 26 | - const userKeys = Object.keys(users); // [id, password, name] | 44 | + .then((data) => { |
| 27 | - const userInfo = userKeys.reduce((newUser, info) => { | 45 | + return this.#getUserInfo(data, id); |
| 28 | - newUser[info] = users[info][idx]; | 46 | + }) |
| 29 | - return newUser; | 47 | + .catch((err) => console.error); |
| 30 | - }, {}); | 48 | + } |
| 31 | 49 | ||
| 32 | - return userInfo; | 50 | + static async save(userInfo) { |
| 51 | + const users = await this.getUsers(true); | ||
| 52 | + //id가 없으면 회원가입 가능 | ||
| 53 | + if (users.id.includes(userInfo.id)) { | ||
| 54 | + throw "이미 존재하는 아이디입니다."; | ||
| 55 | + } | ||
| 56 | + users.id.push(userInfo.id); | ||
| 57 | + users.name.push(userInfo.name); | ||
| 58 | + users.password.push(userInfo.password); | ||
| 59 | + fs.writeFile("./src/databases/users.json", JSON.stringify(users)); | ||
| 60 | + return { success: true}; | ||
| 33 | } | 61 | } |
| 34 | } | 62 | } |
| 35 | 63 | ... | ... |
| ... | @@ -26,13 +26,14 @@ | ... | @@ -26,13 +26,14 @@ |
| 26 | box-sizing: border-box; | 26 | box-sizing: border-box; |
| 27 | font-size: 14px; | 27 | font-size: 14px; |
| 28 | } | 28 | } |
| 29 | -.form button { | 29 | +.form #button { |
| 30 | font-family: "Roboto", sans-serif; | 30 | font-family: "Roboto", sans-serif; |
| 31 | text-transform: uppercase; | 31 | text-transform: uppercase; |
| 32 | outline: 0; | 32 | outline: 0; |
| 33 | background: rebeccapurple; | 33 | background: rebeccapurple; |
| 34 | - width: 100%; | 34 | + width: 89%; |
| 35 | border: 0; | 35 | border: 0; |
| 36 | + margin: 0 auto; | ||
| 36 | padding: 15px; | 37 | padding: 15px; |
| 37 | color: #FFFFFF; | 38 | color: #FFFFFF; |
| 38 | font-size: 14px; | 39 | font-size: 14px; |
| ... | @@ -40,7 +41,7 @@ | ... | @@ -40,7 +41,7 @@ |
| 40 | transition: all 0.3 ease; | 41 | transition: all 0.3 ease; |
| 41 | cursor: pointer; | 42 | cursor: pointer; |
| 42 | } | 43 | } |
| 43 | -.form button:hover,.form button:active,.form button:focus { | 44 | +.form #button:hover,.form #button:active,.form #button:focus { |
| 44 | background: rebeccapurple; | 45 | background: rebeccapurple; |
| 45 | } | 46 | } |
| 46 | .form .message { | 47 | .form .message { | ... | ... |
| ... | @@ -26,13 +26,14 @@ | ... | @@ -26,13 +26,14 @@ |
| 26 | box-sizing: border-box; | 26 | box-sizing: border-box; |
| 27 | font-size: 14px; | 27 | font-size: 14px; |
| 28 | } | 28 | } |
| 29 | -.form button { | 29 | +.form #button { |
| 30 | font-family: "Roboto", sans-serif; | 30 | font-family: "Roboto", sans-serif; |
| 31 | text-transform: uppercase; | 31 | text-transform: uppercase; |
| 32 | outline: 0; | 32 | outline: 0; |
| 33 | background: rebeccapurple; | 33 | background: rebeccapurple; |
| 34 | - width: 100%; | 34 | + width: 89%; |
| 35 | border: 0; | 35 | border: 0; |
| 36 | + margin: 0 auto; | ||
| 36 | padding: 15px; | 37 | padding: 15px; |
| 37 | color: #FFFFFF; | 38 | color: #FFFFFF; |
| 38 | font-size: 14px; | 39 | font-size: 14px; |
| ... | @@ -40,7 +41,7 @@ | ... | @@ -40,7 +41,7 @@ |
| 40 | transition: all 0.3 ease; | 41 | transition: all 0.3 ease; |
| 41 | cursor: pointer; | 42 | cursor: pointer; |
| 42 | } | 43 | } |
| 43 | -.form button:hover,.form button:active,.form button:focus { | 44 | +.form #button:hover,.form #button:active,.form #button:focus { |
| 44 | background: rebeccapurple; | 45 | background: rebeccapurple; |
| 45 | } | 46 | } |
| 46 | .form .message { | 47 | .form .message { | ... | ... |
| ... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
| 2 | 2 | ||
| 3 | const id = document.querySelector("#id"), | 3 | const id = document.querySelector("#id"), |
| 4 | password = document.querySelector("#password"), | 4 | password = document.querySelector("#password"), |
| 5 | - loginBtn = document.querySelector("button"); | 5 | + loginBtn = document.querySelector("#button"); |
| 6 | 6 | ||
| 7 | loginBtn.addEventListener("click", login); | 7 | loginBtn.addEventListener("click", login); |
| 8 | 8 | ... | ... |
| 1 | +'use strict'; | ||
| 2 | + | ||
| 3 | +const id = document.querySelector("#id"), | ||
| 4 | + name = document.querySelector("#name"), | ||
| 5 | + password = document.querySelector("#password"), | ||
| 6 | + confirmPassword = document.querySelector("#confirm-password"), | ||
| 7 | + registerBtn = document.querySelector("#button"); | ||
| 8 | + | ||
| 9 | +registerBtn.addEventListener("click", register); | ||
| 10 | + | ||
| 11 | +function register() { | ||
| 12 | + if(!id.value) { | ||
| 13 | + return alert("아이디를 입력해주세요.") | ||
| 14 | + } | ||
| 15 | + | ||
| 16 | + if(!name.value) { | ||
| 17 | + return alert("이름을 입력해주세요.") | ||
| 18 | + } | ||
| 19 | + if(!password.value) { | ||
| 20 | + return alert("비밀번호를 입력해주세요.") | ||
| 21 | + } | ||
| 22 | + if(!confirmPassword.value) { | ||
| 23 | + return alert("비밀번호를 확인해주세요.") | ||
| 24 | + } | ||
| 25 | + if (password.value !== confirmPassword.value) { | ||
| 26 | + return alert("비밀번호가 일치하지 않습니다.") | ||
| 27 | + } | ||
| 28 | + | ||
| 29 | + const req = { | ||
| 30 | + id : id.value, | ||
| 31 | + name : name.value, | ||
| 32 | + password : password.value, | ||
| 33 | + }; | ||
| 34 | + | ||
| 35 | + fetch("/register", { | ||
| 36 | + method: "POST", | ||
| 37 | + headers: { | ||
| 38 | + "Content-Type": "application/json" | ||
| 39 | + }, | ||
| 40 | + body: JSON.stringify(req), | ||
| 41 | + }) | ||
| 42 | + .then((res) => res.json()) | ||
| 43 | + .then((res) => { | ||
| 44 | + if (res.success) { | ||
| 45 | + //성공하면 이동 | ||
| 46 | + location.href = "/login"; | ||
| 47 | + } else { | ||
| 48 | + alert(res.msg); | ||
| 49 | + } | ||
| 50 | + }) | ||
| 51 | + .catch((err) => { | ||
| 52 | + console.error("회원가입 중 에러 발생"); | ||
| 53 | + }); | ||
| 54 | +} | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| ... | @@ -17,10 +17,17 @@ const output = { | ... | @@ -17,10 +17,17 @@ const output = { |
| 17 | }; | 17 | }; |
| 18 | 18 | ||
| 19 | const process = { | 19 | const process = { |
| 20 | - login: (req, res) => { | 20 | + login: async (req, res) => { |
| 21 | const user = new User(req.body); | 21 | const user = new User(req.body); |
| 22 | - const response = user.login(); | 22 | + const response = await user.login(); |
| 23 | return res.json(response); | 23 | return res.json(response); |
| 24 | + }, | ||
| 25 | + | ||
| 26 | + register: async (req, res) => { | ||
| 27 | + const user = new User(req.body); | ||
| 28 | + const response = await user.register(); | ||
| 29 | + return res.json(response); | ||
| 30 | + }, | ||
| 24 | // const id = req.body.id, | 31 | // const id = req.body.id, |
| 25 | // password = req.body.password; | 32 | // password = req.body.password; |
| 26 | // const users = UserStorage.getUsers("id", "password"); | 33 | // const users = UserStorage.getUsers("id", "password"); |
| ... | @@ -38,7 +45,6 @@ const process = { | ... | @@ -38,7 +45,6 @@ const process = { |
| 38 | // response.success = false; | 45 | // response.success = false; |
| 39 | // response.msg = "로그인에 실패하였습니다." | 46 | // response.msg = "로그인에 실패하였습니다." |
| 40 | // return res.json(response); | 47 | // return res.json(response); |
| 41 | - }, | ||
| 42 | }; | 48 | }; |
| 43 | 49 | ||
| 44 | module.exports = { | 50 | module.exports = { | ... | ... |
| ... | @@ -8,6 +8,8 @@ const ctrl = require("./home.ctrl"); | ... | @@ -8,6 +8,8 @@ const ctrl = require("./home.ctrl"); |
| 8 | router.get("/", ctrl.output.hello); | 8 | router.get("/", ctrl.output.hello); |
| 9 | router.get("/login", ctrl.output.login); | 9 | router.get("/login", ctrl.output.login); |
| 10 | router.get("/register", ctrl.output.register); | 10 | router.get("/register", ctrl.output.register); |
| 11 | + | ||
| 11 | router.post("/login", ctrl.process.login); | 12 | router.post("/login", ctrl.process.login); |
| 13 | +router.post("/register", ctrl.process.register); | ||
| 12 | 14 | ||
| 13 | module.exports = router; | 15 | module.exports = router; |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -21,7 +21,7 @@ | ... | @@ -21,7 +21,7 @@ |
| 21 | <form class="login-form"> | 21 | <form class="login-form"> |
| 22 | <input id="id" type="text" placeholder="아이디" /> | 22 | <input id="id" type="text" placeholder="아이디" /> |
| 23 | <input id="password" type="password" placeholder="비밀번호" /> | 23 | <input id="password" type="password" placeholder="비밀번호" /> |
| 24 | - <button>LOGIN</button> | 24 | + <p id="button">LOGIN</p> |
| 25 | <p class="message"> | 25 | <p class="message"> |
| 26 | 계정이 없으신가요? <a href="/register">회원가입</a> | 26 | 계정이 없으신가요? <a href="/register">회원가입</a> |
| 27 | </p> | 27 | </p> | ... | ... |
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 7 | <link rel="stylesheet" href="/css/home/register.css" /> | 7 | <link rel="stylesheet" href="/css/home/register.css" /> |
| 8 | - <script src="/js/home/login.js" defer></script> | 8 | + <script src="/js/home/register.js" defer></script> |
| 9 | <title>Document</title> | 9 | <title>Document</title> |
| 10 | </head> | 10 | </head> |
| 11 | <body> | 11 | <body> |
| ... | @@ -27,7 +27,7 @@ | ... | @@ -27,7 +27,7 @@ |
| 27 | type="password" | 27 | type="password" |
| 28 | placeholder="비밀번호 확인" | 28 | placeholder="비밀번호 확인" |
| 29 | /> | 29 | /> |
| 30 | - <button>SIGN UP</button> | 30 | + <p id="button">SIGN UP</p> |
| 31 | <p class="message">계정이 있으신가요? <a href="/login">로그인</a></p> | 31 | <p class="message">계정이 있으신가요? <a href="/login">로그인</a></p> |
| 32 | </form> | 32 | </form> |
| 33 | </div> | 33 | </div> | ... | ... |
-
Please register or login to post a comment