Skip to content

Commit b458036

Browse files
a-typea-type
authored
Merge pull request #61 from Volumetrics-io/public-signup
expose public signup
2 parents 669749d + cfac96f commit b458036

7 files changed

Lines changed: 92 additions & 25 deletions

File tree

‎app/src/components/auth/OAuthSigninButton.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, ButtonProps } from '@alef/sys';
1+
import { Box, Button, ButtonProps } from '@alef/sys';
22
import { ReactNode } from 'react';
33

44
export function OAuthSigninButton({
@@ -28,10 +28,12 @@ export function OAuthSigninButton({
2828
}
2929

3030
return (
31-
<form action={url.toString()} className={className} method="post">
32-
<Button type="submit" {...rest}>
33-
{children}
34-
</Button>
35-
</form>
31+
<Box asChild>
32+
<form action={url.toString()} className={className} method="post">
33+
<Button type="submit" {...rest}>
34+
{children}
35+
</Button>
36+
</form>
37+
</Box>
3638
);
3739
}

‎app/src/pages/HomePage.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,8 @@ const HomePage = () => {
1818
}, [incompleteProfile, navigate]);
1919

2020
if (!isHeadset) {
21-
if (!session) {
22-
// not logged in -- redirect to coming soon page until 2d is officially launched
23-
return <Redirect to="/coming-soon" />;
24-
}
25-
26-
// devices page is default 2D UI homepage while properties isn't very useful
27-
// on 2D UI yets
28-
return <Redirect to="/desktop" />;
21+
// on desktop/mobile, editor is the default page.
22+
return <Redirect to="/editor" />;
2923
}
3024

3125
return <LazyMainScene />;

‎app/src/pages/LoginPage.tsx‎

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { EmailSigninForm } from '@/components/auth/EmailSigninForm';
2-
import { Box, Frame, Heading, Link, Logo } from '@alef/sys';
2+
import { EmailSignupForm } from '@/components/auth/EmailSignupForm';
3+
import { OAuthSigninButton } from '@/components/auth/OAuthSigninButton';
4+
import { Box, Frame, Heading, Icon, Link, Logo, Tabs } from '@alef/sys';
35
import { useSearchParams } from '@verdant-web/react-router';
46

57
const LoginPage = () => {
6-
const [searchParams] = useSearchParams();
8+
const [searchParams, updateSearch] = useSearchParams();
79
const returnTo = searchParams.get('returnTo') ?? undefined;
10+
const tab = searchParams.get('tab') ?? 'login';
811
const error = searchParams.get('error') ?? undefined;
912

1013
return (
@@ -16,14 +19,60 @@ const LoginPage = () => {
1619
alef
1720
</Heading>
1821
</Box>
19-
20-
<Heading level={1}>Login</Heading>
21-
{error && (
22+
{error && (
2223
<Box p style={{ backgroundColor: 'var(--error-paper)', color: 'var(--error-ink)' }}>
2324
{error}
2425
</Box>
2526
)}
26-
<EmailSigninForm returnTo={returnTo} />
27+
28+
<Tabs
29+
value={tab}
30+
onValueChange={(value) =>
31+
updateSearch((s) => {
32+
s.set('tab', value);
33+
return s;
34+
})
35+
}
36+
>
37+
<Box align="stretch" stacked gapped>
38+
<Box justify="center">
39+
<Tabs.List>
40+
<Tabs.Trigger value="login">
41+
<Box gapped>
42+
<Icon name="hand" />
43+
Log&nbsp;in
44+
</Box>
45+
</Tabs.Trigger>
46+
<Tabs.Trigger value="signup">
47+
<Box gapped>
48+
<Icon name="square-check-big" />
49+
Sign&nbsp;up
50+
</Box>
51+
</Tabs.Trigger>
52+
</Tabs.List>
53+
</Box>
54+
<Tabs.Content value="login">
55+
<Box stacked gapped>
56+
<Heading level={1}>Log in</Heading>
57+
<OAuthSigninButton provider="google" returnTo={returnTo} style={{ margin: '0 auto' }}>
58+
Log in with Google
59+
</OAuthSigninButton>
60+
<Or />
61+
<EmailSigninForm returnTo={returnTo} />
62+
</Box>
63+
</Tabs.Content>
64+
<Tabs.Content value="signup">
65+
<Box stacked gapped>
66+
<Heading level={1}>Sign up</Heading>
67+
<OAuthSigninButton provider="google" returnTo={returnTo} style={{ margin: '0 auto' }}>
68+
Sign up with Google
69+
</OAuthSigninButton>
70+
<Or />
71+
<EmailSignupForm returnTo={returnTo} />
72+
</Box>
73+
</Tabs.Content>
74+
</Box>
75+
</Tabs>
2776
</Frame>
2877
<Box gapped p="small" style={{ fontSize: '0.8rem', color: 'var(--faded)' }}>
2978
<Link to="https://alef.io/tos">Terms of Service</Link>
@@ -33,4 +82,12 @@ const LoginPage = () => {
3382
);
3483
};
3584

85+
const Or = () => (
86+
<Box justify="between" align="center" gapped>
87+
<Box full style={{ borderBottom: 'var(--border)' }} />
88+
<Box>or</Box>
89+
<Box full style={{ borderBottom: 'var(--border)' }} />
90+
</Box>
91+
);
92+
3693
export default LoginPage;

‎app/src/pages/Pages.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const routes = makeRoutes([
5858
component: HeadsetPage,
5959
},
6060
{
61-
path: '/desktop',
61+
path: '/editor',
6262
component: lazy(() => import('./DesktopModePage.js')),
6363
},
6464
{

‎app/src/pages/ResetPasswordPage.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ResetPasswordForm } from '@/components/auth/ResetPasswordForm';
2+
import { Box, Frame } from '@alef/sys';
23
import { useSearchParams } from '@verdant-web/react-router';
34

45
const ResetPasswordPage = () => {
@@ -10,7 +11,13 @@ const ResetPasswordPage = () => {
1011
return <div>Invalid reset link</div>;
1112
}
1213

13-
return <ResetPasswordForm email={email} code={code} />;
14+
return (
15+
<Box full layout="center center" p>
16+
<Frame gapped stacked p constrained>
17+
<ResetPasswordForm email={email} code={code} />
18+
</Frame>
19+
</Box>
20+
);
1421
};
1522

1623
export default ResetPasswordPage;

‎app/src/pages/VerifyPage.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { EmailCompleteSignupForm } from '@/components/auth/EmailCompleteSignupForm';
2+
import { Box, Frame } from '@alef/sys';
23
import { useSearchParams } from '@verdant-web/react-router';
34

45
const VerifyPage = () => {
@@ -10,7 +11,13 @@ const VerifyPage = () => {
1011
return <div>Invalid verification link</div>;
1112
}
1213

13-
return <EmailCompleteSignupForm code={code} email={email} />;
14+
return (
15+
<Box full align="center" justify="center" p>
16+
<Frame gapped stacked p constrained>
17+
<EmailCompleteSignupForm code={code} email={email} />
18+
</Frame>
19+
</Box>
20+
);
1421
};
1522

1623
export default VerifyPage;

‎services/src/public-api/auth/handlers.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createHandlers, GoogleProvider, honoAdapter } from '@a-type/auth';
1+
import { createHandlers, GoogleCloudflareProvider, honoAdapter } from '@a-type/auth';
22
import { Context } from 'hono';
33
import { Env } from '../config/ctx.js';
44
import { email } from '../services/email.js';
@@ -12,7 +12,7 @@ export const authHandlers = createHandlers<Context<Env>>({
1212
allowedReturnToOrigin: (origin) => origin === ctx.env.UI_ORIGIN,
1313
}),
1414
providers: {
15-
google: new GoogleProvider({
15+
google: new GoogleCloudflareProvider({
1616
getConfig(ctx) {
1717
return {
1818
clientId: ctx.env.GOOGLE_AUTH_CLIENT_ID,

0 commit comments

Comments
 (0)