{
+ const { finished } = Modal.createDialog<[boolean]>(QuestionDialog, {
+ title: _t('Warning!'),
+ description:
+
+
{ !this.state.serverSupportsControlOfDevicesLogout ?
+ _t(
+ "Resetting your password on this homeserver will cause all of your devices to be " +
+ "signed out. This will delete the message encryption keys stored on them, " +
+ "making encrypted chat history unreadable.",
+ ) :
+ _t(
+ "Signing out your devices will delete the message encryption keys stored on them, " +
+ "making encrypted chat history unreadable.",
+ )
+ }
+
{ _t(
+ "If you want to retain access to your chat history in encrypted rooms, set up Key Backup " +
+ "or export your message keys from one of your other devices before proceeding.",
+ ) }
+
{ err }
;
- }
+ renderCheckEmail(): JSX.Element {
+ return ;
+ }
- let serverDeadSection;
- if (!this.state.serverIsAlive) {
- const classes = classNames({
- "mx_Login_error": true,
- "mx_Login_serverError": true,
- "mx_Login_serverErrorNonFatal": !this.state.serverErrorIsFatal,
- });
- serverDeadSection = (
-
- { this.state.serverDeadError }
-
- );
- }
+ renderSetPassword(): JSX.Element {
+ const submitButtonChild = this.state.phase === Phase.ResettingPassword
+ ?
+ : _t("Reset password");
- return
- { errorText }
- { serverDeadSection }
-
+ return <>
+
+
{ _t("Reset your password") }
+ this.setState({ logoutDevices: !this.state.logoutDevices })} checked={this.state.logoutDevices}>
+ { _t("Sign out of all devices") }
+
+
: null
+ }
+ { this.state.errorText && }
+
+
-
- { _t('Sign in instead') }
-
- ;
- }
-
- renderSendingEmail() {
- return ;
- }
-
- renderEmailSent() {
- return
- { _t("An email has been sent to %(emailAddress)s. Once you've followed the " +
- "link it contains, click below.", { emailAddress: this.state.email }) }
-
-
- { this.state.currentHttpRequest && (
-
)
- }
-
-
{ _t("Your password has been reset.") }
+ return <>
+
+
{ _t("Your password has been reset.") }
{ this.state.logoutDevices ?
{ _t(
"You have been logged out of all devices and will no longer receive " +
@@ -411,33 +391,40 @@ export default class ForgotPassword extends React.Component {
type="button"
onClick={this.props.onComplete}
value={_t('Return to login screen')} />
-
;
+ // This should not happen. However, it is logged and the user is sent to the start.
+ logger.warn(`unknown forgot password 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 00000000000..ee4e6081848
--- /dev/null
+++ b/src/components/structures/auth/forgot-password/CheckEmail.tsx
@@ -0,0 +1,84 @@
+/*
+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 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";
+import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
+import { ErrorMessage } from "../../ErrorMessage";
+
+interface CheckEmailProps {
+ email: string;
+ errorText: string | null;
+ 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,
+ errorText,
+ onSubmitForm,
+ onResendClick,
+}) => {
+ const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
+
+ const onResendClickFn = async (): Promise => {
+ await onResendClick();
+ toggleTooltipVisible();
+ };
+
+ 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 } },
+ )
+ }
+
+
+ ;
+};
diff --git a/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
new file mode 100644
index 00000000000..c18f4caded4
--- /dev/null
+++ 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;
+}
+
+export const VerifyEmailModal: React.FC = ({
+ email,
+ errorText,
+ onResendClick,
+}) => {
+ const { toggle: toggleTooltipVisible, value: tooltipVisible } = useTimeoutToggle(false, 2500);
+
+ const onResendClickFn = async (): Promise => {
+ await onResendClick();
+ toggleTooltipVisible();
+ };
+
+ return <>
+
+ { _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") }
+
+
+ { errorText &&
}
+