opus-tango/socialdb-sh
1
0
Fork 0
mirror of https://github.com/opus-tango/socialdb-sh.git synced 2026-03-20 03:55:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix sign-ip page and prettify with opus

Browse Source
This commit is contained in:
Nayan Sawyer
2026-03-14 14:18:25 -04:00
parent 4ab23edd83
commit d31aae388f
2 changed files with 175 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app/sign-ip.tsx
View File

@@ -1,100 +0,0 @@
"use client";
import { authClient } from "@/utils/auth-client";
import { useRouter } from "next/navigation";
import { useState } from "react";
export default function SignUp() {
const [isSignUp, setIsSignUp] = useState(false);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const handleSignUp = async () => {
const { data, error } = await authClient.signUp.email({
name,
email,
password,
callbackURL: "/",
});
if (error) {
console.error(error);
window.alert(error.message);
}
};
const handleSignIn = async () => {
const { data, error } = await authClient.signIn.email({
email,
password,
rememberMe,
callbackURL: "/",
});
if (error) {
console.error(error);
window.alert(error.message);
}
};
if (isSignUp) {
return (
<div>
<h1>Sign Up</h1>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<input
type="checkbox"
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
/>
<button onClick={handleSignUp}>Sign Up</button>
<button onClick={() => setIsSignUp(false)}>Sign In</button>
</div>
);
}
return (
<div>
<h1>Sign In</h1>
<input
type="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<input
type="checkbox"
checked={rememberMe}
onChange={(e) => setRememberMe(e.target.checked)}
/>
<button onClick={isSignUp ? handleSignUp : handleSignIn}>
{isSignUp ? "Sign Up" : "Sign In"}
</button>
<button onClick={() => setIsSignUp(!isSignUp)}>
{isSignUp ? "Sign In" : "Sign Up"}
</button>
</div>
);
}

175
src/app/sign-ip/page.tsx Normal file
View File

@@ -0,0 +1,175 @@
"use client";
import { authClient } from "@/utils/auth-client";
import { useState } from "react";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
export default function SignUp() {
const [isSignUp, setIsSignUp] = useState(false);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [rememberMe, setRememberMe] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleSignUp = async () => {
if (password !== confirmPassword) {
setError("Passwords do not match");
return;
}
setLoading(true);
setError(null);
const { error } = await authClient.signUp.email({
name,
email,
password,
callbackURL: "/",
});
setLoading(false);
if (error) {
setError(error.message ?? "Something went wrong");
}
};
const handleSignIn = async () => {
setLoading(true);
setError(null);
const { error } = await authClient.signIn.email({
email,
password,
rememberMe,
callbackURL: "/",
});
setLoading(false);
if (error) {
setError(error.message ?? "Something went wrong");
}
};
const toggle = () => {
setIsSignUp((v) => !v);
setError(null);
};
return (
<div className="flex min-h-screen items-center justify-center bg-background px-4">
<Card className="w-full max-w-sm">
<CardHeader>
<CardTitle className="text-lg">
{isSignUp ? "Create an account" : "Welcome back"}
</CardTitle>
<CardDescription>
{isSignUp
? "Enter your details to get started"
: "Sign in to your account"}
</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
{error && (
<p className="text-xs text-destructive">{error}</p>
)}
{isSignUp && (
<div className="grid gap-1.5">
<Label htmlFor="name">Name</Label>
<Input
id="name"
placeholder="Jane Doe"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
)}
<div className="grid gap-1.5">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
placeholder="you@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="grid gap-1.5">
<Label htmlFor="password">Password</Label>
<Input
id="password"
type="password"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{isSignUp && (
<div className="grid gap-1.5">
<Label htmlFor="confirm">Confirm password</Label>
<Input
id="confirm"
type="password"
placeholder="••••••••"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
</div>
)}
{!isSignUp && (
<div className="flex items-center gap-2">
<Checkbox
id="remember"
checked={rememberMe}
onCheckedChange={(v) => setRememberMe(v === true)}
/>
<Label htmlFor="remember" className="text-xs font-normal">
Remember me
</Label>
</div>
)}
</CardContent>
<CardFooter className="flex flex-col gap-3">
<Button
className="w-full"
size="lg"
disabled={loading}
onClick={isSignUp ? handleSignUp : handleSignIn}
>
{loading
? "Please wait…"
: isSignUp
? "Sign up"
: "Sign in"}
</Button>
<p className="text-center text-xs text-muted-foreground">
{isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
<button
type="button"
className="text-primary underline-offset-4 hover:underline"
onClick={toggle}
>
{isSignUp ? "Sign in" : "Sign up"}
</button>
</p>
</CardFooter>
</Card>
</div>
);
}