From d845d9954efab4c15f7717cfefdf45aaf32bbd73 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Sep 2020 19:11:44 +0800
Subject: Login page enhancement.

---
 Timeline/ClientApp/src/app/index.sass              |  1 +
 Timeline/ClientApp/src/app/views/login/index.tsx   | 25 +++++++++++++++-------
 Timeline/ClientApp/src/app/views/login/login.sass  |  2 ++
 .../timeline-common/TimelinePageTemplateUI.tsx     |  2 --
 Timeline/ClientApp/src/app/views/user/user.sass    |  3 ---
 5 files changed, 20 insertions(+), 13 deletions(-)
 create mode 100644 Timeline/ClientApp/src/app/views/login/login.sass

(limited to 'Timeline/ClientApp/src')

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
 
-- 
cgit v1.2.3