Merge pull request #42 from element-hq/langleyd/mobile_registeration

Add mobile registration
This commit is contained in:
David Baker 2024-09-16 15:39:12 +01:00 committed by GitHub
commit 74885c942f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 94 additions and 22 deletions

View file

@ -94,6 +94,7 @@
@import "./structures/auth/_ConfirmSessionLockTheftView.pcss";
@import "./structures/auth/_Login.pcss";
@import "./structures/auth/_LoginSplashView.pcss";
@import "./structures/auth/_MobileRegistration.pcss";
@import "./structures/auth/_Registration.pcss";
@import "./structures/auth/_SessionLockStolenView.pcss";
@import "./structures/auth/_SetupEncryptionBody.pcss";

View file

@ -0,0 +1,10 @@
/*
Copyright 2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_MobileRegister_body {
padding: 32px;
}

View file

@ -140,7 +140,7 @@ import { cleanUpDraftsIfRequired } from "../../DraftCleaner";
// legacy export
export { default as Views } from "../../Views";
const AUTH_SCREENS = ["register", "login", "forgot_password", "start_sso", "start_cas", "welcome"];
const AUTH_SCREENS = ["register", "mobile_register", "login", "forgot_password", "start_sso", "start_cas", "welcome"];
// Actions that are redirected through the onboarding process prior to being
// re-dispatched. NOTE: some actions are non-trivial and would require
@ -189,6 +189,7 @@ interface IState {
register_session_id?: string;
// eslint-disable-next-line camelcase
register_id_sid?: string;
isMobileRegistration?: boolean;
// When showing Modal dialogs we need to set aria-hidden on the root app element
// and disable it when there are no dialogs
hideToSRUsers: boolean;
@ -243,6 +244,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
currentUserId: null,
hideToSRUsers: false,
isMobileRegistration: false,
syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
resizeNotifier: new ResizeNotifier(),
@ -650,6 +652,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
case "require_registration":
startAnyRegistrationFlow(payload as any);
break;
case "start_mobile_registration":
this.startRegistration(payload.params || {}, true);
break;
case "start_registration":
if (Lifecycle.isSoftLogout()) {
this.onSoftLogout();
@ -946,19 +951,28 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
});
}
private async startRegistration(params: { [key: string]: string }): Promise<void> {
private async startRegistration(params: { [key: string]: string }, isMobileRegistration?: boolean): Promise<void> {
if (!SettingsStore.getValue(UIFeature.Registration)) {
this.showScreen("welcome");
return;
}
const isMobileRegistrationAllowed =
isMobileRegistration && SettingsStore.getValue("Registration.mobileRegistrationHelper");
const newState: Partial<IState> = {
view: Views.REGISTER,
};
// Only honour params if they are all present, otherwise we reset
// HS and IS URLs when switching to registration.
if (params.client_secret && params.session_id && params.hs_url && params.is_url && params.sid) {
if (isMobileRegistrationAllowed && params.hs_url) {
try {
const config = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(params.hs_url);
newState.serverConfig = config;
} catch (err) {
logger.warn("Failed to load hs_url param:", params.hs_url);
}
} else if (params.client_secret && params.session_id && params.hs_url && params.is_url && params.sid) {
// Only honour params if they are all present, otherwise we reset
// HS and IS URLs when switching to registration.
newState.serverConfig = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(
params.hs_url,
params.is_url,
@ -978,10 +992,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
newState.register_id_sid = params.sid;
}
newState.isMobileRegistration = isMobileRegistrationAllowed;
this.setStateForNewView(newState);
ThemeController.isLogin = true;
this.themeWatcher.recheck();
this.notifyNewScreen("register");
this.notifyNewScreen(isMobileRegistrationAllowed ? "mobile_register" : "register");
}
// switch view to the given room
@ -1721,6 +1737,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
params: params,
});
PerformanceMonitor.instance.start(PerformanceEntryNames.REGISTER);
} else if (screen === "mobile_register") {
dis.dispatch({
action: "start_mobile_registration",
params: params,
});
} else if (screen === "login") {
dis.dispatch({
action: "start_login",
@ -2080,6 +2101,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
onServerConfigChange={this.onServerConfigChange}
defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
fragmentAfterLogin={fragmentAfterLogin}
mobileRegister={this.state.isMobileRegistration}
{...this.getServerProperties()}
/>
);

View file

@ -53,6 +53,13 @@ const debuglog = (...args: any[]): void => {
}
};
export interface MobileRegistrationResponse {
user_id: string;
home_server: string;
access_token: string;
device_id: string;
}
interface IProps {
serverConfig: ValidatedServerConfig;
defaultDeviceDisplayName?: string;
@ -62,7 +69,7 @@ interface IProps {
sessionId?: string;
idSid?: string;
fragmentAfterLogin?: string;
mobileRegister?: boolean;
// Called when the user has logged in. Params:
// - object with userId, deviceId, homeserverUrl, identityServerUrl, accessToken
// - The user's password, if available and applicable (may be cached in memory
@ -410,18 +417,33 @@ export default class Registration extends React.Component<IProps, IState> {
debuglog("Registration: ui auth finished:", { hasEmail, hasAccessToken });
// dont log in if we found a session for a different user
if (hasAccessToken && !newState.differentLoggedInUserId) {
await this.props.onLoggedIn(
{
userId,
deviceId: (response as RegisterResponse).device_id!,
homeserverUrl: this.state.matrixClient.getHomeserverUrl(),
identityServerUrl: this.state.matrixClient.getIdentityServerUrl(),
accessToken,
},
this.state.formVals.password!,
);
if (this.props.mobileRegister) {
const mobileResponse: MobileRegistrationResponse = {
user_id: userId,
home_server: this.state.matrixClient.getHomeserverUrl(),
access_token: accessToken,
device_id: (response as RegisterResponse).device_id!,
};
const event = new CustomEvent<MobileRegistrationResponse>("mobileregistrationresponse", {
detail: mobileResponse,
});
window.dispatchEvent(event);
newState.busy = false;
newState.completedNoSignin = true;
} else {
await this.props.onLoggedIn(
{
userId,
deviceId: (response as RegisterResponse).device_id!,
homeserverUrl: this.state.matrixClient.getHomeserverUrl(),
identityServerUrl: this.state.matrixClient.getIdentityServerUrl(),
accessToken,
},
this.state.formVals.password!,
);
this.setupPushers();
this.setupPushers();
}
} else {
newState.busy = false;
newState.completedNoSignin = true;
@ -558,7 +580,7 @@ export default class Registration extends React.Component<IProps, IState> {
);
} else if (this.state.matrixClient && this.state.flows.length) {
let ssoSection: JSX.Element | undefined;
if (this.state.ssoFlow) {
if (!this.props.mobileRegister && this.state.ssoFlow) {
let continueWithSection;
const providers = this.state.ssoFlow.identity_providers || [];
// when there is only a single (or 0) providers we show a wide button with `Continue with X` text
@ -591,7 +613,6 @@ export default class Registration extends React.Component<IProps, IState> {
</React.Fragment>
);
}
return (
<React.Fragment>
{ssoSection}
@ -660,7 +681,9 @@ export default class Registration extends React.Component<IProps, IState> {
let body;
if (this.state.completedNoSignin) {
let regDoneText;
if (this.state.differentLoggedInUserId) {
if (this.props.mobileRegister) {
regDoneText = undefined;
} else if (this.state.differentLoggedInUserId) {
regDoneText = (
<div>
<p>
@ -717,6 +740,15 @@ export default class Registration extends React.Component<IProps, IState> {
{regDoneText}
</div>
);
} else if (this.props.mobileRegister) {
body = (
<Fragment>
<h1>{_t("auth|mobile_create_account_title", { hsName: this.props.serverConfig.hsName })}</h1>
{errorText}
{serverDeadSection}
{this.renderRegisterComponent()}
</Fragment>
);
} else {
body = (
<Fragment>
@ -746,7 +778,9 @@ export default class Registration extends React.Component<IProps, IState> {
</Fragment>
);
}
if (this.props.mobileRegister) {
return <div className="mx_MobileRegister_body">{body}</div>;
}
return (
<AuthPage>
<AuthHeader />

View file

@ -229,6 +229,7 @@
},
"misconfigured_body": "Ask your %(brand)s admin to check <a>your config</a> for incorrect or duplicate entries.",
"misconfigured_title": "Your %(brand)s is misconfigured",
"mobile_create_account_title": "You're about to create an account on %(hsName)s",
"msisdn_field_description": "Other users can invite you to rooms using your contact details",
"msisdn_field_label": "Phone",
"msisdn_field_number_invalid": "That phone number doesn't look quite right, please check and try again",

View file

@ -876,6 +876,10 @@ export const SETTINGS: { [setting: string]: ISetting } = {
supportedLevels: LEVELS_ACCOUNT_SETTINGS,
default: null,
},
"Registration.mobileRegistrationHelper": {
supportedLevels: [SettingLevel.CONFIG],
default: false,
},
"autocompleteDelay": {
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
default: 200,