Jeongmin Seo / favorite_restaurant

Go to a project
Toggle navigation Toggle navigation pinning
Jeongmin Seo
36f67119 1 parent 3eaff917

Update login and signup using file DB

Inline Side-by-side
Showing 11 changed files with 159 additions and 34 deletions
1 +{
2 + "id": [
3 + "jeongmin",
4 + "jumi",
5 + "sss",
6 + "sjeongmin"
7 + ],
8 + "password": [
9 + "1234",
10 + "1234",
11 + "1111",
12 + "1111"
13 + ],
14 + "name": [
15 + "서정민",
16 + "양주미",
17 + "정민",
18 + "서정민"
19 + ]
20 +}
...@@ -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 - //더미데이터
5 - // # = private 변수로 은닉화
6 - static #users = {
7 - id: ["jeongmin", "jumi"],
8 - password: ["1234", "1234"],
9 - name: ["정민", "주미"],
10 - };
11 6
12 - static getUsers(...fields) { 7 + static #getUserInfo(data, id) {
13 - const users = this.#users; 8 + const users = JSON.parse(data);
9 + const idx = users.id.indexOf(id);
10 + const userKeys = Object.keys(users); // [id, password, name]
11 + const userInfo = userKeys.reduce((newUser, info) => {
12 + newUser[info] = users[info][idx];
13 + return newUser;
14 + }, {});
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];
...@@ -19,17 +28,36 @@ class UserStorage { ...@@ -19,17 +28,36 @@ class UserStorage {
19 }, {}); 28 }, {});
20 return newUsers; 29 return newUsers;
21 } 30 }
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 + }
22 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>
......