New password reset flow (#9581)

2022-11-22 07:58:37 +01:00 · 2022-11-22 07:58:37 +01:00 · e5ce6d7800
commit e5ce6d7800
parent 3f74ac37e8
23 changed files with 1163 additions and 362 deletions
--- a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
+++ b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
@ -0,0 +1,78 @@
+/*
+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 from "react";
+
+import { _t } from "../../../../languageHandler";
+import AccessibleButton from "../../../views/elements/AccessibleButton";
+import { Icon as RetryIcon } from "../../../../../res/img/element-icons/retry.svg";
+import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
+import Tooltip, { Alignment } from "../../../views/elements/Tooltip";
+import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
+import { ErrorMessage } from "../../ErrorMessage";
+
+interface Props {
+    email: string;
+    errorText: string | null;
+    onResendClick: () => Promise<boolean>;
+}
+
+export const VerifyEmailModal: React.FC<Props> = ({
+    email,
+    errorText,
+    onResendClick,
+}) => {
+    const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
+
+    const onResendClickFn = async (): Promise<void> => {
+        await onResendClick();
+        toggleTooltipVisible();
+    };
+
+    return <>
+        <EmailPromptIcon className="mx_AuthBody_emailPromptIcon" />
+        <h1>{ _t("Verify your email to continue") }</h1>
+        <p>
+            { _t(
+                `We need to know it’s you before resetting your password.
+                    Click the link in the email we just sent to <b>%(email)s</b>`,
+                {
+                    email,
+                },
+                {
+                    b: sub => <b>{ sub }</b>,
+                },
+            ) }
+        </p>
+        <div className="mx_AuthBody_did-not-receive mx_AuthBody_did-not-receive--centered">
+            <span className="mx_VerifyEMailDialog_text-light">{ _t("Did not receive it?") }</span>
+            <AccessibleButton
+                className="mx_AuthBody_resend-button"
+                kind="link"
+                onClick={onResendClickFn}
+            >
+                <RetryIcon className="mx_Icon mx_Icon_16" />
+                { _t("Resend") }
+                <Tooltip
+                    label={_t("Verification link email resent!")}
+                    alignment={Alignment.Top}
+                    visible={tooltipVisible}
+                />
+            </AccessibleButton>
+            { errorText && <ErrorMessage message={errorText} /> }
+        </div>
+    </>;
+};