+
+
{ _t("Your password has been reset.") }
{ this.state.logoutDevices ?
{ _t(
"You have been logged out of all devices and will no longer receive " +
@@ -415,29 +352,38 @@ export default class ForgotPassword extends React.Component {
}
render() {
- let resetPasswordJsx;
+ let resetPasswordJsx: JSX.Element;
+
switch (this.state.phase) {
- case Phase.Forgot:
- resetPasswordJsx = this.renderForgot();
- break;
+ case Phase.EnterEmail:
case Phase.SendingEmail:
- resetPasswordJsx = this.renderSendingEmail();
+ resetPasswordJsx = this.renderEnterEmail();
break;
case Phase.EmailSent:
- resetPasswordJsx = this.renderEmailSent();
+ resetPasswordJsx = this.renderCheckEmail();
+ break;
+ case Phase.PasswordInput:
+ resetPasswordJsx = this.renderSetPassword();
+ break;
+ case Phase.ResettingPassword:
+ resetPasswordJsx = resetting password
;
break;
case Phase.Done:
resetPasswordJsx = this.renderDone();
break;
default:
- resetPasswordJsx =
;
+ // This should not happen. However, it is logged and the user is sent to the start.
+ logger.error(`unknown forgot passwort phase ${this.state.phase}`);
+ this.setState({
+ phase: Phase.EnterEmail,
+ });
+ return;
}
return (
- { _t('Set a new password') }
{ resetPasswordJsx }
diff --git a/src/components/structures/auth/forgot-password/CheckEmail.tsx b/src/components/structures/auth/forgot-password/CheckEmail.tsx
new file mode 100644
index 000000000000..5c67bfcb2315
--- /dev/null
+++ b/src/components/structures/auth/forgot-password/CheckEmail.tsx
@@ -0,0 +1,89 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useEffect, useRef, useState } from "react";
+
+import AccessibleButton from "../../../views/elements/AccessibleButton";
+import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
+import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg";
+import { _t } from '../../../../languageHandler';
+import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
+
+interface CheckEmailProps {
+ email: string;
+ onResendClick: () => Promise;
+ onSubmitForm: (ev: React.FormEvent) => void;
+}
+
+/**
+ * This component renders the email verification view of the forgot password flow.
+ */
+export const CheckEmail: React.FC = ({
+ email,
+ onSubmitForm,
+ onResendClick,
+}) => {
+ const resentTooltipVisibleTimerId = useRef(null);
+ const [resentTooltipVisible, setResentTooltipVisible] = useState(false);
+
+ const onResendClickFn = async (): Promise => {
+ await onResendClick();
+ setResentTooltipVisible(true);
+ resentTooltipVisibleTimerId.current = setTimeout(() => setResentTooltipVisible(false), 2500);
+ };
+
+ useEffect(() => {
+ return () => {
+ if (resentTooltipVisibleTimerId.current) {
+ clearTimeout(resentTooltipVisibleTimerId.current);
+ }
+ };
+ });
+
+ return
+
+
{ _t("Check your email to continue") }
+
+ { _t(
+ "Follow the instructions sent to %(email)s",
+ { email: email },
+ { b: t => { t } },
+ ) }
+
+
+
{ _t("Did not receive it?") }
+
+
+ { _t("Resend") }
+
+
+
+
+
+
+
{ _t("Enter your email to reset password") }
+
+ {
+ _t(
+ "%(homeserver)s will send you a verification link to let you reset your password.",
+ { homeserver: "matrix.org" },
+ { b: t => { t } },
+ )
+ }
+
+
+
+
+
{ _t("Verify your email to continue") }
+
+ { _t(
+ `We need to know it’s you before resetting your password.
+ Click the link in the email we just sent to %(email)s`,
+ {
+ email,
+ },
+ {
+ b: sub => { sub },
+ },
+ ) }
+
+
+
{ _t("Did not receive it?") }
+
+
+ { _t("Resend") }
+
+
+
+