Skip to content

Commit 315142a

Browse files
jog1tjog1t
committed
refactor(cloud): polish (#3022)
1 parent 513b5e0 commit 315142a

File tree

16 files changed

+388
-155
lines changed

16 files changed

+388
-155
lines changed

‎frontend/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"preview:cloud": "vite preview --config vite.cloud.config.ts"
1919
},
2020
"dependencies": {
21-
"@clerk/clerk-js": "^5.92.1",
22-
"@clerk/clerk-react": "^5.47.0",
21+
"@clerk/clerk-js": "^5.97",
22+
"@clerk/clerk-react": "^5.49.1",
2323
"@clerk/elements": "^0.23.63",
2424
"@clerk/shared": "*",
2525
"@clerk/themes": "^2.4.18",

‎frontend/src/app.tsx‎

Lines changed: 1 addition & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import type { Clerk } from "@clerk/clerk-js";
2-
import { ClerkProvider } from "@clerk/clerk-react";
3-
import { dark } from "@clerk/themes";
42
import * as Sentry from "@sentry/react";
53
import { QueryClientProvider } from "@tanstack/react-query";
64
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
75
import { createRouter, RouterProvider } from "@tanstack/react-router";
86
import { Suspense } from "react";
9-
import { match } from "ts-pattern";
107
import {
118
ConfigProvider,
129
FullscreenLoading,
@@ -15,9 +12,7 @@ import {
1512
Toaster,
1613
TooltipProvider,
1714
} from "@/components";
18-
import { PageLayout } from "@/components/layout";
1915
import { clerk } from "./lib/auth";
20-
import { cloudEnv } from "./lib/env";
2116
import { queryClient } from "./queries/global";
2217
import { routeTree } from "./routeTree.gen";
2318

@@ -60,44 +55,14 @@ function InnerApp() {
6055
return <RouterProvider router={router} />;
6156
}
6257

63-
function CloudApp() {
64-
return (
65-
<ClerkProvider
66-
Clerk={clerk}
67-
appearance={{
68-
baseTheme: dark,
69-
variables: {
70-
colorPrimary: "hsl(var(--primary))",
71-
colorPrimaryForeground: "hsl(var(--primary-foreground))",
72-
colorTextOnPrimaryBackground:
73-
"hsl(var(--primary-foreground))",
74-
colorBackground: "hsl(var(--background))",
75-
colorInput: "hsl(var(--input))",
76-
colorText: "hsl(var(--text))",
77-
colorTextSecondary: "hsl(var(--muted-foreground))",
78-
borderRadius: "var(--radius)",
79-
colorModalBackdrop: "rgb(0 0 0 / 0.8)",
80-
},
81-
}}
82-
publishableKey={cloudEnv().VITE_APP_CLERK_PUBLISHABLE_KEY}
83-
>
84-
<RouterProvider router={router} />
85-
</ClerkProvider>
86-
);
87-
}
88-
8958
export function App() {
9059
return (
9160
<QueryClientProvider client={queryClient}>
9261
<ConfigProvider value={getConfig()}>
9362
<ThirdPartyProviders>
9463
<Suspense fallback={<FullscreenLoading />}>
9564
<TooltipProvider>
96-
{match(__APP_TYPE__)
97-
.with("cloud", () => <CloudApp />)
98-
.otherwise(() => (
99-
<InnerApp />
100-
))}
65+
<InnerApp />
10166
</TooltipProvider>
10267
</Suspense>
10368
</ThirdPartyProviders>

‎frontend/src/app/login.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
"use client";
2+
import { useClerk } from "@clerk/clerk-react";
23
import * as Clerk from "@clerk/elements/common";
34
import * as SignIn from "@clerk/elements/sign-in";
45
import { faGithub, faGoogle, faSpinnerThird, Icon } from "@rivet-gg/icons";
56
import { Link } from "@tanstack/react-router";
67
import { motion } from "framer-motion";
8+
import { Badge } from "@/components";
79
import { Button } from "@/components/ui/button";
810
import {
911
Card,
@@ -16,7 +18,8 @@ import {
1618
import { Input } from "@/components/ui/input";
1719
import { Label } from "@/components/ui/label";
1820

19-
export default function SignInPage() {
21+
export function Login() {
22+
const clerk = useClerk();
2023
return (
2124
<motion.div
2225
className="grid w-full grow items-center px-4 sm:justify-center"
@@ -70,6 +73,13 @@ export default function SignInPage() {
7073
)
7174
}
7275
</Clerk.Loading>
76+
{clerk.client
77+
.lastAuthenticationStrategy ===
78+
"oauth_github" ? (
79+
<Badge className="ml-2 absolute -top-1/2 -right-4 text-xs">
80+
Last used
81+
</Badge>
82+
) : null}
7383
</Button>
7484
</Clerk.Connection>
7585
<Clerk.Connection
@@ -103,6 +113,13 @@ export default function SignInPage() {
103113
)
104114
}
105115
</Clerk.Loading>
116+
{clerk.client
117+
.lastAuthenticationStrategy ===
118+
"oauth_google" ? (
119+
<Badge className="ml-2 absolute -top-1/2 -right-4 text-xs">
120+
Last used
121+
</Badge>
122+
) : null}
106123
</Button>
107124
</Clerk.Connection>
108125
</div>

‎frontend/src/app/sign-up.tsx‎

Lines changed: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
"use client";
2+
import { useClerk } from "@clerk/clerk-react";
23
import * as Clerk from "@clerk/elements/common";
34
import * as ClerkSignUp from "@clerk/elements/sign-up";
45
import { faGithub, faGoogle, faSpinnerThird, Icon } from "@rivet-gg/icons";
56
import { Link } from "@tanstack/react-router";
67
import { motion } from "framer-motion";
7-
import { cn } from "@/components";
8+
import { Badge, cn, Skeleton } from "@/components";
89
import { Button } from "@/components/ui/button";
910
import {
1011
Card,
@@ -18,14 +19,58 @@ import { Input } from "@/components/ui/input";
1819
import { Label } from "@/components/ui/label";
1920

2021
export function SignUp() {
22+
const clerk = useClerk();
2123
return (
2224
<motion.div
2325
className="grid w-full grow items-center px-4 sm:justify-center"
2426
initial={{ opacity: 0, y: 10 }}
2527
animate={{ opacity: 1, y: 0 }}
2628
exit={{ opacity: 0, y: 10 }}
2729
>
28-
<ClerkSignUp.Root routing="virtual">
30+
<ClerkSignUp.Root
31+
routing="virtual"
32+
path="/"
33+
fallback={
34+
<Card className="w-full sm:w-96">
35+
<CardHeader>
36+
<CardTitle>Welcome!</CardTitle>
37+
<CardDescription>
38+
Enter your email below to login to your account.
39+
</CardDescription>
40+
</CardHeader>
41+
<CardContent className="grid gap-y-4">
42+
<div className="grid grid-cols-2 gap-4">
43+
<Skeleton className="h-10 w-full" />
44+
<Skeleton className="h-10 w-full" />
45+
</div>
46+
<p className="flex items-center gap-x-3 text-sm text-muted-foreground before:h-px before:flex-1 before:bg-border after:h-px after:flex-1 after:bg-border">
47+
or
48+
</p>
49+
<div className="space-y-2">
50+
<Label>Email address</Label>
51+
<Input disabled placeholder="you@company.com" />
52+
</div>
53+
<div className="space-y-2">
54+
<Label>Password</Label>
55+
<Input disabled placeholder="Your password" />
56+
</div>
57+
</CardContent>
58+
<CardFooter>
59+
<div className="grid w-full gap-y-4">
60+
<Skeleton className="h-10 w-full" />
61+
<Button
62+
variant="link"
63+
size="sm"
64+
disabled
65+
className="text-primary-foreground"
66+
>
67+
Already have an account? Sign in
68+
</Button>
69+
</div>
70+
</CardFooter>
71+
</Card>
72+
}
73+
>
2974
<Clerk.Loading>
3075
{(isGlobalLoading) => (
3176
<>
@@ -71,6 +116,13 @@ export function SignUp() {
71116
)
72117
}
73118
</Clerk.Loading>
119+
{clerk.client
120+
.lastAuthenticationStrategy ===
121+
"oauth_github" ? (
122+
<Badge className="ml-2 absolute -top-1/2 -right-4 text-xs">
123+
Last used
124+
</Badge>
125+
) : null}
74126
</Button>
75127
</Clerk.Connection>
76128
<Clerk.Connection
@@ -104,6 +156,14 @@ export function SignUp() {
104156
)
105157
}
106158
</Clerk.Loading>
159+
160+
{clerk.client
161+
.lastAuthenticationStrategy ===
162+
"oauth_google" ? (
163+
<Badge className="ml-2 absolute -top-1/2 -right-4 text-xs">
164+
Last used
165+
</Badge>
166+
) : null}
107167
</Button>
108168
</Clerk.Connection>
109169
</div>
@@ -174,7 +234,7 @@ export function SignUp() {
174234
asChild
175235
className="text-primary-foreground"
176236
>
177-
<Link to="/">
237+
<Link to="/login">
178238
Already have an account?
179239
Sign in
180240
</Link>

‎frontend/src/app/user-dropdown.tsx‎

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,16 @@ export function UserDropdown() {
4040
<DropdownMenuTrigger asChild={!params.organization}>
4141
{params.organization ? (
4242
<Preview org={params.organization} />
43-
) : null}
43+
) : (
44+
<Button
45+
variant="ghost"
46+
size="xs"
47+
className="text-muted-foreground justify-between py-1 min-h-8 gap-2 w-full"
48+
endIcon={<Icon icon={faChevronDown} />}
49+
>
50+
{clerk.user?.primaryEmailAddress?.emailAddress}
51+
</Button>
52+
)}
4453
</DropdownMenuTrigger>
4554
<DropdownMenuContent>
4655
<DropdownMenuItem
@@ -50,22 +59,27 @@ export function UserDropdown() {
5059
>
5160
Profile
5261
</DropdownMenuItem>
53-
<DropdownMenuItem
54-
onSelect={() => {
55-
clerk.openOrganizationProfile();
56-
}}
57-
>
58-
Settings
59-
</DropdownMenuItem>
60-
<DropdownMenuItem
61-
onSelect={() => {
62-
clerk.openOrganizationProfile({
63-
__experimental_startPath: "/organization-members",
64-
});
65-
}}
66-
>
67-
Members
68-
</DropdownMenuItem>
62+
{clerk.organization ? (
63+
<DropdownMenuItem
64+
onSelect={() => {
65+
clerk.openOrganizationProfile();
66+
}}
67+
>
68+
Settings
69+
</DropdownMenuItem>
70+
) : null}
71+
{clerk.organization ? (
72+
<DropdownMenuItem
73+
onSelect={() => {
74+
clerk.openOrganizationProfile({
75+
__experimental_startPath:
76+
"/organization-members",
77+
});
78+
}}
79+
>
80+
Members
81+
</DropdownMenuItem>
82+
) : null}
6983
{isMatchingProjectRoute ? (
7084
<DropdownMenuItem
7185
onSelect={() => {
@@ -79,16 +93,20 @@ export function UserDropdown() {
7993
</DropdownMenuItem>
8094
) : null}
8195
<DropdownMenuSeparator />
82-
<DropdownMenuSub>
83-
<DropdownMenuSubTrigger>
84-
Switch Organization
85-
</DropdownMenuSubTrigger>
86-
<DropdownMenuPortal>
87-
<DropdownMenuSubContent>
88-
<OrganizationSwitcher value={params.organization} />
89-
</DropdownMenuSubContent>
90-
</DropdownMenuPortal>
91-
</DropdownMenuSub>
96+
{clerk.organization ? (
97+
<DropdownMenuSub>
98+
<DropdownMenuSubTrigger>
99+
Switch Organization
100+
</DropdownMenuSubTrigger>
101+
<DropdownMenuPortal>
102+
<DropdownMenuSubContent>
103+
<OrganizationSwitcher
104+
value={params.organization}
105+
/>
106+
</DropdownMenuSubContent>
107+
</DropdownMenuPortal>
108+
</DropdownMenuSub>
109+
) : null}
92110
<DropdownMenuItem
93111
onSelect={() => {
94112
clerk.signOut();

0 commit comments

Comments
 (0)