From b4d1ad9c17580bee2f862b16499b1e9048c3ee93 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/views/login/index.tsx  | 25 +++++++++++++++--------
 Timeline/ClientApp/src/app/views/login/login.sass |  2 ++
 2 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 Timeline/ClientApp/src/app/views/login/login.sass

(limited to 'Timeline/ClientApp/src/app/views/login')

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