From 7c0e68455b1695792e685f89f2b4694ef4f24eb6 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Fri, 6 May 2022 11:49:00 +0200 Subject: [PATCH 01/16] registration: redesign email verification page --- res/css/_components.scss | 1 + res/css/structures/auth/_Registration.scss | 37 +++ res/css/views/auth/_AuthBody.scss | 5 + res/css/views/auth/_AuthPage.scss | 8 +- .../auth/_InteractiveAuthEntryComponents.scss | 29 -- res/img/element-icons/email-prompt.svg | 17 +- src/components/structures/InteractiveAuth.tsx | 5 +- .../structures/auth/AuthHeaderContext.tsx | 107 ++++++++ .../structures/auth/Registration.tsx | 46 ++-- src/components/views/auth/AuthBody.tsx | 17 +- .../auth/InteractiveAuthEntryComponents.tsx | 250 ++++++++++++------ src/i18n/strings/en_EN.json | 7 +- 12 files changed, 382 insertions(+), 147 deletions(-) create mode 100644 res/css/structures/auth/_Registration.scss create mode 100644 src/components/structures/auth/AuthHeaderContext.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index 953f12d73ef..8aa2d709542 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -58,6 +58,7 @@ @import "./structures/_ViewSource.scss"; @import "./structures/auth/_CompleteSecurity.scss"; @import "./structures/auth/_Login.scss"; +@import "./structures/auth/_Registration.scss"; @import "./structures/auth/_SetupEncryptionBody.scss"; @import "./views/audio_messages/_AudioPlayer.scss"; @import "./views/audio_messages/_PlayPauseButton.scss"; diff --git a/res/css/structures/auth/_Registration.scss b/res/css/structures/auth/_Registration.scss new file mode 100644 index 00000000000..9f37ec0180e --- /dev/null +++ b/res/css/structures/auth/_Registration.scss @@ -0,0 +1,37 @@ +.mx_Register_mainContent { + display: flex; + flex-direction: column; + flex-grow: 1; + min-height: 270px; + + p { + font-size: $font-14px; + color: $authpage-primary-color; + + &.secondary { + color: $authpage-secondary-color; + } + } + + > img:first-child { + margin-bottom: 16px; + width: max-content; + } + + .mx_Login_submit { + margin-bottom: 0; + } +} + +.mx_Register_footerActions { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: 16px; + margin-top: 16px; + border-top: 1px solid rgba(141, 151, 165, 0.2); + + > * { + flex-basis: content; + } +} diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 8c6b6bdff00..487e08fe440 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -24,6 +24,11 @@ limitations under the License. padding: 25px 60px; box-sizing: border-box; + &.mx_AuthBody_flex { + display: flex; + flex-direction: column; + } + h2 { font-size: $font-24px; font-weight: 600; diff --git a/res/css/views/auth/_AuthPage.scss b/res/css/views/auth/_AuthPage.scss index e3409792f03..b1399444df8 100644 --- a/res/css/views/auth/_AuthPage.scss +++ b/res/css/views/auth/_AuthPage.scss @@ -28,10 +28,12 @@ limitations under the License. border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33); background-color: $authpage-modal-bg-color; -} -@media only screen and (max-width: 480px) { - .mx_AuthPage_modal { + @media only screen and (max-height: 768px) { + margin-top: 50px; + } + + @media only screen and (max-width: 480px) { margin-top: 0; } } diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss index a37683935a7..6ca7f5d9cfe 100644 --- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss +++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss @@ -14,35 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_InteractiveAuthEntryComponents_emailWrapper { - padding-right: 100px; - position: relative; - margin-top: 32px; - margin-bottom: 32px; - - &::before, &::after { - position: absolute; - width: 116px; - height: 116px; - content: ""; - right: -10px; - } - - &::before { - background-color: rgba(244, 246, 250, 0.91); - border-radius: 50%; - top: -20px; - } - - &::after { - background-image: url('$(res)/img/element-icons/email-prompt.svg'); - background-repeat: no-repeat; - background-position: center; - background-size: contain; - top: -25px; - } -} - .mx_InteractiveAuthEntryComponents_msisdnWrapper { text-align: center; } diff --git a/res/img/element-icons/email-prompt.svg b/res/img/element-icons/email-prompt.svg index 19b8f824498..126fff6dd3c 100644 --- a/res/img/element-icons/email-prompt.svg +++ b/res/img/element-icons/email-prompt.svg @@ -1,13 +1,6 @@ - - - - - - - - - - - - + + + + + diff --git a/src/components/structures/InteractiveAuth.tsx b/src/components/structures/InteractiveAuth.tsx index 94c54b32e32..0c1b326a802 100644 --- a/src/components/structures/InteractiveAuth.tsx +++ b/src/components/structures/InteractiveAuth.tsx @@ -23,7 +23,7 @@ import { IStageStatus, } from "matrix-js-sdk/src/interactive-auth"; import { MatrixClient } from "matrix-js-sdk/src/client"; -import React, { createRef } from 'react'; +import React, { createRef, ReactNode } from 'react'; import { logger } from "matrix-js-sdk/src/logger"; import getEntryComponentForLoginType, { IStageComponent } from '../views/auth/InteractiveAuthEntryComponents'; @@ -52,6 +52,7 @@ interface IProps { // continueText and continueKind are passed straight through to the AuthEntryComponent. continueText?: string; continueKind?: string; + serverPicker?: ReactNode; // callback makeRequest(auth: IAuthData): Promise; // callback called when the auth process has finished, @@ -269,9 +270,11 @@ export default class InteractiveAuthComponent extends React.Component ); } diff --git a/src/components/structures/auth/AuthHeaderContext.tsx b/src/components/structures/auth/AuthHeaderContext.tsx new file mode 100644 index 00000000000..ac034ee170c --- /dev/null +++ b/src/components/structures/auth/AuthHeaderContext.tsx @@ -0,0 +1,107 @@ +/* +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 { isEqual } from "lodash"; +import React, { + createContext, Dispatch, + Fragment, + PropsWithChildren, + ReactNode, + Reducer, + ReducerState, + useContext, + useEffect, + useReducer, +} from "react"; + +interface AuthHeaderContextValue { + title: ReactNode; + icon?: ReactNode; + hideServerPicker?: boolean; +} + +enum AuthHeaderContextActionType { + ADD, + REMOVE +} + +interface AuthHeaderContextAction { + type: AuthHeaderContextActionType; + value: AuthHeaderContextValue; +} + +type AuthContextReducer = Reducer; + +interface AuthHeaderContextType { + state: ReducerState; + dispatch: Dispatch; +} + +const AuthHeaderContext = createContext(undefined); + +export function AuthHeader(content: AuthHeaderContextValue) { + const context = useContext(AuthHeaderContext); + const dispatch = context ? context.dispatch : null; + useEffect(() => { + if (!dispatch) { + return; + } + dispatch({ type: AuthHeaderContextActionType.ADD, value: content }); + return () => dispatch({ type: AuthHeaderContextActionType.REMOVE, value: content }); + }, [content, dispatch]); + return null; +} + +interface Props { + title: ReactNode; + icon?: ReactNode; + serverPicker: ReactNode; +} + +export function AuthHeaderDisplay({ title, icon, serverPicker, children }: PropsWithChildren) { + const context = useContext(AuthHeaderContext); + if (!context) { + return null; + } + const current = context.state.length ? context.state[0] : null; + return ( + + { current?.icon ?? icon } +

{ current?.title ?? title }

+ { children } + { current?.hideServerPicker !== true && serverPicker } + + ); +} + +export function AuthHeaderProvider({ children }: PropsWithChildren<{}>) { + const [state, dispatch] = useReducer( + (state: AuthHeaderContextValue[], action: AuthHeaderContextAction) => { + switch (action.type) { + case AuthHeaderContextActionType.ADD: + return [action.value, ...state]; + case AuthHeaderContextActionType.REMOVE: + return (state.length && isEqual(state[0], action.value)) ? state.slice(1) : state; + } + }, + [] as AuthHeaderContextValue[], + ); + return ( + + { children } + + ); +} diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index e694fdee40b..c9af766150e 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import { createClient } from 'matrix-js-sdk/src/matrix'; -import React, { ReactNode } from 'react'; +import React, { Fragment, ReactNode } from 'react'; import { MatrixClient } from "matrix-js-sdk/src/client"; import classNames from "classnames"; import { logger } from "matrix-js-sdk/src/logger"; @@ -25,6 +25,7 @@ import { messageForResourceLimitError } from '../../../utils/ErrorUtils'; import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils"; import * as Lifecycle from '../../../Lifecycle'; import { IMatrixClientCreds, MatrixClientPeg } from "../../../MatrixClientPeg"; +import { AuthHeaderDisplay, AuthHeaderProvider } from "./AuthHeaderContext"; import AuthPage from "../../views/auth/AuthPage"; import Login, { ISSOFlow } from "../../../Login"; import dis from "../../../dispatcher/dispatcher"; @@ -619,28 +620,37 @@ export default class Registration extends React.Component { { regDoneText } ; } else { - body =
-

