X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fhome%2Fsignup.tsx;h=c57d545aa8b368045ab495baf3b7e5e52b61bfaf;hb=b7ec7ae3110c560968e0cb24a32f1fe9166eec29;hp=9e6e3c7569e111843dec32d76f9821688e4c8c19;hpb=cc90ded31ed5d7d1b61474872481824113f0933b;p=lemmy-ui.git diff --git a/src/shared/components/home/signup.tsx b/src/shared/components/home/signup.tsx index 9e6e3c7..c57d545 100644 --- a/src/shared/components/home/signup.tsx +++ b/src/shared/components/home/signup.tsx @@ -1,6 +1,6 @@ -import { None, Option, Some } from "@sniptt/monads"; -import { Options, passwordStrength } from "check-password-strength"; -import { I18nKeys } from "i18next"; +import { myAuth, setIsoData } from "@utils/app"; +import { isBrowser } from "@utils/browser"; +import { validEmail } from "@utils/helpers"; import { Component, linkEvent } from "inferno"; import { T } from "inferno-i18next-dess"; import { @@ -8,84 +8,46 @@ import { GetCaptchaResponse, GetSiteResponse, LoginResponse, - Register, SiteView, - toUndefined, - UserOperation, - wsJsonToRes, - wsUserOp, } from "lemmy-js-client"; -import { Subscription } from "rxjs"; -import { i18n } from "../../i18next"; -import { UserService, WebSocketService } from "../../services"; -import { - isBrowser, - joinLemmyUrl, - mdToHtml, - setIsoData, - toast, - validEmail, - wsClient, - wsSubscribe, -} from "../../utils"; +import { joinLemmyUrl } from "../../config"; +import { mdToHtml } from "../../markdown"; +import { I18NextService, UserService } from "../../services"; +import { HttpService, RequestState } from "../../services/HttpService"; +import { toast } from "../../toast"; import { HtmlTags } from "../common/html-tags"; import { Icon, Spinner } from "../common/icon"; import { MarkdownTextArea } from "../common/markdown-textarea"; - -const passwordStrengthOptions: Options = [ - { - id: 0, - value: "very_weak", - minDiversity: 0, - minLength: 0, - }, - { - id: 1, - value: "weak", - minDiversity: 2, - minLength: 10, - }, - { - id: 2, - value: "medium", - minDiversity: 3, - minLength: 12, - }, - { - id: 3, - value: "strong", - minDiversity: 4, - minLength: 14, - }, -]; +import PasswordInput from "../common/password-input"; interface State { - registerForm: Register; - registerLoading: boolean; - captcha: Option; + registerRes: RequestState; + captchaRes: RequestState; + form: { + username?: string; + email?: string; + password?: string; + password_verify?: string; + show_nsfw: boolean; + captcha_uuid?: string; + captcha_answer?: string; + honeypot?: string; + answer?: string; + }; captchaPlaying: boolean; siteRes: GetSiteResponse; } export class Signup extends Component { private isoData = setIsoData(this.context); - private subscription: Subscription; - private audio: HTMLAudioElement; - - emptyState: State = { - registerForm: new Register({ - username: undefined, - password: undefined, - password_verify: undefined, + private audio?: HTMLAudioElement; + + state: State = { + registerRes: { state: "empty" }, + captchaRes: { state: "empty" }, + form: { show_nsfw: false, - captcha_uuid: None, - captcha_answer: None, - honeypot: None, - answer: None, - email: None, - }), - registerLoading: false, - captcha: None, + }, captchaPlaying: false, siteRes: this.isoData.site_res, }; @@ -93,32 +55,38 @@ export class Signup extends Component { constructor(props: any, context: any) { super(props, context); - this.state = this.emptyState; this.handleAnswerChange = this.handleAnswerChange.bind(this); + } - this.parseMessage = this.parseMessage.bind(this); - this.subscription = wsSubscribe(this.parseMessage); - - if (isBrowser()) { - WebSocketService.Instance.send(wsClient.getCaptcha()); + async componentDidMount() { + if (this.state.siteRes.site_view.local_site.captcha_enabled) { + await this.fetchCaptcha(); } } - componentWillUnmount() { - if (isBrowser()) { - this.subscription.unsubscribe(); - } + async fetchCaptcha() { + this.setState({ captchaRes: { state: "loading" } }); + this.setState({ + captchaRes: await HttpService.client.getCaptcha({}), + }); + + this.setState(s => { + if (s.captchaRes.state == "success") { + s.form.captcha_uuid = s.captchaRes.data.ok?.uuid; + } + return s; + }); } get documentTitle(): string { - return this.state.siteRes.site_view.match({ - some: siteView => `${this.titleName(siteView)} - ${siteView.site.name}`, - none: "", - }); + const siteView = this.state.siteRes.site_view; + return `${this.titleName(siteView)} - ${siteView.site.name}`; } titleName(siteView: SiteView): string { - return i18n.t(siteView.site.private_instance ? "apply_to_join" : "sign_up"); + return I18NextService.i18n.t( + siteView.local_site.private_instance ? "apply_to_join" : "sign_up" + ); } get isLemmyMl(): boolean { @@ -127,444 +95,400 @@ export class Signup extends Component { render() { return ( -
+
-
-
{this.registerForm()}
+
+
+ {this.registerForm()} +
); } registerForm() { - return this.state.siteRes.site_view.match({ - some: siteView => ( -
-
{this.titleName(siteView)}
- - {this.isLemmyMl && ( -
- + const siteView = this.state.siteRes.site_view; + return ( + +

{this.titleName(siteView)}

+ + {this.isLemmyMl && ( +
+
+ + ## +
- )} - -
- +
+ )} + +
+ + +
+ +
+
-
- -
+
+ +
+ + {!siteView.local_site.require_email_verification && + this.state.form.email && + !validEmail(this.state.form.email) && ( +
+ + {I18NextService.i18n.t("no_password_reset")} +
+ )}
+
-
- -
- - {!siteView.site.require_email_verification && - !this.state.registerForm.email - .map(validEmail) - .unwrapOr(true) && ( - +
+ +
+ +
+ +
+ + {siteView.local_site.registration_mode === "RequireApplication" && ( + <> +
+
+
+ + {I18NextService.i18n.t("fill_out_application")} +
+ {siteView.local_site.application_question && ( +
)} +
-
-
- -
+
+ +
+ +
+
+ + )} + {this.renderCaptcha()} +
+
+
- {this.state.registerForm.password && ( -
- {i18n.t(this.passwordStrength as I18nKeys)} -
- )} +
+
+ +
+
+ +
+
+ + ); + } -
-