diff options
5 files changed, 20 insertions, 13 deletions
diff --git a/Timeline/ClientApp/src/app/index.sass b/Timeline/ClientApp/src/app/index.sass index 92f8efaf..42a89da5 100644 --- a/Timeline/ClientApp/src/app/index.sass +++ b/Timeline/ClientApp/src/app/index.sass @@ -4,6 +4,7 @@ @import './views/common/alert/alert' @import './views/home/home' @import './views/about/about' +@import './views/login/login' @import './views/timeline-common/timeline-common' @import './views/timeline/timeline' @import './views/user/user' diff --git a/Timeline/ClientApp/src/app/views/login/index.tsx b/Timeline/ClientApp/src/app/views/login/index.tsx index a3071264..265c2172 100644 --- a/Timeline/ClientApp/src/app/views/login/index.tsx +++ b/Timeline/ClientApp/src/app/views/login/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import { useHistory } from "react-router"; import { useTranslation } from "react-i18next"; -import { Form } from "react-bootstrap"; +import { Container, Form } from "react-bootstrap"; import { useUser, userService } from "@/services/user"; @@ -39,7 +39,7 @@ const LoginPage: React.FC = (_) => { ); } - function onSubmit(event: React.SyntheticEvent): void { + const submit = (): void => { if (username === "" || password === "") { setUsernameDirty(true); setPasswordDirty(true); @@ -68,12 +68,17 @@ const LoginPage: React.FC = (_) => { setError(e.message); } ); - event.preventDefault(); - } + }; + + const onEnterPressInPassword: React.KeyboardEventHandler = (e) => { + if (e.key === "Enter") { + submit(); + } + }; return ( - <div className="container login-container mt-appbar"> - <h1>{t("welcome")}</h1> + <Container fluid className="login-container mt-2"> + <h1 className="text-center">{t("welcome")}</h1> <Form> <Form.Group> <Form.Label htmlFor="username">{t("user.username")}</Form.Label> @@ -104,6 +109,7 @@ const LoginPage: React.FC = (_) => { setPasswordDirty(true); }} value={password} + onKeyDown={onEnterPressInPassword} isInvalid={passwordDirty && password === ""} /> {passwordDirty && password === "" && ( @@ -128,14 +134,17 @@ const LoginPage: React.FC = (_) => { <LoadingButton loading={process} variant="primary" - onClick={onSubmit} + onClick={(e) => { + submit(); + e.preventDefault(); + }} disabled={username === "" || password === "" ? true : undefined} > {t("user.login")} </LoadingButton> </div> </Form> - </div> + </Container> ); }; diff --git a/Timeline/ClientApp/src/app/views/login/login.sass b/Timeline/ClientApp/src/app/views/login/login.sass new file mode 100644 index 00000000..0bf385f5 --- /dev/null +++ b/Timeline/ClientApp/src/app/views/login/login.sass @@ -0,0 +1,2 @@ +.login-container
+ max-width: 600px
diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx index c33bc0e5..1e17c4a1 100644 --- a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx +++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePageTemplateUI.tsx @@ -16,8 +16,6 @@ import { } from "@/services/timeline"; import { userService } from "@/services/user"; -import AppBar from "../common/AppBar"; - import Timeline, { TimelinePostInfoEx, TimelineDeleteCallback, diff --git a/Timeline/ClientApp/src/app/views/user/user.sass b/Timeline/ClientApp/src/app/views/user/user.sass index ca2d10f5..5b7fcae7 100644 --- a/Timeline/ClientApp/src/app/views/user/user.sass +++ b/Timeline/ClientApp/src/app/views/user/user.sass @@ -1,6 +1,3 @@ -.login-container - max-width: 600px - .change-avatar-cropper-row max-height: 400px |