{ _t('Create account') }

- { errorText } - { serverDeadSection } - - { this.renderRegisterComponent() } - { goBack } - { signIn } -
; + body = +
+ } + > + { errorText } + { serverDeadSection } + + { this.renderRegisterComponent() } +
+
+ { goBack } + { signIn } +
+ ; } return ( - - { body } - + + + { body } + + ); } diff --git a/src/components/views/auth/AuthBody.tsx b/src/components/views/auth/AuthBody.tsx index 4532ceeaf44..f81e706d103 100644 --- a/src/components/views/auth/AuthBody.tsx +++ b/src/components/views/auth/AuthBody.tsx @@ -14,12 +14,15 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from 'react'; +import classNames from "classnames"; +import React, { PropsWithChildren } from 'react'; -export default class AuthBody extends React.PureComponent { - public render(): React.ReactNode { - return
- { this.props.children } -
; - } +interface Props { + flex?: boolean; +} + +export default function AuthBody({ flex, children }: PropsWithChildren) { + return
+ { children } +
; } diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 11a28d1e05d..0e7b4538ea4 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ChangeEvent, createRef, FormEvent, MouseEvent } from 'react'; +import React, { ChangeEvent, createRef, FormEvent, Fragment, MouseEvent, ReactNode } from 'react'; import classNames from 'classnames'; import { MatrixClient } from "matrix-js-sdk/src/client"; import { AuthType, IAuthDict, IInputs, IStageStatus } from 'matrix-js-sdk/src/interactive-auth'; @@ -22,11 +22,13 @@ import { logger } from "matrix-js-sdk/src/logger"; import { _t } from '../../../languageHandler'; import SettingsStore from "../../../settings/SettingsStore"; +import { AuthHeader } from "../../structures/auth/AuthHeaderContext"; import AccessibleButton from "../elements/AccessibleButton"; import Spinner from "../elements/Spinner"; import { LocalisedPolicy, Policies } from '../../../Terms'; import Field from '../elements/Field'; import CaptchaForm from "./CaptchaForm"; +import EmailPromptIcon from '../../../../res/img/element-icons/email-prompt.svg'; /* This file contains a collection of components which are used by the * InteractiveAuth to prompt the user to enter the information needed @@ -45,6 +47,9 @@ import CaptchaForm from "./CaptchaForm"; * stageParams: params from the server for the stage being attempted * errorText: error message from a previous attempt to authenticate * submitAuthDict: a function which will be called with the new auth dict + * serverPicker: the UI element allowing you to choose which server to + * authenticate against. In certain stages of the flow, it may + * make sense to avoid showing it. * busy: a boolean indicating whether the auth logic is doing something * the user needs to wait for. * inputs: Object of inputs provided by the user, as in js-sdk @@ -82,10 +87,12 @@ interface IAuthEntryProps { authSessionId: string; errorText?: string; errorCode?: string; + serverPicker?: ReactNode; // Is the auth logic currently waiting for something to happen? busy?: boolean; onPhaseChange: (phase: number) => void; submitAuthDict: (auth: IAuthDict) => void; + requestEmailToken?: () => Promise; } interface IPasswordAuthEntryState { @@ -159,24 +166,27 @@ export class PasswordAuthEntry extends React.Component -

{ _t("Confirm your identity by entering your account password below.") }

-
- - { errorSection } -
- { submitButtonOrSpinner } -
- - + + { this.props.serverPicker } +
+

{ _t("Confirm your identity by entering your account password below.") }

+
+ + { errorSection } +
+ { submitButtonOrSpinner } +
+ +
+ ); } } @@ -205,7 +215,12 @@ export class RecaptchaAuthEntry extends React.Component; + return ( + + { this.props.serverPicker } + + + ); } let errorText = this.props.errorText; @@ -230,12 +245,15 @@ export class RecaptchaAuthEntry extends React.Component - - { errorSection } - + + { this.props.serverPicker } +
+ + { errorSection } +
+ ); } } @@ -349,7 +367,12 @@ export class TermsAuthEntry extends React.Component; + return ( + + { this.props.serverPicker } + + + ); } const checkboxes = []; @@ -386,12 +409,15 @@ export class TermsAuthEntry extends React.Component -

{ _t("Please review and accept the policies of this homeserver:") }

- { checkboxes } - { errorSection } - { submitButton } - + + { this.props.serverPicker } +
+

{ _t("Please review and accept the policies of this homeserver:") }

+ { checkboxes } + { errorSection } + { submitButton } +
+ ); } } @@ -405,9 +431,24 @@ interface IEmailIdentityAuthEntryProps extends IAuthEntryProps { }; } -export class EmailIdentityAuthEntry extends React.Component { +interface IEmailIdentityAuthEntryState { + requested: boolean; + requesting: boolean; +} + +export class EmailIdentityAuthEntry extends + React.Component { static LOGIN_TYPE = AuthType.Email; + constructor(props: IEmailIdentityAuthEntryProps) { + super(props); + + this.state = { + requested: false, + requesting: false, + }; + } + componentDidMount() { this.props.onPhaseChange(DEFAULT_PHASE); } @@ -440,11 +481,54 @@ export class EmailIdentityAuthEntry extends React.Component -

{ _t("A confirmation email has been sent to %(emailAddress)s", + } + hideServerPicker={true} + /> +

{ _t("To create your account, open the link in the email we just sent to %(emailAddress)s.", { emailAddress: { this.props.inputs.emailAddress } }, + ) }

+ { this.state.requesting ? ( +

{ _t("Did not receive it? Resend it", {}, { + a: (text: string) => + null} + disabled + >{ text } + + , + }) }

+ ) : this.state.requested ? ( +

{ _t("Did not receive it? Requested", {}, { + a: (text: string) => null} + disabled + >{ text }, + }) }

+ ) : ( +

{ _t("Did not receive it? Resend it", {}, { + a: (text: string) => { + this.setState({ requesting: true }); + try { + await this.props.requestEmailToken(); + } catch (e) { + logger.warn("Email token request failed: ", e); + } finally { + this.setState({ requested: true, requesting: false }); + } + }} + >{ text }, + }) }

) } -

-

{ _t("Open the link in the email to continue registration.") }

{ errorSection } ); @@ -560,7 +644,12 @@ export class MsisdnAuthEntry extends React.Component; + return ( + + { this.props.serverPicker } + + + ); } else { const enableSubmit = Boolean(this.state.token); const submitClasses = classNames({ @@ -576,31 +665,34 @@ export class MsisdnAuthEntry extends React.Component -

{ _t("A text message has been sent to %(msisdn)s", - { msisdn: { this.msisdn } }, - ) } -

-

{ _t("Please enter the code it contains:") }

-
-
- -
- -
- { errorSection } + + { this.props.serverPicker } +
+

{ _t("A text message has been sent to %(msisdn)s", + { msisdn: { this.msisdn } }, + ) } +

+

{ _t("Please enter the code it contains:") }

+
+
+ +
+ +
+ { errorSection } +
-
+ ); } } @@ -726,13 +818,16 @@ export class SSOAuthEntry extends React.Component - { errorSection } -
- { cancelButton } - { continueButton } -
- ; + return ( + + { this.props.serverPicker } + { errorSection } +
+ { cancelButton } + { continueButton } +
+ + ); } } @@ -796,12 +891,15 @@ export class FallbackAuthEntry extends React.Component { ); } return ( -
- { - _t("Start authentication") - } - { errorSection } -
+ + { this.props.serverPicker } +
+ { + _t("Start authentication") + } + { errorSection } +
+ ); } } @@ -814,9 +912,11 @@ export interface IStageComponentProps extends IAuthEntryProps { showContinue?: boolean; continueText?: string; continueKind?: string; + serverPicker?: ReactNode; fail?(e: Error): void; setEmailSid?(sid: string): void; onCancel?(): void; + requestEmailToken?(): Promise; } export interface IStageComponent extends React.ComponentClass> { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 15df64eeec8..c8c6ecfe5c6 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2976,8 +2976,11 @@ "Missing captcha public key in homeserver configuration. Please report this to your homeserver administrator.": "Missing captcha public key in homeserver configuration. Please report this to your homeserver administrator.", "Please review and accept all of the homeserver's policies": "Please review and accept all of the homeserver's policies", "Please review and accept the policies of this homeserver:": "Please review and accept the policies of this homeserver:", - "A confirmation email has been sent to %(emailAddress)s": "A confirmation email has been sent to %(emailAddress)s", - "Open the link in the email to continue registration.": "Open the link in the email to continue registration.", + "Check your email to continue": "Check your email to continue", + "Unread email icon": "Unread email icon", + "To create your account, open the link in the email we just sent to %(emailAddress)s.": "To create your account, open the link in the email we just sent to %(emailAddress)s.", + "Did not receive it? Resend it": "Did not receive it? Resend it", + "Did not receive it? Requested": "Did not receive it? Requested", "Token incorrect": "Token incorrect", "A text message has been sent to %(msisdn)s": "A text message has been sent to %(msisdn)s", "Please enter the code it contains:": "Please enter the code it contains:", From efafb0db3eaa87a5224aa41bc84b6c3b03426866 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 11 May 2022 14:10:54 +0200 Subject: [PATCH 02/16] fix: add copyright header --- res/css/structures/auth/_Registration.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/res/css/structures/auth/_Registration.scss b/res/css/structures/auth/_Registration.scss index 9f37ec0180e..b415e78f107 100644 --- a/res/css/structures/auth/_Registration.scss +++ b/res/css/structures/auth/_Registration.scss @@ -1,3 +1,19 @@ +/* +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. +*/ + .mx_Register_mainContent { display: flex; flex-direction: column; From 799f050b7d6629a4a8760d0f45bbb43ff1f0bd2b Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 11 May 2022 14:33:40 +0200 Subject: [PATCH 03/16] fix: remove unneeded vestigial code for serverPicker passthrough --- src/components/structures/InteractiveAuth.tsx | 4 +- .../auth/InteractiveAuthEntryComponents.tsx | 158 +++++++----------- 2 files changed, 65 insertions(+), 97 deletions(-) diff --git a/src/components/structures/InteractiveAuth.tsx b/src/components/structures/InteractiveAuth.tsx index 0c1b326a802..b42e65d57fb 100644 --- a/src/components/structures/InteractiveAuth.tsx +++ b/src/components/structures/InteractiveAuth.tsx @@ -23,7 +23,7 @@ import { IStageStatus, } from "matrix-js-sdk/src/interactive-auth"; import { MatrixClient } from "matrix-js-sdk/src/client"; -import React, { createRef, ReactNode } from 'react'; +import React, { createRef } from 'react'; import { logger } from "matrix-js-sdk/src/logger"; import getEntryComponentForLoginType, { IStageComponent } from '../views/auth/InteractiveAuthEntryComponents'; @@ -52,7 +52,6 @@ interface IProps { // continueText and continueKind are passed straight through to the AuthEntryComponent. continueText?: string; continueKind?: string; - serverPicker?: ReactNode; // callback makeRequest(auth: IAuthData): Promise; // callback called when the auth process has finished, @@ -274,7 +273,6 @@ export default class InteractiveAuthComponent extends React.Component ); } diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 0e7b4538ea4..492b1348e3c 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ChangeEvent, createRef, FormEvent, Fragment, MouseEvent, ReactNode } from 'react'; +import React, { ChangeEvent, createRef, FormEvent, Fragment, MouseEvent } from 'react'; import classNames from 'classnames'; import { MatrixClient } from "matrix-js-sdk/src/client"; import { AuthType, IAuthDict, IInputs, IStageStatus } from 'matrix-js-sdk/src/interactive-auth'; @@ -47,9 +47,6 @@ import EmailPromptIcon from '../../../../res/img/element-icons/email-prompt.svg' * stageParams: params from the server for the stage being attempted * errorText: error message from a previous attempt to authenticate * submitAuthDict: a function which will be called with the new auth dict - * serverPicker: the UI element allowing you to choose which server to - * authenticate against. In certain stages of the flow, it may - * make sense to avoid showing it. * busy: a boolean indicating whether the auth logic is doing something * the user needs to wait for. * inputs: Object of inputs provided by the user, as in js-sdk @@ -87,7 +84,6 @@ interface IAuthEntryProps { authSessionId: string; errorText?: string; errorCode?: string; - serverPicker?: ReactNode; // Is the auth logic currently waiting for something to happen? busy?: boolean; onPhaseChange: (phase: number) => void; @@ -166,27 +162,24 @@ export class PasswordAuthEntry extends React.Component - { this.props.serverPicker } -
-

{ _t("Confirm your identity by entering your account password below.") }

-
- - { errorSection } -
- { submitButtonOrSpinner } -
- -
- +
+

{ _t("Confirm your identity by entering your account password below.") }

+
+ + { errorSection } +
+ { submitButtonOrSpinner } +
+ +
); } } @@ -216,10 +209,7 @@ export class RecaptchaAuthEntry extends React.Component - { this.props.serverPicker } - - + ); } @@ -245,15 +235,12 @@ export class RecaptchaAuthEntry extends React.Component - { this.props.serverPicker } -
- - { errorSection } -
- +
+ + { errorSection } +
); } } @@ -368,10 +355,7 @@ export class TermsAuthEntry extends React.Component - { this.props.serverPicker } - - + ); } @@ -409,15 +393,12 @@ export class TermsAuthEntry extends React.Component - { this.props.serverPicker } -
-

