Don't leave UnauthenticatedView if there was a room creation error
This commit is contained in:
parent
c13040f0b0
commit
1e5539f165
6 changed files with 52 additions and 45 deletions
|
@ -17,6 +17,7 @@ limitations under the License.
|
|||
import React, { useCallback, useRef, useState, useMemo } from "react";
|
||||
import { useHistory, useLocation, Link } from "react-router-dom";
|
||||
import { ReactComponent as Logo } from "../icons/LogoLarge.svg";
|
||||
import { useClient } from "../ClientContext";
|
||||
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
|
||||
import { Button } from "../button";
|
||||
import { defaultHomeserver, defaultHomeserverHost } from "../matrix-utils";
|
||||
|
@ -27,6 +28,7 @@ import { usePageTitle } from "../usePageTitle";
|
|||
export function LoginPage() {
|
||||
usePageTitle("Login");
|
||||
|
||||
const { setClient } = useClient();
|
||||
const [_, login] = useInteractiveLogin();
|
||||
const [homeserver, setHomeServer] = useState(defaultHomeserver);
|
||||
const usernameRef = useRef();
|
||||
|
@ -44,7 +46,9 @@ export function LoginPage() {
|
|||
setLoading(true);
|
||||
|
||||
login(homeserver, usernameRef.current.value, passwordRef.current.value)
|
||||
.then(() => {
|
||||
.then(([client, session]) => {
|
||||
setClient(client, session);
|
||||
|
||||
if (location.state && location.state.from) {
|
||||
history.push(location.state.from);
|
||||
} else {
|
||||
|
|
|
@ -31,7 +31,8 @@ import { usePageTitle } from "../usePageTitle";
|
|||
export function RegisterPage() {
|
||||
usePageTitle("Register");
|
||||
|
||||
const { loading, isAuthenticated, isPasswordlessUser, client } = useClient();
|
||||
const { loading, isAuthenticated, isPasswordlessUser, client, setClient } =
|
||||
useClient();
|
||||
const confirmPasswordRef = useRef();
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
|
@ -68,7 +69,7 @@ export function RegisterPage() {
|
|||
}
|
||||
|
||||
const recaptchaResponse = await execute();
|
||||
const newClient = await register(
|
||||
const [newClient, session] = await register(
|
||||
userName,
|
||||
password,
|
||||
userName,
|
||||
|
@ -84,6 +85,8 @@ export function RegisterPage() {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
setClient(newClient, session);
|
||||
}
|
||||
|
||||
submit()
|
||||
|
|
|
@ -16,15 +16,12 @@ limitations under the License.
|
|||
|
||||
import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
|
||||
import { useState, useCallback } from "react";
|
||||
import { useClient } from "../ClientContext";
|
||||
import { initClient, defaultHomeserver } from "../matrix-utils";
|
||||
|
||||
export function useInteractiveLogin() {
|
||||
const { setClient } = useClient();
|
||||
const [state, setState] = useState({ loading: false });
|
||||
|
||||
const auth = useCallback(
|
||||
async (homeserver, username, password) => {
|
||||
const auth = useCallback(async (homeserver, username, password) => {
|
||||
const authClient = matrix.createClient(homeserver);
|
||||
|
||||
const interactiveAuth = new InteractiveAuth({
|
||||
|
@ -45,6 +42,7 @@ export function useInteractiveLogin() {
|
|||
|
||||
const { user_id, access_token, device_id } =
|
||||
await interactiveAuth.attemptAuth();
|
||||
const session = { user_id, access_token, device_id };
|
||||
|
||||
const client = await initClient({
|
||||
baseUrl: defaultHomeserver,
|
||||
|
@ -53,12 +51,8 @@ export function useInteractiveLogin() {
|
|||
deviceId: device_id,
|
||||
});
|
||||
|
||||
setClient(client, { user_id, access_token, device_id });
|
||||
|
||||
return client;
|
||||
},
|
||||
[setClient]
|
||||
);
|
||||
return [client, session];
|
||||
}, []);
|
||||
|
||||
return [state, auth];
|
||||
}
|
||||
|
|
|
@ -16,11 +16,9 @@ limitations under the License.
|
|||
|
||||
import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { useClient } from "../ClientContext";
|
||||
import { initClient, defaultHomeserver } from "../matrix-utils";
|
||||
|
||||
export function useInteractiveRegistration() {
|
||||
const { setClient } = useClient();
|
||||
const [state, setState] = useState({ privacyPolicyUrl: "#", loading: false });
|
||||
|
||||
const authClientRef = useRef();
|
||||
|
@ -96,16 +94,14 @@ export function useInteractiveRegistration() {
|
|||
session.tempPassword = password;
|
||||
}
|
||||
|
||||
setClient(client, session);
|
||||
|
||||
const user = client.getUser(client.getUserId());
|
||||
|
||||
user.setRawDisplayName(displayName);
|
||||
user.setDisplayName(displayName);
|
||||
|
||||
return client;
|
||||
return [client, session];
|
||||
},
|
||||
[setClient]
|
||||
[]
|
||||
);
|
||||
|
||||
return [state, register];
|
||||
|
|
|
@ -15,6 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { useCallback, useState } from "react";
|
||||
import { useClient } from "../ClientContext";
|
||||
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
|
||||
import { UserMenuContainer } from "../UserMenuContainer";
|
||||
import { useHistory } from "react-router-dom";
|
||||
|
@ -34,12 +35,14 @@ import { generateRandomName } from "../auth/generateRandomName";
|
|||
import { useShouldShowPtt } from "../useShouldShowPtt";
|
||||
|
||||
export function UnauthenticatedView() {
|
||||
const { setClient } = useClient();
|
||||
const shouldShowPtt = useShouldShowPtt();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState();
|
||||
const [{ privacyPolicyUrl, recaptchaKey }, register] =
|
||||
useInteractiveRegistration();
|
||||
const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(e) => {
|
||||
e.preventDefault();
|
||||
|
@ -53,7 +56,7 @@ export function UnauthenticatedView() {
|
|||
setLoading(true);
|
||||
const recaptchaResponse = await execute();
|
||||
const userName = generateRandomName();
|
||||
const client = await register(
|
||||
const [client, session] = await register(
|
||||
userName,
|
||||
randomString(16),
|
||||
displayName,
|
||||
|
@ -62,6 +65,9 @@ export function UnauthenticatedView() {
|
|||
);
|
||||
const roomIdOrAlias = await createRoom(client, roomName, ptt);
|
||||
|
||||
// Only consider the registration successful if we managed to create the room, too
|
||||
setClient(client, session);
|
||||
|
||||
if (roomIdOrAlias) {
|
||||
history.push(`/room/${roomIdOrAlias}`);
|
||||
}
|
||||
|
|
|
@ -16,6 +16,7 @@ limitations under the License.
|
|||
|
||||
import React, { useCallback, useState } from "react";
|
||||
import styles from "./RoomAuthView.module.css";
|
||||
import { useClient } from "../ClientContext";
|
||||
import { Button } from "../button";
|
||||
import { Body, Caption, Link, Headline } from "../typography/Typography";
|
||||
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
|
||||
|
@ -29,11 +30,13 @@ import { UserMenuContainer } from "../UserMenuContainer";
|
|||
import { generateRandomName } from "../auth/generateRandomName";
|
||||
|
||||
export function RoomAuthView() {
|
||||
const { setClient } = useClient();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState();
|
||||
const [{ privacyPolicyUrl, recaptchaKey }, register] =
|
||||
useInteractiveRegistration();
|
||||
const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(e) => {
|
||||
e.preventDefault();
|
||||
|
@ -45,13 +48,14 @@ export function RoomAuthView() {
|
|||
setLoading(true);
|
||||
const recaptchaResponse = await execute();
|
||||
const userName = generateRandomName();
|
||||
await register(
|
||||
const [client, session] = await register(
|
||||
userName,
|
||||
randomString(16),
|
||||
displayName,
|
||||
recaptchaResponse,
|
||||
true
|
||||
);
|
||||
setClient(client, session);
|
||||
}
|
||||
|
||||
submit().catch((error) => {
|
||||
|
|
Loading…
Reference in a new issue