feat(web): add auth/login

packages/web/src/app-router/AppRouter.tsx

@@ -5,6 +5,7 @@ const LandingPage = React.lazy(() => import('../pages/landing'));
 const ServersPage = React.lazy(() => import('../pages/servers'));
 const PickerPage = React.lazy(() => import('../pages/picker'));
 
+const AuthLogin = React.lazy(() => import('../pages/auth/login'));
 const MachineryNewSession = React.lazy(() => import('../pages/machinery/new-session'));
 
 const DevToolsSetApi = React.lazy(() => import('../pages/dev-tools/set-api'));
@@ -28,6 +29,7 @@ export const AppRouter = () => {
             <RouteWrapper component={PickerPage} path="/s/:serverID" />
 
             <RouteWrapper component={MachineryNewSession} path="/machinery/new-session" />
+            <RouteWrapper component={AuthLogin} path="/auth/login" />
 
             <RouteWrapper component={DevToolsSetApi} path="/x/dev-tools/set-api" />
             <RouteWrapper

packages/web/src/pages/auth/login.tsx

@@ -0,0 +1,38 @@
+import { AuthLogin } from '@roleypoly/design-system/templates/auth-login';
+import { GuildSlug } from '@roleypoly/types';
+import React from 'react';
+import { useApiContext } from '../../api-context/ApiContext';
+
+const Login = () => {
+    const { apiUrl, fetch } = useApiContext();
+    // If ?r is in query, then let's render the slug page
+    // If not, redirect.
+    const [guildSlug, setGuildSlug] = React.useState<GuildSlug | null>(null);
+
+    React.useEffect(() => {
+        const url = new URL(window.location.href);
+        const redirectServerID = url.searchParams.get('r');
+        if (!redirectServerID) {
+            window.location.href = `${apiUrl}/login-bounce`;
+            return;
+        }
+
+        const fetchGuildSlug = async (id: string) => {
+            const response = await fetch(`/get-slug/${id}`);
+            if (response.status === 200) {
+                const slug = await response.json();
+                setGuildSlug(slug);
+            }
+        };
+
+        fetchGuildSlug(redirectServerID);
+    }, [apiUrl, fetch]);
+
+    if (guildSlug === null) {
+        return <div>Loading...</div>;
+    }
+
+    return <AuthLogin guildSlug={guildSlug} onSendSecretCode={() => {}} />;
+};
+
+export default Login;

packages/web/src/pages/picker.tsx

@@ -1,3 +1,4 @@
+import { Redirect } from '@reach/router';
 import { RolePickerTemplate } from '@roleypoly/design-system/templates/role-picker';
 import { PresentableGuild, RoleUpdate, UserGuildPermissions } from '@roleypoly/types';
 import * as React from 'react';
@@ -9,7 +10,7 @@ type PickerProps = {
 };
 
 const Picker = (props: PickerProps) => {
-    const { session, authedFetch } = useSessionContext();
+    const { session, authedFetch, isAuthenticated } = useSessionContext();
 
     const [pickerData, setPickerData] = React.useState<PresentableGuild | null>(null);
     const [pending, setPending] = React.useState(false);
@@ -25,6 +26,10 @@ const Picker = (props: PickerProps) => {
         fetchPickerData();
     }, [props.serverID, authedFetch]);
 
+    if (!isAuthenticated) {
+        return <Redirect to={`/auth/login?r=${props.serverID}`} replace />;
+    }
+
     if (pickerData === null) {
         return <div>Loading...</div>;
     }