Merge branch 'login' into 'master'

Login UI



See merge request !1

+App.js
\ No newline at end of file

 <component name="InspectionProjectProfileManager">
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <option name="myName" value="Project Default" />
+    <inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
     <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
   </profile>
   </profile>
 </component>
 </component>
\ No newline at end of file

 <?xml version="1.0" encoding="UTF-8"?>
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
 <project version="4">
   <component name="VcsDirectoryMappings">
   <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
     <mapping directory="$PROJECT_DIR$" vcs="Git" />
   </component>
   </component>
 </project>
 </project>
\ No newline at end of file

@@ -6,9 +6,13 @@
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "@testing-library/user-event": "^12.8.3",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "react-scripts": "4.0.3",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.0.4",
     "web-vitals": "^1.1.2"
     "web-vitals": "^1.1.2"
   },
   },
   "scripts": {
   "scripts": {

-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

-import logo from './logo.svg';
-import './App.css';
-
-function App() {
+//import React, {useState} from "react";
+import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
+import LandingPage from "./component/views/LandingPage/LandingPage";
+import LoginPage from "./component/views/LoginPage/LoginPage";
+import RegisterPage from "./component/views/RegisterPage/RegisterPage";
+import "./static/fonts/font.css";
+function App () {
   return (
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+      <Router>
+        <div>
+          {}
+          <Routes>
+            <Route exact path = "/" element={<LandingPage/>}/>
+            <Route exact path = "/login" element={<LoginPage/>}/>
+            <Route exact path = "/register" element={<RegisterPage/>}/>
+          </Routes>
+        </div>
+      </Router>
   );
   );
 }
 }
 
 

+// React, {useEffect} from 'react';
+//import axios from 'axios';
+function LandingPage() {
+    return (
+        <div>
+            <input type="password"/>
+        </div>
+    );
+}
+
+export default LandingPage;

+import React, { useState } from "react";
+import "../style/LoginPage.scss";
+import { Icon, Input } from "semantic-ui-react"
+
+function LoginPage() {
+    const [Email, setEmail] = useState("");
+    const [Password, setPassword] = useState("");
+
+    const onIdHandler = (event) => {
+        setEmail(event.currentTarget.value);
+    };
+    const onPasswordHandler = (event) => {
+        setPassword(event.currentTarget.value);
+    };
+    const onSubmitHandler = (event) => {
+        event.preventDefault();
+        console.log("Email", Email);
+        console.log("Password", Password);
+    };
+    return (
+        <div id="body">
+            <div className="login-form">
+                <form onSubmit={onSubmitHandler}>
+                    <h1>Tunnel</h1>
+                    <div className="input-area">
+                        <Input
+                            icon={<Icon name='at'/>}
+                            iconPosition='left'
+                            placeholder="Email"
+                            type="text"
+                            value={Email}
+                            autoComplete="off"
+                            onChange={onIdHandler}/>
+                    </div>
+                    <div className="input-area">
+                        <Input
+                            icon={<Icon name='lock'/>}
+                            iconPosition='left'
+                            placeholder="Password"
+                            type="password"
+                            value={Password}
+                            autoComplete="off"
+                            onChange={onPasswordHandler}/>
+                    </div>
+                    <div className="btn-area">
+                        <button className="login-btn" >Login</button>
+                        <button className="register-btn" >Register</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default LoginPage;

+import React, { useState } from "react";
+import "../style/RegisterPage.scss";
+import { Icon, Input } from "semantic-ui-react"
+
+function RegisterPage() {
+    const [Email, setEmail] = useState("");
+    const [Password, setPassword] = useState("");
+
+    const onIdHandler = (event) => {
+        setEmail(event.currentTarget.value);
+    };
+    const onPasswordHandler = (event) => {
+        setPassword(event.currentTarget.value);
+    };
+    const onSubmitHandler = (event) => {
+        event.preventDefault();
+        console.log("Email",Email);
+        console.log("Password", Password);
+    };
+    return (
+        <div id="body">
+            <div className="register-form">
+                <form onSubmit={onSubmitHandler}>
+                    <h1>Tunnel</h1>
+                    <div className="input-area">
+                        <Input
+                            icon={<Icon name='at'/>}
+                            iconPosition='left'
+                            placeholder="Email"
+                            type="text"
+                            value={Email}
+                            autoComplete="off"
+                            onChange={onIdHandler}/>
+                    </div>
+                    <div className="input-area">
+                        <Input
+                            icon={<Icon name='lock'/>}
+                            iconPosition='left'
+                            placeholder="Password"
+                            type="password"
+                            value={Password}
+                            autoComplete="off"
+                            onChange={onPasswordHandler}/>
+                    </div>
+                    <div className="btn-area">
+                        <button className="register-btn" >Register</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default RegisterPage;

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+#body{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: url("../images/login_background.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  .login-form {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: row;
+    width: 500px;
+    height: 620px;
+    box-shadow: 0px 0px 20px #000;
+  }
+  h1 {
+    font-size: 40px;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 60px ;
+  }
+  .input-area {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 400px;
+    position: relative;
+    margin-top: 20px;
+    font-weight: bold;
+    font-size: medium;
+
+    input {
+      width: 75%;
+      padding: 15px .8em .8em;
+      background-color: transparent;
+      border: 2px solid white;
+      border-radius: 30px;
+      font-size: 18px;
+      color: white;
+      outline: none;
+    }
+
+    label {
+      position: absolute;
+      left: 10px;
+      top: -2px;
+      font-size: 14px;
+      color: white;
+    }
+  }
+  .btn-area {
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 30px;
+
+    .login-btn {
+      width: 150px;
+      height: 50px;
+      background-color: transparent;
+      font-size: 20px;
+      color: white;
+      border: 2px solid white;
+      font-weight: bold;
+      border-radius: 25px;
+      cursor: pointer;
+    }
+    .register-btn {
+      width: 150px;
+      height: 50px;
+      background-color: transparent;
+      font-size: 20px;
+      color: white;
+      border: 2px solid white;
+      font-weight: bold;
+      border-radius: 25px;
+      cursor: pointer;
+    }
+  }
+}
+

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+#body{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: url("../images/login_background.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  .register-form {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: row;
+    width: 500px;
+    height: 620px;
+    box-shadow: 0px 0px 20px #000;
+  }
+  h1 {
+    font-size: 40px;
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 60px ;
+  }
+  .input-area {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 400px;
+    position: relative;
+    margin-top: 20px;
+    font-weight: bold;
+    font-size: medium;
+
+    input {
+      width: 75%;
+      padding: 15px .8em .8em;
+      background-color: transparent;
+      border: 2px solid white;
+      border-radius: 30px;
+      font-size: 18px;
+      color: white;
+      outline: none;
+    }
+
+    label {
+      position: absolute;
+      left: 10px;
+      top: -2px;
+      font-size: 14px;
+      color: white;
+    }
+  }
+  .btn-area {
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 30px;
+
+    .register-btn {
+      width: 150px;
+      height: 50px;
+      background-color: transparent;
+      font-size: 20px;
+      color: white;
+      border: 2px solid white;
+      font-weight: bold;
+      border-radius: 25px;
+      cursor: pointer;
+    }
+  }
+}
+

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOM from 'react-dom';
 import './index.css';
 import './index.css';
 import App from './App';
 import App from './App';
-
+import 'semantic-ui-css/semantic.min.css'
 
 
 ReactDOM.render(
 ReactDOM.render(
   <React.StrictMode>
   <React.StrictMode>

+@font-face {
+    font-family: NotoSansKR-Black;
+    src: url("./NotoSansKR-Black.eot");
+}
+
+@font-face {
+    font-family: NotoSansKR-Bold;
+    src: url("./NotoSansKR-Bold.eot");
+}
+
+@font-face {
+    font-family: NotoSansKR-Light;
+    src: url("./NotoSansKR-Light.eot");
+}
+
+@font-face {
+    font-family: NotoSansKR-Medium;
+    src: url("./NotoSansKR-Medium.eot");
+}
+
+@font-face {
+    font-family: NotoSansKR-Regular;
+    src: url("./NotoSansKR-Regular.eot");
+}
+
+@font-face {
+    font-family: NotoSansKR-Thin;
+    src: url("./NotoSansKR-Thin.eot");
+}
\ No newline at end of file