From a6a520db70ef639e066d1012fa2ecf7e26c53049 Mon Sep 17 00:00:00 2001 From: Hyteq Date: Mon, 23 Jun 2025 21:07:58 +0300 Subject: fix: rename auth folder to (auth) to prevent route, cleaner to not have /auth prefix --- apps/web/src/app/(auth)/login/page.tsx | 162 ++++++++++++++++++++++++++++ apps/web/src/app/(auth)/signup/page.tsx | 181 ++++++++++++++++++++++++++++++++ 2 files changed, 343 insertions(+) create mode 100644 apps/web/src/app/(auth)/login/page.tsx create mode 100644 apps/web/src/app/(auth)/signup/page.tsx (limited to 'apps/web/src/app/(auth)') diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx new file mode 100644 index 00000000..ebf2eb3f --- /dev/null +++ b/apps/web/src/app/(auth)/login/page.tsx @@ -0,0 +1,162 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { signIn } from "@/lib/auth-client"; +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Suspense, useState } from "react"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Separator } from "@/components/ui/separator"; +import Link from "next/link"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { ArrowLeft, Loader2 } from "lucide-react"; +import { GoogleIcon } from "@/components/icons"; + +function LoginForm() { + const router = useRouter(); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(null); + const [isEmailLoading, setIsEmailLoading] = useState(false); + const [isGoogleLoading, setIsGoogleLoading] = useState(false); + + const handleLogin = async () => { + setError(null); + setIsEmailLoading(true); + + const { error } = await signIn.email({ + email, + password, + }); + + if (error) { + setError(error.message || "An unexpected error occurred."); + setIsEmailLoading(false); + return; + } + + router.push("/editor"); + }; + + const handleGoogleLogin = async () => { + setError(null); + setIsGoogleLoading(true); + + try { + await signIn.social({ + provider: "google", + }); + router.push("/editor"); + } catch (error) { + setError("Failed to sign in with Google. Please try again."); + setIsGoogleLoading(false); + } + }; + + const isAnyLoading = isEmailLoading || isGoogleLoading; + + return ( +
+ {error && ( + + Error + {error} + + )} + + +
+
+ +
+
+ Or continue with +
+
+
+
+ + setEmail(e.target.value)} + disabled={isAnyLoading} + className="h-11" + /> +
+
+ + setPassword(e.target.value)} + disabled={isAnyLoading} + className="h-11" + /> +
+ +
+
+ ); +} + +export default function LoginPage() { + const router = useRouter(); + + return ( +
+ + + + Welcome back + + Sign in to your account to continue + + + + + +
}> + + +
+ Don't have an account?{" "} + + Sign up + +
+ + + + ); +} diff --git a/apps/web/src/app/(auth)/signup/page.tsx b/apps/web/src/app/(auth)/signup/page.tsx new file mode 100644 index 00000000..3d125a07 --- /dev/null +++ b/apps/web/src/app/(auth)/signup/page.tsx @@ -0,0 +1,181 @@ +"use client"; + +import { useRouter } from "next/navigation"; +import { signUp, signIn } from "@/lib/auth-client"; +import { Button } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Suspense, useState } from "react"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Separator } from "@/components/ui/separator"; +import Link from "next/link"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { Loader2, ArrowLeft } from "lucide-react"; +import { GoogleIcon } from "@/components/icons"; + +function SignUpForm() { + const router = useRouter(); + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(null); + const [isEmailLoading, setIsEmailLoading] = useState(false); + const [isGoogleLoading, setIsGoogleLoading] = useState(false); + + const handleSignUp = async () => { + setError(null); + setIsEmailLoading(true); + + const { error } = await signUp.email({ + name, + email, + password, + }); + + if (error) { + setError(error.message || "An unexpected error occurred."); + setIsEmailLoading(false); + return; + } + + router.push("/auth/login"); + }; + + const handleGoogleSignUp = async () => { + setError(null); + setIsGoogleLoading(true); + + try { + await signIn.social({ + provider: "google", + }); + + router.push("/editor"); + } catch (error) { + setError("Failed to sign up with Google. Please try again."); + setIsGoogleLoading(false); + } + }; + + const isAnyLoading = isEmailLoading || isGoogleLoading; + + return ( +
+ {error && ( + + Error + {error} + + )} + + + +
+
+ +
+
+ Or continue with +
+
+ +
+
+ + setName(e.target.value)} + disabled={isAnyLoading} + className="h-11" + /> +
+
+ + setEmail(e.target.value)} + disabled={isAnyLoading} + className="h-11" + /> +
+
+ + setPassword(e.target.value)} + disabled={isAnyLoading} + className="h-11" + /> +
+ +
+
+ ); +} + +export default function SignUpPage() { + const router = useRouter(); + + return ( +
+ + + + + Create your account + + Get started with your free account today + + + + + +
}> + + +
+ Already have an account?{" "} + + Sign in + +
+ + + + ); +} -- cgit v1.3.1 From f959ba87e20aaae42bc270edc127ae89b97241cb Mon Sep 17 00:00:00 2001 From: 3raphat <96657413+3raphat@users.noreply.github.com> Date: Tue, 24 Jun 2025 01:38:53 +0700 Subject: fix: update auth routes --- apps/web/src/app/(auth)/login/page.tsx | 26 ++++++++++++++++------ apps/web/src/app/(auth)/signup/page.tsx | 38 +++++++++++++++++++++++++-------- apps/web/src/components/header.tsx | 2 +- apps/web/src/middleware.ts | 2 +- 4 files changed, 51 insertions(+), 17 deletions(-) (limited to 'apps/web/src/app/(auth)') diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx index ebf2eb3f..5f37ced9 100644 --- a/apps/web/src/app/(auth)/login/page.tsx +++ b/apps/web/src/app/(auth)/login/page.tsx @@ -77,14 +77,21 @@ function LoginForm() { size="lg" disabled={isAnyLoading} > - {isGoogleLoading ? : ()} Continue with Google + {isGoogleLoading ? ( + + ) : ( + + )}{" "} + Continue with Google
- Or continue with + + Or continue with +
@@ -144,14 +151,21 @@ export default function LoginPage() { - - -
}> + + + + } + >
Don't have an account?{" "} - + Sign up
diff --git a/apps/web/src/app/(auth)/signup/page.tsx b/apps/web/src/app/(auth)/signup/page.tsx index 3d125a07..d1feece2 100644 --- a/apps/web/src/app/(auth)/signup/page.tsx +++ b/apps/web/src/app/(auth)/signup/page.tsx @@ -44,7 +44,7 @@ function SignUpForm() { return; } - router.push("/auth/login"); + router.push("/login"); }; const handleGoogleSignUp = async () => { @@ -80,7 +80,12 @@ function SignUpForm() { size="lg" disabled={isAnyLoading} > - {isGoogleLoading ? : ()} Continue with Google + {isGoogleLoading ? ( + + ) : ( + + )}{" "} + Continue with Google
@@ -88,7 +93,9 @@ function SignUpForm() {
- Or continue with + + Or continue with +
@@ -135,7 +142,11 @@ function SignUpForm() { className="w-full h-11" size="lg" > - {isEmailLoading ? : "Create account"} + {isEmailLoading ? ( + + ) : ( + "Create account" + )} @@ -157,20 +168,29 @@ export default function SignUpPage() { - Create your account + + Create your account + Get started with your free account today - - - }> + + + + } + >
Already have an account?{" "} - + Sign in
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx index 109d022e..2ccc53fa 100644 --- a/apps/web/src/components/header.tsx +++ b/apps/web/src/components/header.tsx @@ -23,7 +23,7 @@ export function Header() { GitHub - + @@ -558,7 +558,7 @@ export function Timeline() { - @@ -567,7 +567,7 @@ export function Timeline() { - @@ -576,7 +576,7 @@ export function Timeline() { - @@ -585,7 +585,7 @@ export function Timeline() { - @@ -594,7 +594,7 @@ export function Timeline() { - @@ -603,7 +603,7 @@ export function Timeline() { - @@ -1625,7 +1625,7 @@ function TimelineTrackContent({ {/* Clip options menu */}