Add show/hide button to password fields (#1861)

[lemmy-ui.git] / src / shared / components / home / login.tsx

diff --git a/src/shared/components/home/login.tsx b/src/shared/components/home/login.tsx
index 841a3d2b2c59f32bc134183f0860eaaa576305f2..828cbb5f8b51cfa66665e546f797c6b0802bce6d 100644 (file)
--- a/src/shared/components/home/login.tsx
+++ b/src/shared/components/home/login.tsx
@@ -1,11 +1,13 @@
+import { myAuth, setIsoData } from "@utils/app";
+import { isBrowser } from "@utils/browser";
 import { Component, linkEvent } from "inferno";
 import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
-import { i18n } from "../../i18next";
-import { UserService } from "../../services";
+import { I18NextService, UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
-import { isBrowser, myAuth, setIsoData, toast, validEmail } from "../../utils";
+import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
+import PasswordInput from "../common/password-input";
 
 interface State {
   loginRes: RequestState<LoginResponse>;
@@ -40,7 +42,9 @@ export class Login extends Component<any, State> {
   }
 
   get documentTitle(): string {
-    return `${i18n.t("login")} - ${this.state.siteRes.site_view.site.name}`;
+    return `${I18NextService.i18n.t("login")} - ${
+      this.state.siteRes.site_view.site.name
+    }`;
   }
 
   get isLemmyMl(): boolean {
@@ -49,7 +53,7 @@ export class Login extends Component<any, State> {
 
   render() {
     return (
-      <div className="container-lg">
+      <div className="login container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -65,13 +69,13 @@ export class Login extends Component<any, State> {
     return (
       <div>
         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
-          <h5>{i18n.t("login")}</h5>
-          <div className="form-group row">
+          <h1 className="h4 mb-4">{I18NextService.i18n.t("login")}</h1>
+          <div className="mb-3 row">
             <label
               className="col-sm-2 col-form-label"
               htmlFor="login-email-or-username"
             >
-              {i18n.t("email_or_username")}
+              {I18NextService.i18n.t("email_or_username")}
             </label>
             <div className="col-sm-10">
               <input
@@ -86,42 +90,22 @@ export class Login extends Component<any, State> {
               />
             </div>
           </div>
-          <div className="form-group row">
-            <label className="col-sm-2 col-form-label" htmlFor="login-password">
-              {i18n.t("password")}
-            </label>
-            <div className="col-sm-10">
-              <input
-                type="password"
-                id="login-password"
-                value={this.state.form.password}
-                onInput={linkEvent(this, this.handleLoginPasswordChange)}
-                className="form-control"
-                autoComplete="current-password"
-                required
-                maxLength={60}
-              />
-              <button
-                type="button"
-                onClick={linkEvent(this, this.handlePasswordReset)}
-                className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold pointer-events not-allowed"
-                disabled={
-                  !!this.state.form.username_or_email &&
-                  !validEmail(this.state.form.username_or_email)
-                }
-                title={i18n.t("no_password_reset")}
-              >
-                {i18n.t("forgot_password")}
-              </button>
-            </div>
+          <div className="mb-3">
+            <PasswordInput
+              id="login-password"
+              value={this.state.form.password}
+              onInput={linkEvent(this, this.handleLoginPasswordChange)}
+              label={I18NextService.i18n.t("password")}
+              showForgotLink
+            />
           </div>
           {this.state.showTotp && (
-            <div className="form-group row">
+            <div className="mb-3 row">
               <label
                 className="col-sm-6 col-form-label"
                 htmlFor="login-totp-token"
               >
-                {i18n.t("two_factor_token")}
+                {I18NextService.i18n.t("two_factor_token")}
               </label>
               <div className="col-sm-6">
                 <input
@@ -137,13 +121,13 @@ export class Login extends Component<any, State> {
               </div>
             </div>
           )}
-          <div className="form-group row">
+          <div className="mb-3 row">
             <div className="col-sm-10">
               <button type="submit" className="btn btn-secondary">
                 {this.state.loginRes.state == "loading" ? (
                   <Spinner />
                 ) : (
-                  i18n.t("login")
+                  I18NextService.i18n.t("login")
                 )}
               </button>
             </div>
@@ -169,7 +153,10 @@ export class Login extends Component<any, State> {
         case "failed": {
           if (loginRes.msg === "missing_totp_token") {
             i.setState({ showTotp: true });
-            toast(i18n.t("enter_two_factor_code"), "info");
+            toast(I18NextService.i18n.t("enter_two_factor_code"), "info");
+          }
+          if (loginRes.msg === "incorrect_login") {
+            toast(I18NextService.i18n.t("incorrect_login"), "danger");
           }
 
           i.setState({ loginRes: { state: "failed", msg: loginRes.msg } });
@@ -177,7 +164,9 @@ export class Login extends Component<any, State> {
         }
 
         case "success": {
-          UserService.Instance.login(loginRes.data);
+          UserService.Instance.login({
+            res: loginRes.data,
+          });
           const site = await HttpService.client.getSite({
             auth: myAuth(),
           });
@@ -210,15 +199,4 @@ export class Login extends Component<any, State> {
     i.state.form.password = event.target.value;
     i.setState(i.state);
   }
-
-  async handlePasswordReset(i: Login, event: any) {
-    event.preventDefault();
-    const email = i.state.form.username_or_email;
-    if (email) {
-      const res = await HttpService.client.passwordReset({ email });
-      if (res.state == "success") {
-        toast(i18n.t("reset_password_mail_sent"));
-      }
-    }
-  }
 }