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 `${i18n.t("login")} - ${this.state.siteRes.site_view.site.name}`;
  73   }
  74
  75   get isLemmyMl(): boolean {
  76     return isBrowser() && window.location.hostname == "lemmy.ml";
  77   }
  78
  79   render() {
  80     return (
  81       <div className="container-lg">
  82         <HtmlTags
  83           title={this.documentTitle}
  84           path={this.context.router.route.match.url}
  85           description={None}
  86           image={None}
  87         />
  88         <div className="row">
  89           <div className="col-12 col-lg-6 offset-lg-3">{this.loginForm()}</div>
  90         </div>
  91       </div>
  92     );
  93   }
  94
  95   loginForm() {
  96     return (
  97       <div>
  98         <form onSubmit={linkEvent(this, this.handleLoginSubmit)}>
  99           <h5>{i18n.t("login")}</h5>
 100           <div className="form-group row">
 101             <label
 102               className="col-sm-2 col-form-label"
 103               htmlFor="login-email-or-username"
 104             >
 105               {i18n.t("email_or_username")}
 106             </label>
 107             <div className="col-sm-10">
 108               <input
 109                 type="text"
 110                 className="form-control"
 111                 id="login-email-or-username"
 112                 value={this.state.loginForm.username_or_email}
 113                 onInput={linkEvent(this, this.handleLoginUsernameChange)}
 114                 autoComplete="email"
 115                 required
 116                 minLength={3}
 117               />
 118             </div>
 119           </div>
 120           <div className="form-group row">
 121             <label className="col-sm-2 col-form-label" htmlFor="login-password">
 122               {i18n.t("password")}
 123             </label>
 124             <div className="col-sm-10">
 125               <input
 126                 type="password"
 127                 id="login-password"
 128                 value={this.state.loginForm.password}
 129                 onInput={linkEvent(this, this.handleLoginPasswordChange)}
 130                 className="form-control"
 131                 autoComplete="current-password"
 132                 required
 133                 maxLength={60}
 134               />
 135               <button
 136                 type="button"
 137                 onClick={linkEvent(this, this.handlePasswordReset)}
 138                 className="btn p-0 btn-link d-inline-block float-right text-muted small font-weight-bold pointer-events not-allowed"
 139                 disabled={!validEmail(this.state.loginForm.username_or_email)}
 140                 title={i18n.t("no_password_reset")}
 141               >
 142                 {i18n.t("forgot_password")}
 143               </button>
 144             </div>
 145           </div>
 146           <div className="form-group row">
 147             <div className="col-sm-10">
 148               <button type="submit" className="btn btn-secondary">
 149                 {this.state.loginLoading ? <Spinner /> : i18n.t("login")}
 150               </button>
 151             </div>
 152           </div>
 153         </form>
 154       </div>
 155     );
 156   }
 157
 158   handleLoginSubmit(i: Login, event: any) {
 159     event.preventDefault();
 160     i.setState({ loginLoading: true });
 161     WebSocketService.Instance.send(wsClient.login(i.state.loginForm));
 162   }
 163
 164   handleLoginUsernameChange(i: Login, event: any) {
 165     i.state.loginForm.username_or_email = event.target.value;
 166     i.setState(i.state);
 167   }
 168
 169   handleLoginPasswordChange(i: Login, event: any) {
 170     i.state.loginForm.password = event.target.value;
 171     i.setState(i.state);
 172   }
 173
 174   handlePasswordReset(i: Login, event: any) {
 175     event.preventDefault();
 176     let resetForm = new PasswordReset({
 177       email: i.state.loginForm.username_or_email,
 178     });
 179     WebSocketService.Instance.send(wsClient.passwordReset(resetForm));
 180   }
 181
 182   parseMessage(msg: any) {
 183     let op = wsUserOp(msg);
 184     console.log(msg);
 185     if (msg.error) {
 186       toast(i18n.t(msg.error), "danger");
 187       this.setState(this.emptyState);
 188       return;
 189     } else {
 190       if (op == UserOperation.Login) {
 191         let data = wsJsonToRes<LoginResponse>(msg, LoginResponse);
 192         this.setState(this.emptyState);
 193         UserService.Instance.login(data);
 194         this.props.history.push("/");
 195         location.reload();
 196       } else if (op == UserOperation.PasswordReset) {
 197         toast(i18n.t("reset_password_mail_sent"));
 198       } else if (op == UserOperation.GetSite) {
 199         let data = wsJsonToRes<GetSiteResponse>(msg, GetSiteResponse);
 200         this.setState({ siteRes: data });
 201       }
 202     }
 203   }
 204 }