Move AppBar to App .

1 files changed, 74 insertions, 77 deletions

diff --git a/Timeline/ClientApp/src/app/views/login/index.tsx b/Timeline/ClientApp/src/app/views/login/index.tsx
index 545fc05a..a3071264 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, { Fragment, useState, useEffect } from "react";
+import React from "react";
 import { useHistory } from "react-router";
 import { useTranslation } from "react-i18next";
-import { Form, Spinner, Button } from "react-bootstrap";
+import { Form } from "react-bootstrap";
 
 import { useUser, userService } from "@/services/user";
 
@@ -11,17 +11,17 @@ import LoadingButton from "../common/LoadingButton";
 const LoginPage: React.FC = (_) => {
   const { t } = useTranslation();
   const history = useHistory();
-  const [username, setUsername] = useState<string>("");
-  const [usernameDirty, setUsernameDirty] = useState<boolean>(false);
-  const [password, setPassword] = useState<string>("");
-  const [passwordDirty, setPasswordDirty] = useState<boolean>(false);
-  const [rememberMe, setRememberMe] = useState<boolean>(true);
-  const [process, setProcess] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
+  const [username, setUsername] = React.useState<string>("");
+  const [usernameDirty, setUsernameDirty] = React.useState<boolean>(false);
+  const [password, setPassword] = React.useState<string>("");
+  const [passwordDirty, setPasswordDirty] = React.useState<boolean>(false);
+  const [rememberMe, setRememberMe] = React.useState<boolean>(true);
+  const [process, setProcess] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string | null>(null);
 
   const user = useUser();
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (user != null) {
       const id = setTimeout(() => history.push("/"), 3000);
       return () => {
@@ -72,73 +72,70 @@ const LoginPage: React.FC = (_) => {
   }
 
   return (
-    <Fragment>
-      <AppBar />
-      <div className="container login-container mt-appbar">
-        <h1>{t("welcome")}</h1>
-        <Form>
-          <Form.Group>
-            <Form.Label htmlFor="username">{t("user.username")}</Form.Label>
-            <Form.Control
-              id="username"
-              disabled={process}
-              onChange={(e) => {
-                setUsername(e.target.value);
-                setUsernameDirty(true);
-              }}
-              value={username}
-              isInvalid={usernameDirty && username === ""}
-            />
-            {usernameDirty && username === "" && (
-              <Form.Control.Feedback type="invalid">
-                {t("login.emptyUsername")}
-              </Form.Control.Feedback>
-            )}
-          </Form.Group>
-          <Form.Group>
-            <Form.Label htmlFor="password">{t("user.password")}</Form.Label>
-            <Form.Control
-              id="password"
-              type="password"
-              disabled={process}
-              onChange={(e) => {
-                setPassword(e.target.value);
-                setPasswordDirty(true);
-              }}
-              value={password}
-              isInvalid={passwordDirty && password === ""}
-            />
-            {passwordDirty && password === "" && (
-              <Form.Control.Feedback type="invalid">
-                {t("login.emptyPassword")}
-              </Form.Control.Feedback>
-            )}
-          </Form.Group>
-          <Form.Group>
-            <Form.Check<"input">
-              id="remember-me"
-              type="checkbox"
-              checked={rememberMe}
-              onChange={(e) => {
-                setRememberMe(e.target.checked);
-              }}
-              label={t("user.rememberMe")}
-            />
-          </Form.Group>
-          {error ? <p className="text-danger">{t(error)}</p> : null}
-          <div className="text-right">
-            <LoadingButton
-              loading={process}
-              variant="primary"
-              onClick={onSubmit}
-              disabled={username === "" || password === "" ? true : undefined}
-            >
-              {t("user.login")}
-            </LoadingButton>
-          </div>
-        </Form>
-      </div>
-    </Fragment>
+    <div className="container login-container mt-appbar">
+      <h1>{t("welcome")}</h1>
+      <Form>
+        <Form.Group>
+          <Form.Label htmlFor="username">{t("user.username")}</Form.Label>
+          <Form.Control
+            id="username"
+            disabled={process}
+            onChange={(e) => {
+              setUsername(e.target.value);
+              setUsernameDirty(true);
+            }}
+            value={username}
+            isInvalid={usernameDirty && username === ""}
+          />
+          {usernameDirty && username === "" && (
+            <Form.Control.Feedback type="invalid">
+              {t("login.emptyUsername")}
+            </Form.Control.Feedback>
+          )}
+        </Form.Group>
+        <Form.Group>
+          <Form.Label htmlFor="password">{t("user.password")}</Form.Label>
+          <Form.Control
+            id="password"
+            type="password"
+            disabled={process}
+            onChange={(e) => {
+              setPassword(e.target.value);
+              setPasswordDirty(true);
+            }}
+            value={password}
+            isInvalid={passwordDirty && password === ""}
+          />
+          {passwordDirty && password === "" && (
+            <Form.Control.Feedback type="invalid">
+              {t("login.emptyPassword")}
+            </Form.Control.Feedback>
+          )}
+        </Form.Group>
+        <Form.Group>
+          <Form.Check<"input">
+            id="remember-me"
+            type="checkbox"
+            checked={rememberMe}
+            onChange={(e) => {
+              setRememberMe(e.target.checked);
+            }}
+            label={t("user.rememberMe")}
+          />
+        </Form.Group>
+        {error ? <p className="text-danger">{t(error)}</p> : null}
+        <div className="text-right">
+          <LoadingButton
+            loading={process}
+            variant="primary"
+            onClick={onSubmit}
+            disabled={username === "" || password === "" ? true : undefined}
+          >
+            {t("user.login")}
+          </LoadingButton>
+        </div>
+      </Form>
+    </div>
   );
 };