diff options
Diffstat (limited to 'Timeline/ClientApp/src/app/views/login/index.tsx')
| -rw-r--r-- | Timeline/ClientApp/src/app/views/login/index.tsx | 151 | 
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>    );  };  | 
