Merge pull request #5 from kleo-dev/settings-and-small-stuff
Settings and small stuff
This commit is contained in:
Klesti Selimaj
@@ -1,3 +1,16 @@
|
||||
## Setup
|
||||
### Requirements
|
||||
- Node.Js with npm
|
||||
- Postgres DB
|
||||
|
||||
```python
|
||||
DB_USER= # Usually related to the OS username but do your own research
|
||||
DB_HOST=localhost
|
||||
DB_PASSWORD= # Can be empty
|
||||
DB_PORT=5432 # Optional
|
||||
```
|
||||
|
||||
|
||||
## Keywords
|
||||
|
||||
- Voxa Client: The user-side app which communicates with all below.
|
||||
|
||||
Generated
+121
@@ -11,12 +11,15 @@
|
||||
"@lexical/react": "^0.34.0",
|
||||
"@lexical/rich-text": "^0.34.0",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@types/axios": "^0.9.36",
|
||||
"@types/date-fns": "^2.5.3",
|
||||
@@ -1069,6 +1072,36 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-checkbox": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
|
||||
"integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-previous": "1.1.1",
|
||||
"@radix-ui/react-use-size": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
|
||||
@@ -1518,6 +1551,49 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-select": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
|
||||
"integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/number": "1.1.1",
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-focus-guards": "1.1.3",
|
||||
"@radix-ui/react-focus-scope": "1.1.7",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||
"@radix-ui/react-use-previous": "1.1.1",
|
||||
"@radix-ui/react-visually-hidden": "1.2.3",
|
||||
"aria-hidden": "^1.2.4",
|
||||
"react-remove-scroll": "^2.6.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-separator": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
|
||||
@@ -1559,6 +1635,36 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tabs": {
|
||||
"version": "1.1.13",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
|
||||
"integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-roving-focus": "1.1.11",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
|
||||
@@ -1696,6 +1802,21 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-previous": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
|
||||
"integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-rect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
|
||||
|
||||
@@ -14,12 +14,15 @@
|
||||
"@lexical/react": "^0.34.0",
|
||||
"@lexical/rich-text": "^0.34.0",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
"@radix-ui/react-label": "^2.1.7",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
"@radix-ui/react-separator": "^1.1.7",
|
||||
"@radix-ui/react-slot": "^1.2.3",
|
||||
"@radix-ui/react-tabs": "^1.1.13",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@types/axios": "^0.9.36",
|
||||
"@types/date-fns": "^2.5.3",
|
||||
|
||||
+5
-4
@@ -1,11 +1,12 @@
|
||||
import { envEnsure, envNumber } from "@/lib/env";
|
||||
import { Pool } from "pg";
|
||||
|
||||
const pool = new Pool({
|
||||
user: "klestiselimaj",
|
||||
host: "localhost",
|
||||
user: envEnsure("DB_USER"),
|
||||
host: envEnsure("DB_HOST"),
|
||||
database: "postgres",
|
||||
password: "",
|
||||
port: 5432,
|
||||
password: envEnsure("DB_PASSWORD"),
|
||||
port: envNumber("DB_PORT") || 5432,
|
||||
});
|
||||
|
||||
const createUsersTableQuery = `
|
||||
|
||||
+3
-50
@@ -1,28 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useState } from "react";
|
||||
import AppSidebar from "@/components/Sidebar";
|
||||
import MessageBox from "@/components/MessageBox";
|
||||
import useUser from "@/hooks/get-user";
|
||||
|
||||
export default function HomePage() {
|
||||
const [messages, setMessages] = useState([
|
||||
{ id: 1, user: "Alice", text: "Hey, how are you?" },
|
||||
{ id: 2, user: "You", text: "Doing good, just working on the chat app!" },
|
||||
]);
|
||||
|
||||
const [input, setInput] = useState("");
|
||||
|
||||
function sendMessage() {
|
||||
if (!input.trim()) return;
|
||||
setMessages([...messages, { id: Date.now(), user: "You", text: input }]);
|
||||
setInput("");
|
||||
}
|
||||
const { user, loading } = useUser();
|
||||
|
||||
return (
|
||||
<AppSidebar>
|
||||
<AppSidebar user={user}>
|
||||
<MessageBox
|
||||
channelName="Alice"
|
||||
messages={[]}
|
||||
@@ -33,36 +19,3 @@ export default function HomePage() {
|
||||
</AppSidebar>
|
||||
);
|
||||
}
|
||||
|
||||
function ServerButton({
|
||||
label,
|
||||
icon,
|
||||
}: {
|
||||
label: string;
|
||||
icon: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-full h-12 w-12"
|
||||
title={label}
|
||||
>
|
||||
{icon}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function DMItem({ name, status }: { name: string; status: string }) {
|
||||
return (
|
||||
<Card className="p-2 flex items-center gap-2 cursor-pointer hover:bg-accent">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback>{name[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-medium">{name}</span>
|
||||
<span className="text-xs text-muted-foreground">{status}</span>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
+8
-2
@@ -1,6 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { cookies } from "next/headers";
|
||||
import { parseClientSettings } from "@/lib/clientSettings";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
@@ -17,15 +19,19 @@ export const metadata: Metadata = {
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const cookieStore = await cookies();
|
||||
|
||||
const settings = parseClientSettings(cookieStore.get("settings")?.value);
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased ${settings.theme}`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
|
||||
+2
-80
@@ -1,85 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import Link from "next/link";
|
||||
import Auth from "@/components/auth/Auth";
|
||||
|
||||
export default function Login() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [feedback, setFeedback] = useState<
|
||||
undefined | { kind: "error" | "info"; message: string }
|
||||
>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const login = async () => {
|
||||
setFeedback(undefined);
|
||||
try {
|
||||
const res = await axios.put("/api/user", { username, password });
|
||||
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
setFeedback({
|
||||
kind: "info",
|
||||
message: "Login successful! Redirecting...",
|
||||
});
|
||||
|
||||
// small delay to show feedback before redirect
|
||||
setTimeout(() => router.push("/home"), 800);
|
||||
} catch (err: any) {
|
||||
setFeedback({
|
||||
kind: "error",
|
||||
message:
|
||||
err.response?.data?.message || "Login failed. Please try again.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen flex items-center">
|
||||
<div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900">
|
||||
<h1 className="mx-auto text-3xl">Login</h1>
|
||||
<span>
|
||||
Username or email
|
||||
<Input onChange={(e) => setUsername(e.target.value)} type="email" />
|
||||
</span>
|
||||
<span>
|
||||
Password
|
||||
<Input
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") login();
|
||||
}}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
|
||||
{/* Feedback message */}
|
||||
{feedback && (
|
||||
<div
|
||||
className={`text-sm rounded-md p-2 ${
|
||||
feedback.kind === "error"
|
||||
? "bg-red-500/20 text-red-400"
|
||||
: "bg-green-500/20 text-green-400"
|
||||
}`}
|
||||
>
|
||||
{feedback.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Label>
|
||||
Don't have an account? <Link href={"/signup"}>Sign Up</Link>
|
||||
</Label>
|
||||
|
||||
<Button className="mt-2" onClick={login}>
|
||||
Login
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <Auth kind="login" />;
|
||||
}
|
||||
|
||||
@@ -84,6 +84,7 @@ export default function Server() {
|
||||
|
||||
return (
|
||||
<AppSidebar
|
||||
user={user}
|
||||
server={
|
||||
{
|
||||
channels: [{ id: "general", name: "General", kind: "text" }],
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import { useAccountSettings, useClientSettings } from "@/hooks/use-settings";
|
||||
import { setClientSettings } from "@/lib/clientSettings";
|
||||
import Settings from "./settings";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { CardContent } from "@/components/ui/card";
|
||||
import { ACCOUNT_SCHEMA, CLIENT_SCHEMA } from "@/types/settings";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ChevronLeftCircle } from "lucide-react";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [settings, setSettings] = useClientSettings();
|
||||
const [accountSettings, setAccountSettings] = useAccountSettings();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="ml-2 mt-2"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<ChevronLeftCircle />
|
||||
</Button>
|
||||
<Tabs className="mx-auto mt-3" defaultValue="client">
|
||||
<TabsList className="mx-auto">
|
||||
<TabsTrigger value="client">Client Settings</TabsTrigger>
|
||||
<TabsTrigger value="account">Account Settings</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="client">
|
||||
<Card className="w-xl mx-auto">
|
||||
<CardContent className="flex flex-col gap-3">
|
||||
<Settings
|
||||
settings={settings}
|
||||
setSettings={setSettings}
|
||||
schema={CLIENT_SCHEMA}
|
||||
onSave={() => {
|
||||
setClientSettings(settings);
|
||||
router.refresh();
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
<TabsContent value="account">
|
||||
<Card className="w-xl mx-auto">
|
||||
<CardContent className="flex flex-col gap-3">
|
||||
<Settings
|
||||
settings={accountSettings}
|
||||
setSettings={setAccountSettings}
|
||||
schema={ACCOUNT_SCHEMA}
|
||||
onSave={() => {}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import { Dispatch, SetStateAction, useState, useRef } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { StringMap } from "@/types/typeUtils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export class RegexSetting {
|
||||
placeholder: string;
|
||||
pattern: RegExp;
|
||||
|
||||
constructor(placeholder: string, pattern: RegExp) {
|
||||
this.placeholder = placeholder;
|
||||
this.pattern = pattern;
|
||||
}
|
||||
}
|
||||
|
||||
export type SettingsSchema = StringMap<
|
||||
"boolean" | "string" | "number" | string[] | RegexSetting
|
||||
>;
|
||||
|
||||
export default function Settings<T>({
|
||||
settings,
|
||||
setSettings,
|
||||
schema,
|
||||
onSave,
|
||||
}: {
|
||||
settings: T;
|
||||
setSettings: Dispatch<SetStateAction<T>>;
|
||||
schema: SettingsSchema;
|
||||
onSave: () => void;
|
||||
}) {
|
||||
const [feedback, setFeedback] = useState<
|
||||
undefined | { kind: "error" | "info"; message: string }
|
||||
>();
|
||||
|
||||
// Ref to store debounce timer
|
||||
const debounceRef = useRef<NodeJS.Timeout>(undefined);
|
||||
|
||||
const handleChange = (key: string, value: any) => {
|
||||
setSettings((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const handleRegexChange = (
|
||||
key: string,
|
||||
regexSetting: RegexSetting,
|
||||
value: string
|
||||
) => {
|
||||
handleChange(key, value);
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(() => {
|
||||
if (!regexSetting.pattern.test(value)) {
|
||||
setFeedback({
|
||||
kind: "error",
|
||||
message: `Value does not match the pattern!`,
|
||||
});
|
||||
} else {
|
||||
setFeedback(undefined);
|
||||
}
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const renderInput = (key: string, type: any) => {
|
||||
if (Array.isArray(type)) {
|
||||
return (
|
||||
<Select
|
||||
value={(settings as any)[key]}
|
||||
onValueChange={(val) => handleChange(key, val)}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder={key} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{type.map((option) => (
|
||||
<SelectItem key={option} value={option}>
|
||||
{option}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
} else if (type === "boolean") {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={(settings as any)[key]}
|
||||
onCheckedChange={(val) => handleChange(key, val)}
|
||||
/>
|
||||
);
|
||||
} else if (type === "string") {
|
||||
return (
|
||||
<Input
|
||||
type="text"
|
||||
value={(settings as any)[key]}
|
||||
onChange={(e) => handleChange(key, e.target.value)}
|
||||
/>
|
||||
);
|
||||
} else if (type === "number") {
|
||||
return (
|
||||
<Input
|
||||
type="number"
|
||||
value={(settings as any)[key]}
|
||||
onChange={(e) => handleChange(key, Number(e.target.value))}
|
||||
/>
|
||||
);
|
||||
} else if (type instanceof RegexSetting) {
|
||||
return (
|
||||
<Input
|
||||
type="text"
|
||||
value={(settings as any)[key] || ""}
|
||||
placeholder={type.placeholder}
|
||||
onChange={(e) => handleRegexChange(key, type, e.target.value)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.entries(schema).map(([key, type]) => (
|
||||
<div key={key} className="flex items-center justify-between space-x-4">
|
||||
<label className="capitalize">{key}</label>
|
||||
{renderInput(key, type)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{feedback && (
|
||||
<div
|
||||
className={`text-sm rounded-md p-2 ${
|
||||
feedback.kind === "error"
|
||||
? "bg-red-500/20 text-red-400"
|
||||
: "bg-green-500/20 text-green-400"
|
||||
}`}
|
||||
>
|
||||
{feedback.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (feedback === undefined) onSave();
|
||||
}}
|
||||
variant="outline"
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
+2
-145
@@ -1,150 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Auth from "@/components/auth/Auth";
|
||||
|
||||
export default function SignUp() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [acceptTerms, setAcceptTerms] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [feedback, setFeedback] = useState<
|
||||
undefined | { kind: "error" | "info"; message: string }
|
||||
>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const validateInput = ():
|
||||
| { kind: "error" | "info"; message: string }
|
||||
| undefined => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
|
||||
|
||||
if (!emailRegex.test(email)) {
|
||||
return { kind: "error", message: "Invalid email format." };
|
||||
}
|
||||
if (!usernameRegex.test(username)) {
|
||||
return {
|
||||
kind: "error",
|
||||
message:
|
||||
"Username must be 3–20 characters and only letters, numbers, or underscores.",
|
||||
};
|
||||
}
|
||||
if (password.length < 6) {
|
||||
return {
|
||||
kind: "error",
|
||||
message: "Password must be at least 6 characters long.",
|
||||
};
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
return { kind: "error", message: "Passwords do not match." };
|
||||
}
|
||||
if (!acceptTerms) {
|
||||
return {
|
||||
kind: "error",
|
||||
message: "You must accept the terms to sign up.",
|
||||
};
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
const signup = async () => {
|
||||
setFeedback(undefined);
|
||||
const validationError = validateInput();
|
||||
if (validationError) {
|
||||
setFeedback(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await axios.post("/api/user", { username, password, email });
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
|
||||
setFeedback({ kind: "info", message: "Account created! Redirecting..." });
|
||||
setTimeout(() => router.push("/home"), 1000);
|
||||
} catch (err: any) {
|
||||
setFeedback({
|
||||
kind: "error",
|
||||
message:
|
||||
err.response?.data?.message ||
|
||||
"Signup failed. Please try again later.",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen flex items-center">
|
||||
<div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900 shadow-lg">
|
||||
<h1 className="mx-auto text-3xl font-bold">Create an Account</h1>
|
||||
<span>
|
||||
Email
|
||||
<Input
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="[email protected]"
|
||||
type="email"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Username
|
||||
<Input
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="john_doe"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Password
|
||||
<Input
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Confirm Password
|
||||
<Input
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") signup();
|
||||
}}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={acceptTerms}
|
||||
onChange={(e) => setAcceptTerms(e.target.checked)}
|
||||
/>
|
||||
I agree to the <Link className="underline" href="/terms">terms & conditions</Link>
|
||||
</label>
|
||||
|
||||
{/* Feedback message */}
|
||||
{feedback && (
|
||||
<div
|
||||
className={`text-sm rounded-md p-2 ${
|
||||
feedback.kind === "error"
|
||||
? "bg-red-500/20 text-red-400"
|
||||
: "bg-green-500/20 text-green-400"
|
||||
}`}
|
||||
>
|
||||
{feedback.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button className="mt-4" onClick={signup} disabled={loading}>
|
||||
{loading ? "Signing Up..." : "Sign Up"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return <Auth kind="create" />;
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ import remarkGfm from "remark-gfm";
|
||||
import { NumberMap, StringMap } from "@/types/typeUtils";
|
||||
import { User } from "@/hooks/get-user";
|
||||
import axios from "axios";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
|
||||
|
||||
function MessageContainer({
|
||||
message,
|
||||
@@ -40,7 +41,18 @@ function MessageContainer({
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-gray-400" />
|
||||
{/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage
|
||||
src="https://github.com/kleo-dev.png"
|
||||
alt={message.from.toString()}
|
||||
/>
|
||||
<AvatarFallback>
|
||||
{userList[message.from]
|
||||
? userList[message.from].username
|
||||
: message.from}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col flex-1">
|
||||
<span className="font-bold flex gap-1 items-center">
|
||||
{userList[message.from]
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
MessageCircle,
|
||||
Plus,
|
||||
Search,
|
||||
SettingsIcon,
|
||||
Volume2Icon,
|
||||
} from "lucide-react";
|
||||
import Server from "@/types/server";
|
||||
@@ -24,16 +25,21 @@ import { Input } from "./ui/input";
|
||||
import { Label } from "./ui/label";
|
||||
import { Button } from "./ui/button";
|
||||
import { Card } from "./ui/card";
|
||||
import { Avatar, AvatarFallback } from "./ui/avatar";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
|
||||
import { ScrollArea } from "./ui/scroll-area";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Channel from "@/types/channel";
|
||||
import Link from "next/link";
|
||||
import { NumberMap } from "@/types/typeUtils";
|
||||
import { User } from "@/hooks/get-user";
|
||||
|
||||
export default function AppSidebar({
|
||||
user,
|
||||
server,
|
||||
children,
|
||||
}: Readonly<{
|
||||
server?: Server;
|
||||
user: User | null;
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const [servers, setServers] = useState<[string, string][]>([]);
|
||||
@@ -143,6 +149,12 @@ export default function AppSidebar({
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<footer className="mt-auto">
|
||||
<Link href="/settings">
|
||||
<SettingsIcon />
|
||||
</Link>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
{/* Right column */}
|
||||
@@ -177,6 +189,10 @@ export default function AppSidebar({
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<footer className="mt-auto pb-3 pl-3 pr-3">
|
||||
<DMItem name={user?.username || "Loading.."} status="online" />
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -189,6 +205,7 @@ function DMItem({ name, status }: { name: string; status: string }) {
|
||||
return (
|
||||
<Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src="https://github.com/kleo-dev.png" alt={name} />
|
||||
<AvatarFallback>{name[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col">
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { Card } from "../ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
|
||||
import CreateAccount from "./CreateAccount";
|
||||
import Login from "./Login";
|
||||
|
||||
export default function Auth({ kind }: { kind: "login" | "create" }) {
|
||||
return (
|
||||
<div className="h-screen flex items-center">
|
||||
<Tabs defaultValue={kind} className="mx-auto">
|
||||
<TabsList className="mx-auto">
|
||||
<TabsTrigger value="login">Login</TabsTrigger>
|
||||
<TabsTrigger value="create">Create Account</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="login">
|
||||
<Card className="w-md">
|
||||
<Login />
|
||||
</Card>
|
||||
</TabsContent>
|
||||
<TabsContent value="create">
|
||||
<Card className="w-md">
|
||||
<CreateAccount />
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { CardContent, CardHeader, CardTitle } from "../ui/card";
|
||||
import { Label } from "../ui/label";
|
||||
|
||||
export default function CreateAccount() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [acceptTerms, setAcceptTerms] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [feedback, setFeedback] = useState<
|
||||
undefined | { kind: "error" | "info"; message: string }
|
||||
>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const validateInput = ():
|
||||
| { kind: "error" | "info"; message: string }
|
||||
| undefined => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
|
||||
|
||||
if (!emailRegex.test(email)) {
|
||||
return { kind: "error", message: "Invalid email format." };
|
||||
}
|
||||
if (!usernameRegex.test(username)) {
|
||||
return {
|
||||
kind: "error",
|
||||
message:
|
||||
"Username must be 3–20 characters and only letters, numbers, or underscores.",
|
||||
};
|
||||
}
|
||||
if (password.length < 6) {
|
||||
return {
|
||||
kind: "error",
|
||||
message: "Password must be at least 6 characters long.",
|
||||
};
|
||||
}
|
||||
if (password !== confirmPassword) {
|
||||
return { kind: "error", message: "Passwords do not match." };
|
||||
}
|
||||
if (!acceptTerms) {
|
||||
return {
|
||||
kind: "error",
|
||||
message: "You must accept the terms to sign up.",
|
||||
};
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
const signup = async () => {
|
||||
setFeedback(undefined);
|
||||
const validationError = validateInput();
|
||||
if (validationError) {
|
||||
setFeedback(validationError);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await axios.post("/api/user", { username, password, email });
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
|
||||
setFeedback({ kind: "info", message: "Account created! Redirecting..." });
|
||||
setTimeout(() => router.push("/home"), 1000);
|
||||
} catch (err: any) {
|
||||
setFeedback({
|
||||
kind: "error",
|
||||
message:
|
||||
err.response?.data?.message ||
|
||||
"Signup failed. Please try again later.",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl mx-auto">Create an Account</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="gap-3 flex flex-col">
|
||||
<span>
|
||||
Email
|
||||
<Input
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="[email protected]"
|
||||
type="email"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Username
|
||||
<Input
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="john_doe"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Password
|
||||
<Input
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Confirm Password
|
||||
<Input
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") signup();
|
||||
}}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<Label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={acceptTerms}
|
||||
onChange={(e) => setAcceptTerms(e.target.checked)}
|
||||
/>
|
||||
I agree to the{" "}
|
||||
<Link className="underline" href="/terms">
|
||||
terms & conditions
|
||||
</Link>
|
||||
</Label>
|
||||
|
||||
{feedback && (
|
||||
<div
|
||||
className={`text-sm rounded-md p-2 ${
|
||||
feedback.kind === "error"
|
||||
? "bg-red-500/20 text-red-400"
|
||||
: "bg-green-500/20 text-green-400"
|
||||
}`}
|
||||
>
|
||||
{feedback.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button onClick={signup} disabled={loading}>
|
||||
{loading ? "Signing Up..." : "Sign Up"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import Cookies from "js-cookie";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../ui/card";
|
||||
|
||||
export default function Login() {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [feedback, setFeedback] = useState<
|
||||
undefined | { kind: "error" | "info"; message: string }
|
||||
>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const login = async () => {
|
||||
setFeedback(undefined);
|
||||
try {
|
||||
const res = await axios.put("/api/user", { username, password });
|
||||
|
||||
Cookies.set("token", (res.data as any).token);
|
||||
setFeedback({
|
||||
kind: "info",
|
||||
message: "Login successful! Redirecting...",
|
||||
});
|
||||
|
||||
// small delay to show feedback before redirect
|
||||
setTimeout(() => router.push("/home"), 800);
|
||||
} catch (err: any) {
|
||||
setFeedback({
|
||||
kind: "error",
|
||||
message:
|
||||
err.response?.data?.message || "Login failed. Please try again.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-3xl mx-auto">Login</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="gap-3 flex flex-col">
|
||||
<span>
|
||||
Username or email
|
||||
<Input onChange={(e) => setUsername(e.target.value)} type="email" />
|
||||
</span>
|
||||
<span>
|
||||
Password
|
||||
<Input
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") login();
|
||||
}}
|
||||
type="password"
|
||||
/>
|
||||
</span>
|
||||
|
||||
{feedback && (
|
||||
<div
|
||||
className={`text-sm rounded-md p-2 ${
|
||||
feedback.kind === "error"
|
||||
? "bg-red-500/20 text-red-400"
|
||||
: "bg-green-500/20 text-green-400"
|
||||
}`}
|
||||
>
|
||||
{feedback.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button className="mt-2" onClick={login}>
|
||||
Login
|
||||
</Button>
|
||||
</CardContent>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="flex items-center justify-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
@@ -0,0 +1,185 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Select({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDownIcon className="size-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "popper",
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectItem({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
||||
return (
|
||||
<SelectPrimitive.Item
|
||||
data-slot="select-item"
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex size-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<CheckIcon className="size-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollUpButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
)
|
||||
}
|
||||
|
||||
function SelectScrollDownButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectScrollDownButton,
|
||||
SelectScrollUpButton,
|
||||
SelectSeparator,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { defaultSettings, getClientSettings } from "@/lib/clientSettings";
|
||||
import { AccountSettings, ClientSettings } from "@/types/settings";
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from "react";
|
||||
|
||||
export function useClientSettings(): [
|
||||
ClientSettings,
|
||||
Dispatch<SetStateAction<ClientSettings>>
|
||||
] {
|
||||
const [settings, setSettings] = useState<ClientSettings>(defaultSettings);
|
||||
|
||||
useEffect(() => {
|
||||
setSettings(getClientSettings());
|
||||
}, []);
|
||||
|
||||
return [settings, setSettings];
|
||||
}
|
||||
|
||||
export function useAccountSettings(): [
|
||||
AccountSettings,
|
||||
Dispatch<SetStateAction<AccountSettings>>
|
||||
] {
|
||||
const [settings, setSettings] = useState<AccountSettings>({
|
||||
node_ip: "node0.voxa.org",
|
||||
});
|
||||
|
||||
return [settings, setSettings];
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { ClientSettings } from "@/types/settings";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
export const defaultSettings: ClientSettings = {
|
||||
theme: "dark",
|
||||
};
|
||||
|
||||
export function parseClientSettings(s?: string): ClientSettings {
|
||||
let parsed: Partial<ClientSettings> = {};
|
||||
|
||||
if (s) {
|
||||
try {
|
||||
parsed = JSON.parse(s);
|
||||
} catch {
|
||||
parsed = {};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...defaultSettings,
|
||||
...parsed,
|
||||
};
|
||||
}
|
||||
|
||||
export function getClientSettings(): ClientSettings {
|
||||
return parseClientSettings(Cookies.get("settings"));
|
||||
}
|
||||
|
||||
export function setClientSettings(value?: ClientSettings) {
|
||||
Cookies.set("settings", JSON.stringify(value || defaultSettings));
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
export function env(name: string): string | undefined {
|
||||
return process.env[name];
|
||||
}
|
||||
|
||||
export function envEnsure(name: string): string {
|
||||
const v = process.env[name];
|
||||
|
||||
if (v === undefined) {
|
||||
throw new Error(
|
||||
`Environment variable '${name}' is required but doesn't exist`
|
||||
);
|
||||
}
|
||||
|
||||
return v;
|
||||
}
|
||||
|
||||
export function envNumber(name: string): number | undefined {
|
||||
const v = process.env[name];
|
||||
return v ? parseInt(v) : undefined;
|
||||
}
|
||||
|
||||
export function envNumberEnsure(name: string): number {
|
||||
const v = process.env[name];
|
||||
|
||||
if (v === undefined) {
|
||||
throw new Error(
|
||||
`Environment variable '${name}' is required but doesn't exist`
|
||||
);
|
||||
}
|
||||
|
||||
return parseInt(v);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { RegexSetting, SettingsSchema } from "@/app/settings/settings";
|
||||
|
||||
export interface ClientSettings {
|
||||
theme: "light" | "dark";
|
||||
}
|
||||
|
||||
export interface AccountSettings {
|
||||
node_ip: string;
|
||||
}
|
||||
|
||||
export const CLIENT_SCHEMA: SettingsSchema = {
|
||||
theme: ["light", "dark"],
|
||||
};
|
||||
|
||||
export const ACCOUNT_SCHEMA: SettingsSchema = {
|
||||
node_ip: new RegexSetting(
|
||||
"node2.voxa.org",
|
||||
/^(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|(?:\d{1,3}\.){3}\d{1,3})$/
|
||||
),
|
||||
};
|
||||
Reference in New Issue
Block a user