diff --git a/ui/src/App.sass b/ui/src/App.sass index 44fe3e268..da361d973 100644 --- a/ui/src/App.sass +++ b/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 diff --git a/ui/src/EntApp.tsx b/ui/src/EntApp.tsx index 1103367cb..452b8013d 100644 --- a/ui/src/EntApp.tsx +++ b/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 = ; break; case Page.Setup: - pageComponent = setIsFirstLogin(true)}/>; + pageComponent = setIsFirstLogin(true)}/>; break; case Page.Login: - pageComponent = ; + pageComponent = ; break; default: pageComponent =
Unknown Error
; diff --git a/ui/src/components/AuthPageBase.tsx b/ui/src/components/AuthPageBase.tsx new file mode 100644 index 000000000..e98c014e7 --- /dev/null +++ b/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
+
+ +
+ {children} +
; +}; + +export default AuthPageBase; diff --git a/ui/src/components/InstallPage.tsx b/ui/src/components/InstallPage.tsx index 65840b96e..69241da98 100644 --- a/ui/src/components/InstallPage.tsx +++ b/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 = ({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 = ({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 = ({onFirstLogin}) => { return
{isLoading && } -

Welcome to Mizu, please set up the admin user to continue

- - setPassword(e.target.value)}/> - setPasswordConfirm(e.target.value)}/> - +
Setup
+ Welcome to Mizu, please set up the admin user to continue +
+ + +
+
+ + setPassword(event.target.value)}/> +
+
+ + setPasswordConfirm(event.target.value)}/> +
+
; }; diff --git a/ui/src/components/LoginPage.tsx b/ui/src/components/LoginPage.tsx index ae741d23c..02b37058a 100644 --- a/ui/src/components/LoginPage.tsx +++ b/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) => { + if (e.key === "Enter") { + onFormSubmit(); + } + }; - return
+ + return
{isLoading && } -

Welcome to Mizu, please login to continue

- setUsername(e.target.value)} /> - setPassword(e.target.value)} /> - +
Login
+
+ + setUsername(event.target.value)}/> +
+
+ + setPassword(event.target.value)}/> +
+ +
; }; diff --git a/ui/src/components/SettingsModal/SettingModal.tsx b/ui/src/components/SettingsModal/SettingModal.tsx index cec95f88c..504342a8d 100644 --- a/ui/src/components/SettingsModal/SettingModal.tsx +++ b/ui/src/components/SettingsModal/SettingModal.tsx @@ -131,7 +131,7 @@ export const SettingsModal: React.FC = ({isOpen, onClose, is
: <>
- setSearchValue(event.target.value)}/>
{buildNamespacesTable()} diff --git a/ui/src/components/SettingsModal/SettingsModal.sass b/ui/src/components/SettingsModal/SettingsModal.sass index 4455ce623..863262638 100644 --- a/ui/src/components/SettingsModal/SettingsModal.sass +++ b/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 diff --git a/ui/src/components/assets/MizuEntLogoFull.svg b/ui/src/components/assets/MizuEntLogoFull.svg new file mode 100644 index 000000000..49011a712 --- /dev/null +++ b/ui/src/components/assets/MizuEntLogoFull.svg @@ -0,0 +1,136 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/components/assets/authBackground.png b/ui/src/components/assets/authBackground.png new file mode 100644 index 000000000..f67800313 Binary files /dev/null and b/ui/src/components/assets/authBackground.png differ diff --git a/ui/src/components/style/AuthBasePage.sass b/ui/src/components/style/AuthBasePage.sass new file mode 100644 index 000000000..82d33ba40 --- /dev/null +++ b/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 diff --git a/ui/src/helpers/commonStyle.ts b/ui/src/helpers/commonStyle.ts index cae681d5a..8c4e2e34e 100644 --- a/ui/src/helpers/commonStyle.ts +++ b/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" + }, }));