src/shared/components/home/login.tsx

   1 import { None } from "@sniptt/monads";
   2 import { Component, linkEvent } from "inferno";
   3 import {
   4   GetSiteResponse,
   5   Login as LoginForm,
   6   LoginResponse,
   7   PasswordReset,
   8   UserOperation,
   9   wsJsonToRes,
  10   wsUserOp,
  11 } from "lemmy-js-client";
  12 import { Subscription } from "rxjs";
  13 import { i18n } from "../../i18next";
  14 import { UserService, WebSocketService } from "../../services";
  15 import {
  16   isBrowser,
  17   setIsoData,
  18   toast,
  19   validEmail,
  20   wsClient,
  21   wsSubscribe,
  22 } from "../../utils";
  23 import { HtmlTags } from "../common/html-tags";
  24 import { Spinner } from "../common/icon";
  25
  26 interface State {
  27   loginForm: LoginForm;
  28   loginLoading: boolean;
  29   siteRes: GetSiteResponse;
  30 }
  31
  32 export class Login extends Component<any, State> {
  33   private isoData = setIsoData(this.context);
  34   private subscription: Subscription;
  35
  36   emptyState: State = {
  37     loginForm: new LoginForm({
  38       username_or_email: undefined,
  39       password: undefined,
  40     }),
  41     loginLoading: false,
  42     siteRes: this.isoData.site_res,
  43   };
  44
  45   constructor(props: any, context: any) {
  46     super(props, context);
  47
  48     this.state = this.emptyState;
  49
  50     this.parseMessage = this.parseMessage.bind(this);
  51     this.subscription = wsSubscribe(this.parseMessage);
  52
  53     if (isBrowser()) {
  54       WebSocketService.Instance.send(wsClient.getCaptcha());
  55     }
  56   }
  57
  58   componentDidMount() {
  59     // Navigate to home if already logged in
  60     if (UserService.Instance.myUserInfo.isSome()) {
  61       this.context.router.history.push("/");
  62     }
  63   }
  64
  65   componentWillUnmount() {
  66     if (isBrowser()) {
  67       this.subscription.unsubscribe();
  68     }
  69   }
  70
  71   get documentTitle(): string {
  72     return this.state.siteRes.site_view.match({
  73       some: siteView => `${i18n.t("login")} - ${siteView.site.name}`,
  74       none: "",
  75     });
  76   }
  77
  78   get isLemmyMl(): boolean {
  79     return isBrowser() && window.location.hostname == "lemmy.ml";
  80   }
  81
  82   render() {
  83     return (
  84       <div className="container-lg">
  85         <HtmlTags
  86           title={this.documentTitle}
  87           path={this.context.router.route.match.url}
  88           description={None}
  89           image={None}
  90         />
  91         <div className="row">
  92           <div className="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
  93         </div>
  94       </div>
  95     );
  96   }
  97
  98   loginForm() {
  99     return (
 100       <div>
 101         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
 102           <h5>{i18n.t("login")}</h5>
 103           <div className="form-group row">
 104             <label
 105               className="col-sm-2 col-form-label"
 106               htmlFor="login-email-or-username"
 107             >
 108               {i18n.t("email_or_username")}
 109             </label>
 110             <div className="col-sm-10">
 111               <input
 112                 type="text"
 113                 className="form-control"
 114                 id="login-email-or-username"
 115                 value={this.state.loginForm.username_or_email}
 116                 onInput={linkEvent(this, this.handleLoginUsernameChange)}
 117                 autoComplete="email"
 118                 required
 119                 minLength={3}
 120               />
 121             </div>
 122           </div>
 123           <div className="form-group row">
 124             <label className="col-sm-2 col-form-label" htmlFor="login-password">
 125               {i18n.t("password")}
 126             </label>
 127             <div className="col-sm-10">
 128               <input
 129                 type="password"
 130                 id="login-password"
 131                 value={this.state.loginForm.password}
 132                 onInput={linkEvent(this, this.handleLoginPasswordChange)}
 133                 className="form-control"
 134                 autoComplete="current-password"
 135                 required
 136                 maxLength={60}
 137               />
 138               <button
 139                 type="button"
 140                 onClick={linkEvent(this, this.handlePasswordReset)}
 141                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold pointer-events not-allowed"
 142                 disabled={!validEmail(this.state.loginForm.username_or_email)}
 143                 title={i18n.t("no_password_reset")}
 144               >
 145                 {i18n.t("forgot_password")}
 146               </button>
 147             </div>
 148           </div>
 149           <div className="form-group row">
 150             <div className="col-sm-10">
 151               <button type="submit" className="btn btn-secondary">
 152                 {this.state.loginLoading ? <Spinner /> : i18n.t("login")}
 153               </button>
 154             </div>
 155           </div>
 156         </form>
 157       </div>
 158     );
 159   }
 160
 161   handleLoginSubmit(i: Login, event: any) {
 162     event.preventDefault();
 163     i.setState({ loginLoading: true });
 164     WebSocketService.Instance.send(wsClient.login(i.state.loginForm));
 165   }
 166
 167   handleLoginUsernameChange(i: Login, event: any) {
 168     i.state.loginForm.username_or_email = event.target.value;
 169     i.setState(i.state);
 170   }
 171
 172   handleLoginPasswordChange(i: Login, event: any) {
 173     i.state.loginForm.password = event.target.value;
 174     i.setState(i.state);
 175   }
 176
 177   handlePasswordReset(i: Login, event: any) {
 178     event.preventDefault();
 179     let resetForm = new PasswordReset({
 180       email: i.state.loginForm.username_or_email,
 181     });
 182     WebSocketService.Instance.send(wsClient.passwordReset(resetForm));
 183   }
 184
 185   parseMessage(msg: any) {
 186     let op = wsUserOp(msg);
 187     console.log(msg);
 188     if (msg.error) {
 189       toast(i18n.t(msg.error), "danger");
 190       this.setState(this.emptyState);
 191       return;
 192     } else {
 193       if (op == UserOperation.Login) {
 194         let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
 195         this.setState(this.emptyState);
 196         UserService.Instance.login(data);
 197       } else if (op == UserOperation.PasswordReset) {
 198         toast(i18n.t("reset_password_mail_sent"));
 199       } else if (op == UserOperation.GetSite) {
 200         let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
 201         this.setState({ siteRes: data });
 202       }
 203     }
 204   }
 205 }