Add design on login form

+'use strict';
+
+const UserStorage = require("./UserStorage");
+
+class User {
+    constructor(body) {
+        this.body = body;
+    }
+
+    login() {
+        const body = this.body
+        const {id, password} = UserStorage.getUserInfo(body.id);
+        // console.log(id, password);
+        if (id) {
+            if (id === body.id && password === body.password) {
+                return { success: true};
+            }
+            return { success : false, msg: "비밀번호가 틀렸습니다."};
+        }
+        return {success: false, msg: "존재하지 않는 아이디입니다."};
+    }
+}
+
+module.exports = User;
\ No newline at end of file

@@ -19,6 +19,18 @@ class UserStorage {
         }, {});
         }, {});
         return newUsers;
         return newUsers;
     }
     }
+
+    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 userInfo;
+    }
 }
 }
 
 
 module.exports = UserStorage;
 module.exports = UserStorage;
\ No newline at end of file

+@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+.login-page {
+  width: 360px;
+  padding: 12% 0 0;
+  margin: auto;
+}
+.form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+.form input {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.form button {
+  font-family: "Roboto", sans-serif;
+  text-transform: uppercase;
+  outline: 0;
+  background: rebeccapurple;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  -webkit-transition: all 0.3 ease;
+  transition: all 0.3 ease;
+  cursor: pointer;
+}
+.form button:hover,.form button:active,.form button:focus {
+  background: rebeccapurple;
+}
+.form .message {
+  margin: 15px 0 0;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.form .message a {
+  color: rebeccapurple;
+  text-decoration: none;
+}
+.form .register-form {
+  display: none;
+}
+.container {
+  position: relative;
+  z-index: 1;
+  max-width: 300px;
+  margin: 0 auto;
+}
+.container:before, .container:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.container .info {
+  margin: 50px auto;
+  text-align: center;
+}
+.container .info h1 {
+  margin: 0 0 15px;
+  padding: 0;
+  font-size: 36px;
+  font-weight: 300;
+  color: #1a1a1a;
+}
+.container .info span {
+  color: #4d4d4d;
+  font-size: 12px;
+}
+.container .info span a {
+  color: #000000;
+  text-decoration: none;
+}
+.container .info span .fa {
+  color: #EF3B3A;
+}
+
+/* #id::placeholder #password::placeholder {
+    color: black;
+    font-style: italic;
+    font-weight: bold;
+} */
+
+body {
+  background: rebeccapurple; /* fallback for old browsers */
+  /* background: rebeccapurple; */
+  background: linear-gradient(90deg, rebeccapurple 0%, rebeccapurple 0%);
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;      
+}
+
+/* Copyright (c) 2022 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy) */
\ No newline at end of file

+@import url(https://fonts.googleapis.com/css?family=Roboto:300);
+
+.login-page {
+  width: 360px;
+  padding: 8% 0 0;
+  margin: auto;
+}
+.form {
+  position: relative;
+  z-index: 1;
+  background: #FFFFFF;
+  max-width: 360px;
+  margin: 0 auto 100px;
+  padding: 45px;
+  text-align: center;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+}
+.form input {
+  font-family: "Roboto", sans-serif;
+  outline: 0;
+  background: #f2f2f2;
+  width: 100%;
+  border: 0;
+  margin: 0 0 15px;
+  padding: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.form button {
+  font-family: "Roboto", sans-serif;
+  text-transform: uppercase;
+  outline: 0;
+  background: rebeccapurple;
+  width: 100%;
+  border: 0;
+  padding: 15px;
+  color: #FFFFFF;
+  font-size: 14px;
+  -webkit-transition: all 0.3 ease;
+  transition: all 0.3 ease;
+  cursor: pointer;
+}
+.form button:hover,.form button:active,.form button:focus {
+  background: rebeccapurple;
+}
+.form .message {
+  margin: 15px 0 0;
+  color: #b3b3b3;
+  font-size: 12px;
+}
+.form .message a {
+  color: rebeccapurple;
+  text-decoration: none;
+}
+.form .register-form {
+  display: none;
+}
+.container {
+  position: relative;
+  z-index: 1;
+  max-width: 300px;
+  margin: 0 auto;
+}
+.container:before, .container:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.container .info {
+  margin: 50px auto;
+  text-align: center;
+}
+.container .info h1 {
+  margin: 0 0 15px;
+  padding: 0;
+  font-size: 36px;
+  font-weight: 300;
+  color: #1a1a1a;
+}
+.container .info span {
+  color: #4d4d4d;
+  font-size: 12px;
+}
+.container .info span a {
+  color: #000000;
+  text-decoration: none;
+}
+.container .info span .fa {
+  color: #EF3B3A;
+}
+
+/* #id::placeholder #password::placeholder {
+    color: black;
+    font-style: italic;
+    font-weight: bold;
+} */
+
+body {
+  background: rebeccapurple; /* fallback for old browsers */
+  /* background: rebeccapurple; */
+  background: linear-gradient(90deg, rebeccapurple 0%, rebeccapurple 0%);
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;      
+}
+
+/* Copyright (c) 2022 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy) */
\ No newline at end of file

 "use strict";
 "use strict";
 
 
-const UserStorage = require("../../models/UserStorage");
+const User = require("../../models/User");
 
 
 const output = {
 const output = {
     hello: (req, res) => {
     hello: (req, res) => {
@@ -10,27 +10,34 @@ const output = {
     login: (req, res) => {
     login: (req, res) => {
         res.render("home/login");
         res.render("home/login");
     },
     },
+
+    register: (req, res) => {
+        res.render("home/register");
+    }
 };
 };
 
 
 const process = {
 const process = {
     login: (req, res) => {
     login: (req, res) => {
-        const id = req.body.id,
-            password = req.body.password;
-        const users = UserStorage.getUsers("id", "password");
-        // console.log(UserStorage.getUsers("id", "password","name"));
-        const response = {};
-
-        if (users.id.includes(id)) {
-            const idx = users.id.indexOf(id);
-            if (users.password[idx] === password) {
-                response.success = true;
+        const user = new User(req.body);
+        const response = user.login();
         return res.json(response);
         return res.json(response);
-            }
-        }
+        // const id = req.body.id,
+        //     password = req.body.password;
+        // const users = UserStorage.getUsers("id", "password");
+        // // console.log(UserStorage.getUsers("id", "password","name"));
+        // const response = {};
 
 
-        response.success = false;
-        response.msg = "로그인에 실패하였습니다."
-        return res.json(response); 
+        // if (users.id.includes(id)) {
+        //     const idx = users.id.indexOf(id);
+        //     if (users.password[idx] === password) {
+        //         response.success = true;
+        //         return res.json(response);
+        //     }
+        // }
+
+        // response.success = false;
+        // response.msg = "로그인에 실패하였습니다."
+        // return res.json(response); 
     },
     },
 };
 };
 
 

@@ -7,6 +7,7 @@ const ctrl = require("./home.ctrl");
 
 
 router.get("/", ctrl.output.hello);
 router.get("/", ctrl.output.hello);
 router.get("/login", ctrl.output.login);
 router.get("/login", ctrl.output.login);
+router.get("/register", ctrl.output.register);
 router.post("/login", ctrl.process.login);
 router.post("/login", ctrl.process.login);
 
 
 module.exports = router;
 module.exports = router;
\ No newline at end of file

@@ -4,12 +4,31 @@
     <meta charset="UTF-8" />
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/css/home/login.css" />
     <script src="/js/home/login.js" defer></script>
     <script src="/js/home/login.js" defer></script>
     <title>Document</title>
     <title>Document</title>
   </head>
   </head>
   <body>
   <body>
-    <input id="id" type="text" placeholder="아이디" /><br />
-    <input id="password" type="text" placeholder="비밀번호" /><br />
-    <button>로그인</button>
+    <div class="login-page">
+      <div class="form">
+        <!-- <form class="register-form">
+          <input type="text" placeholder="name" />
+          <input type="password" placeholder="password" />
+          <input type="text" placeholder="email address" />
+          <button>create</button>
+          <p class="message">Already registered? <a href="#">Sign In</a></p>
+        </form> -->
+        <form class="login-form">
+          <input id="id" type="text" placeholder="아이디" />
+          <input id="password" type="password" placeholder="비밀번호" />
+          <button>LOGIN</button>
+          <p class="message">
+            계정이 없으신가요? <a href="/register">회원가입</a>
+          </p>
+        </form>
+      </div>
+    </div>
   </body>
   </body>
 </html>
 </html>
+
+<!-- Copyright (c) 2022 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy) -->

+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <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>
+    <title>Document</title>
+  </head>
+  <body>
+    <div class="login-page">
+      <div class="form">
+        <!-- <form class="register-form">
+          <input type="text" placeholder="name" />
+          <input type="password" placeholder="password" />
+          <input type="text" placeholder="email address" />
+          <button>create</button>
+          <p class="message">Already registered? <a href="#">Sign In</a></p>
+        </form> -->
+        <form class="login-form">
+          <input id="id" type="text" placeholder="아이디" />
+          <input id="name" type="text" placeholder="이름" />
+          <input id="password" type="password" placeholder="비밀번호" />
+          <input
+            id="confirm-password"
+            type="password"
+            placeholder="비밀번호 확인"
+          />
+          <button>SIGN UP</button>
+          <p class="message">계정이 있으신가요? <a href="/login">로그인</a></p>
+        </form>
+      </div>
+    </div>
+  </body>
+</html>
+
+<!-- Copyright (c) 2022 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy) -->