From 665e47b873acff81f2d6c27a811b276183c28d39 Mon Sep 17 00:00:00 2001 From: rikhall1515 Date: Fri, 26 Apr 2024 21:54:08 +0200 Subject: [PATCH 01/15] feat(form): add inputs, labels, and error indicators This change adds the basic password and email inputs, along with components that can be used to build other inputs. --- components/forms/InputError.tsx | 33 ++++++++++++++++++ components/forms/InputLabel.tsx | 27 +++++++++++++++ components/forms/email.tsx | 29 ++++++++++++++++ components/forms/expandable.tsx | 34 +++++++++++++++++++ components/forms/password.tsx | 60 +++++++++++++++++++++++++++++++++ components/forms/rePassword.tsx | 48 ++++++++++++++++++++++++++ 6 files changed, 231 insertions(+) create mode 100644 components/forms/InputError.tsx create mode 100644 components/forms/InputLabel.tsx create mode 100644 components/forms/email.tsx create mode 100644 components/forms/expandable.tsx create mode 100644 components/forms/password.tsx create mode 100644 components/forms/rePassword.tsx diff --git a/components/forms/InputError.tsx b/components/forms/InputError.tsx new file mode 100644 index 0000000..239911a --- /dev/null +++ b/components/forms/InputError.tsx @@ -0,0 +1,33 @@ +"use client"; +import { useEffect, useState } from "react"; + +import Expandable from "./expandable"; + +export default function FormError({ + name, + error, +}: { + name: string; + error?: string; +}) { + const [frozenError, setError] = useState(); + useEffect(() => { + if (!error) { + const timeout = setTimeout(() => (setError(""), 200)); + return () => { + clearTimeout(timeout); + }; + } else { + setError(error); + } + }, [error]); + return ( + <> + +
+ {frozenError} +
+ + + ); +} diff --git a/components/forms/InputLabel.tsx b/components/forms/InputLabel.tsx new file mode 100644 index 0000000..ada1ec4 --- /dev/null +++ b/components/forms/InputLabel.tsx @@ -0,0 +1,27 @@ +import { cn } from "@/lib/utils"; + +export default function InputLabel({ + name, + label, + required, + error, +}: { + name: string; + label?: string; + required?: boolean; + error?: string; +}) { + return ( + <> + + + ); +} diff --git a/components/forms/email.tsx b/components/forms/email.tsx new file mode 100644 index 0000000..fba722f --- /dev/null +++ b/components/forms/email.tsx @@ -0,0 +1,29 @@ +"use client"; +import { useState } from "react"; + +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { cn } from "@/lib/utils"; + +export default function EmailInput() { + const [submitActive] = useState(false); + return ( + <> + + + ); +} diff --git a/components/forms/expandable.tsx b/components/forms/expandable.tsx new file mode 100644 index 0000000..7c9ddad --- /dev/null +++ b/components/forms/expandable.tsx @@ -0,0 +1,34 @@ +"use client"; +import React, { useRef } from "react"; + +import { cn } from "@/lib/utils"; + +export default function Expandable({ + id, + expanded, + className, + children, +}: { + id?: string; + className?: string; + expanded: boolean; + children: React.ReactNode; +}) { + const element = useRef(null); + return ( + <> +
+ {children} +
+ + ); +} diff --git a/components/forms/password.tsx b/components/forms/password.tsx new file mode 100644 index 0000000..c3dbe8d --- /dev/null +++ b/components/forms/password.tsx @@ -0,0 +1,60 @@ +"use client"; +import Link from "next/link"; +import { useRef, useState } from "react"; +import { FaEye } from "react-icons/fa6"; + +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { cn } from "@/lib/utils"; + +export default function PasswordInput() { + const [submitActive] = useState(false); + const inputRef = useRef(null); + const [passwordStatus, setPasswordStatus] = useState(false); + const changeInputStatusAndFocus = () => { + setPasswordStatus(!passwordStatus); + inputRef.current!.focus(); + }; + return ( + <> +
+
+ + + Forgot your password? + +
+ + +
+
+
+
+
+
+
+ + ); +} diff --git a/components/forms/rePassword.tsx b/components/forms/rePassword.tsx new file mode 100644 index 0000000..84eff0d --- /dev/null +++ b/components/forms/rePassword.tsx @@ -0,0 +1,48 @@ +"use client"; + +import { useRef, useState } from "react"; +import { FaEye } from "react-icons/fa6"; + +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { cn } from "@/lib/utils"; + +export default function RePasswordInput() { + const [submitActive] = useState(false); + const inputRef = useRef(null); + const [passwordStatus, setPasswordStatus] = useState(false); + const changeInputStatusAndFocus = () => { + setPasswordStatus(!passwordStatus); + inputRef.current!.focus(); + }; + return ( + <> +
+ + + +
+ + ); +} From 173d2cedc37216b3023c78f5f8d4497ae87e06a4 Mon Sep 17 00:00:00 2001 From: rikhall1515 Date: Fri, 26 Apr 2024 21:56:05 +0200 Subject: [PATCH 02/15] refactor(login): change page so that it is styled properly --- app/(public)/sign-in/page.tsx | 86 +++++++++++--------------------- app/(public)/sign-in/wrapper.tsx | 25 ++++++++++ 2 files changed, 53 insertions(+), 58 deletions(-) create mode 100644 app/(public)/sign-in/wrapper.tsx diff --git a/app/(public)/sign-in/page.tsx b/app/(public)/sign-in/page.tsx index 6863dd7..859d475 100644 --- a/app/(public)/sign-in/page.tsx +++ b/app/(public)/sign-in/page.tsx @@ -1,14 +1,15 @@ import type { Metadata } from "next"; -import Image from "next/image"; import Link from "next/link"; import { redirect } from "next/navigation"; +import EmailInput from "@/components/forms/email"; +import RePasswordInput from "@/components/forms/rePassword"; import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; import { createClient } from "@/db/server"; import { env } from "@/env/client"; +import Wrapper from "./wrapper"; + export const metadata: Metadata = { title: "Sign In", alternates: { @@ -85,61 +86,30 @@ export default function SignIn() { }; return ( -
-
-
-
-

Login

-

- Enter your email below to login to your account -

-
-
-
- - -
-
-
- - - Forgot your password? - -
- -
- - -
-
- Don't have an account?{" "} - - Sign up - -
-
-
-
- Image + +

Login

+

+ Enter your email below to login to your account +

+
+ + + + + +
+ Don't have an account?{" "} + + Sign up +
-
+ ); } diff --git a/app/(public)/sign-in/wrapper.tsx b/app/(public)/sign-in/wrapper.tsx new file mode 100644 index 0000000..b099fcd --- /dev/null +++ b/app/(public)/sign-in/wrapper.tsx @@ -0,0 +1,25 @@ +import { cn } from "@/lib/utils"; + +export default function Wrapper({ children }: { children: React.ReactNode }) { + return ( + <> +
+
+ {children} +
+
+ + ); +} From 37901427c97d92f78413e1dd5f6282bc128498e6 Mon Sep 17 00:00:00 2001 From: rikhall1515 Date: Fri, 26 Apr 2024 21:57:03 +0200 Subject: [PATCH 03/15] refactor(register): style page according to the design system --- app/(public)/sign-up/page.tsx | 156 +++++++------------------------ app/(public)/sign-up/wrapper.tsx | 25 +++++ 2 files changed, 59 insertions(+), 122 deletions(-) create mode 100644 app/(public)/sign-up/wrapper.tsx diff --git a/app/(public)/sign-up/page.tsx b/app/(public)/sign-up/page.tsx index d167008..f61c0c1 100644 --- a/app/(public)/sign-up/page.tsx +++ b/app/(public)/sign-up/page.tsx @@ -1,15 +1,17 @@ import type { Metadata } from "next"; import { headers } from "next/headers"; -import Image from "next/image"; import Link from "next/link"; import { redirect } from "next/navigation"; +import EmailInput from "@/components/forms/email"; +import PasswordInput from "@/components/forms/password"; +import RePasswordInput from "@/components/forms/rePassword"; import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Label } from "@/components/ui/label"; import { createClient } from "@/db/server"; import { env } from "@/env/client"; +import Wrapper from "./wrapper"; + export const metadata: Metadata = { title: "Sign Up", alternates: { @@ -90,125 +92,35 @@ export default function Component() { return redirect("/sign-in?message=Check email to continue sign in process"); }; return ( -
-
-
-
-

Sign up

-

- Enter your email below to create an account -

-
-
-
- - -
-
-
- - - Forgot your password? - -
-
- -
-
-
-
-
-
- -
-
-
- -
- - -
-
- - - -
- Already have an account? - - Login - -
-
-
-
- Image -
-
- ); -} + +

Sign up

+

+ Enter your email below to create an account +

+
+ + + -function EyeIcon({ className }: { className: string }) { - return ( - - - - + + + +

+ Already have an account?{" "} + + Login + +

+
); } diff --git a/app/(public)/sign-up/wrapper.tsx b/app/(public)/sign-up/wrapper.tsx new file mode 100644 index 0000000..b099fcd --- /dev/null +++ b/app/(public)/sign-up/wrapper.tsx @@ -0,0 +1,25 @@ +import { cn } from "@/lib/utils"; + +export default function Wrapper({ children }: { children: React.ReactNode }) { + return ( + <> +
+
+ {children} +
+
+ + ); +} From 25789db22ac41c2b6a82cfeca5613f8ff2591d97 Mon Sep 17 00:00:00 2001 From: rikhall1515 Date: Fri, 26 Apr 2024 21:57:46 +0200 Subject: [PATCH 04/15] refactor(footer): remove duplicate sitename --- components/footer/index.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/components/footer/index.tsx b/components/footer/index.tsx index 9fc8272..b45dd6f 100644 --- a/components/footer/index.tsx +++ b/components/footer/index.tsx @@ -5,18 +5,15 @@ export default function Footer() { const year = new Date().getFullYear(); return ( <> -