Jeongmin Seo

Update login and signup using file DB

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