From 8796470c6c9d43cb573c23221540d9aac6407e85 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 1 Jul 2021 20:12:39 +0800
Subject: ...

---
 FrontEnd/TODO.md                   |  3 ++-
 FrontEnd/src/views/login/index.css |  7 ++++++-
 FrontEnd/src/views/login/index.tsx | 29 +++++++++++++++++++++--------
 3 files changed, 29 insertions(+), 10 deletions(-)

(limited to 'FrontEnd')

diff --git a/FrontEnd/TODO.md b/FrontEnd/TODO.md
index 53e9750e..afcc5b18 100644
--- a/FrontEnd/TODO.md
+++ b/FrontEnd/TODO.md
@@ -5,6 +5,7 @@
 - [ ] Improve forms.
 - [x] Improve buttons.
 - [x] Improve icon buttons.
-- [ ] Login page.
+- [x] Login page.
 - [x] Alert.
 - [x] Move prefix `tl` to `cru`.
+- [ ] Fix home page.
diff --git a/FrontEnd/src/views/login/index.css b/FrontEnd/src/views/login/index.css
index dca7054d..aefe57e8 100644
--- a/FrontEnd/src/views/login/index.css
+++ b/FrontEnd/src/views/login/index.css
@@ -1,3 +1,8 @@
 .login-container {
-  max-width: 600px;
+  max-width: 25em;
+}
+
+.login-container input[type="text"],
+.login-container input[type="password"] {
+  width: 100%;
 }
diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx
index 782acdaa..ed696437 100644
--- a/FrontEnd/src/views/login/index.tsx
+++ b/FrontEnd/src/views/login/index.tsx
@@ -79,11 +79,14 @@ const LoginPage: React.FC = (_) => {
 
   return (
     <div className="login-container container-fluid mt-2">
-      <h1 className="text-center">{t("welcome")}</h1>
-      <div>
-        <label htmlFor="username">{t("user.username")}</label>
+      <h1 className="cru-text-center cru-color-primary">{t("welcome")}</h1>
+      <div className="cru-operation-dialog-group">
+        <label className="cru-operation-dialog-label" htmlFor="username">
+          {t("user.username")}
+        </label>
         <input
           id="username"
+          type="text"
           disabled={process}
           onChange={(e) => {
             setUsername(e.target.value);
@@ -92,9 +95,15 @@ const LoginPage: React.FC = (_) => {
           value={username}
         />
         {usernameDirty && username === "" && (
-          <div>{t("login.emptyUsername")}</div>
+          <div className="cru-operation-dialog-error-text">
+            {t("login.emptyUsername")}
+          </div>
         )}
-        <label htmlFor="password">{t("user.password")}</label>
+      </div>
+      <div className="cru-operation-dialog-group">
+        <label className="cru-operation-dialog-label" htmlFor="password">
+          {t("user.password")}
+        </label>
         <input
           id="password"
           type="password"
@@ -107,10 +116,12 @@ const LoginPage: React.FC = (_) => {
           onKeyDown={onEnterPressInPassword}
         />
         {passwordDirty && password === "" && (
-          <div>{t("login.emptyPassword")}</div>
+          <div className="cru-operation-dialog-error-text">
+            {t("login.emptyPassword")}
+          </div>
         )}
       </div>
-      <div>
+      <div className="cru-operation-dialog-group">
         <input
           id="remember-me"
           type="checkbox"
@@ -119,7 +130,9 @@ const LoginPage: React.FC = (_) => {
             setRememberMe(e.currentTarget.checked);
           }}
         />
-        <label>{t("user.rememberMe")}</label>
+        <label className="cru-operation-dialog-inline-label">
+          {t("user.rememberMe")}
+        </label>
       </div>
       {error ? <p className="text-danger">{t(error)}</p> : null}
       <div className="cru-text-end">
-- 
cgit v1.2.3