Login ver1.1

+App.js
\ No newline at end of file

@@ -1243,6 +1243,23 @@
         }
       }
     },
+    "@fluentui/react-component-event-listener": {
+      "version": "0.51.7",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.51.7.tgz",
+      "integrity": "sha512-NjVm+crN0T9A7vITL8alZeHnuV8zi2gos0nezU/2YOxaUAB9E4zKiPxt/6k5U50rJs/gj8Nu45iXxnjO41HbZg==",
+      "requires": {
+        "@babel/runtime": "^7.10.4"
+      }
+    },
+    "@fluentui/react-component-ref": {
+      "version": "0.51.7",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-component-ref/-/react-component-ref-0.51.7.tgz",
+      "integrity": "sha512-CX27jVJYaFoBCWpuWAizQZ2se137ku1dmDyn8sw+ySNJa+kkQf7LnMydiPW5K7cRdUSqUJW3eS4EjKRvVAx8xA==",
+      "requires": {
+        "@babel/runtime": "^7.10.4",
+        "react-is": "^16.6.3"
+      }
+    },
     "@gar/promisify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -1873,6 +1890,11 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
+      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ=="
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -1911,6 +1933,15 @@
         }
       }
     },
+    "@semantic-ui-react/event-stack": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.2.tgz",
+      "integrity": "sha512-Yd0Qf7lPCIjzJ9bZYfurlNu2RDXT6KKSyubHfYK3WjRauhxCsq6Fk2LMRI9DEvShoEU+AsLSv3NGkqXAcVp0zg==",
+      "requires": {
+        "exenv": "^1.2.2",
+        "prop-types": "^15.6.2"
+      }
+    },
     "@sinonjs/commons": {
       "version": "1.8.3",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
@@ -4307,6 +4338,11 @@
         "wrap-ansi": "^6.2.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6391,6 +6427,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -9692,6 +9733,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -9834,6 +9880,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "keyboard-key": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
+      "integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -9923,6 +9974,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -12807,11 +12863,25 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -13874,6 +13944,34 @@
         "node-forge": "^0.10.0"
       }
     },
+    "semantic-ui-css": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz",
+      "integrity": "sha512-Pkp0p9oWOxlH0kODx7qFpIRYpK1T4WJOO4lNnpNPOoWKCrYsfHqYSKgk5fHfQtnWnsAKy7nLJMW02bgDWWFZFg==",
+      "requires": {
+        "jquery": "x.*"
+      }
+    },
+    "semantic-ui-react": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-2.0.4.tgz",
+      "integrity": "sha512-nTlIN/K1iEA7ybut2ICBlPfAushs2afkyUuwQ6vMlYpvLjnnUgN+JKhhoq47MlRuQ2ekdMDZ9OgctViTbDyBaQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.5",
+        "@fluentui/react-component-event-listener": "~0.51.6",
+        "@fluentui/react-component-ref": "~0.51.6",
+        "@popperjs/core": "^2.6.0",
+        "@semantic-ui-react/event-stack": "^3.1.2",
+        "clsx": "^1.1.1",
+        "keyboard-key": "^1.1.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6 || ^17.0.0",
+        "react-popper": "^2.2.4",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "semver": {
       "version": "7.3.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
@@ -14035,6 +14133,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -15553,6 +15656,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

@@ -11,6 +11,8 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
+    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-react": "^2.0.4",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

 import React, { useState } from "react";
 import "../style/LoginPage.scss";
+import { Icon, Input } from "semantic-ui-react"
 
 function LoginPage() {
     const [Id, setId] = useState("");
@@ -22,19 +23,28 @@ function LoginPage() {
                 <form onSubmit={onSubmitHandler}>
                     <h1>Tunnel</h1>
                     <div className="input-area">
-                        <input type="id" value={Id} autoComplete="off" onChange={onIdHandler} />
-                        <label htmlFor="id">USER ID</label>
+                        <Input
+                            icon={<Icon name='at'/>}
+                            iconPosition='left'
+                            placeholder="Email"
+                            type="text"
+                            value={Id}
+                            autoComplete="off"
+                            onChange={onIdHandler}/>
                     </div>
                     <div className="input-area">
-                        <input
+                        <Input
+                            icon={<Icon name='lock'/>}
+                            iconPosition='left'
+                            placeholder="Password"
                             type="password"
                             value={Password}
-                            onChange={onPasswordHandler}
-                        />
-                        <label htmlFor="password">USER PASSWORD</label>
+                            autoComplete="off"
+                            onChange={onPasswordHandler}/>
                     </div>
                     <div className="btn-area">
-                        <button >Login</button>
+                        <button className="login-btn" >Login</button>
+                        <button className="register-btn" >Register</button>
                     </div>
                 </form>
             </div>

@@ -8,9 +8,9 @@
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-image: url("../images/register_background.jpg");
+  background-image: url("../images/login_background.png");
   background-repeat: no-repeat;
-  background-size: cover;
+  background-position: center;
   .login-form {
     display: flex;
     justify-content: space-around;
@@ -21,8 +21,8 @@
     box-shadow: 0px 0px 20px #000;
   }
   h1 {
-    font-size: 32px;
-    color: black;
+    font-size: 40px;
+    color: white;
     font-weight: bold;
     text-align: center;
     margin-bottom: 60px ;
@@ -31,22 +31,18 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 250px;
+    width: 400px;
     position: relative;
     margin-top: 20px;
     font-weight: bold;
     font-size: medium;
 
-    &:first-child {
-      margin-top: 0;
-    }
-
     input {
-      width: 100%;
-      padding: 20px 10px 10px;
+      width: 75%;
+      padding: 15px .8em .8em;
       background-color: transparent;
-      border: none;
-      border-bottom: 1px solid #999;
+      border: 2px solid white;
+      border-radius: 30px;
       font-size: 18px;
       color: white;
       outline: none;
@@ -62,17 +58,28 @@
   }
   .btn-area {
     display: flex;
-    justify-content: center;
-    margin-top: 20px;
+    justify-content: space-evenly;
+    margin-top: 30px;
 
-    button {
-      width: 50%;
-      height: 40px;
-      background: slateblue;
+    .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: none;
       border-radius: 25px;
       cursor: pointer;
     }

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