TRA-4077 login design (#608)

* fix /ws auth

* remove useless success toasts on login/signup

* WIP

* log in page

* Update InstallPage.tsx

* Update App.sass, SettingModal.tsx, and 2 more files...

* Update socket_routes.go

* Merge branch 'feature/TRA-4077_login_design' of git@github.com:up9inc/mizu.git

* Update LoginPage.tsx

* Update GlobalKeydownTrigger.tsx and LoginPage.tsx

* Update GlobalKeydownTrigger.tsx

* Revert "Update GlobalKeydownTrigger.tsx"

This reverts commit 6fa579becd.

* Revert "Update GlobalKeydownTrigger.tsx and LoginPage.tsx"

This reverts commit bdc0425353.

* Update LoginPage.tsx

ui/src/App.sass

@@ -6,13 +6,3 @@ body
 .mizuApp
   color: $font-color
   width: 100%
-
-  .centeredForm
-    max-width: 500px
-    text-align: center
-    display: flex
-    flex-direction: column
-    margin: 0 auto
-
-    .form-input, .form-button
-      margin-top: 20px

ui/src/EntApp.tsx

@@ -8,6 +8,7 @@ import {toast} from "react-toastify";
 import InstallPage from "./components/InstallPage";
 import LoginPage from "./components/LoginPage";
 import LoadingOverlay from "./components/LoadingOverlay";
+import AuthPageBase from './components/AuthPageBase';
 
 const api = Api.getInstance();
 
@@ -75,10 +76,10 @@ const EntApp = () => {
             pageComponent = <TrafficPage onTLSDetected={onTLSDetected}/>;
             break;
         case Page.Setup:
-            pageComponent = <InstallPage onFirstLogin={() => setIsFirstLogin(true)}/>;
+            pageComponent = <AuthPageBase><InstallPage onFirstLogin={() => setIsFirstLogin(true)}/></AuthPageBase>;
             break;
         case Page.Login:
-            pageComponent = <LoginPage/>;
+            pageComponent = <AuthPageBase><LoginPage/></AuthPageBase>;
             break;
         default:
             pageComponent = <div>Unknown Error</div>;

ui/src/components/AuthPageBase.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import background from "./assets/authBackground.png";
+import logo from './assets/MizuEntLogoFull.svg';
+import "./style/AuthBasePage.sass";
+
+
+export const AuthPageBase: React.FC = ({children}) => {
+    return <div className="authContainer" style={{background: `url(${background})`, backgroundSize: "cover"}}>
+            <div className="authHeader">
+                <img src={logo}/>
+            </div>
+            {children}
+    </div>;
+};
+
+export default AuthPageBase;

ui/src/components/InstallPage.tsx

@@ -5,6 +5,7 @@ import { adminUsername } from "../consts";
 import Api, { FormValidationErrorType } from "../helpers/api";
 import { toast } from 'react-toastify';
 import LoadingOverlay from "./LoadingOverlay";
+import { useCommonStyles } from "../helpers/commonStyle";
 
 const api = Api.getInstance();
 
@@ -14,6 +15,7 @@ interface InstallPageProps {
 
 export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
 
+    const classes = useCommonStyles();
     const [isLoading, setIsLoading] = useState(false);
     const [password, setPassword] = useState("");
     const [passwordConfirm, setPasswordConfirm] = useState("");
@@ -33,7 +35,6 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
             setIsLoading(true);
             await api.register(adminUsername, password);
             if (!await api.isAuthenticationNeeded()) {
-                toast.success("admin user created successfully");
                 setPage(Page.Traffic);
                 onFirstLogin();
             }
@@ -54,11 +55,21 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
 
     return <div className="centeredForm">
             {isLoading && <LoadingOverlay/>}
-            <p>Welcome to Mizu, please set up the admin user to continue</p>
+            <div className="form-title left-text">Setup</div>
-            <TextField className="form-input" variant="standard" fullWidth value={adminUsername} disabled={true}/>
+            <span className="form-subtitle">Welcome to Mizu, please set up the admin user to continue</span>
-            <TextField className="form-input" label="Password" variant="standard" type="password" fullWidth value={password} onChange={e => setPassword(e.target.value)}/>
+            <div className="form-input">
-            <TextField className="form-input" label="Confirm Password" variant="standard" type="password" fullWidth value={passwordConfirm} onChange={e => setPasswordConfirm(e.target.value)}/>
+                <label htmlFor="inputUsername">Username</label>
-            <Button className="form-button" variant="contained" fullWidth onClick={onFormSubmit}>Finish</Button>
+                <input id="inputUsername" className={classes.textField} value={adminUsername} disabled={true} />
+            </div>
+            <div className="form-input">
+                <label htmlFor="inputUsername">Password</label>
+                <input id="inputUsername" className={classes.textField} value={password} type="password" onChange={(event) => setPassword(event.target.value)}/>    
+            </div>
+            <div className="form-input">
+                <label htmlFor="inputUsername">Confirm Password</label>
+                <input id="inputUsername" className={classes.textField} value={passwordConfirm} type="password" onChange={(event) => setPasswordConfirm(event.target.value)}/>    
+            </div>
+            <Button className={classes.button + " form-button"} variant="contained" fullWidth onClick={onFormSubmit}>Finish</Button>
     </div>;
 };
 

ui/src/components/LoginPage.tsx

@@ -3,14 +3,15 @@ import React, { useContext, useState } from "react";
 import { toast } from "react-toastify";
 import { MizuContext, Page } from "../EntApp";
 import Api from "../helpers/api";
+import { useCommonStyles } from "../helpers/commonStyle";
 import LoadingOverlay from "./LoadingOverlay";
 
 const api = Api.getInstance();
 
 const LoginPage: React.FC = () => {
 
+    const classes = useCommonStyles();
     const [isLoading, setIsLoading] = useState(false);
-
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
 
@@ -22,7 +23,6 @@ const LoginPage: React.FC = () => {
         try {
             await api.login(username, password);
             if (!await api.isAuthenticationNeeded()) {
-                toast.success("Logged in successfully");
                 setPage(Page.Traffic);
             } else {
                 toast.error("Invalid credentials");
@@ -33,16 +33,28 @@ const LoginPage: React.FC = () => {
         } finally {
             setIsLoading(false);
         }
-
     }
 
+    const handleFormOnKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter") {
+            onFormSubmit();
+        }
+    };
 
-    return <div className="centeredForm">
+
+    return <div className="centeredForm" onKeyPress={handleFormOnKeyPress}>
             {isLoading && <LoadingOverlay/>}
-            <p>Welcome to Mizu, please login to continue</p>
+            <div className="form-title left-text">Login</div>
-            <TextField className="form-input" label="Username" variant="standard" fullWidth value={username} onChange={e => setUsername(e.target.value)} />
+            <div className="form-input">
-            <TextField className="form-input" label="Password" variant="standard" type="password" fullWidth value={password} onChange={e => setPassword(e.target.value)} />
+                <label htmlFor="inputUsername">Username</label>
-            <Button className="form-button" variant="contained" fullWidth onClick={onFormSubmit}>Login</Button>
+                <input id="inputUsername" autoFocus className={classes.textField} value={username} onChange={(event) => setUsername(event.target.value)}/>    
+            </div>
+            <div className="form-input">
+                <label htmlFor="inputPassword">Password</label>
+                <input id="inputPassword" className={classes.textField} value={password} type="password" onChange={(event) => setPassword(event.target.value)}/>
+            </div>
+            <Button className={classes.button + " form-button"} variant="contained" fullWidth onClick={onFormSubmit}>Log in</Button>
+            
     </div>;
 };
 

ui/src/components/SettingsModal/SettingModal.tsx

@@ -131,7 +131,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
                     </div> : <>
                         <div className="namespacesSettingsContainer">
                             <div style={{margin: "10px 0"}}>
-                                <input className="searchNamespace" placeholder="Search" value={searchValue}
+                                <input className={classes.textField + " searchNamespace"} placeholder="Search" value={searchValue}
                                        onChange={(event) => setSearchValue(event.target.value)}/></div>
                             <div className="namespacesTable">
                                 {buildNamespacesTable()}

ui/src/components/SettingsModal/SettingsModal.sass

@@ -16,15 +16,8 @@
   padding: 20px 0
 
   .searchNamespace
-    outline: 0
-    background: white
-    border-radius: 4px
     width: 300px
     max-width: calc(40vw - 85px)
-    padding: 8px 10px
-    border: 1px #9D9D9D solid
-    font-size: 14px
-    color: #494677
 
 .settingsActionsContainer
   display: flex

ui/src/components/assets/MizuEntLogoFull.svg

@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="260"
+   height="146"
+   viewBox="0 0 260 146"
+   fill="none"
+   version="1.1"
+   id="svg60"
+   sodipodi:docname="MizuEntLogoFull.svg"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+  <metadata
+     id="metadata66">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs64" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2488"
+     inkscape:window-height="1376"
+     id="namedview62"
+     showgrid="false"
+     inkscape:zoom="3.7748624"
+     inkscape:cx="67.688372"
+     inkscape:cy="33.709918"
+     inkscape:window-x="72"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg60" />
+  <path
+     d="M50.5684 89.1243H36.3639L26.9321 66.0935C26.7048 65.4538 26.2503 64.2943 25.5685 62.6149C24.9624 60.8556 24.2427 58.8964 23.4094 56.7373C22.6518 54.4982 21.8563 52.2191 21.023 49.9C20.1897 47.581 19.4321 45.4618 18.7503 43.5426C18.7503 51.3373 18.6475 46.7868 18.4094 54.5782C18.4094 59.0173 14.8865 62.6149 10.6811 62.6149H10.2362C5.56284 62.6149 1.86923 58.4328 2.19637 53.5119L4.59996 17.3574C4.95347 12.0399 9.14316 7.91683 14.1931 7.91683H14.5754C18.6754 7.91683 22.3624 10.5518 23.8851 14.5701L39.0912 54.6981C39.6215 56.1375 40.3033 58.1767 41.1366 60.8157C42.0457 63.3746 42.9169 66.1735 43.7503 69.2123C44.5836 66.2535 45.4169 63.4946 46.2503 60.9356C47.1594 58.2967 47.9169 56.2175 48.523 54.6981L63.7981 14.3878C65.2791 10.4796 68.8651 7.91683 72.8528 7.91683C78.0153 7.91683 82.2834 12.1638 82.5879 17.6038L86.5911 89.1243H68.9775L68.2957 72.8109C68.2199 71.2915 68.1442 69.2923 68.0684 66.8133C68.0684 64.3343 68.0684 61.7353 68.0684 59.0164C68.0684 56.2175 68.0684 53.4586 68.0684 50.7397C68.1442 47.9408 68.1821 45.5418 68.1821 43.5426C67.576 45.2219 66.8942 47.1411 66.1366 49.3003C65.4548 51.3794 64.7351 53.4186 63.9775 55.4178C63.2199 57.417 62.5002 59.2963 61.8184 61.0556C61.1366 62.7349 60.6063 64.0544 60.2275 65.014L50.5684 89.1243Z"
+     fill="#205CF5"
+     id="path2" />
+  <path
+     d="M101.591 86.6053C98.6363 83.4863 97.7834 80.3678 97.7834 76.0496V38.3846C97.7834 33.1511 101.803 28.9084 106.761 28.9084C111.719 28.9084 115.738 33.1511 115.738 38.3846V70.6517C115.738 72.491 116.003 73.7305 116.533 74.3702C117.064 75.01 117.859 75.3299 118.92 75.3299C119.526 75.3299 130.19 75.2899 130.796 75.2099C131.402 75.05 130.53 75.2899 130.682 75.2099L123.465 86.7253C123.389 86.8053 123.049 87.0052 122.442 87.3251C121.836 87.565 121.041 87.8848 120.056 88.2847C115.341 87.445 111.705 88.5246 107.666 89.143C104.091 89.1243 102.955 88.0448 101.591 86.6053ZM106.988 0C110.17 0 112.594 0.999599 114.261 2.9988C115.927 4.998 116.761 7.51699 116.761 10.5558C116.761 13.6745 115.889 16.2735 114.147 18.3527C112.48 20.4318 109.942 21.4714 106.533 21.4714C103.352 21.4714 100.889 20.4718 99.147 18.4726C97.4804 16.3934 96.647 13.9544 96.647 11.1555C96.647 7.95681 97.5183 5.31787 99.2607 3.23871C101.003 1.07957 103.579 0 106.988 0Z"
+     fill="#205CF5"
+     id="path4" />
+  <path
+     d="M126.778 89.1243V78.5686L148.369 43.0628C146.93 43.1427 145.566 43.2227 144.278 43.3027C142.991 43.3027 141.703 43.3027 140.415 43.3027H135.512C132.304 43.3027 129.562 40.8646 129.017 37.5275C128.322 33.2754 131.424 29.3882 135.512 29.3882H160.826C165.557 29.3882 169.392 33.4365 169.392 38.4303C169.392 40.125 168.941 41.7856 168.09 43.2226L148.938 75.5698C149.922 75.4898 150.869 75.4498 151.778 75.4498C152.763 75.3698 153.786 75.3299 154.847 75.3299H194.088V89.1243H126.778Z"
+     fill="#205CF5"
+     id="path6" />
+  <path
+     d="M207.269 38.3846C207.269 33.1511 211.289 28.9084 216.247 28.9084C221.205 28.9084 225.224 33.1511 225.224 38.3846V60.2159C225.224 65.014 223.75 86.1255 237.273 86.3654C237.879 89.5641 226.099 85.8856 226.932 87.8049C227.841 90.1239 223.065 86.3654 226.133 89.1243L237.273 98.3606C221.591 98.3606 215.678 88.4446 214.997 87.3251C214.391 86.4454 213.784 85.3259 213.178 83.9664C212.572 82.527 212.424 82.6869 212.046 80.8476C210.076 84.6061 208.977 85.8731 205.227 87.8049C202.666 89.1243 198.103 89.1243 194.088 89.1243C191.133 89.1243 185.909 89.1243 184.091 89.1243C182.046 88.0847 181.019 85.9656 179.656 84.2063C178.368 82.367 177.421 80.1679 176.815 77.6089C176.284 75.05 176.019 72.1711 176.019 68.9724V38.4446C176.019 33.1779 180.064 28.9084 185.053 28.9084C190.043 28.9084 194.088 33.1779 194.088 38.4446V66.4534C194.088 69.2523 194.391 71.5314 194.997 73.2907C195.678 74.97 196.891 75.8097 198.633 75.8097C200.754 75.8097 203.409 74.8101 205.227 71.8512C207.046 68.8125 207.269 64.1743 207.269 58.8964V38.3846Z"
+     fill="#205CF5"
+     id="path8" />
+  <path
+     d="M107.5 78.5686H129.091V89.1243H107.5V78.5686Z"
+     fill="#205CF5"
+     id="path10" />
+  <path
+     d="M15.9222 72.5261C14.4156 70.7167 12.2242 69.8121 9.34795 69.8121C6.26629 69.8121 3.93792 70.7891 2.36285 72.7432C0.78778 74.6249 0.000244141 77.0132 0.000244141 79.9081C0.000244141 82.4412 0.753539 84.6486 2.26013 86.5303C3.8352 88.3396 6.06085 89.2443 8.93706 89.2443C12.0187 89.2443 14.3129 88.3034 15.8194 86.4217C17.3945 84.54 18.182 82.1879 18.182 79.3653C18.182 76.6152 17.4288 74.3354 15.9222 72.5261Z"
+     fill="#205CF5"
+     id="path12" />
+  <path
+     fill-rule="evenodd"
+     clip-rule="evenodd"
+     d="M218.864 65.014C222.002 65.014 224.546 67.6992 224.546 71.0116C224.546 80.259 230.619 86.3654 236.591 86.3654C242.562 86.3654 248.636 80.259 248.636 71.0116C248.636 67.6992 251.18 65.014 254.318 65.014C257.456 65.014 260 67.6992 260 71.0116C260 85.3483 250.2 98.3606 236.591 98.3606C222.982 98.3606 213.182 85.3483 213.182 71.0116C213.182 67.6992 215.726 65.014 218.864 65.014Z"
+     fill="#205CF5"
+     id="path14" />
+  <path
+     d="m 45.292,121.295 c 0.065,0.037 0.119,0.09 0.157,0.154 0.037,0.064 0.057,0.137 0.056,0.211 0,0.074 -0.02,0.147 -0.058,0.211 -0.039,0.064 -0.093,0.116 -0.159,0.152 l -1.898,1.063 -0.014,-0.009 -2.95,1.689 c -0.129,0.074 -0.276,0.112 -0.425,0.112 -0.149,0 -0.295,-0.038 -0.424,-0.112 l -3.815,-2.179 c -0.515,-0.294 -0.942,-0.717 -1.24,-1.225 -0.297,-0.509 -0.453,-1.086 -0.453,-1.674 V 107.13 c 10e-4,-0.593 0.16,-1.174 0.462,-1.686 0.303,-0.511 0.737,-0.934 1.259,-1.225 l 0.191,-0.107 c 0.098,-0.055 0.214,-0.069 0.322,-0.039 0.109,0.029 0.201,0.1 0.257,0.197 0.036,0.063 0.055,0.134 0.054,0.206 v 15.485 c 0,0.073 0.019,0.146 0.056,0.21 0.037,0.064 0.091,0.117 0.155,0.154 l 2.12,1.221 c 0.064,0.037 0.137,0.056 0.211,0.056 0.075,0 0.148,-0.019 0.212,-0.056 l 0.027,-0.015 c 0.065,-0.037 0.118,-0.09 0.156,-0.153 0.037,-0.064 0.057,-0.136 0.057,-0.21 0,-0.073 -0.02,-0.146 -0.057,-0.209 -0.038,-0.064 -0.091,-0.117 -0.156,-0.154 l -1.725,-0.984 c -0.065,-0.037 -0.118,-0.09 -0.155,-0.154 -0.037,-0.064 -0.057,-0.137 -0.056,-0.21 v -15.714 c 0,-0.148 0.039,-0.294 0.115,-0.422 0.076,-0.128 0.184,-0.234 0.315,-0.306 l 1.48,-0.829 c 0.098,-0.054 0.214,-0.068 0.322,-0.039 0.109,0.03 0.201,0.101 0.257,0.197 0.036,0.063 0.055,0.133 0.054,0.205 v 15.485 c 0,0.074 0.019,0.146 0.056,0.21 0.038,0.064 0.091,0.117 0.156,0.154 z"
+     id="path38"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e1" />
+  <path
+     d="m 44.037,116.722 c -0.097,-0.056 -0.169,-0.147 -0.198,-0.254 -0.03,-0.107 -0.015,-0.222 0.04,-0.318 0.038,-0.066 0.093,-0.12 0.16,-0.158 l 4.227,-2.452 c 0.064,-0.037 0.117,-0.091 0.154,-0.155 0.036,-0.064 0.055,-0.136 0.055,-0.209 V 98.425 c 0,-0.11 -0.022,-0.219 -0.064,-0.321 -0.043,-0.102 -0.105,-0.194 -0.184,-0.272 -0.079,-0.078 -0.172,-0.14 -0.275,-0.182 -0.103,-0.042 -0.214,-0.064 -0.325,-0.064 -0.15,0 -0.298,0.039 -0.427,0.115 l -3.811,2.202 -2.112,1.184 c -0.13,0.073 -0.239,0.179 -0.314,0.307 -0.076,0.128 -0.116,0.273 -0.116,0.421 v 15.767 c 0,0.074 0.019,0.146 0.056,0.21 0.037,0.064 0.091,0.118 0.155,0.155 l 5.289,3.032 c 0.131,0.074 0.279,0.113 0.431,0.112 0.151,-10e-4 0.299,-0.042 0.429,-0.119 l 1.494,-0.888 c 0.063,-0.038 0.116,-0.091 0.152,-0.155 0.036,-0.064 0.054,-0.136 0.053,-0.209 0,-0.073 -0.02,-0.145 -0.058,-0.208 -0.037,-0.063 -0.09,-0.116 -0.154,-0.152 z m -0.442,-14.005 1.696,-1.008 c 0.065,-0.038 0.138,-0.059 0.213,-0.059 0.075,-0.001 0.149,0.018 0.214,0.054 0.066,0.037 0.12,0.09 0.157,0.154 0.038,0.064 0.058,0.137 0.057,0.211 v 9.676 c 0,0.074 -0.02,0.147 -0.057,0.211 -0.038,0.064 -0.092,0.117 -0.157,0.153 l -1.696,0.955 c -0.065,0.037 -0.138,0.056 -0.212,0.055 -0.074,0 -0.147,-0.02 -0.211,-0.057 -0.064,-0.037 -0.117,-0.089 -0.154,-0.153 -0.037,-0.064 -0.057,-0.136 -0.057,-0.209 v -9.622 c 0.001,-0.073 0.02,-0.144 0.056,-0.207 0.036,-0.063 0.088,-0.116 0.151,-0.154 z"
+     id="path40"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e1" />
+  <path
+     d="m 49.323,98.919 v 14.721 c 0,0.074 -0.019,0.147 -0.056,0.211 -0.038,0.064 -0.091,0.117 -0.156,0.154 l -3.393,1.943 c -0.064,0.037 -0.118,0.09 -0.155,0.153 -0.037,0.064 -0.056,0.136 -0.056,0.209 0,0.073 0.019,0.145 0.056,0.209 0.037,0.064 0.091,0.116 0.155,0.153 l 4.664,2.667 c 0.064,0.037 0.117,0.09 0.154,0.153 0.038,0.064 0.057,0.136 0.057,0.21 0,0.073 -0.019,0.145 -0.057,0.209 -0.037,0.063 -0.09,0.116 -0.154,0.153 l -8.899,5.093 c -0.065,0.036 -0.12,0.089 -0.157,0.153 -0.038,0.064 -0.058,0.137 -0.058,0.211 0,0.074 0.02,0.147 0.058,0.211 0.037,0.064 0.092,0.117 0.157,0.153 l 5.303,2.999 c 0.513,0.291 1.094,0.443 1.685,0.443 0.591,0 1.172,-0.152 1.685,-0.443 l 11.448,-6.49 c 0.388,-0.22 0.71,-0.537 0.934,-0.92 0.225,-0.383 0.343,-0.817 0.343,-1.259 v -13.068 c 0,-0.588 -0.157,-1.165 -0.454,-1.674 -0.297,-0.509 -0.725,-0.932 -1.24,-1.226 L 50.594,98.194 c -0.129,-0.074 -0.275,-0.113 -0.424,-0.113 -0.149,0 -0.295,0.039 -0.424,0.112 -0.129,0.074 -0.236,0.179 -0.31,0.307 -0.074,0.127 -0.113,0.272 -0.113,0.419 z m 10.38,18.031 -7.416,-4.251 c -0.128,-0.073 -0.235,-0.179 -0.309,-0.306 -0.074,-0.127 -0.113,-0.272 -0.113,-0.418 v -5.573 c 0,-0.074 0.019,-0.147 0.056,-0.21 0.038,-0.064 0.091,-0.117 0.156,-0.154 0.064,-0.037 0.137,-0.057 0.212,-0.057 0.074,0 0.148,0.019 0.212,0.056 l 6.15,3.522 c 0.513,0.295 0.94,0.717 1.236,1.226 0.296,0.508 0.452,1.085 0.452,1.671 v 4.129 c 0.001,0.055 -0.01,0.11 -0.031,0.161 -0.022,0.051 -0.053,0.097 -0.092,0.136 -0.039,0.039 -0.086,0.07 -0.137,0.091 -0.052,0.021 -0.107,0.032 -0.162,0.032 -0.075,0 -0.149,-0.019 -0.214,-0.057 z"
+     id="path42"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e1" />
+  <path
+     d="m 45.289,122.031 -1.899,1.065 -0.014,-0.008 -2.95,1.695 c -0.129,0.074 -0.275,0.113 -0.425,0.113 -0.149,0 -0.296,-0.039 -0.425,-0.113 l -3.815,-2.186 c -0.51,-0.294 -0.934,-0.714 -1.229,-1.22 l 2.133,-1.22 c 0.037,0.068 0.092,0.125 0.159,0.164 l 2.12,1.226 c 0.064,0.036 0.137,0.056 0.212,0.056 0.074,0 0.147,-0.02 0.211,-0.056 l 0.027,-0.016 c 0.065,-0.036 0.119,-0.089 0.157,-0.153 0.037,-0.064 0.057,-0.137 0.057,-0.211 0,-0.074 -0.02,-0.146 -0.057,-0.21 -0.038,-0.064 -0.092,-0.117 -0.157,-0.154 l -1.724,-0.988 c -0.063,-0.037 -0.116,-0.088 -0.152,-0.151 l 2.53,-1.446 c 0.037,0.071 0.094,0.13 0.164,0.17 l 5.08,2.912 c 0.065,0.036 0.119,0.089 0.157,0.153 0.037,0.064 0.057,0.137 0.057,0.211 0,0.074 -0.02,0.146 -0.057,0.21 -0.038,0.064 -0.092,0.117 -0.157,0.154 z"
+     id="path44"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e1" />
+  <path
+     d="m 62.551,121.433 c -0.223,0.393 -0.551,0.72 -0.947,0.944 l -11.445,6.503 c -0.512,0.29 -1.093,0.443 -1.685,0.443 -0.591,0 -1.172,-0.153 -1.684,-0.443 l -5.303,-3.006 c -0.065,-0.037 -0.118,-0.09 -0.156,-0.154 -0.037,-0.064 -0.057,-0.137 -0.057,-0.211 0,-0.073 0.02,-0.146 0.057,-0.21 0.038,-0.064 0.091,-0.117 0.156,-0.154 l 6.991,-4.011 1.908,-1.093 c 0.065,-0.036 0.119,-0.089 0.157,-0.153 0.037,-0.064 0.057,-0.137 0.057,-0.211 0,-0.074 -0.02,-0.147 -0.057,-0.211 -0.038,-0.064 -0.092,-0.117 -0.157,-0.153 l -1.908,-1.093 -2.757,-1.579 c -0.065,-0.037 -0.119,-0.09 -0.157,-0.154 -0.037,-0.064 -0.057,-0.137 -0.057,-0.211 0,-0.074 0.02,-0.146 0.057,-0.21 0.038,-0.064 0.092,-0.117 0.157,-0.154 l 2.757,-1.584 0.637,-0.365 c 0.058,-0.033 0.107,-0.08 0.143,-0.137 z"
+     id="path46"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e1" />
+  <path
+     d="m 48.701,120.034 -0.227,0.134 -1.267,0.754 c -0.129,0.077 -0.277,0.118 -0.429,0.119 -0.151,0.001 -0.3,-0.037 -0.431,-0.112 l -5.285,-3.031 C 41.03,117.879 41,117.856 40.973,117.83 c -0.025,-0.025 -0.047,-0.054 -0.065,-0.085 l 1.163,-0.668 1.919,-1.098 c -0.014,0.011 -0.028,0.023 -0.04,0.036 -0.013,0.012 -0.025,0.025 -0.035,0.039 -0.002,0.002 -0.004,0.005 -0.005,0.008 -0.009,0.011 -0.017,0.023 -0.024,0.035 -0.003,0.005 -0.006,0.01 -0.008,0.016 -0.005,0.008 -0.009,0.017 -0.012,0.024 -0.004,0.008 -0.008,0.017 -0.01,0.025 -0.004,0.01 -0.007,0.019 -0.01,0.029 -0.002,0.005 -0.004,0.01 -0.004,0.015 -0.003,0.013 -0.006,0.025 -0.007,0.038 -0.013,0.084 0,0.169 0.037,0.245 0.037,0.076 0.096,0.139 0.17,0.18 l 4.438,2.513 0.218,0.121 c 0.098,0.055 0.169,0.146 0.199,0.253 0.03,0.108 0.015,0.222 -0.041,0.318 -0.036,0.066 -0.09,0.121 -0.155,0.16 z"
+     id="path48"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e1" />
+  <path
+     d="m 73.728,105.767 v 15.648 c 0,0.055 -0.011,0.11 -0.032,0.161 -0.022,0.05 -0.053,0.096 -0.092,0.135 -0.039,0.039 -0.086,0.07 -0.137,0.091 -0.052,0.021 -0.107,0.032 -0.162,0.032 h -5.14 c -0.735,10e-4 -1.441,-0.286 -1.963,-0.798 -0.251,-0.249 -0.451,-0.543 -0.59,-0.866 -0.147,-0.341 -0.22,-0.709 -0.216,-1.08 v -13.323 c 0,-0.055 0.011,-0.109 0.032,-0.16 0.021,-0.051 0.052,-0.097 0.091,-0.136 0.04,-0.039 0.086,-0.07 0.138,-0.091 0.051,-0.021 0.106,-0.032 0.162,-0.032 h 1.923 c 0.056,0 0.111,0.011 0.162,0.032 0.052,0.021 0.098,0.052 0.138,0.091 0.039,0.039 0.07,0.085 0.091,0.136 0.021,0.051 0.032,0.105 0.032,0.16 v 12.904 c 0,0.055 0.011,0.109 0.032,0.16 0.021,0.051 0.052,0.097 0.092,0.136 0.039,0.039 0.086,0.069 0.137,0.091 0.051,0.021 0.106,0.032 0.162,0.032 h 1.925 c 0.055,0 0.11,-0.011 0.162,-0.032 0.051,-0.022 0.098,-0.052 0.137,-0.091 0.039,-0.039 0.07,-0.085 0.092,-0.136 0.021,-0.051 0.032,-0.105 0.032,-0.16 v -12.904 c 0,-0.055 0.01,-0.109 0.032,-0.16 0.021,-0.051 0.052,-0.097 0.091,-0.136 0.039,-0.039 0.086,-0.07 0.137,-0.091 0.052,-0.021 0.107,-0.032 0.162,-0.032 h 1.947 c 0.055,0 0.11,0.011 0.162,0.032 0.051,0.021 0.098,0.052 0.137,0.091 0.039,0.039 0.07,0.085 0.092,0.136 0.021,0.051 0.032,0.105 0.032,0.16 z"
+     id="path50"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e1" />
+  <path
+     d="m 83.421,108.087 v 4.116 c 0.004,0.371 -0.07,0.738 -0.216,1.08 -0.142,0.327 -0.346,0.625 -0.601,0.877 -0.257,0.254 -0.561,0.457 -0.897,0.596 -0.341,0.142 -0.708,0.215 -1.078,0.214 h -2.348 c -0.055,0 -0.11,0.011 -0.162,0.032 -0.051,0.021 -0.098,0.052 -0.137,0.091 -0.039,0.039 -0.07,0.085 -0.091,0.136 -0.022,0.05 -0.032,0.105 -0.032,0.16 v 6.022 c 0,0.055 -0.011,0.11 -0.032,0.16 -0.022,0.051 -0.053,0.097 -0.092,0.136 -0.039,0.039 -0.086,0.07 -0.137,0.091 -0.052,0.021 -0.107,0.032 -0.162,0.032 h -1.924 c -0.055,0 -0.11,-0.011 -0.162,-0.032 -0.051,-0.021 -0.098,-0.052 -0.137,-0.091 -0.039,-0.039 -0.07,-0.085 -0.092,-0.136 -0.021,-0.05 -0.032,-0.105 -0.032,-0.16 v -15.648 c 0,-0.055 0.011,-0.11 0.032,-0.16 0.022,-0.051 0.053,-0.097 0.092,-0.136 0.039,-0.039 0.086,-0.07 0.137,-0.091 0.052,-0.021 0.107,-0.032 0.162,-0.032 h 5.117 c 0.37,-0.002 0.737,0.071 1.078,0.214 0.333,0.137 0.638,0.336 0.897,0.584 0.259,0.249 0.463,0.548 0.601,0.877 0.144,0.338 0.218,0.702 0.216,1.068 z m -2.792,3.698 v -3.279 c 0,-0.055 -0.011,-0.11 -0.032,-0.161 -0.021,-0.05 -0.052,-0.096 -0.092,-0.135 -0.039,-0.039 -0.085,-0.07 -0.137,-0.091 -0.051,-0.021 -0.106,-0.032 -0.162,-0.032 h -1.925 c -0.055,0 -0.11,0.011 -0.162,0.032 -0.051,0.021 -0.098,0.052 -0.137,0.091 -0.039,0.039 -0.07,0.085 -0.091,0.135 -0.022,0.051 -0.032,0.106 -0.032,0.161 v 3.279 c 0,0.055 0.01,0.109 0.032,0.16 0.021,0.051 0.052,0.097 0.091,0.136 0.039,0.039 0.086,0.07 0.137,0.091 0.052,0.021 0.107,0.032 0.162,0.032 h 1.925 c 0.112,0 0.22,-0.044 0.299,-0.123 0.079,-0.078 0.124,-0.184 0.124,-0.294 z"
+     id="path52"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e1" />
+  <path
+     d="m 92.91,108.088 v 10.998 c 0.002,0.367 -0.071,0.73 -0.215,1.068 -0.139,0.33 -0.343,0.628 -0.601,0.877 -0.26,0.249 -0.564,0.447 -0.898,0.585 -0.341,0.142 -0.707,0.215 -1.078,0.214 h -2.77 c -0.364,0 -0.725,-0.071 -1.062,-0.208 -0.337,-0.138 -0.643,-0.34 -0.9,-0.595 -0.257,-0.255 -0.461,-0.558 -0.6,-0.891 -0.138,-0.333 -0.209,-0.69 -0.207,-1.05 v -1.652 c 0,-0.055 0.011,-0.109 0.032,-0.16 0.021,-0.051 0.052,-0.097 0.091,-0.136 0.04,-0.039 0.086,-0.069 0.138,-0.091 0.051,-0.021 0.106,-0.032 0.162,-0.032 h 1.923 c 0.056,0 0.111,0.011 0.162,0.032 0.052,0.022 0.098,0.052 0.137,0.091 0.04,0.039 0.071,0.085 0.092,0.136 0.021,0.051 0.032,0.105 0.032,0.16 v 1.232 c 0,0.055 0.011,0.109 0.032,0.16 0.021,0.051 0.052,0.097 0.092,0.136 0.039,0.039 0.085,0.07 0.137,0.091 0.051,0.021 0.106,0.032 0.162,0.032 h 1.925 c 0.055,0 0.11,-0.011 0.162,-0.032 0.051,-0.021 0.098,-0.052 0.137,-0.091 0.039,-0.039 0.07,-0.085 0.091,-0.136 0.022,-0.051 0.033,-0.105 0.032,-0.16 v -3.279 c 0.001,-0.055 -0.01,-0.11 -0.032,-0.16 -0.021,-0.051 -0.052,-0.097 -0.091,-0.136 -0.039,-0.039 -0.086,-0.07 -0.137,-0.091 -0.052,-0.021 -0.107,-0.032 -0.162,-0.032 h -2.348 c -0.37,10e-4 -0.737,-0.071 -1.078,-0.214 -0.333,-0.137 -0.635,-0.34 -0.886,-0.596 -0.249,-0.255 -0.449,-0.552 -0.59,-0.877 -0.146,-0.342 -0.219,-0.709 -0.215,-1.08 v -4.116 c -0.002,-0.36 0.069,-0.717 0.207,-1.05 0.139,-0.333 0.343,-0.635 0.6,-0.89 0.257,-0.255 0.563,-0.457 0.9,-0.595 0.337,-0.138 0.698,-0.209 1.062,-0.208 h 2.77 c 0.371,-0.002 0.737,0.071 1.078,0.214 0.334,0.137 0.638,0.336 0.898,0.584 0.258,0.249 0.462,0.548 0.601,0.877 0.144,0.339 0.217,0.703 0.215,1.071 z m -2.792,3.697 v -3.279 c 0.001,-0.055 -0.01,-0.109 -0.032,-0.16 -0.021,-0.051 -0.052,-0.097 -0.091,-0.136 -0.039,-0.039 -0.086,-0.07 -0.137,-0.091 -0.052,-0.021 -0.107,-0.032 -0.162,-0.032 h -1.925 c -0.056,0 -0.111,0.011 -0.162,0.032 -0.052,0.021 -0.098,0.052 -0.137,0.091 -0.04,0.039 -0.071,0.085 -0.092,0.136 -0.021,0.051 -0.032,0.105 -0.032,0.16 v 3.279 c 0,0.055 0.011,0.11 0.032,0.16 0.021,0.051 0.052,0.097 0.092,0.136 0.039,0.039 0.085,0.07 0.137,0.091 0.051,0.021 0.106,0.032 0.162,0.032 h 1.925 c 0.112,0 0.219,-0.044 0.298,-0.122 0.079,-0.078 0.124,-0.184 0.124,-0.295 z"
+     id="path54"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e1" />
+  <path
+     d="m 2.375,119.861 v -15.332 h 2.88 v 5.522 c 0.888,-1.032 1.94,-1.548 3.156,-1.548 1.326,0 2.422,0.492 3.29,1.475 0.868,0.976 1.302,2.381 1.302,4.215 0,1.896 -0.445,3.357 -1.333,4.381 -0.881,1.025 -1.954,1.538 -3.218,1.538 -0.622,0 -1.237,-0.157 -1.845,-0.471 -0.601,-0.321 -1.12,-0.791 -1.557,-1.412 v 1.632 z m 2.859,-5.794 c 0,1.15 0.178,2.001 0.533,2.552 0.499,0.781 1.162,1.171 1.988,1.171 0.636,0 1.175,-0.275 1.62,-0.826 0.45,-0.558 0.676,-1.433 0.676,-2.625 0,-1.269 -0.226,-2.182 -0.676,-2.74 -0.451,-0.565 -1.029,-0.847 -1.732,-0.847 -0.691,0 -1.264,0.275 -1.722,0.826 -0.458,0.544 -0.687,1.373 -0.687,2.489 z"
+     id="path56"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e0" />
+  <path
+     d="m 13.966,108.754 h 3.064 l 2.603,7.886 2.542,-7.886 h 2.982 l -3.843,10.688 -0.687,1.935 c -0.252,0.649 -0.495,1.144 -0.727,1.485 -0.226,0.342 -0.489,0.617 -0.789,0.826 -0.294,0.217 -0.66,0.384 -1.097,0.502 -0.43,0.119 -0.919,0.178 -1.465,0.178 -0.554,0 -1.097,-0.059 -1.63,-0.178 l -0.256,-2.3 c 0.451,0.09 0.857,0.136 1.219,0.136 0.67,0 1.165,-0.203 1.486,-0.607 0.322,-0.397 0.567,-0.906 0.738,-1.527 z"
+     id="path58"
+     inkscape:connector-curvature="0"
+     style="fill:#b1c0e0" />
+</svg>

ui/src/components/style/AuthBasePage.sass

@@ -0,0 +1,53 @@
+@import "../../variables.module"
+   
+.authContainer
+    height: 100vh
+    width: 100vw
+    background-size: cover
+    float: left
+
+    .authHeader
+        margin: 80px 0 120px 0
+        width: 100%
+        display: flex
+        align-items: center
+        justify-content: center
+
+.centeredForm
+    background-color: $main-background-color
+    border-radius: 5px
+    box-shadow: 0 0 20px -4px $light-blue-color
+
+    padding: 35px
+    max-width: 350px
+    text-align: center
+    display: flex
+    flex-direction: column
+    margin: 0 auto
+
+.form-button
+    margin-top: 25px !important
+    padding: 14px 0 !important
+    .MuiButton-label
+        text-transform: none !important
+
+.form-input
+    margin-top: 20px !important
+    input
+        width: 100%
+        box-sizing: border-box
+    label
+        float: left
+        font-size: 12px
+        opacity: 0.7
+        margin-bottom: 4px
+
+.form-title
+    font-size: 28px
+    color: $blue-gray
+    font-weight: 600
+    text-align: left
+
+.form-subtitle
+    text-align: left
+    margin: 4% 0

ui/src/helpers/commonStyle.ts

@@ -26,5 +26,14 @@ export const useCommonStyles = makeStyles(() => ({
         "&:hover": {
             backgroundColor: "transparent",
         },
-    }
+    },
+    textField: {
+        outline: 0,
+        background: "white",
+        borderRadius: "4px",
+        padding: "8px 10px",
+        border: "1px #9D9D9D solid",
+        fontSize: "14px",
+        color: "#494677"
+    },
 }));