feat: added auth page and the whole functionallity surrounding it.
feat: added tests (not working currently, will fix later) chore: removed turnstile dep. will check later other options.
This commit is contained in:
Nixyan
parent
87196d312e
commit
b1b80dd75b
49 changed files with 8500 additions and 325 deletions
|
|
@ -1,8 +1,10 @@
|
|||
# Better Auth Cookie Secret
|
||||
BETTER_AUTH_SECRET=
|
||||
|
||||
# Better Auth URL
|
||||
BETTER_AUTH_URL=
|
||||
|
||||
# Database URL
|
||||
DATABASE_URL=
|
||||
|
||||
EMAIL_HOST=
|
||||
EMAIL_PORT=
|
||||
EMAIL_SECURE=
|
||||
EMAIL_USER=
|
||||
EMAIL_PASSWORD=
|
||||
28
.github/workflows/playwright.yml
vendored
Normal file
28
.github/workflows/playwright.yml
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
name: Playwright Tests
|
||||
on:
|
||||
workflow_dispatch:
|
||||
push:
|
||||
branches: [main, master]
|
||||
pull_request:
|
||||
branches: [main, master]
|
||||
jobs:
|
||||
test:
|
||||
timeout-minutes: 60
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: lts/*
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
- name: Install Playwright Browsers
|
||||
run: npx playwright install --with-deps
|
||||
- name: Run Playwright tests
|
||||
run: npx playwright test
|
||||
- uses: actions/upload-artifact@v4
|
||||
if: ${{ !cancelled() }}
|
||||
with:
|
||||
name: playwright-report
|
||||
path: playwright-report/
|
||||
retention-days: 30
|
||||
8
.gitignore
vendored
8
.gitignore
vendored
|
|
@ -40,3 +40,11 @@ yarn-error.log*
|
|||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
||||
# Playwright
|
||||
node_modules/
|
||||
/test-results/
|
||||
/playwright-report/
|
||||
/blob-report/
|
||||
/playwright/.cache/
|
||||
/playwright/.auth/
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/app/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"baseColor": "stone",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
|
|
|
|||
4214
package-lock.json
generated
Normal file
4214
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
53
package.json
53
package.json
|
|
@ -13,48 +13,69 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"dev": "cross-env NODE_ENV=development tsx src/server.ts",
|
||||
"email:dev": "cross-env NODE_ENV=development email dev --dir src/lib/mail/templates --port 3001",
|
||||
"test": "cross-env NODE_ENV=test playwright test",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"start": "cross-env NODE_ENV=production node src/server.ts",
|
||||
"db:push": "drizzle-kit push",
|
||||
"db:migrate": "bun run db:push && bun run drizzle-kit migrate"
|
||||
"db:migrate": "bun run db:push && bun run drizzle-kit migrate",
|
||||
"db:generate": "auth generate --output src/lib/db/schema/index.ts --yes",
|
||||
"db:update": "bun run db:generate && bun run db:push"
|
||||
},
|
||||
"dependencies": {
|
||||
"@better-auth/drizzle-adapter": "^1.5.3",
|
||||
"@better-auth/drizzle-adapter": "^1.5.4",
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@marsidev/react-turnstile": "^1.4.2",
|
||||
"@nanostores/react": "^1.0.0",
|
||||
"better-auth": "^1.5.3",
|
||||
"bullmq": "^5.70.2",
|
||||
"@react-email/components": "1.0.8",
|
||||
"better-auth": "^1.5.4",
|
||||
"bullmq": "^5.70.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dexie": "^4.3.0",
|
||||
"dexie-react-hooks": "^4.2.0",
|
||||
"dotenv": "^17.3.1",
|
||||
"drizzle-orm": "^0.45.1",
|
||||
"express": "^5.2.1",
|
||||
"framer-motion": "^12.35.0",
|
||||
"http-signature": "^1.4.0",
|
||||
"ioredis": "^5.10.0",
|
||||
"lucide-react": "^0.577.0",
|
||||
"nanostores": "^1.1.1",
|
||||
"next": "16.1.6",
|
||||
"next-themes": "^0.4.6",
|
||||
"node-forge": "^1.3.3",
|
||||
"nodemailer": "^8.0.1",
|
||||
"pg": "^8.20.0",
|
||||
"react": "19.2.3",
|
||||
"react-dom": "19.2.3",
|
||||
"radix-ui": "^1.4.3",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"react-hook-form": "^7.71.2",
|
||||
"socket.io": "^4.8.3",
|
||||
"socket.io-client": "^4.8.3"
|
||||
"socket.io-client": "^4.8.3",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"zod": "^4.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@react-email/preview-server": "5.2.9",
|
||||
"@tailwindcss/postcss": "^4.2.1",
|
||||
"@types/bun": "^1.3.10",
|
||||
"@types/node": "^20",
|
||||
"@types/node": "^20.19.37",
|
||||
"@types/nodemailer": "^7.0.11",
|
||||
"@types/pg": "^8.18.0",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"auth": "^1.5.4",
|
||||
"babel-plugin-react-compiler": "1.0.0",
|
||||
"cross-env": "^10.1.0",
|
||||
"drizzle-kit": "^0.31.9",
|
||||
"tailwindcss": "^4",
|
||||
"react-email": "5.2.9",
|
||||
"shadcn": "^3.8.5",
|
||||
"tailwindcss": "^4.2.1",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "^5"
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"typescript": "^5.9.3"
|
||||
},
|
||||
"ignoreScripts": [
|
||||
"sharp",
|
||||
|
|
|
|||
76
playwright.config.ts
Normal file
76
playwright.config.ts
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
import { defineConfig, devices } from '@playwright/test';
|
||||
import dotenv from 'dotenv';
|
||||
import path from 'path';
|
||||
|
||||
// Load .env.local so workers have DATABASE_URL, BETTER_AUTH_SECRET, etc.
|
||||
dotenv.config({ path: path.resolve(__dirname, '.env.local') });
|
||||
|
||||
/**
|
||||
* See https://playwright.dev/docs/test-configuration.
|
||||
*/
|
||||
export default defineConfig({
|
||||
testDir: './tests',
|
||||
/* Run tests in files in parallel */
|
||||
fullyParallel: true,
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: !!process.env.CI,
|
||||
/* Retry on CI only */
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: 1,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: 'html',
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Base URL to use in actions like `await page.goto('')`. */
|
||||
baseURL: 'http://localhost:3000',
|
||||
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||
trace: 'on-first-retry',
|
||||
},
|
||||
|
||||
/* Run your local dev server before starting the tests */
|
||||
webServer: {
|
||||
command: 'bun run dev',
|
||||
url: 'http://localhost:3000',
|
||||
reuseExistingServer: !process.env.CI,
|
||||
},
|
||||
|
||||
/* Configure projects for major browsers */
|
||||
projects: [
|
||||
{
|
||||
name: 'chromium',
|
||||
use: { ...devices['Desktop Chrome'] },
|
||||
},
|
||||
|
||||
{
|
||||
name: 'firefox',
|
||||
use: { ...devices['Desktop Firefox'] },
|
||||
},
|
||||
|
||||
{
|
||||
name: 'webkit',
|
||||
use: { ...devices['Desktop Safari'] },
|
||||
},
|
||||
|
||||
/* Test against mobile viewports. */
|
||||
// {
|
||||
// name: 'Mobile Chrome',
|
||||
// use: { ...devices['Pixel 5'] },
|
||||
// },
|
||||
// {
|
||||
// name: 'Mobile Safari',
|
||||
// use: { ...devices['iPhone 12'] },
|
||||
// },
|
||||
|
||||
/* Test against branded browsers. */
|
||||
// {
|
||||
// name: 'Microsoft Edge',
|
||||
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
|
||||
// },
|
||||
// {
|
||||
// name: 'Google Chrome',
|
||||
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
|
||||
// },
|
||||
],
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 391 B |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1 KiB |
11
public/logo/sipher.svg
Normal file
11
public/logo/sipher.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg class="icon-192" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="512" height="512" fill="#080808" />
|
||||
<rect x="32" y="32" width="448" height="448" stroke="#C8F000" stroke-width="6" fill="none" />
|
||||
<polygon points="80,32 32,32 32,80" fill="#C8F000" opacity="0.15" />
|
||||
<polygon points="432,32 480,32 480,80" fill="#C8F000" opacity="0.15" />
|
||||
<polygon points="32,432 32,480 80,480" fill="#C8F000" opacity="0.15" />
|
||||
<polygon points="480,432 480,480 432,480" fill="#C8F000" opacity="0.15" />
|
||||
<path d="M 180 160 L 330 160 L 330 240 L 180 240 L 180 352 L 330 352" stroke="#C8F000" stroke-width="28"
|
||||
stroke-linecap="square" fill="none" />
|
||||
<rect x="32" y="248" width="448" height="6" fill="#FF3C3C" opacity="0.25" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 760 B |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 128 B |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
Before Width: | Height: | Size: 385 B |
4
src/app/api/auth/[...all]/route.ts
Normal file
4
src/app/api/auth/[...all]/route.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import { auth } from "@/lib/auth"; // path to your auth file
|
||||
import { toNextJsHandler } from "better-auth/next-js";
|
||||
|
||||
export const { POST, GET } = toNextJsHandler(auth);
|
||||
103
src/app/auth/components/ForgotPasswordForm.tsx
Normal file
103
src/app/auth/components/ForgotPasswordForm.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
|
||||
const forgotPasswordSchema = z.object({
|
||||
email: z.email("Please enter a valid email"),
|
||||
});
|
||||
|
||||
export function ForgotPasswordForm({
|
||||
setView,
|
||||
}: {
|
||||
setView: (view: "signIn" | "signUp" | "forgotPassword") => void;
|
||||
}) {
|
||||
const form = useForm<z.infer<typeof forgotPasswordSchema>>({
|
||||
resolver: zodResolver(forgotPasswordSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit(values: z.infer<typeof forgotPasswordSchema>) {
|
||||
console.debug(`[ForgotPasswordForm] submitting reset request for ${values.email}`);
|
||||
const { email } = values;
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
authClient.requestPasswordReset({
|
||||
email,
|
||||
redirectTo: `${window.location.origin}/auth?view=resetPassword`,
|
||||
}, {
|
||||
onSuccess: () => {
|
||||
console.debug(`[ForgotPasswordForm] reset request successful for ${email}`);
|
||||
toast.success("Reset link sent to your email");
|
||||
// Clean up the form
|
||||
form.reset();
|
||||
resolve();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.debug(`[ForgotPasswordForm] reset request failed for ${email}: ${JSON.stringify(error)}`);
|
||||
form.setError("root", { message: error.error.message });
|
||||
toast.error(error.error.message);
|
||||
// Clean up the form
|
||||
form.reset();
|
||||
resolve();
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">
|
||||
Email
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
className="h-11 text-base bg-background border-border/50"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 text-base font-semibold bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
{form.formState.isSubmitting ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : null}
|
||||
Send reset link
|
||||
</Button>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("signIn")}
|
||||
className="text-primary hover:underline underline-offset-4 font-semibold"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
Back to Sign In
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
348
src/app/auth/components/Modals.tsx
Normal file
348
src/app/auth/components/Modals.tsx
Normal file
|
|
@ -0,0 +1,348 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Eye, EyeOff, Loader2, Sparkles } from "lucide-react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
|
||||
const verifyEmailSchema = z.object({
|
||||
token: z.string().min(1, "Token is required"),
|
||||
});
|
||||
|
||||
export function VerifyEmailModal({
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
email,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
setIsOpen: (isOpen: boolean) => void;
|
||||
email: string;
|
||||
}) {
|
||||
const form = useForm<z.infer<typeof verifyEmailSchema>>({
|
||||
resolver: zodResolver(verifyEmailSchema),
|
||||
defaultValues: {
|
||||
token: "",
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit(values: z.infer<typeof verifyEmailSchema>) {
|
||||
console.debug(`[VerifyEmailModal] submitting verification for ${email}`);
|
||||
const { token } = values;
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
authClient.verifyEmail(
|
||||
{ query: { token } },
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.success("Email verified successfully! You will now be redirected to the dashboard.");
|
||||
setIsOpen(false);
|
||||
form.reset();
|
||||
resolve();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.debug(`[VerifyEmailModal] verification failed for ${email}: ${JSON.stringify(error)}`);
|
||||
form.setError("token", { message: error.error.message });
|
||||
toast.error(error.error.message);
|
||||
resolve();
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
const handleResendVerification = () => {
|
||||
authClient.sendVerificationEmail(
|
||||
{ email },
|
||||
{
|
||||
onSuccess: () => {
|
||||
toast.success("A new verification email has been sent.");
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error.error.message);
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Verify Your Email</DialogTitle>
|
||||
<DialogDescription>
|
||||
A verification code has been sent to{" "}
|
||||
<span className="font-semibold">{email}</span>. Please enter it
|
||||
below.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="token"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Verification Code</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter your code" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<DialogFooter className="flex-col-reverse sm:flex-row sm:justify-between items-center pt-2">
|
||||
<div className="text-sm text-muted-foreground pt-2 sm:pt-0">
|
||||
<span>No code? </span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleResendVerification}
|
||||
className="text-primary hover:underline underline-offset-4 font-semibold"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
Resend
|
||||
</button>
|
||||
</div>
|
||||
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||
{form.formState.isSubmitting ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : null}
|
||||
Verify
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export function ResetPasswordModal({
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
setIsOpen: (isOpen: boolean) => void;
|
||||
}) {
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const token = searchParams.get("token");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
|
||||
const formSchema = z.object({
|
||||
password: z.string().min(8, "Password must be at least 8 characters"),
|
||||
confirmPassword: z.string(),
|
||||
}).refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords don't match",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
});
|
||||
|
||||
const generatePassword = () => {
|
||||
// Between 8 and 12 characters
|
||||
const length = Math.floor(Math.random() * 5) + 8;
|
||||
const lower = "abcdefghijklmnopqrstuvwxyz";
|
||||
const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
const numbers = "0123456789";
|
||||
const symbols = "!@#$%^&*()_+-=[]{}|;:,.<>?";
|
||||
|
||||
const allChars = lower + upper + numbers + symbols;
|
||||
|
||||
const getRandom = (max: number) => {
|
||||
const randomValues = new Uint32Array(1);
|
||||
window.crypto.getRandomValues(randomValues);
|
||||
return randomValues[0] % max;
|
||||
}
|
||||
|
||||
let password = "";
|
||||
// Ensure at least one of each character type
|
||||
password += lower[getRandom(lower.length)];
|
||||
password += upper[getRandom(upper.length)];
|
||||
password += numbers[getRandom(numbers.length)];
|
||||
password += symbols[getRandom(symbols.length)];
|
||||
|
||||
for (let i = 4; i < length; i++) {
|
||||
password += allChars[getRandom(allChars.length)];
|
||||
}
|
||||
|
||||
// Fisher-Yates (aka Knuth) Shuffle
|
||||
let passwordArray = password.split('');
|
||||
for (let i = passwordArray.length - 1; i > 0; i--) {
|
||||
const j = getRandom(i + 1);
|
||||
[passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]];
|
||||
}
|
||||
const shuffledPassword = passwordArray.join('');
|
||||
|
||||
form.setValue("password", shuffledPassword, { shouldValidate: true });
|
||||
form.setValue("confirmPassword", shuffledPassword, { shouldValidate: true });
|
||||
toast.info("Generated a secure password. Make sure to save it somewhere safe!", {
|
||||
action: {
|
||||
label: "Copy",
|
||||
onClick: () => {
|
||||
navigator.clipboard.writeText(shuffledPassword);
|
||||
toast.success("Password copied to clipboard", {
|
||||
closeButton: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
closeButton: true,
|
||||
duration: 10000,
|
||||
});
|
||||
};
|
||||
|
||||
async function onSubmit(values: z.infer<typeof formSchema>) {
|
||||
if (!token) {
|
||||
toast.error("Invalid password reset token.");
|
||||
return;
|
||||
}
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
authClient.resetPassword({
|
||||
token,
|
||||
newPassword: values.password,
|
||||
}, {
|
||||
onSuccess: () => {
|
||||
toast.success("Password has been reset successfully!");
|
||||
setIsOpen(false);
|
||||
router.replace("/auth", {
|
||||
scroll: false,
|
||||
});
|
||||
resolve();
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error.error.message);
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={(open) => {
|
||||
setIsOpen(open);
|
||||
if (!open) {
|
||||
router.replace('/auth', {
|
||||
scroll: false,
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<DialogContent className="sm:max-w-md" showCloseButton={false}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Reset Password</DialogTitle>
|
||||
<DialogDescription>
|
||||
Enter your new password below. Make sure it's secure.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Password</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder={showPassword ? "Enter your password" : "********"}
|
||||
type={showPassword ? "text" : "password"}
|
||||
className="h-11 text-base bg-background border-border/50 pr-10"
|
||||
{...field}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="w-5 h-5" />
|
||||
) : (
|
||||
<Eye className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirmPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder={showConfirmPassword ? "Confirm your password" : "********"}
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
className="h-11 text-base bg-background border-border/50 pr-10"
|
||||
{...field}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowConfirmPassword(!showConfirmPassword)
|
||||
}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
|
||||
>
|
||||
{showConfirmPassword ? (
|
||||
<EyeOff className="w-5 h-5" />
|
||||
) : (
|
||||
<Eye className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={generatePassword}
|
||||
className="text-xs text-muted-foreground hover:text-primary underline-offset-4 hover:underline flex items-center gap-1"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
<Sparkles className="w-3 h-3" />
|
||||
<span>Generate Password</span>
|
||||
</button>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={form.formState.isSubmitting} className="w-full">
|
||||
{form.formState.isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Reset Password
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
153
src/app/auth/components/SignInForm.tsx
Normal file
153
src/app/auth/components/SignInForm.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Eye, EyeOff, Loader2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
|
||||
export function SignInForm({
|
||||
setView,
|
||||
}: {
|
||||
setView: (view: "signIn" | "signUp" | "forgotPassword") => void;
|
||||
onEmailNotVerified: (email: string) => void;
|
||||
}) {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const formSchema = z.object({
|
||||
email: z.email("Please enter a valid email"),
|
||||
password: z.string().min(8, "Password must be at least 8 characters"),
|
||||
})
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
})
|
||||
|
||||
async function onSubmit(values: z.infer<typeof formSchema>) {
|
||||
console.debug(`[SignInForm] submitting login for ${values.email}`);
|
||||
const { email, password } = values;
|
||||
|
||||
const { error } = await authClient.signIn.email({
|
||||
email,
|
||||
password,
|
||||
callbackURL: "/",
|
||||
})
|
||||
|
||||
if (error) {
|
||||
form.setError("root", { message: error.message });
|
||||
toast.error(error.message);
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success("Login successful");
|
||||
form.reset();
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
className="h-11 text-base bg-background border-border/50"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Password</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder="Enter your password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
className="h-11 text-base bg-background border-border/50 pr-10"
|
||||
{...field}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="w-5 h-5" />
|
||||
) : (
|
||||
<Eye className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("forgotPassword")}
|
||||
className="text-xs text-muted-foreground hover:text-primary underline-offset-4 hover:underline"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
Forgot password?
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 text-base font-semibold bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
{form.formState.isSubmitting ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : null}
|
||||
Continue
|
||||
</Button>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground text font-mono">
|
||||
Don't have an account?{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("signUp")}
|
||||
className="text-primary hover:underline underline-offset-4 font-semibold text-nowrap"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
Sign up
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
263
src/app/auth/components/SignUpForm.tsx
Normal file
263
src/app/auth/components/SignUpForm.tsx
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Eye, EyeOff, Loader2, Sparkles } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
|
||||
const signUpFormSchema = z.object({
|
||||
email: z.email("Please enter a valid email"),
|
||||
password: z.string().min(8, "Password must be at least 8 characters"),
|
||||
confirmPassword: z.string(),
|
||||
}).refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords don't match",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
export function SignUpForm({
|
||||
setView,
|
||||
onSuccess,
|
||||
}: {
|
||||
setView: (view: "signIn" | "signUp" | "forgotPassword") => void;
|
||||
onSuccess: (email: string) => void;
|
||||
}) {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
|
||||
const form = useForm<z.infer<typeof signUpFormSchema>>({
|
||||
resolver: zodResolver(signUpFormSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit(values: z.infer<typeof signUpFormSchema>) {
|
||||
console.debug(`[SignUpForm] submitting registration for ${values.email}`);
|
||||
const { email, password, confirmPassword } = values;
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
form.setError("confirmPassword", { message: "Passwords don't match" });
|
||||
return;
|
||||
}
|
||||
|
||||
await authClient.signUp.email({
|
||||
email,
|
||||
password,
|
||||
name: email.split("@")[0],
|
||||
}, {
|
||||
onSuccess: () => {
|
||||
console.debug(`[SignUpForm] registration successful for ${email}`);
|
||||
toast.success("Registration successful, please check your email for the verification link!");
|
||||
onSuccess(email);
|
||||
return;
|
||||
},
|
||||
onError: (error: any) => {
|
||||
console.debug(`[SignUpForm] registration failed for ${email}: ${JSON.stringify(error)}`);
|
||||
if (error.error.code === "PASSWORD_COMPROMISED") {
|
||||
toast.error("Password is compromised, please use a different password", {
|
||||
action: {
|
||||
label: "More details",
|
||||
onClick: () => {
|
||||
window.open("https://haveibeenpwned.com/Passwords", "_blank");
|
||||
},
|
||||
},
|
||||
duration: 10000,
|
||||
});
|
||||
} else {
|
||||
form.setError("root", { message: error.error.message });
|
||||
toast.error(error.error.message);
|
||||
}
|
||||
// Clean up the form
|
||||
form.reset();
|
||||
return;
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const generatePassword = () => {
|
||||
// Between 8 and 12 characters
|
||||
const length = Math.floor(Math.random() * 5) + 8;
|
||||
const lower = "abcdefghijklmnopqrstuvwxyz";
|
||||
const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
const numbers = "0123456789";
|
||||
const symbols = "!@#$%^&*()_+-=[]{}|;:,.<>?";
|
||||
|
||||
const allChars = lower + upper + numbers + symbols;
|
||||
|
||||
const getRandom = (max: number) => {
|
||||
const randomValues = new Uint32Array(1);
|
||||
window.crypto.getRandomValues(randomValues);
|
||||
return randomValues[0] % max;
|
||||
}
|
||||
|
||||
let password = "";
|
||||
// Ensure at least one of each character type
|
||||
password += lower[getRandom(lower.length)];
|
||||
password += upper[getRandom(upper.length)];
|
||||
password += numbers[getRandom(numbers.length)];
|
||||
password += symbols[getRandom(symbols.length)];
|
||||
|
||||
for (let i = 4; i < length; i++) {
|
||||
password += allChars[getRandom(allChars.length)];
|
||||
}
|
||||
|
||||
// Fisher-Yates (aka Knuth) Shuffle
|
||||
let passwordArray = password.split('');
|
||||
for (let i = passwordArray.length - 1; i > 0; i--) {
|
||||
const j = getRandom(i + 1);
|
||||
[passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]];
|
||||
}
|
||||
const shuffledPassword = passwordArray.join('');
|
||||
|
||||
form.setValue("password", shuffledPassword, { shouldValidate: true });
|
||||
form.setValue("confirmPassword", shuffledPassword, { shouldValidate: true });
|
||||
toast.info("Generated a secure password. Make sure to save it somewhere safe!", {
|
||||
action: {
|
||||
label: "Copy",
|
||||
onClick: () => {
|
||||
navigator.clipboard.writeText(shuffledPassword);
|
||||
toast.success("Password copied to clipboard", {
|
||||
closeButton: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
closeButton: true,
|
||||
duration: 10000,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
className="h-11 text-base bg-background border-border/50"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Password</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder={showPassword ? "Enter your password" : "********"}
|
||||
type={showPassword ? "text" : "password"}
|
||||
className="h-11 text-base bg-background border-border/50 pr-10"
|
||||
{...field}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="w-5 h-5" />
|
||||
) : (
|
||||
<Eye className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirmPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-xs font-semibold text-muted-foreground uppercase">Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<div className="relative">
|
||||
<Input
|
||||
placeholder={showConfirmPassword ? "Confirm your password" : "********"}
|
||||
type={showConfirmPassword ? "text" : "password"}
|
||||
className="h-11 text-base bg-background border-border/50 pr-10"
|
||||
{...field}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowConfirmPassword(!showConfirmPassword)
|
||||
}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"
|
||||
>
|
||||
{showConfirmPassword ? (
|
||||
<EyeOff className="w-5 h-5" />
|
||||
) : (
|
||||
<Eye className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={generatePassword}
|
||||
className="text-xs text-muted-foreground hover:text-primary underline-offset-4 hover:underline flex items-center gap-1"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
<Sparkles className="w-3 h-3" />
|
||||
<span>Generate Password</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 text-base font-semibold bg-primary text-primary-foreground hover:bg-primary/90"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
{form.formState.isSubmitting ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : null}
|
||||
Create Account
|
||||
</Button>
|
||||
|
||||
<div className="text-center text-sm text-muted-foreground">
|
||||
Already have an account?{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setView("signIn")}
|
||||
className="text-primary hover:underline underline-offset-4 font-semibold"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
6
src/app/auth/components/index.tsx
Normal file
6
src/app/auth/components/index.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export * from "./ForgotPasswordForm";
|
||||
export * from "./Modals";
|
||||
export * from "./settings-dropdown";
|
||||
export * from "./SignInForm";
|
||||
export * from "./SignUpForm";
|
||||
|
||||
55
src/app/auth/components/settings-dropdown.tsx
Normal file
55
src/app/auth/components/settings-dropdown.tsx
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Monitor, Moon, Settings, Sun } from "lucide-react";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
|
||||
export function SettingsDropdown() {
|
||||
const { setTheme, theme } = useTheme();
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-auto p-2 text-muted-foreground hover:text-foreground focus:ring-0 focus:ring-offset-0">
|
||||
<Settings className="size-5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
{theme === 'light' ? <Sun className="mr-2 size-4" /> : theme === 'dark' ? <Moon className="mr-2 size-4" /> : <Monitor className="mr-2 size-4" />}
|
||||
<span>Theme</span>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||
<Sun className="mr-2 size-4" />
|
||||
<span>Light</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||
<Moon className="mr-2 size-4" />
|
||||
<span>Dark</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("system")}>
|
||||
<Monitor className="mr-2 size-4" />
|
||||
<span>System</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
120
src/app/auth/page.tsx
Normal file
120
src/app/auth/page.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { ArrowLeft, Loader2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ForgotPasswordForm, ResetPasswordModal, SettingsDropdown, SignInForm, SignUpForm, VerifyEmailModal } from "./components";
|
||||
|
||||
export default function AuthPage() {
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const method = searchParams.get("method") as "signUp" | "signIn";
|
||||
const type = searchParams.get("type");
|
||||
|
||||
const { data: session, error: sessionError, isPending } = authClient.useSession();
|
||||
const router = useRouter();
|
||||
const [view, setView] = useState<"signIn" | "signUp" | "forgotPassword">(
|
||||
type === "orgInvite" ? (method === "signUp" ? "signUp" : "signIn") : "signIn"
|
||||
);
|
||||
const [isResetPasswordModalOpen, setResetPasswordModalOpen] = useState(false);
|
||||
const [isVerifyEmailModalOpen, setVerifyEmailModalOpen] = useState(false);
|
||||
const [emailToVerify, setEmailToVerify] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const viewParam = searchParams.get("view");
|
||||
if (viewParam?.startsWith("resetPassword")) {
|
||||
setResetPasswordModalOpen(true);
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
|
||||
if (session === undefined) {
|
||||
return (
|
||||
<div className="flex h-screen w-screen items-center justify-center bg-background">
|
||||
<Loader2 className="h-10 w-10 animate-spin text-primary" />
|
||||
</div>
|
||||
)
|
||||
} else if (session !== null && "user" in session) {
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ResetPasswordModal
|
||||
isOpen={isResetPasswordModalOpen}
|
||||
setIsOpen={setResetPasswordModalOpen}
|
||||
/>
|
||||
<VerifyEmailModal
|
||||
isOpen={isVerifyEmailModalOpen}
|
||||
setIsOpen={setVerifyEmailModalOpen}
|
||||
email={emailToVerify}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col min-h-screen w-screen items-center justify-center bg-background gap-8 p-4 sm:p-0 ">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="font-display text-4xl sm:text-5xl tracking-[0.08em] text-primary">SiPher</span>
|
||||
<span className="font-mono text-[10px] text-muted-foreground tracking-[0.25em] uppercase w-full">Silent Whisper</span>
|
||||
</div>
|
||||
<Card className="relative w-full max-w-md bg-card text-card-foreground p-6 sm:p-8 rounded-lg shadow-2xl border-border">
|
||||
<div className="absolute top-4 left-4">
|
||||
<Button disabled={type === "orgInvite"} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" onClick={() => router.back()}>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="absolute top-4 right-4">
|
||||
<SettingsDropdown />
|
||||
</div>
|
||||
<CardHeader className="flex flex-col items-center space-y-6 pt-8 text-center">
|
||||
<CardTitle className="text-2xl font-semibold font-mono">
|
||||
{view === "signIn" && "Sign In"}
|
||||
{view === "signUp" && "Create an account"}
|
||||
{view === "forgotPassword" && "Reset Password"}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 overflow-hidden">
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
<motion.div
|
||||
key={view}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -50 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{view === "signIn" ? (
|
||||
<SignInForm
|
||||
setView={setView}
|
||||
onEmailNotVerified={(email) => {
|
||||
setEmailToVerify(email);
|
||||
setVerifyEmailModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
) : view === "signUp" ? (
|
||||
<SignUpForm
|
||||
setView={setView}
|
||||
onSuccess={(email) => {
|
||||
setEmailToVerify(email);
|
||||
setVerifyEmailModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ForgotPasswordForm setView={setView} />
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<span className="font-mono text-[10px] text-muted-foreground tracking-[0.25em] uppercase w-full">© 2026 Sipher. All rights reserved.</span>
|
||||
<span className="font-mono text-[10px] text-muted-foreground tracking-[0.25em] uppercase w-full">
|
||||
Refuse to be dominated. Be free. <Link href="" target="_blank" className="text-primary underline">Create your own network.</Link>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
|
|
@ -1,188 +1,211 @@
|
|||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: "Inter", sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--font-serif: "Playfair Display", serif;
|
||||
--radius: 0.5rem;
|
||||
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
|
||||
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
|
||||
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
||||
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
||||
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
||||
--tracking-normal: var(--tracking-normal);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--spacing: var(--spacing);
|
||||
--letter-spacing: var(--letter-spacing);
|
||||
--shadow-offset-y: var(--shadow-offset-y);
|
||||
--shadow-offset-x: var(--shadow-offset-x);
|
||||
--shadow-spread: var(--shadow-spread);
|
||||
--shadow-blur: var(--shadow-blur);
|
||||
--shadow-opacity: var(--shadow-opacity);
|
||||
--color-shadow-color: var(--shadow-color);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--radius-2xl: calc(var(--radius) + 8px);
|
||||
--radius-3xl: calc(var(--radius) + 12px);
|
||||
--radius-4xl: calc(var(--radius) + 16px);
|
||||
}
|
||||
|
||||
/* SiPher brand palette — Silent Whisper */
|
||||
:root {
|
||||
--background: oklch(0.9848 0 0);
|
||||
--foreground: oklch(0.1445 0 0);
|
||||
--card: oklch(1.0000 0 0);
|
||||
--card-foreground: oklch(0.1445 0 0);
|
||||
--popover: oklch(1.0000 0 0);
|
||||
--popover-foreground: oklch(0.1445 0 0);
|
||||
--primary: oklch(0.1457 0 0);
|
||||
--primary-foreground: oklch(0.9848 0 0);
|
||||
--secondary: oklch(0.6909 0.1457 163.5382);
|
||||
--secondary-foreground: oklch(0.9848 0 0);
|
||||
--muted: oklch(0.9703 0 0);
|
||||
--muted-foreground: oklch(0.5555 0 0);
|
||||
--accent: oklch(0.8608 0.1340 168.3558);
|
||||
--accent-foreground: oklch(0.2722 0.0523 166.7898);
|
||||
--destructive: oklch(0.6368 0.2078 25.3259);
|
||||
--destructive-foreground: oklch(0.9848 0 0);
|
||||
--border: oklch(0.9219 0 0);
|
||||
--input: oklch(0.9219 0 0);
|
||||
--ring: oklch(0.6909 0.1457 163.5382);
|
||||
--chart-1: oklch(0.1457 0 0);
|
||||
--chart-2: oklch(0.6909 0.1457 163.5382);
|
||||
--chart-3: oklch(0.8608 0.1340 168.3558);
|
||||
--chart-4: oklch(0.6709 0.1163 168.0411);
|
||||
--chart-5: oklch(0.3211 0 0);
|
||||
--radius: 0.5rem;
|
||||
--sidebar: oklch(0.9848 0 0);
|
||||
--sidebar-foreground: oklch(0.2697 0 0);
|
||||
--sidebar-primary: oklch(0.1457 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9848 0 0);
|
||||
--sidebar-accent: oklch(0.8608 0.1340 168.3558);
|
||||
--sidebar-accent-foreground: oklch(0.2722 0.0523 166.7898);
|
||||
--sidebar-border: oklch(0.9312 0 0);
|
||||
--sidebar-ring: oklch(0.6909 0.1457 163.5382);
|
||||
--font-sans: "Inter", sans-serif;
|
||||
--font-serif: "Playfair Display", serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--shadow-color: hsl(0, 0%, 0%);
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-blur: 8px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-offset-x: 0px;
|
||||
--shadow-offset-y: 2px;
|
||||
--letter-spacing: -0.01em;
|
||||
--spacing: 0.25rem;
|
||||
--shadow-2xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0px 2px 8px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-md: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-lg: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
|
||||
--shadow-2xl: 0px 2px 8px 0px hsl(0 0% 0% / 0.25);
|
||||
--tracking-normal: -0.01em;
|
||||
/* Brand tokens */
|
||||
--black: #080808;
|
||||
--surface: #0f0f0f;
|
||||
--card: #141414;
|
||||
--border: #1f1f1f;
|
||||
--muted: #2a2a2a;
|
||||
--dim: #555;
|
||||
--text: #e8e8e8;
|
||||
--subtle: #888;
|
||||
--acid: #c8f000;
|
||||
--static: #ff3c3c;
|
||||
--ghost: #9b9b9b;
|
||||
--void: #080808;
|
||||
--signal: #00e5ff;
|
||||
|
||||
/* Light mode — minimal variant for system preference */
|
||||
--background: #f5f5f5;
|
||||
--foreground: #0a0a0a;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #0a0a0a;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #0a0a0a;
|
||||
--primary: #8a9a00;
|
||||
--primary-foreground: #080808;
|
||||
--secondary: #e8e8e8;
|
||||
--secondary-foreground: #0a0a0a;
|
||||
--muted: #e5e5e5;
|
||||
--muted-foreground: #555;
|
||||
--accent: #c8f000;
|
||||
--accent-foreground: #080808;
|
||||
--destructive: #ff3c3c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e5e5e5;
|
||||
--input: #e5e5e5;
|
||||
--ring: #8a9a00;
|
||||
--chart-1: #8a9a00;
|
||||
--chart-2: #c8f000;
|
||||
--chart-3: #00e5ff;
|
||||
--chart-4: #9b9b9b;
|
||||
--chart-5: #555;
|
||||
--sidebar: #fafafa;
|
||||
--sidebar-foreground: #0a0a0a;
|
||||
--sidebar-primary: #8a9a00;
|
||||
--sidebar-primary-foreground: #080808;
|
||||
--sidebar-accent: #e5e5e5;
|
||||
--sidebar-accent-foreground: #0a0a0a;
|
||||
--sidebar-border: #e5e5e5;
|
||||
--sidebar-ring: #8a9a00;
|
||||
|
||||
--font-sans: "DM Sans", sans-serif;
|
||||
--font-mono: "Space Mono", monospace;
|
||||
--font-display: "Bebas Neue", sans-serif;
|
||||
|
||||
--radius: 0.2rem;
|
||||
--tracking-normal: -0.01em;
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--shadow-2xs: 0px 2px 4px 0px rgb(0 0 0 / 0.04);
|
||||
--shadow-xs: 0px 2px 4px 0px rgb(0 0 0 / 0.04);
|
||||
--shadow-sm: 0px 2px 8px 0px rgb(0 0 0 / 0.06), 0px 1px 2px -1px rgb(0 0 0 / 0.06);
|
||||
--shadow: 0px 2px 8px 0px rgb(0 0 0 / 0.08), 0px 1px 2px -1px rgb(0 0 0 / 0.08);
|
||||
--shadow-md: 0px 2px 8px 0px rgb(0 0 0 / 0.08), 0px 2px 4px -1px rgb(0 0 0 / 0.08);
|
||||
--shadow-lg: 0px 2px 8px 0px rgb(0 0 0 / 0.08), 0px 4px 6px -1px rgb(0 0 0 / 0.08);
|
||||
--shadow-xl: 0px 2px 8px 0px rgb(0 0 0 / 0.08), 0px 8px 10px -1px rgb(0 0 0 / 0.08);
|
||||
--shadow-2xl: 0px 2px 8px 0px rgb(0 0 0 / 0.15);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.1457 0 0);
|
||||
--foreground: oklch(0.9848 0 0);
|
||||
--card: oklch(0.1698 0 0);
|
||||
--card-foreground: oklch(0.9848 0 0);
|
||||
--popover: oklch(0.1698 0 0);
|
||||
--popover-foreground: oklch(0.9848 0 0);
|
||||
--primary: oklch(0.9848 0 0);
|
||||
--primary-foreground: oklch(0.1457 0 0);
|
||||
--secondary: oklch(0.6909 0.1457 163.5382);
|
||||
--secondary-foreground: oklch(0.9848 0 0);
|
||||
--muted: oklch(0.2376 0 0);
|
||||
--muted-foreground: oklch(0.7153 0 0);
|
||||
--accent: oklch(0.8608 0.1340 168.3558);
|
||||
--accent-foreground: oklch(0.2722 0.0523 166.7898);
|
||||
--destructive: oklch(0.3959 0.1331 25.7205);
|
||||
--destructive-foreground: oklch(0.9848 0 0);
|
||||
--border: oklch(0.2686 0 0);
|
||||
--input: oklch(0.2686 0 0);
|
||||
--ring: oklch(0.6909 0.1457 163.5382);
|
||||
--chart-1: oklch(0.9848 0 0);
|
||||
--chart-2: oklch(0.6909 0.1457 163.5382);
|
||||
--chart-3: oklch(0.8608 0.1340 168.3558);
|
||||
--chart-4: oklch(0.7557 0.1432 166.5106);
|
||||
--chart-5: oklch(0.8452 0 0);
|
||||
--radius: 0.5rem;
|
||||
--sidebar: oklch(0.1698 0 0);
|
||||
--sidebar-foreground: oklch(0.8845 0 0);
|
||||
--sidebar-primary: oklch(0.6909 0.1457 163.5382);
|
||||
--sidebar-primary-foreground: oklch(0.9848 0 0);
|
||||
--sidebar-accent: oklch(0.2376 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.8608 0.1340 168.3558);
|
||||
--sidebar-border: oklch(0.2697 0 0);
|
||||
--sidebar-ring: oklch(0.6909 0.1457 163.5382);
|
||||
--font-sans: "Inter", sans-serif;
|
||||
--font-serif: "Playfair Display", serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
--shadow-color: hsl(0, 0%, 0%);
|
||||
--shadow-opacity: 0.4;
|
||||
--shadow-blur: 12px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-offset-x: 0px;
|
||||
--shadow-offset-y: 4px;
|
||||
--letter-spacing: -0.01em;
|
||||
--spacing: 0.25rem;
|
||||
--shadow-2xs: 0px 4px 12px 0px hsl(0 0% 0% / 0.20);
|
||||
--shadow-xs: 0px 4px 12px 0px hsl(0 0% 0% / 0.20);
|
||||
--shadow-sm: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
|
||||
--shadow: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
|
||||
--shadow-md: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
|
||||
--shadow-lg: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
|
||||
--shadow-xl: 0px 4px 12px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
|
||||
--shadow-2xl: 0px 4px 12px 0px hsl(0 0% 0% / 1.00);
|
||||
/* SiPher dark theme — primary brand identity */
|
||||
--background: var(--black);
|
||||
--foreground: var(--text);
|
||||
--card: #141414;
|
||||
--card-foreground: var(--text);
|
||||
--popover: var(--surface);
|
||||
--popover-foreground: var(--text);
|
||||
--primary: var(--acid);
|
||||
--primary-foreground: var(--void);
|
||||
--secondary: var(--muted);
|
||||
--secondary-foreground: var(--text);
|
||||
--muted: var(--muted);
|
||||
--muted-foreground: var(--subtle);
|
||||
--accent: var(--acid);
|
||||
--accent-foreground: var(--void);
|
||||
--destructive: var(--static);
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: var(--border);
|
||||
--input: var(--border);
|
||||
--ring: var(--acid);
|
||||
--chart-1: var(--acid);
|
||||
--chart-2: var(--signal);
|
||||
--chart-3: var(--static);
|
||||
--chart-4: var(--ghost);
|
||||
--chart-5: var(--subtle);
|
||||
--sidebar: var(--surface);
|
||||
--sidebar-foreground: var(--text);
|
||||
--sidebar-primary: var(--acid);
|
||||
--sidebar-primary-foreground: var(--void);
|
||||
--sidebar-accent: var(--muted);
|
||||
--sidebar-accent-foreground: var(--acid);
|
||||
--sidebar-border: var(--border);
|
||||
--sidebar-ring: var(--acid);
|
||||
|
||||
--shadow-2xs: 0px 4px 12px 0px rgb(0 0 0 / 0.25);
|
||||
--shadow-xs: 0px 4px 12px 0px rgb(0 0 0 / 0.25);
|
||||
--shadow-sm: 0px 4px 12px 0px rgb(0 0 0 / 0.35), 0px 1px 2px -1px rgb(0 0 0 / 0.35);
|
||||
--shadow: 0px 4px 12px 0px rgb(0 0 0 / 0.4), 0px 1px 2px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0px 4px 12px 0px rgb(0 0 0 / 0.4), 0px 2px 4px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-lg: 0px 4px 12px 0px rgb(0 0 0 / 0.4), 0px 4px 6px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-xl: 0px 4px 12px 0px rgb(0 0 0 / 0.4), 0px 8px 10px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-2xl: 0px 4px 12px 0px rgb(0 0 0 / 0.6);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
/* Brand palette — use as bg-acid, text-signal, etc. */
|
||||
--color-acid: var(--acid);
|
||||
--color-static: var(--static);
|
||||
--color-ghost: var(--ghost);
|
||||
--color-void: var(--void);
|
||||
--color-signal: var(--signal);
|
||||
--color-surface: var(--surface);
|
||||
--color-dim: var(--dim);
|
||||
--color-subtle: var(--subtle);
|
||||
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-display: var(--font-display);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 2px);
|
||||
--radius-md: var(--radius);
|
||||
--radius-lg: calc(var(--radius) + 2px);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
|
||||
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
|
||||
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
|
||||
--tracking-normal: var(--tracking-normal);
|
||||
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
||||
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
||||
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground font-sans antialiased;
|
||||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
|
||||
/* Section labels — Space Mono, uppercase, letter-spacing */
|
||||
.section-label {
|
||||
@apply font-mono text-[10px] text-muted-foreground uppercase tracking-[0.2em];
|
||||
}
|
||||
|
||||
/* Display typography — Bebas Neue for headings */
|
||||
.font-display {
|
||||
font-family: var(--font-display), sans-serif;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +1,35 @@
|
|||
import type { Metadata } from "next";
|
||||
import { Inter, JetBrains_Mono, Playfair_Display } from "next/font/google";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { Bebas_Neue, DM_Sans, Space_Mono } from "next/font/google";
|
||||
import { Toaster } from "sonner";
|
||||
import "./globals.css";
|
||||
|
||||
const fontSans = Inter({
|
||||
const fontSans = DM_Sans({
|
||||
subsets: ["latin"],
|
||||
weight: ["300", "400", "500"],
|
||||
variable: "--font-sans",
|
||||
});
|
||||
|
||||
const fontSerif = Playfair_Display({
|
||||
const fontMono = Space_Mono({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-serif",
|
||||
weight: ["400", "700"],
|
||||
style: ["normal", "italic"],
|
||||
variable: "--font-mono",
|
||||
});
|
||||
|
||||
const fontMono = JetBrains_Mono({
|
||||
const fontDisplay = Bebas_Neue({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-mono",
|
||||
weight: "400",
|
||||
variable: "--font-display",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Sipher",
|
||||
description: "A federated social media platform for the modern age.",
|
||||
icons: {
|
||||
icon: "/favicon.svg",
|
||||
},
|
||||
manifest: "/manifest.json",
|
||||
themeColor: "#18181b",
|
||||
viewport: {
|
||||
width: "device-width",
|
||||
initialScale: 1,
|
||||
maximumScale: 1,
|
||||
userScalable: false,
|
||||
icon: "/logo/sipher.svg",
|
||||
},
|
||||
manifest: "/manifest.json"
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
|
@ -39,9 +38,17 @@ export default function RootLayout({
|
|||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${fontSans.variable} ${fontSerif.variable} ${fontMono.variable} antialiased`}>
|
||||
{children}
|
||||
<html suppressHydrationWarning>
|
||||
<body className={`${fontSans.variable} ${fontMono.variable} ${fontDisplay.variable} antialiased`}>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="dark"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<Toaster />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
"use server";
|
||||
|
||||
import { auth } from "@/lib/auth";
|
||||
import { headers } from "next/headers";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default async function Home() {
|
||||
|
||||
const session = await auth.api.getSession({
|
||||
headers: await headers(),
|
||||
});
|
||||
if (!session) redirect(`/auth`);
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<></>
|
||||
);
|
||||
|
|
|
|||
95
src/components/login-form.tsx
Normal file
95
src/components/login-form.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import {
|
||||
Field,
|
||||
FieldDescription,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
FieldSeparator,
|
||||
} from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
export function LoginForm({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-6", className)} {...props}>
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-xl">Welcome back</CardTitle>
|
||||
<CardDescription>
|
||||
Login with your Apple or Google account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form>
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<Button variant="outline" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
Login with Apple
|
||||
</Button>
|
||||
<Button variant="outline" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
Login with Google
|
||||
</Button>
|
||||
</Field>
|
||||
<FieldSeparator className="*:data-[slot=field-separator-content]:bg-card">
|
||||
Or continue with
|
||||
</FieldSeparator>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="email">Email</FieldLabel>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field>
|
||||
<div className="flex items-center">
|
||||
<FieldLabel htmlFor="password">Password</FieldLabel>
|
||||
<a
|
||||
href="#"
|
||||
className="ml-auto text-sm underline-offset-4 hover:underline"
|
||||
>
|
||||
Forgot your password?
|
||||
</a>
|
||||
</div>
|
||||
<Input id="password" type="password" required />
|
||||
</Field>
|
||||
<Field>
|
||||
<Button type="submit">Login</Button>
|
||||
<FieldDescription className="text-center">
|
||||
Don't have an account? <a href="#">Sign up</a>
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<FieldDescription className="px-6 text-center">
|
||||
By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
|
||||
and <a href="#">Privacy Policy</a>.
|
||||
</FieldDescription>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
64
src/components/ui/button.tsx
Normal file
64
src/components/ui/button.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
92
src/components/ui/card.tsx
Normal file
92
src/components/ui/card.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
158
src/components/ui/dialog.tsx
Normal file
158
src/components/ui/dialog.tsx
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { XIcon } from "lucide-react"
|
||||
import { Dialog as DialogPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close asChild>
|
||||
<Button variant="outline">Close</Button>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
257
src/components/ui/dropdown-menu.tsx
Normal file
257
src/components/ui/dropdown-menu.tsx
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
||||
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function DropdownMenu({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
||||
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Trigger
|
||||
data-slot="dropdown-menu-trigger"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
data-slot="dropdown-menu-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="size-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Label
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
||||
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto size-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
||||
return (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
248
src/components/ui/field.tsx
Normal file
248
src/components/ui/field.tsx
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
"use client"
|
||||
|
||||
import { useMemo } from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
|
||||
function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
|
||||
return (
|
||||
<fieldset
|
||||
data-slot="field-set"
|
||||
className={cn(
|
||||
"flex flex-col gap-6",
|
||||
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLegend({
|
||||
className,
|
||||
variant = "legend",
|
||||
...props
|
||||
}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
|
||||
return (
|
||||
<legend
|
||||
data-slot="field-legend"
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"mb-3 font-medium",
|
||||
"data-[variant=legend]:text-base",
|
||||
"data-[variant=label]:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-group"
|
||||
className={cn(
|
||||
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const fieldVariants = cva(
|
||||
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
|
||||
{
|
||||
variants: {
|
||||
orientation: {
|
||||
vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
|
||||
horizontal: [
|
||||
"flex-row items-center",
|
||||
"[&>[data-slot=field-label]]:flex-auto",
|
||||
"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
],
|
||||
responsive: [
|
||||
"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
|
||||
"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
|
||||
"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
||||
],
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
orientation: "vertical",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Field({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
data-slot="field"
|
||||
data-orientation={orientation}
|
||||
className={cn(fieldVariants({ orientation }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-content"
|
||||
className={cn(
|
||||
"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Label>) {
|
||||
return (
|
||||
<Label
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
|
||||
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
|
||||
"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-label"
|
||||
className={cn(
|
||||
"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="field-description"
|
||||
className={cn(
|
||||
"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
|
||||
"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
|
||||
"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
children?: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="field-separator"
|
||||
data-content={!!children}
|
||||
className={cn(
|
||||
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<Separator className="absolute inset-0 top-1/2" />
|
||||
{children && (
|
||||
<span
|
||||
className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
|
||||
data-slot="field-separator-content"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function FieldError({
|
||||
className,
|
||||
children,
|
||||
errors,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
errors?: Array<{ message?: string } | undefined>
|
||||
}) {
|
||||
const content = useMemo(() => {
|
||||
if (children) {
|
||||
return children
|
||||
}
|
||||
|
||||
if (!errors?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const uniqueErrors = [
|
||||
...new Map(errors.map((error) => [error?.message, error])).values(),
|
||||
]
|
||||
|
||||
if (uniqueErrors?.length == 1) {
|
||||
return uniqueErrors[0]?.message
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className="ml-4 flex list-disc flex-col gap-1">
|
||||
{uniqueErrors.map(
|
||||
(error, index) =>
|
||||
error?.message && <li key={index}>{error.message}</li>
|
||||
)}
|
||||
</ul>
|
||||
)
|
||||
}, [children, errors])
|
||||
|
||||
if (!content) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
role="alert"
|
||||
data-slot="field-error"
|
||||
className={cn("text-sm font-normal text-destructive", className)}
|
||||
{...props}
|
||||
>
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Field,
|
||||
FieldLabel,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLegend,
|
||||
FieldSeparator,
|
||||
FieldSet,
|
||||
FieldContent,
|
||||
FieldTitle,
|
||||
}
|
||||
167
src/components/ui/form.tsx
Normal file
167
src/components/ui/form.tsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import type { Label as LabelPrimitive } from "radix-ui"
|
||||
import { Slot } from "radix-ui"
|
||||
import {
|
||||
Controller,
|
||||
FormProvider,
|
||||
useFormContext,
|
||||
useFormState,
|
||||
type ControllerProps,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
const Form = FormProvider
|
||||
|
||||
type FormFieldContextValue<
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
> = {
|
||||
name: TName
|
||||
}
|
||||
|
||||
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||
{} as FormFieldContextValue
|
||||
)
|
||||
|
||||
const FormField = <
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||
>({
|
||||
...props
|
||||
}: ControllerProps<TFieldValues, TName>) => {
|
||||
return (
|
||||
<FormFieldContext.Provider value={{ name: props.name }}>
|
||||
<Controller {...props} />
|
||||
</FormFieldContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const useFormField = () => {
|
||||
const fieldContext = React.useContext(FormFieldContext)
|
||||
const itemContext = React.useContext(FormItemContext)
|
||||
const { getFieldState } = useFormContext()
|
||||
const formState = useFormState({ name: fieldContext.name })
|
||||
const fieldState = getFieldState(fieldContext.name, formState)
|
||||
|
||||
if (!fieldContext) {
|
||||
throw new Error("useFormField should be used within <FormField>")
|
||||
}
|
||||
|
||||
const { id } = itemContext
|
||||
|
||||
return {
|
||||
id,
|
||||
name: fieldContext.name,
|
||||
formItemId: `${id}-form-item`,
|
||||
formDescriptionId: `${id}-form-item-description`,
|
||||
formMessageId: `${id}-form-item-message`,
|
||||
...fieldState,
|
||||
}
|
||||
}
|
||||
|
||||
type FormItemContextValue = {
|
||||
id: string
|
||||
}
|
||||
|
||||
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||
{} as FormItemContextValue
|
||||
)
|
||||
|
||||
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const id = React.useId()
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div
|
||||
data-slot="form-item"
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
</FormItemContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function FormLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
const { error, formItemId } = useFormField()
|
||||
|
||||
return (
|
||||
<Label
|
||||
data-slot="form-label"
|
||||
data-error={!!error}
|
||||
className={cn("data-[error=true]:text-destructive", className)}
|
||||
htmlFor={formItemId}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
|
||||
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
|
||||
|
||||
return (
|
||||
<Slot.Root
|
||||
data-slot="form-control"
|
||||
id={formItemId}
|
||||
aria-describedby={
|
||||
!error
|
||||
? `${formDescriptionId}`
|
||||
: `${formDescriptionId} ${formMessageId}`
|
||||
}
|
||||
aria-invalid={!!error}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { formDescriptionId } = useFormField()
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-description"
|
||||
id={formDescriptionId}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
||||
const { error, formMessageId } = useFormField()
|
||||
const body = error ? String(error?.message ?? "") : props.children
|
||||
|
||||
if (!body) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-message"
|
||||
id={formMessageId}
|
||||
className={cn("text-sm text-destructive", className)}
|
||||
{...props}
|
||||
>
|
||||
{body}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
useFormField,
|
||||
Form,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormMessage,
|
||||
FormField,
|
||||
}
|
||||
21
src/components/ui/input.tsx
Normal file
21
src/components/ui/input.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
|
||||
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
|
||||
"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
24
src/components/ui/label.tsx
Normal file
24
src/components/ui/label.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Label as LabelPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
28
src/components/ui/separator.tsx
Normal file
28
src/components/ui/separator.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Separator as SeparatorPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
40
src/components/ui/sonner.tsx
Normal file
40
src/components/ui/sonner.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
"use client"
|
||||
|
||||
import {
|
||||
CircleCheckIcon,
|
||||
InfoIcon,
|
||||
Loader2Icon,
|
||||
OctagonXIcon,
|
||||
TriangleAlertIcon,
|
||||
} from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = "system" } = useTheme()
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
className="toaster group"
|
||||
icons={{
|
||||
success: <CircleCheckIcon className="size-4" />,
|
||||
info: <InfoIcon className="size-4" />,
|
||||
warning: <TriangleAlertIcon className="size-4" />,
|
||||
error: <OctagonXIcon className="size-4" />,
|
||||
loading: <Loader2Icon className="size-4 animate-spin" />,
|
||||
}}
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
"--border-radius": "var(--radius)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toaster }
|
||||
10
src/lib/auth-client.ts
Normal file
10
src/lib/auth-client.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { twoFactorClient, usernameClient } from "better-auth/client/plugins";
|
||||
import { createAuthClient } from "better-auth/react";
|
||||
|
||||
export const authClient = createAuthClient({
|
||||
fetchOptions: {},
|
||||
plugins: [
|
||||
usernameClient(),
|
||||
twoFactorClient(),
|
||||
]
|
||||
})
|
||||
|
|
@ -1,13 +1,40 @@
|
|||
import { drizzleAdapter } from "@better-auth/drizzle-adapter";
|
||||
import { betterAuth } from "better-auth";
|
||||
import { createAuthMiddleware } from "better-auth/api";
|
||||
import { bearer, haveIBeenPwned, testUtils, twoFactor, username } from "better-auth/plugins";
|
||||
import db from "./db";
|
||||
import * as schema from "./db/schema";
|
||||
import EmailService from "./mail";
|
||||
|
||||
const isTest = process.env.NODE_ENV === "test";
|
||||
const emailService: EmailService | undefined = isTest ? undefined : new EmailService();
|
||||
|
||||
export const auth = betterAuth({
|
||||
secret: process.env.BETTER_AUTH_SECRET!,
|
||||
baseURL: process.env.BETTER_AUTH_URL ?? (process.env.NODE_ENV === "test" ? "http://localhost:3000" : undefined),
|
||||
experimental: {
|
||||
joins: true
|
||||
},
|
||||
database: drizzleAdapter(db, { provider: "pg" }),
|
||||
emailAndPassword: {
|
||||
enabled: true,
|
||||
},
|
||||
emailVerification: {
|
||||
sendOnSignUp: true,
|
||||
sendVerificationEmail: async ({ user, url, token }) => {
|
||||
try {
|
||||
if (isTest) return;
|
||||
await emailService!.sendRegisterEmail(user.email, token);
|
||||
console.log("Email sent to", user.email);
|
||||
} catch (error) {
|
||||
console.error("Error sending email", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
},
|
||||
database: drizzleAdapter(db, {
|
||||
provider: "pg",
|
||||
schema
|
||||
}),
|
||||
hooks: {
|
||||
after: createAuthMiddleware(async (context) => {
|
||||
if (!context.path) return;
|
||||
|
|
@ -21,5 +48,17 @@ export const auth = betterAuth({
|
|||
break;
|
||||
}
|
||||
})
|
||||
},
|
||||
plugins: [
|
||||
username(),
|
||||
twoFactor(),
|
||||
bearer(),
|
||||
haveIBeenPwned(),
|
||||
testUtils() // TODO: Add a conditional plugin for test utils in development
|
||||
],
|
||||
// This is disabled by default, but I'll keep this here for ease of mind.
|
||||
// You never know when companies will change their minds and decide to start tracking you.
|
||||
telemetry: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
import 'dotenv/config';
|
||||
import { drizzle } from "drizzle-orm/node-postgres";
|
||||
import { Pool } from "pg";
|
||||
import * as schema from "./schema";
|
||||
|
||||
const pool = new Pool({
|
||||
connectionString: process.env.DATABASE_URL!,
|
||||
});
|
||||
|
||||
const db = drizzle({ client: pool });
|
||||
const db = drizzle({ client: pool, schema });
|
||||
|
||||
export default db;
|
||||
|
|
@ -12,6 +12,9 @@ export const user = pgTable("user", {
|
|||
.defaultNow()
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
username: text("username").unique(),
|
||||
displayUsername: text("display_username"),
|
||||
twoFactorEnabled: boolean("two_factor_enabled").default(false),
|
||||
});
|
||||
|
||||
export const session = pgTable(
|
||||
|
|
@ -73,9 +76,26 @@ export const verification = pgTable(
|
|||
(table) => [index("verification_identifier_idx").on(table.identifier)],
|
||||
);
|
||||
|
||||
export const twoFactor = pgTable(
|
||||
"two_factor",
|
||||
{
|
||||
id: text("id").primaryKey(),
|
||||
secret: text("secret").notNull(),
|
||||
backupCodes: text("backup_codes").notNull(),
|
||||
userId: text("user_id")
|
||||
.notNull()
|
||||
.references(() => user.id, { onDelete: "cascade" }),
|
||||
},
|
||||
(table) => [
|
||||
index("twoFactor_secret_idx").on(table.secret),
|
||||
index("twoFactor_userId_idx").on(table.userId),
|
||||
],
|
||||
);
|
||||
|
||||
export const userRelations = relations(user, ({ many }) => ({
|
||||
sessions: many(session),
|
||||
accounts: many(account),
|
||||
twoFactors: many(twoFactor),
|
||||
}));
|
||||
|
||||
export const sessionRelations = relations(session, ({ one }) => ({
|
||||
|
|
@ -91,3 +111,10 @@ export const accountRelations = relations(account, ({ one }) => ({
|
|||
references: [user.id],
|
||||
}),
|
||||
}));
|
||||
|
||||
export const twoFactorRelations = relations(twoFactor, ({ one }) => ({
|
||||
user: one(user, {
|
||||
fields: [twoFactor.userId],
|
||||
references: [user.id],
|
||||
}),
|
||||
}));
|
||||
|
|
|
|||
120
src/lib/db/schema/user/index.ts
Normal file
120
src/lib/db/schema/user/index.ts
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import { relations } from "drizzle-orm";
|
||||
import { boolean, index, pgTable, text, timestamp } from "drizzle-orm/pg-core";
|
||||
|
||||
export const user = pgTable("user", {
|
||||
id: text("id").primaryKey(),
|
||||
name: text("name").notNull(),
|
||||
email: text("email").notNull().unique(),
|
||||
emailVerified: boolean("email_verified").default(false).notNull(),
|
||||
image: text("image"),
|
||||
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||
updatedAt: timestamp("updated_at")
|
||||
.defaultNow()
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
username: text("username").unique(),
|
||||
displayUsername: text("display_username"),
|
||||
twoFactorEnabled: boolean("two_factor_enabled").default(false),
|
||||
});
|
||||
|
||||
export const session = pgTable(
|
||||
"session",
|
||||
{
|
||||
id: text("id").primaryKey(),
|
||||
expiresAt: timestamp("expires_at").notNull(),
|
||||
token: text("token").notNull().unique(),
|
||||
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||
updatedAt: timestamp("updated_at")
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
ipAddress: text("ip_address"),
|
||||
userAgent: text("user_agent"),
|
||||
userId: text("user_id")
|
||||
.notNull()
|
||||
.references(() => user.id, { onDelete: "cascade" }),
|
||||
},
|
||||
(table) => [index("session_userId_idx").on(table.userId)],
|
||||
);
|
||||
|
||||
export const account = pgTable(
|
||||
"account",
|
||||
{
|
||||
id: text("id").primaryKey(),
|
||||
accountId: text("account_id").notNull(),
|
||||
providerId: text("provider_id").notNull(),
|
||||
userId: text("user_id")
|
||||
.notNull()
|
||||
.references(() => user.id, { onDelete: "cascade" }),
|
||||
accessToken: text("access_token"),
|
||||
refreshToken: text("refresh_token"),
|
||||
idToken: text("id_token"),
|
||||
accessTokenExpiresAt: timestamp("access_token_expires_at"),
|
||||
refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
|
||||
scope: text("scope"),
|
||||
password: text("password"),
|
||||
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||
updatedAt: timestamp("updated_at")
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
},
|
||||
(table) => [index("account_userId_idx").on(table.userId)],
|
||||
);
|
||||
|
||||
export const verification = pgTable(
|
||||
"verification",
|
||||
{
|
||||
id: text("id").primaryKey(),
|
||||
identifier: text("identifier").notNull(),
|
||||
value: text("value").notNull(),
|
||||
expiresAt: timestamp("expires_at").notNull(),
|
||||
createdAt: timestamp("created_at").defaultNow().notNull(),
|
||||
updatedAt: timestamp("updated_at")
|
||||
.defaultNow()
|
||||
.$onUpdate(() => /* @__PURE__ */ new Date())
|
||||
.notNull(),
|
||||
},
|
||||
(table) => [index("verification_identifier_idx").on(table.identifier)],
|
||||
);
|
||||
|
||||
export const twoFactor = pgTable(
|
||||
"two_factor",
|
||||
{
|
||||
id: text("id").primaryKey(),
|
||||
secret: text("secret").notNull(),
|
||||
backupCodes: text("backup_codes").notNull(),
|
||||
userId: text("user_id")
|
||||
.notNull()
|
||||
.references(() => user.id, { onDelete: "cascade" }),
|
||||
},
|
||||
(table) => [
|
||||
index("twoFactor_secret_idx").on(table.secret),
|
||||
index("twoFactor_userId_idx").on(table.userId),
|
||||
],
|
||||
);
|
||||
|
||||
export const userRelations = relations(user, ({ many }) => ({
|
||||
sessions: many(session),
|
||||
accounts: many(account),
|
||||
twoFactors: many(twoFactor),
|
||||
}));
|
||||
|
||||
export const sessionRelations = relations(session, ({ one }) => ({
|
||||
user: one(user, {
|
||||
fields: [session.userId],
|
||||
references: [user.id],
|
||||
}),
|
||||
}));
|
||||
|
||||
export const accountRelations = relations(account, ({ one }) => ({
|
||||
user: one(user, {
|
||||
fields: [account.userId],
|
||||
references: [user.id],
|
||||
}),
|
||||
}));
|
||||
|
||||
export const twoFactorRelations = relations(twoFactor, ({ one }) => ({
|
||||
user: one(user, {
|
||||
fields: [twoFactor.userId],
|
||||
references: [user.id],
|
||||
}),
|
||||
}));
|
||||
46
src/lib/mail/email-tailwind.config.ts
Normal file
46
src/lib/mail/email-tailwind.config.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import { pixelBasedPreset } from "@react-email/tailwind";
|
||||
import type { TailwindConfig } from "@react-email/tailwind";
|
||||
|
||||
/**
|
||||
* React Email Tailwind config matching globals.css design tokens.
|
||||
* Uses literal hex values since email clients don't support CSS variables.
|
||||
*/
|
||||
export const emailTailwindConfig: TailwindConfig = {
|
||||
presets: [pixelBasedPreset],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: "#fafafa",
|
||||
foreground: "#0a0a0a",
|
||||
card: "#ffffff",
|
||||
"card-foreground": "#0a0a0a",
|
||||
popover: "#ffffff",
|
||||
"popover-foreground": "#0a0a0a",
|
||||
primary: "#0a0a0a",
|
||||
"primary-foreground": "#fafafa",
|
||||
secondary: "#0d9b6b",
|
||||
"secondary-foreground": "#fafafa",
|
||||
muted: "#f5f5f5",
|
||||
"muted-foreground": "#737373",
|
||||
accent: "#5ee7c4",
|
||||
"accent-foreground": "#032d22",
|
||||
destructive: "#e85a5a",
|
||||
"destructive-foreground": "#fafafa",
|
||||
border: "#e5e5e5",
|
||||
input: "#e5e5e5",
|
||||
ring: "#0d9b6b",
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ["Inter", "sans-serif"],
|
||||
serif: ["Playfair Display", "serif"],
|
||||
mono: ["JetBrains Mono", "monospace"],
|
||||
},
|
||||
borderRadius: {
|
||||
sm: "2px",
|
||||
md: "3px",
|
||||
lg: "5px",
|
||||
xl: "9px",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
86
src/lib/mail/index.ts
Normal file
86
src/lib/mail/index.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import { render } from "@react-email/render";
|
||||
import { createTransport, SendMailOptions } from "nodemailer";
|
||||
import React from "react";
|
||||
import { z } from "zod";
|
||||
import RegisterEmail from "./templates/register";
|
||||
|
||||
export default class EmailService {
|
||||
private readonly config: {
|
||||
host: string;
|
||||
port: number;
|
||||
secure: boolean;
|
||||
auth: {
|
||||
user: string;
|
||||
pass: string;
|
||||
};
|
||||
} | null = null;
|
||||
|
||||
private readonly transporter: ReturnType<typeof createTransport> | null = null;
|
||||
|
||||
constructor() {
|
||||
const configSchema = z.object({
|
||||
host: z.string("EMAIL_HOST is required").min(1, "EMAIL_HOST cannot be empty"),
|
||||
port: z.string("EMAIL_PORT is required")
|
||||
.min(1, "EMAIL_PORT cannot be empty")
|
||||
.transform((val, ctx) => {
|
||||
const n = parseInt(val, 10);
|
||||
if (Number.isNaN(n) || n < 1 || n > 65535) {
|
||||
ctx.addIssue({ code: "custom", message: "EMAIL_PORT must be a valid port number (1-65535)" });
|
||||
return z.NEVER;
|
||||
}
|
||||
return n;
|
||||
}),
|
||||
secure: z.union([
|
||||
z.string().transform(val => val === "true" || val === "1"),
|
||||
z.boolean()
|
||||
], { error: "EMAIL_SECURE must be a boolean or string 'true'/'false'" }),
|
||||
auth: z.object({
|
||||
user: z.string("EMAIL_USER is required").min(1, "EMAIL_USER cannot be empty"),
|
||||
pass: z.string("EMAIL_PASSWORD is required").min(1, "EMAIL_PASSWORD cannot be empty"),
|
||||
}, { error: "Email auth credentials (EMAIL_USER, EMAIL_PASSWORD) are required" }),
|
||||
})
|
||||
|
||||
const fromEnv = {
|
||||
host: process.env.EMAIL_HOST,
|
||||
port: process.env.EMAIL_PORT,
|
||||
secure: Boolean(process.env.EMAIL_SECURE ?? false),
|
||||
auth: {
|
||||
user: process.env.EMAIL_USER,
|
||||
pass: process.env.EMAIL_PASSWORD,
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
const validatedConfig = configSchema.safeParse(fromEnv);
|
||||
if (!validatedConfig.success) {
|
||||
const details = validatedConfig.error.issues
|
||||
.map((issue) =>
|
||||
` • ${issue.path.length ? String(issue.path.join(".")) : "config"}: ${issue.message}`
|
||||
)
|
||||
.join("\n");
|
||||
throw new Error(`Invalid email configuration:\n${details}`);
|
||||
}
|
||||
|
||||
this.config = validatedConfig.data;
|
||||
this.transporter = createTransport(this.config);
|
||||
}
|
||||
|
||||
private async sendEmail(to: string, subject: string, content: string, options?: { html?: boolean }) {
|
||||
if (!this.transporter || !this.config) { throw new Error("Email transporter not initialized"); }
|
||||
console.log("Sending email to", to, "with subject", subject);
|
||||
const mailOptions: SendMailOptions = {
|
||||
from: `${this.config.auth.user} <${this.config.auth.user}>`,
|
||||
to,
|
||||
subject,
|
||||
...(options?.html ? { html: content } : { text: content }),
|
||||
};
|
||||
|
||||
const result = await this.transporter.sendMail(mailOptions);
|
||||
return result.messageId;
|
||||
}
|
||||
|
||||
public async sendRegisterEmail(to: string, verificationCode: string) {
|
||||
const template = await render(React.createElement(RegisterEmail, { verificationCode }));
|
||||
return this.sendEmail(to, "Verify your email", template, { html: true });
|
||||
}
|
||||
}
|
||||
115
src/lib/mail/templates/register.tsx
Normal file
115
src/lib/mail/templates/register.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
import {
|
||||
Body,
|
||||
Container,
|
||||
Font,
|
||||
Head,
|
||||
Heading,
|
||||
Hr,
|
||||
Html,
|
||||
Img,
|
||||
Link,
|
||||
Preview,
|
||||
Section,
|
||||
Tailwind,
|
||||
Text,
|
||||
} from '@react-email/components';
|
||||
import { emailTailwindConfig } from '../email-tailwind.config';
|
||||
|
||||
interface RegisterEmailProps {
|
||||
verificationCode?: string;
|
||||
}
|
||||
|
||||
const baseUrl = process.env.VERCEL_URL
|
||||
? `https://${process.env.VERCEL_URL}`
|
||||
: '';
|
||||
|
||||
export default function RegisterEmail({
|
||||
verificationCode,
|
||||
}: RegisterEmailProps) {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<Tailwind config={emailTailwindConfig}>
|
||||
<Font
|
||||
fontFamily="Inter"
|
||||
fallbackFontFamily="sans-serif"
|
||||
webFont={{
|
||||
url: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
|
||||
format: "woff2",
|
||||
}}
|
||||
/>
|
||||
<Body className="bg-white font-aws text-[#212121]">
|
||||
<Preview>Sipher Email Verification</Preview>
|
||||
<Container className="p-5 mx-auto bg-[#eee]">
|
||||
<Section className="bg-white">
|
||||
<Section className="bg-[#252f3d] flex py-5 items-center justify-center">
|
||||
<Img
|
||||
src={`${baseUrl}/static/sipher-logo.png`}
|
||||
width="75"
|
||||
height="45"
|
||||
alt="Sipher's Logo"
|
||||
/>
|
||||
</Section>
|
||||
<Section className="py-[25px] px-[35px]">
|
||||
<Heading className="text-[#333] text-[20px] font-bold mb-[15px]">
|
||||
Verify your email address
|
||||
</Heading>
|
||||
<Text className="text-[#333] text-[14px] leading-[24px] mt-6 mb-[14px] mx-0">
|
||||
Hope this message finds you well.
|
||||
<br /> Please enter the following verification code when prompted. If you don't want to
|
||||
create an account, you can ignore this message and the account will be deleted after 10 minutes.
|
||||
</Text>
|
||||
<Section className="flex items-center justify-center">
|
||||
<Text className="text-[#333] m-0 font-bold text-center text-[14px]">
|
||||
Verification code
|
||||
</Text>
|
||||
|
||||
<Text className="text-[#333] text-[36px] my-[10px] mx-0 font-bold text-center">
|
||||
{verificationCode}
|
||||
</Text>
|
||||
<Text className="text-[#333] text-[14px] m-0 text-center">
|
||||
(This code is valid for 10 minutes and can be used only once)
|
||||
</Text>
|
||||
</Section>
|
||||
</Section>
|
||||
<Hr />
|
||||
<Section className="py-[25px] px-[35px]">
|
||||
<Text className="text-[#333] text-[14px] m-0">
|
||||
Sipher will never email you and ask you for your personal information.
|
||||
We also will never send you any promotion emails or spam emails.
|
||||
<br />
|
||||
If you receive any email asking for your personal information or any other data, please ignore it and report it to us immediately at <Link href="mailto:support@sipher.com" target="_blank" className="text-[#2754C5] underline text-[14px]">support@sipher.com</Link>.
|
||||
<br />
|
||||
</Text>
|
||||
</Section>
|
||||
</Section>
|
||||
<Text className="text-[#333] text-[12px] my-[24px] mx-0 px-5 py-0">
|
||||
This message was produced and distributed by Sipher,
|
||||
Sipher is a federated social media platform. View our{' '}
|
||||
<Link
|
||||
href="https://sipher.com/privacy"
|
||||
target="_blank"
|
||||
className="text-[#2754C5] underline text-[14px]"
|
||||
>
|
||||
Terms of Service
|
||||
</Link>
|
||||
{' '}and our{' '}
|
||||
<Link
|
||||
href="https://sipher.com/privacy"
|
||||
target="_blank"
|
||||
className="text-[#2754C5] underline text-[14px]"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
.
|
||||
</Text>
|
||||
</Container>
|
||||
</Body>
|
||||
</Tailwind>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
|
||||
RegisterEmail.PreviewProps = {
|
||||
verificationCode: '596853',
|
||||
} satisfies RegisterEmailProps;
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { config } from 'dotenv'
|
||||
import { createServer } from 'http'
|
||||
import next from 'next'
|
||||
|
||||
config({ path: '.env.local' })
|
||||
const port = parseInt(process.env.PORT || '3000', 10)
|
||||
const dev = process.env.NODE_ENV !== 'production'
|
||||
const app = next({ dev })
|
||||
const handle = app.getRequestHandler()
|
||||
|
||||
app.prepare().then(() => {
|
||||
createServer((req, res) => {
|
||||
handle(req, res)
|
||||
}).listen(port)
|
||||
|
||||
console.log(
|
||||
`> Server listening at http://localhost:${port} as ${dev ? 'development' : process.env.NODE_ENV
|
||||
}`
|
||||
)
|
||||
})
|
||||
45
tests/auth.test.ts
Normal file
45
tests/auth.test.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import { auth } from "@/lib/auth"
|
||||
import { expect, test } from "@playwright/test"
|
||||
|
||||
// NOTICE: Does not work, will fix it later
|
||||
|
||||
test("create and login user", async ({ context, page }) => {
|
||||
const ctx = await auth.$context
|
||||
const testUtils = ctx.test
|
||||
|
||||
// Go to home page
|
||||
await page.goto("/")
|
||||
// Check if we are redirected to the auth page
|
||||
await expect(page).toHaveURL("/auth")
|
||||
|
||||
// Create and save user
|
||||
const user = testUtils.createUser({
|
||||
email: "e2e@example.com",
|
||||
name: "E2E User"
|
||||
})
|
||||
await testUtils.saveUser(user)
|
||||
|
||||
// Get cookies and inject into browser
|
||||
const cookies = await testUtils.getCookies({
|
||||
userId: user.id,
|
||||
domain: "localhost"
|
||||
})
|
||||
await context.addCookies(cookies)
|
||||
|
||||
// Login
|
||||
await testUtils.login({ userId: user.id })
|
||||
// Check if we got redirected to the home page
|
||||
await expect(page).toHaveURL("/")
|
||||
|
||||
// Check if we are logged in
|
||||
const headers = await testUtils.getAuthHeaders({ userId: user.id })
|
||||
expect(headers).toBeDefined()
|
||||
expect(headers.get("Authorization")).toBeDefined()
|
||||
|
||||
// Delete user
|
||||
await testUtils.deleteUser(user.id)
|
||||
|
||||
// Check if user is deleted
|
||||
const deletedUser = await ctx.internalAdapter.findUserById(user.id)
|
||||
expect(deletedUser).toBeNull()
|
||||
})
|
||||
|
|
@ -1,34 +1,45 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
],
|
||||
"@app": [
|
||||
"./src/app"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue