From 9d029e98470854c53e730fd6ff98d9e52c836a74 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Mon, 13 Dec 2021 11:55:10 -0800 Subject: [PATCH] Add auth links to homepage for unregistered users --- src/ConferenceCallManagerHooks.jsx | 49 +++++++++++++++++++++--------- src/Home.jsx | 30 ++++++++++++++++-- src/Home.module.css | 18 +++++++++++ src/LoginPage.module.css | 2 +- 4 files changed, 81 insertions(+), 18 deletions(-) diff --git a/src/ConferenceCallManagerHooks.jsx b/src/ConferenceCallManagerHooks.jsx index 24b426d3..5e841e7d 100644 --- a/src/ConferenceCallManagerHooks.jsx +++ b/src/ConferenceCallManagerHooks.jsx @@ -103,14 +103,17 @@ export async function fetchGroupCall( export function ClientProvider({ homeserverUrl, children }) { const history = useHistory(); - const [{ loading, isAuthenticated, isGuest, client, userName }, setState] = - useState({ - loading: true, - isAuthenticated: false, - isGuest: false, - client: undefined, - userName: null, - }); + const [ + { loading, isAuthenticated, isPasswordlessUser, isGuest, client, userName }, + setState, + ] = useState({ + loading: true, + isAuthenticated: false, + isPasswordlessUser: false, + isGuest: false, + client: undefined, + userName: null, + }); useEffect(() => { async function restore() { @@ -118,7 +121,7 @@ export function ClientProvider({ homeserverUrl, children }) { const authStore = localStorage.getItem("matrix-auth-store"); if (authStore) { - const { user_id, device_id, access_token, guest } = + const { user_id, device_id, access_token, guest, passwordlessUser } = JSON.parse(authStore); const client = await initClient( @@ -133,10 +136,16 @@ export function ClientProvider({ homeserverUrl, children }) { localStorage.setItem( "matrix-auth-store", - JSON.stringify({ user_id, device_id, access_token, guest }) + JSON.stringify({ + user_id, + device_id, + access_token, + guest, + passwordlessUser, + }) ); - return { client, guest }; + return { client, guest, passwordlessUser }; } return { client: undefined, guest: false }; @@ -147,11 +156,12 @@ export function ClientProvider({ homeserverUrl, children }) { } restore() - .then(({ client, guest }) => { + .then(({ client, guest, passwordlessUser }) => { setState({ client, loading: false, isAuthenticated: !!client, + isPasswordlessUser: !!passwordlessUser, isGuest: guest, userName: client?.getUserIdLocalpart(), }); @@ -161,6 +171,7 @@ export function ClientProvider({ homeserverUrl, children }) { client: undefined, loading: false, isAuthenticated: false, + isPasswordlessUser: false, isGuest: false, userName: null, }); @@ -209,6 +220,7 @@ export function ClientProvider({ homeserverUrl, children }) { client, loading: false, isAuthenticated: true, + isPasswordlessUser: false, isGuest: false, userName: client.getUserIdLocalpart(), }); @@ -218,6 +230,7 @@ export function ClientProvider({ homeserverUrl, children }) { client: undefined, loading: false, isAuthenticated: false, + isPasswordlessUser: false, isGuest: false, userName: null, }); @@ -256,6 +269,7 @@ export function ClientProvider({ homeserverUrl, children }) { loading: false, isAuthenticated: true, isGuest: true, + isPasswordlessUser: false, userName: client.getUserIdLocalpart(), }); } catch (err) { @@ -264,6 +278,7 @@ export function ClientProvider({ homeserverUrl, children }) { client: undefined, loading: false, isAuthenticated: false, + isPasswordlessUser: false, isGuest: false, userName: null, }); @@ -271,7 +286,7 @@ export function ClientProvider({ homeserverUrl, children }) { } }, []); - const register = useCallback(async (username, password) => { + const register = useCallback(async (username, password, passwordlessUser) => { try { const registrationClient = matrix.createClient(homeserverUrl); @@ -289,7 +304,7 @@ export function ClientProvider({ homeserverUrl, children }) { localStorage.setItem( "matrix-auth-store", - JSON.stringify({ user_id, device_id, access_token }) + JSON.stringify({ user_id, device_id, access_token, passwordlessUser }) ); setState({ @@ -297,6 +312,7 @@ export function ClientProvider({ homeserverUrl, children }) { loading: false, isGuest: false, isAuthenticated: true, + isPasswordlessUser: passwordlessUser, userName: client.getUserIdLocalpart(), }); @@ -308,6 +324,7 @@ export function ClientProvider({ homeserverUrl, children }) { loading: false, isGuest: false, isAuthenticated: false, + isPasswordlessUser: false, userName: null, }); throw err; @@ -323,6 +340,7 @@ export function ClientProvider({ homeserverUrl, children }) { () => ({ loading, isAuthenticated, + isPasswordlessUser, isGuest, client, login, @@ -334,6 +352,7 @@ export function ClientProvider({ homeserverUrl, children }) { [ loading, isAuthenticated, + isPasswordlessUser, isGuest, client, login, @@ -417,7 +436,7 @@ export function useCreateRoom() { let _client = client; if (!_client) { - _client = await register(userName, randomString(16)); + _client = await register(userName, randomString(16), true); } return await createRoom(_client, roomName); diff --git a/src/Home.jsx b/src/Home.jsx index e844d92a..1ac5f2ea 100644 --- a/src/Home.jsx +++ b/src/Home.jsx @@ -15,7 +15,7 @@ limitations under the License. */ import React, { useCallback } from "react"; -import { useHistory } from "react-router-dom"; +import { useHistory, Link } from "react-router-dom"; import { useClient, useGroupCallRooms, @@ -32,7 +32,14 @@ import classNames from "classnames"; import { ErrorView, LoadingView } from "./FullScreenView"; export function Home() { - const { isAuthenticated, isGuest, loading, error, client } = useClient(); + const { + isAuthenticated, + isGuest, + isPasswordlessUser, + loading, + error, + client, + } = useClient(); const history = useHistory(); const { createRoomError, creatingRoom, createRoom } = useCreateRoom(); @@ -80,6 +87,8 @@ export function Home() { return ( + +
+

+ Not registered yet?{" "} + Create an account +

+
@@ -178,6 +194,8 @@ function UnregisteredView({ function RegisteredView({ client, + isPasswordlessUser, + isGuest, onCreateRoom, createRoomError, creatingRoom, @@ -257,6 +275,14 @@ function RegisteredView({ + {(isPasswordlessUser || isGuest) && ( +
+

+ Not registered yet?{" "} + Create an account +

+
+ )} diff --git a/src/Home.module.css b/src/Home.module.css index 91d88c91..67bb126c 100644 --- a/src/Home.module.css +++ b/src/Home.module.css @@ -111,6 +111,24 @@ margin-top: 0; } +.authLinks { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; +} + +.authLinks { + margin-bottom: 100px; + font-size: 15px; +} + +.authLinks a { + color: #0dbd8b; + font-weight: normal; + text-decoration: none; +} + @media (min-width: 800px) { .left { background-color: var(--bgColor2); diff --git a/src/LoginPage.module.css b/src/LoginPage.module.css index 2834d6ab..09018f9d 100644 --- a/src/LoginPage.module.css +++ b/src/LoginPage.module.css @@ -63,11 +63,11 @@ .authLinks { margin-bottom: 100px; - font-weight: normal; font-size: 15px; } .authLinks a { color: #0dbd8b; text-decoration: none; + font-weight: normal; }