{ _t("Please review and accept the policies of this homeserver:") }

- { checkboxes } - { errorSection } - { submitButton } -
- +
+

{ _t("Please review and accept the policies of this homeserver:") }

+ { checkboxes } + { errorSection } + { submitButton } +
); } } @@ -645,10 +626,7 @@ export class MsisdnAuthEntry extends React.Component - { this.props.serverPicker } - - + ); } else { const enableSubmit = Boolean(this.state.token); @@ -665,34 +643,31 @@ export class MsisdnAuthEntry extends React.Component - { this.props.serverPicker } -
-

{ _t("A text message has been sent to %(msisdn)s", - { msisdn: { this.msisdn } }, - ) } -

-

{ _t("Please enter the code it contains:") }

-
-
- -
- -
- { errorSection } -
+
+

{ _t("A text message has been sent to %(msisdn)s", + { msisdn: { this.msisdn } }, + ) } +

+

{ _t("Please enter the code it contains:") }

+
+
+ +
+ +
+ { errorSection }
- +
); } } @@ -820,7 +795,6 @@ export class SSOAuthEntry extends React.Component - { this.props.serverPicker } { errorSection }
{ cancelButton } @@ -891,15 +865,12 @@ export class FallbackAuthEntry extends React.Component { ); } return ( - - { this.props.serverPicker } -
- { - _t("Start authentication") - } - { errorSection } -
- +
+ { + _t("Start authentication") + } + { errorSection } +
); } } @@ -912,7 +883,6 @@ export interface IStageComponentProps extends IAuthEntryProps { showContinue?: boolean; continueText?: string; continueKind?: string; - serverPicker?: ReactNode; fail?(e: Error): void; setEmailSid?(sid: string): void; onCancel?(): void; From cdfaefd835b942ea638c5a9bf5b7827ffdb21244 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 11 May 2022 14:37:13 +0200 Subject: [PATCH 04/16] fix: handle undefined case for requestEmailToken --- src/components/views/auth/InteractiveAuthEntryComponents.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 492b1348e3c..ee3796adb00 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -500,7 +500,7 @@ export class EmailIdentityAuthEntry extends onClick={async () => { this.setState({ requesting: true }); try { - await this.props.requestEmailToken(); + await this.props.requestEmailToken?.(); } catch (e) { logger.warn("Email token request failed: ", e); } finally { From 4fefd5615734cc4e2ccefdd2eb10fa0836e6cac8 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 11 May 2022 14:38:04 +0200 Subject: [PATCH 05/16] fix: no need to treat constant string as variable --- src/components/views/auth/AuthBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/auth/AuthBody.tsx b/src/components/views/auth/AuthBody.tsx index f81e706d103..cacab416f64 100644 --- a/src/components/views/auth/AuthBody.tsx +++ b/src/components/views/auth/AuthBody.tsx @@ -22,7 +22,7 @@ interface Props { } export default function AuthBody({ flex, children }: PropsWithChildren) { - return
+ return
{ children }
; } From 06f8854e8ccb47cc5b1cfb2f361a7600edebbdb6 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 11 May 2022 14:53:08 +0200 Subject: [PATCH 06/16] fix: cleanly split reducer and context --- .../structures/auth/AuthHeaderContext.tsx | 107 ------------------ .../structures/auth/Registration.tsx | 3 +- .../auth/header/AuthHeaderContext.tsx | 26 +++++ .../auth/header/AuthHeaderDisplay.tsx | 41 +++++++ .../auth/header/AuthHeaderModifier.tsx | 39 +++++++ .../auth/header/AuthHeaderProvider.tsx | 52 +++++++++ .../auth/InteractiveAuthEntryComponents.tsx | 4 +- 7 files changed, 162 insertions(+), 110 deletions(-) delete mode 100644 src/components/structures/auth/AuthHeaderContext.tsx create mode 100644 src/components/structures/auth/header/AuthHeaderContext.tsx create mode 100644 src/components/structures/auth/header/AuthHeaderDisplay.tsx create mode 100644 src/components/structures/auth/header/AuthHeaderModifier.tsx create mode 100644 src/components/structures/auth/header/AuthHeaderProvider.tsx diff --git a/src/components/structures/auth/AuthHeaderContext.tsx b/src/components/structures/auth/AuthHeaderContext.tsx deleted file mode 100644 index ac034ee170c..00000000000 --- a/src/components/structures/auth/AuthHeaderContext.tsx +++ /dev/null @@ -1,107 +0,0 @@ -/* -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 { isEqual } from "lodash"; -import React, { - createContext, Dispatch, - Fragment, - PropsWithChildren, - ReactNode, - Reducer, - ReducerState, - useContext, - useEffect, - useReducer, -} from "react"; - -interface AuthHeaderContextValue { - title: ReactNode; - icon?: ReactNode; - hideServerPicker?: boolean; -} - -enum AuthHeaderContextActionType { - ADD, - REMOVE -} - -interface AuthHeaderContextAction { - type: AuthHeaderContextActionType; - value: AuthHeaderContextValue; -} - -type AuthContextReducer = Reducer; - -interface AuthHeaderContextType { - state: ReducerState; - dispatch: Dispatch; -} - -const AuthHeaderContext = createContext(undefined); - -export function AuthHeader(content: AuthHeaderContextValue) { - const context = useContext(AuthHeaderContext); - const dispatch = context ? context.dispatch : null; - useEffect(() => { - if (!dispatch) { - return; - } - dispatch({ type: AuthHeaderContextActionType.ADD, value: content }); - return () => dispatch({ type: AuthHeaderContextActionType.REMOVE, value: content }); - }, [content, dispatch]); - return null; -} - -interface Props { - title: ReactNode; - icon?: ReactNode; - serverPicker: ReactNode; -} - -export function AuthHeaderDisplay({ title, icon, serverPicker, children }: PropsWithChildren) { - const context = useContext(AuthHeaderContext); - if (!context) { - return null; - } - const current = context.state.length ? context.state[0] : null; - return ( - - { current?.icon ?? icon } -

{ current?.title ?? title }

- { children } - { current?.hideServerPicker !== true && serverPicker } - - ); -} - -export function AuthHeaderProvider({ children }: PropsWithChildren<{}>) { - const [state, dispatch] = useReducer( - (state: AuthHeaderContextValue[], action: AuthHeaderContextAction) => { - switch (action.type) { - case AuthHeaderContextActionType.ADD: - return [action.value, ...state]; - case AuthHeaderContextActionType.REMOVE: - return (state.length && isEqual(state[0], action.value)) ? state.slice(1) : state; - } - }, - [] as AuthHeaderContextValue[], - ); - return ( - - { children } - - ); -} diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index c9af766150e..7515a4f0d90 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -25,7 +25,6 @@ import { messageForResourceLimitError } from '../../../utils/ErrorUtils'; import AutoDiscoveryUtils, { ValidatedServerConfig } from "../../../utils/AutoDiscoveryUtils"; import * as Lifecycle from '../../../Lifecycle'; import { IMatrixClientCreds, MatrixClientPeg } from "../../../MatrixClientPeg"; -import { AuthHeaderDisplay, AuthHeaderProvider } from "./AuthHeaderContext"; import AuthPage from "../../views/auth/AuthPage"; import Login, { ISSOFlow } from "../../../Login"; import dis from "../../../dispatcher/dispatcher"; @@ -37,6 +36,8 @@ import AuthBody from "../../views/auth/AuthBody"; import AuthHeader from "../../views/auth/AuthHeader"; import InteractiveAuth from "../InteractiveAuth"; import Spinner from "../../views/elements/Spinner"; +import { AuthHeaderDisplay } from './header/AuthHeaderDisplay'; +import { AuthHeaderProvider } from './header/AuthHeaderProvider'; interface IProps { serverConfig: ValidatedServerConfig; diff --git a/src/components/structures/auth/header/AuthHeaderContext.tsx b/src/components/structures/auth/header/AuthHeaderContext.tsx new file mode 100644 index 00000000000..347b26252dd --- /dev/null +++ b/src/components/structures/auth/header/AuthHeaderContext.tsx @@ -0,0 +1,26 @@ +/* +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 { createContext, Dispatch, ReducerAction, ReducerState } from "react"; + +import type { AuthHeaderReducer } from "./AuthHeaderProvider"; + +interface AuthHeaderContextType { + state: ReducerState; + dispatch: Dispatch>; +} + +export const AuthHeaderContext = createContext(undefined); diff --git a/src/components/structures/auth/header/AuthHeaderDisplay.tsx b/src/components/structures/auth/header/AuthHeaderDisplay.tsx new file mode 100644 index 00000000000..fd5b65a1ebd --- /dev/null +++ b/src/components/structures/auth/header/AuthHeaderDisplay.tsx @@ -0,0 +1,41 @@ +/* +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, { Fragment, PropsWithChildren, ReactNode, useContext } from "react"; + +import { AuthHeaderContext } from "./AuthHeaderContext"; + +interface Props { + title: ReactNode; + icon?: ReactNode; + serverPicker: ReactNode; +} + +export function AuthHeaderDisplay({ title, icon, serverPicker, children }: PropsWithChildren) { + const context = useContext(AuthHeaderContext); + if (!context) { + return null; + } + const current = context.state.length ? context.state[0] : null; + return ( + + { current?.icon ?? icon } +

{ current?.title ?? title }

+ { children } + { current?.hideServerPicker !== true && serverPicker } + + ); +} diff --git a/src/components/structures/auth/header/AuthHeaderModifier.tsx b/src/components/structures/auth/header/AuthHeaderModifier.tsx new file mode 100644 index 00000000000..a1289a9c705 --- /dev/null +++ b/src/components/structures/auth/header/AuthHeaderModifier.tsx @@ -0,0 +1,39 @@ +/* +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 { ReactNode, useContext, useEffect } from "react"; + +import { AuthHeaderContext } from "./AuthHeaderContext"; +import { AuthHeaderActionType } from "./AuthHeaderProvider"; + +interface Props { + title: ReactNode; + icon?: ReactNode; + hideServerPicker?: boolean; +} + +export function AuthHeaderModifier(content: Props) { + const context = useContext(AuthHeaderContext); + const dispatch = context ? context.dispatch : null; + useEffect(() => { + if (!dispatch) { + return; + } + dispatch({ type: AuthHeaderActionType.Add, value: content }); + return () => dispatch({ type: AuthHeaderActionType.Remove, value: content }); + }, [content, dispatch]); + return null; +} diff --git a/src/components/structures/auth/header/AuthHeaderProvider.tsx b/src/components/structures/auth/header/AuthHeaderProvider.tsx new file mode 100644 index 00000000000..6c2bc5a7509 --- /dev/null +++ b/src/components/structures/auth/header/AuthHeaderProvider.tsx @@ -0,0 +1,52 @@ +/* +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 { isEqual } from "lodash"; +import React, { ComponentProps, PropsWithChildren, Reducer, useReducer } from "react"; + +import { AuthHeaderContext } from "./AuthHeaderContext"; +import { AuthHeaderModifier } from "./AuthHeaderModifier"; + +export enum AuthHeaderActionType { + Add, + Remove +} + +interface AuthHeaderAction { + type: AuthHeaderActionType; + value: ComponentProps; +} + +export type AuthHeaderReducer = Reducer[], AuthHeaderAction>; + +export function AuthHeaderProvider({ children }: PropsWithChildren<{}>) { + const [state, dispatch] = useReducer( + (state: ComponentProps[], action: AuthHeaderAction) => { + switch (action.type) { + case AuthHeaderActionType.Add: + return [action.value, ...state]; + case AuthHeaderActionType.Remove: + return (state.length && isEqual(state[0], action.value)) ? state.slice(1) : state; + } + }, + [] as ComponentProps[], + ); + return ( + + { children } + + ); +} diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index ee3796adb00..9ce0177e8ae 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -22,7 +22,7 @@ import { logger } from "matrix-js-sdk/src/logger"; import { _t } from '../../../languageHandler'; import SettingsStore from "../../../settings/SettingsStore"; -import { AuthHeader } from "../../structures/auth/AuthHeaderContext"; +import { AuthHeaderModifier } from "../../structures/auth/header/AuthHeaderModifier"; import AccessibleButton from "../elements/AccessibleButton"; import Spinner from "../elements/Spinner"; import { LocalisedPolicy, Policies } from '../../../Terms'; @@ -462,7 +462,7 @@ export class EmailIdentityAuthEntry extends } else { return (
- Date: Wed, 11 May 2022 18:35:43 +0200 Subject: [PATCH 07/16] Update src/components/structures/auth/header/AuthHeaderModifier.tsx Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/auth/header/AuthHeaderModifier.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/auth/header/AuthHeaderModifier.tsx b/src/components/structures/auth/header/AuthHeaderModifier.tsx index a1289a9c705..0ea97c0d429 100644 --- a/src/components/structures/auth/header/AuthHeaderModifier.tsx +++ b/src/components/structures/auth/header/AuthHeaderModifier.tsx @@ -25,7 +25,7 @@ interface Props { hideServerPicker?: boolean; } -export function AuthHeaderModifier(content: Props) { +export function AuthHeaderModifier(props: Props) { const context = useContext(AuthHeaderContext); const dispatch = context ? context.dispatch : null; useEffect(() => { From 8a6e966f4e056396e7e02da6d50ca7e2d99d0f16 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Wed, 11 May 2022 18:36:59 +0200 Subject: [PATCH 08/16] Update src/components/structures/auth/header/AuthHeaderModifier.tsx --- .../structures/auth/header/AuthHeaderModifier.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/structures/auth/header/AuthHeaderModifier.tsx b/src/components/structures/auth/header/AuthHeaderModifier.tsx index 0ea97c0d429..a5646ff4f1f 100644 --- a/src/components/structures/auth/header/AuthHeaderModifier.tsx +++ b/src/components/structures/auth/header/AuthHeaderModifier.tsx @@ -32,8 +32,8 @@ export function AuthHeaderModifier(props: Props) { if (!dispatch) { return; } - dispatch({ type: AuthHeaderActionType.Add, value: content }); - return () => dispatch({ type: AuthHeaderActionType.Remove, value: content }); - }, [content, dispatch]); + dispatch({ type: AuthHeaderActionType.Add, value: props }); + return () => dispatch({ type: AuthHeaderActionType.Remove, value: props }); + }, [props, dispatch]); return null; } From c649de9a8c44dde6139bb80388e24ef6768a94fe Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 12 May 2022 14:28:11 +0200 Subject: [PATCH 09/16] fix: implement re-requesting and changing tooltip (as per design) --- .../auth/InteractiveAuthEntryComponents.tsx | 25 +++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 9ce0177e8ae..482978f33d4 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -24,6 +24,7 @@ import { _t } from '../../../languageHandler'; import SettingsStore from "../../../settings/SettingsStore"; import { AuthHeaderModifier } from "../../structures/auth/header/AuthHeaderModifier"; import AccessibleButton from "../elements/AccessibleButton"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import Spinner from "../elements/Spinner"; import { LocalisedPolicy, Policies } from '../../../Terms'; import Field from '../elements/Field'; @@ -486,17 +487,27 @@ export class EmailIdentityAuthEntry extends , }) }

) : this.state.requested ? ( -

{ _t("Did not receive it? Requested", {}, { - a: (text: string) => { _t("Did not receive it? Resend it", {}, { + a: (text: string) => null} - disabled - >{ text }, + title={_t("Resent!")} + onClick={async () => { + this.setState({ requesting: true }); + try { + await this.props.requestEmailToken?.(); + } catch (e) { + logger.warn("Email token request failed: ", e); + } finally { + this.setState({ requested: true, requesting: false }); + } + }} + >{ text }, }) }

) : (

{ _t("Did not receive it? Resend it", {}, { - a: (text: string) => { this.setState({ requesting: true }); try { @@ -507,7 +518,7 @@ export class EmailIdentityAuthEntry extends this.setState({ requested: true, requesting: false }); } }} - >{ text }, + >{ text }, }) }

) } { errorSection } From d6479ab7393e86ef4d73bac7918eadafdfe73167 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 12 May 2022 15:38:58 +0200 Subject: [PATCH 10/16] fix: correct button width on safari --- res/css/views/auth/_AuthBody.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index 487e08fe440..203e3ef61f1 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/res/css/views/auth/_AuthBody.scss @@ -144,7 +144,6 @@ limitations under the License. .mx_AuthBody_changeFlow { display: block; text-align: center; - width: 100%; > a { font-weight: $font-semi-bold; From 53af7576f688e89a921ce0472277144ed3d327a3 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 12 May 2022 15:58:02 +0200 Subject: [PATCH 11/16] fix: update i18n --- src/i18n/strings/en_EN.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c8c6ecfe5c6..90737ac0202 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2980,7 +2980,7 @@ "Unread email icon": "Unread email icon", "To create your account, open the link in the email we just sent to %(emailAddress)s.": "To create your account, open the link in the email we just sent to %(emailAddress)s.", "Did not receive it? Resend it": "Did not receive it? Resend it", - "Did not receive it? Requested": "Did not receive it? Requested", + "Resent!": "Resent!", "Token incorrect": "Token incorrect", "A text message has been sent to %(msisdn)s": "A text message has been sent to %(msisdn)s", "Please enter the code it contains:": "Please enter the code it contains:", From 056f87c799feaddc725aa6620c91867d1544a1a7 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Fri, 13 May 2022 10:47:26 +0200 Subject: [PATCH 12/16] fix: improve positioning of spinner and tooltip --- .../auth/_InteractiveAuthEntryComponents.scss | 12 ++++++++++++ res/css/views/elements/_Tooltip.scss | 5 +++++ .../auth/InteractiveAuthEntryComponents.tsx | 16 ++++++++++------ 3 files changed, 27 insertions(+), 6 deletions(-) diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss index 6ca7f5d9cfe..d839c12fa95 100644 --- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss +++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss @@ -74,3 +74,15 @@ limitations under the License. margin-left: 5px; } } + +.mx_InteractiveAuthEntryComponents_emailWrapper { + .mx_AccessibleButton_kind_link_inline { + display: inline-block !important; + + .mx_Spinner { + display: inline-flex !important; + width: auto !important; + vertical-align: middle !important; + } + } +} diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index 40073f8f64f..893aa605f19 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -76,6 +76,11 @@ limitations under the License. border: 0; text-align: center; + &:not(.mx_Tooltip_noMargin) { + margin-left: 6px; + margin-right: 6px; + } + .mx_Tooltip_chevron { display: none; } diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 482978f33d4..06296351dfb 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -14,22 +14,23 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { ChangeEvent, createRef, FormEvent, Fragment, MouseEvent } from 'react'; import classNames from 'classnames'; import { MatrixClient } from "matrix-js-sdk/src/client"; import { AuthType, IAuthDict, IInputs, IStageStatus } from 'matrix-js-sdk/src/interactive-auth'; import { logger } from "matrix-js-sdk/src/logger"; +import React, { ChangeEvent, createRef, FormEvent, Fragment, MouseEvent } from 'react'; +import EmailPromptIcon from '../../../../res/img/element-icons/email-prompt.svg'; import { _t } from '../../../languageHandler'; import SettingsStore from "../../../settings/SettingsStore"; +import { LocalisedPolicy, Policies } from '../../../Terms'; import { AuthHeaderModifier } from "../../structures/auth/header/AuthHeaderModifier"; import AccessibleButton from "../elements/AccessibleButton"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; -import Spinner from "../elements/Spinner"; -import { LocalisedPolicy, Policies } from '../../../Terms'; import Field from '../elements/Field'; +import Spinner from "../elements/Spinner"; +import { Alignment } from "../elements/Tooltip"; import CaptchaForm from "./CaptchaForm"; -import EmailPromptIcon from '../../../../res/img/element-icons/email-prompt.svg'; /* This file contains a collection of components which are used by the * InteractiveAuth to prompt the user to enter the information needed @@ -482,8 +483,7 @@ export class EmailIdentityAuthEntry extends kind='link_inline' onClick={() => null} disabled - >{ text } - + >{ text } , }) }

) : this.state.requested ? ( @@ -491,6 +491,8 @@ export class EmailIdentityAuthEntry extends a: (text: string) => { this.setState({ requesting: true }); try { @@ -508,6 +510,8 @@ export class EmailIdentityAuthEntry extends a: (text: string) => { this.setState({ requesting: true }); try { From 4e07efb732e854b9638f9fd4a037e9f68493c318 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Fri, 13 May 2022 10:47:58 +0200 Subject: [PATCH 13/16] fix: reset tooltip after resending --- src/components/views/auth/InteractiveAuthEntryComponents.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 06296351dfb..1bcd9e1a056 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -493,6 +493,7 @@ export class EmailIdentityAuthEntry extends title={_t("Resent!")} alignment={Alignment.TopCenter} tooltipClassName="mx_Tooltip_noMargin" + onHideTooltip={() => this.setState({ requested: false })} onClick={async () => { this.setState({ requesting: true }); try { From aad60a8ee74054b33d7eacb01d1399f5dd70c13e Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Fri, 13 May 2022 11:18:44 +0200 Subject: [PATCH 14/16] fix: correct tooltip positioning --- src/components/views/auth/InteractiveAuthEntryComponents.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 1bcd9e1a056..ac23ce2baba 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -491,7 +491,7 @@ export class EmailIdentityAuthEntry extends a: (text: string) => this.setState({ requested: false })} onClick={async () => { @@ -511,7 +511,7 @@ export class EmailIdentityAuthEntry extends a: (text: string) => { this.setState({ requesting: true }); From 12ecc97668136e4caeebd6dab4ce942047d6f3dc Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Fri, 13 May 2022 15:40:22 +0200 Subject: [PATCH 15/16] fix: update tooltip in-place --- .../auth/InteractiveAuthEntryComponents.tsx | 63 +++++++------------ 1 file changed, 23 insertions(+), 40 deletions(-) diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index ac23ce2baba..97c45999bdf 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -486,46 +486,29 @@ export class EmailIdentityAuthEntry extends >{ text } , }) }

- ) : this.state.requested ? ( -

{ _t("Did not receive it? Resend it", {}, { - a: (text: string) => this.setState({ requested: false })} - onClick={async () => { - this.setState({ requesting: true }); - try { - await this.props.requestEmailToken?.(); - } catch (e) { - logger.warn("Email token request failed: ", e); - } finally { - this.setState({ requested: true, requesting: false }); - } - }} - >{ text }, - }) }

- ) : ( -

{ _t("Did not receive it? Resend it", {}, { - a: (text: string) => { - this.setState({ requesting: true }); - try { - await this.props.requestEmailToken?.(); - } catch (e) { - logger.warn("Email token request failed: ", e); - } finally { - this.setState({ requested: true, requesting: false }); - } - }} - >{ text }, - }) }

- ) } + ) :

{ _t("Did not receive it? Resend it", {}, { + a: (text: string) => this.setState({ requested: false }) + : undefined} + onClick={async () => { + this.setState({ requesting: true }); + try { + await this.props.requestEmailToken?.(); + } catch (e) { + logger.warn("Email token request failed: ", e); + } finally { + this.setState({ requested: true, requesting: false }); + } + }} + >{ text }, + }) }

} { errorSection }
); From 6d7eef787fa8ae3b3db27091ea4e276024e7007a Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Fri, 13 May 2022 16:03:04 +0200 Subject: [PATCH 16/16] fix: add comments to spinner overrides --- res/css/views/auth/_InteractiveAuthEntryComponents.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/res/css/views/auth/_InteractiveAuthEntryComponents.scss b/res/css/views/auth/_InteractiveAuthEntryComponents.scss index d839c12fa95..43e0062eb3d 100644 --- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss +++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss @@ -76,12 +76,18 @@ limitations under the License. } .mx_InteractiveAuthEntryComponents_emailWrapper { + // "Resend" button/link .mx_AccessibleButton_kind_link_inline { + // We need this to be an inline-block so positioning works correctly display: inline-block !important; + // Spinner as end adornment of the "resend" button/link .mx_Spinner { + // Spinners are usually block elements, but we need it as inline element display: inline-flex !important; + // Spinners by default fill all available width, but we don't want that width: auto !important; + // We need to center the spinner relative to the button/link vertical-align: middle !important; } }