Vets-Who-Code · jeromehardaway · May 10, 2024 · May 10, 2024 · May 10, 2024 · May 10, 2024
diff --git a/components.json b/components.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "gray",
+    "cssVariables": false
+  },
+  "aliases": {
+    "utils": "@assets/lib/utils",
+    "components": "@assets/components"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,11 +19,13 @@
   "dependencies": {
     "@googlemaps/react-wrapper": "^1.1.35",
     "@googlemaps/typescript-guards": "^2.0.1",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^1.1.0",
     "@types/express": "^4.17.17",
     "ace-builds": "^1.33.1",
     "ai": "^2.2.8",
     "axios": "^1.4.0",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "dayjs": "^1.11.4",
     "disqus-react": "^1.1.3",
@@ -32,6 +34,7 @@
     "fast-equals": "3.0.3",
     "framer-motion": "^6.5.1",
     "gray-matter": "^4.0.3",
+    "lucide-react": "^0.378.0",
     "mailchimp-api-v3": "^1.15.0",
     "marked": "^4.0.18",
     "next": "12.2.2",
@@ -44,7 +47,9 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.0",
     "react-simple-typewriter": "^3.0.1",
-    "swiper": "^8.3.1"
+    "swiper": "^8.3.1",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^4.1.3",

diff --git a/src/assets/lib/utils.ts b/src/assets/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/components/forms/login-form.tsx b/src/components/forms/login-form.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { useForm, SubmitHandler } from "react-hook-form";
+import Input from "@ui/form-elements/input";
+import Checkbox from "@ui/form-elements/checkbox";
+import FeedbackText from "@ui/form-elements/feedback";
+import Button from "@ui/button";
+import { hasKey } from "@utils/methods";
+import { useUser } from "@contexts/user-context";
+
+interface IFormValues {
+    username: string;
+    password: string;
+}
+
+const LoginForm = () => {
+    const router = useRouter();
+    const [serverState, setServerState] = useState("");
+    const { setLogin } = useUser();
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm<IFormValues>({
+        defaultValues: {
+            username: "Admin",
+            password: "Admin",
+        },
+    });
+
+    const onSubmit: SubmitHandler<IFormValues> = (data) => {
+        if (data.username === "Admin" && data.password === "Admin") {
+            setLogin();
+            setServerState("");
+            if (window?.history?.length > 2) {
+                router.back();
+            }
+        } else {
+            setServerState("Username or password is incorrect");
+        }
+    };
+
+    return (
+        <div className="tw-bg-white tw-shadow-2xs tw-shadow-heading/10 tw-max-w-[470px] tw-pt-7.5 tw-pb-[50px] tw-px-[50px]">
+            <h3 className="tw-text-h2 tw-mb-5">Login</h3>
+            <form onSubmit={handleSubmit(onSubmit)} noValidate>
+                <div className="tw-mb-7.5">
+                    <label
+                        htmlFor="username"
+                        className="tw-text-heading tw-text-md"
+                    >
+                        Username *
+                    </label>
+                    <Input
+                        id="username"
+                        placeholder="Username"
+                        bg="light"
+                        feedbackText={errors?.username?.message}
+                        state={hasKey(errors, "username") ? "error" : "success"}
+                        showState={!!hasKey(errors, "username")}
+                        {...register("username", {
+                            required: "Username is required",
+                        })}
+                    />
+                    <small>Default Username: Admin</small>
+                </div>
+                <div className="tw-mb-7.5">
+                    <label
+                        htmlFor="password"
+                        className="tw-text-heading tw-text-md"
+                    >
+                        Password *
+                    </label>
+                    <Input
+                        id="password"
+                        type="password"
+                        placeholder="Password"
+                        bg="light"
+                        autoComplete="true"
+                        feedbackText={errors?.password?.message}
+                        state={hasKey(errors, "password") ? "error" : "success"}
+                        showState={!!hasKey(errors, "password")}
+                        {...register("password", {
+                            required: "Password is required",
+                        })}
+                    />
+                    <small>Default Password: Admin</small>
+                </div>
+                <Checkbox name="remember" id="remember" label="Remember me" />
+                <Button type="submit" fullwidth className="tw-mt-7.5">
+                    Log In
+                </Button>
+                {serverState && <FeedbackText>{serverState}</FeedbackText>}
+            </form>
+        </div>
+    );
+};
+
+export default LoginForm;
diff --git a/src/components/ui/spinner/index.tsx b/src/components/ui/spinner/index.tsx
@@ -1,6 +1,8 @@
 const Spinner = () => {
     return (
-        <div className="tw-bg-primary tw-w-10 tw-h-10 tw-my-10 tw-mx-auto tw-animate-[rotatePlane_1.2s_infinite_ease-in-out]" />
+        <div className="tw-bg-primary tw-w-10 tw-h-10 tw-my-10 tw-mx-auto tw-animate-[rotatePlane_1.2s_infinite_ease-in-out]">
+            <img src="https://res.cloudinary.com/vetswhocode/image/upload/v1627489505/vwc_kym0qt.gif" alt="Loading" className="tw-w-full tw-h-full" />
+        </div>
     );
 };
 

diff --git a/src/layouts/headers/header.tsx b/src/layouts/headers/header.tsx
@@ -35,7 +35,7 @@ const Header = ({ shadow, fluid }: TProps) => {
                 <div className="header-top tw-py-2.5 tw-bg-gray-200">
                     <div className="tw-container tw-flex tw-justify-center tw-items-center tw-flex-wrap">
                         <p className="tw-text-center tw-flex-100 tw-mb-3.8 md:tw-flex-1 md:tw-text-left md:tw-mb-0 md:tw-mr-7.5">
-                            Our 10th Birthday is in
+                            Our 10th Anniversary Is In
                         </p>
                         <div className="tw-flex tw-items-center sm:tw-mr-[45px] md:tw-mr-5 lg:tw-mr-[45px]">
                             <i className="far fa-clock tw-text-lg tw-text-secondary tw-mr-[5px]" />

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -10,13 +10,18 @@ export default class MyDocument extends Document {
         return (
             <Html lang="en">
                 <Head>
+                    <link
+                        rel="stylesheet"
+                        href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"
+                        integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU"
+                        crossOrigin="anonymous"
+                    />
                     {gaId && ( // Only include the script if the GA ID is present
                         <>
                             <script
                                 async
                                 src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
-                            />{" "}
-                            {/* Make self-closing */}
+                            />
                             <script
                                 dangerouslySetInnerHTML={{
                                     __html: `
@@ -26,8 +31,7 @@ export default class MyDocument extends Document {
                                         gtag('config', '${gaId}');
                                     `,
                                 }}
-                            />{" "}
-                            {/* Make self-closing */}
+                            />
                         </>
                     )}
                 </Head>

diff --git a/src/pages/login-register.tsx → src/pages/login.tsx b/src/pages/login-register.tsx → src/pages/login.tsx
@@ -4,8 +4,7 @@ import { useRouter } from "next/router";
 import SEO from "@components/seo/page-seo";
 import Layout from "@layout/layout-01";
 import Breadcrumb from "@components/breadcrumb";
-// import LoginForm from "@components/forms/login-form";
-import RegisterForm from "@components/forms/apply-form";
+import LoginForm from "@components/forms/login-form";
 import Spinner from "@ui/spinner";
 import { useUser } from "@contexts/user-context";
 import { useMount } from "@hooks";
@@ -14,14 +13,14 @@ type PageProps = NextPage & {
     Layout: typeof Layout;
 };
 
-const LoginRegister: PageProps = () => {
+const Login: PageProps = () => {
     const mounted = useMount();
     const { isLoggedIn } = useUser();
     const router = useRouter();
 
     useEffect(() => {
         if (isLoggedIn) {
-            void router.push("/profile");
+            void router.push("/login");
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [router]);
@@ -34,12 +33,11 @@ const LoginRegister: PageProps = () => {
                 <SEO title="Login Register" />
                 <Breadcrumb
                     pages={[{ path: "/", label: "home" }]}
-                    currentPage="Profile"
+                    currentPage="Login"
                     showTitle={false}
                 />
                 <div className="tw-container tw-pb-15 md:tw-pb-20 lg:tw-pb-[100px] tw-grid tw-items-start lg:tw-grid-cols-2 tw-gap-7.5 lg:tw-gap-15">
-                    {/* <LoginForm /> */}
-                    <RegisterForm />
+                    <LoginForm />
                 </div>
             </>
         );
@@ -52,7 +50,7 @@ const LoginRegister: PageProps = () => {
     );
 };
 
-LoginRegister.Layout = Layout;
+Login.Layout = Layout;
 
 export const getStaticProps: GetStaticProps = () => {
     return {
@@ -66,4 +64,4 @@ export const getStaticProps: GetStaticProps = () => {
     };
 };
 
-export default LoginRegister;
+export default Login;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -306,5 +306,7 @@ module.exports = {
                 },
             });
         },
+        require("tailwindcss-animate"),
+        require("tailwindcss-animate")
     ],
 };
diff --git a/yarn.lock b/yarn.lock
@@ -889,10 +889,10 @@
     "core-js-pure" "^3.25.1"
     "regenerator-runtime" "^0.13.11"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4":
-  "integrity" "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ=="
-  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz"
-  "version" "7.22.10"
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.24.1", "@babel/runtime@^7.8.4":
+  "integrity" "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g=="
+  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz"
+  "version" "7.24.5"
   dependencies:
     "regenerator-runtime" "^0.14.0"
 
@@ -1417,6 +1417,11 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-icons@^1.3.0":
+  "integrity" "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw=="
+  "resolved" "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz"
+  "version" "1.3.0"
+
 "@radix-ui/[email protected]":
   "integrity" "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ=="
   "resolved" "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz"
@@ -2967,6 +2972,13 @@
   "resolved" "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz"
   "version" "1.0.3"
 
+"class-variance-authority@^0.7.0":
+  "integrity" "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A=="
+  "resolved" "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz"
+  "version" "0.7.0"
+  dependencies:
+    "clsx" "2.0.0"
+
 "classnames@^2.3.2":
   "integrity" "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
   "resolved" "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
@@ -3012,6 +3024,11 @@
   "resolved" "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
   "version" "1.2.1"
 
+"[email protected]":
+  "integrity" "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q=="
+  "resolved" "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
+  "version" "2.0.0"
+
 "code-red@^1.0.3":
   "integrity" "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw=="
   "resolved" "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz"
@@ -5089,6 +5106,11 @@
   dependencies:
     "yallist" "^4.0.0"
 
+"lucide-react@^0.378.0":
+  "integrity" "sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g=="
+  "resolved" "https://registry.npmjs.org/lucide-react/-/lucide-react-0.378.0.tgz"
+  "version" "0.378.0"
+
 "magic-string@^0.25.0":
   "integrity" "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ=="
   "resolved" "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz"
@@ -5894,7 +5916,7 @@
     "invariant" "^2.2.4"
     "tslib" "^2.0.0"
 
-"react@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^15.6.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18.0.0-0", "react@^18.2.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=16.0.0", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "[email protected]":
+"react@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^15.6.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.11.0 || ^17.0.0 || ^18.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.x || ^17.x || ^18.x", "react@^17.0.2 || ^18.0.0-0", "react@^18.2.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=16.0.0", "react@>=16.8 || ^17.0.0 || ^18.0.0", "react@>=16.8.0", "[email protected]":
   "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   "version" "18.2.0"
@@ -6629,7 +6651,19 @@
   "resolved" "https://registry.npmjs.org/swrv/-/swrv-1.0.4.tgz"
   "version" "1.0.4"
 
-"tailwindcss@^3.0.23", "tailwindcss@>=3.0.0 || >= 3.0.0-alpha.1 || insiders":
+"tailwind-merge@^2.3.0":
+  "integrity" "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA=="
+  "resolved" "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz"
+  "version" "2.3.0"
+  dependencies:
+    "@babel/runtime" "^7.24.1"
+
+"tailwindcss-animate@^1.0.7":
+  "integrity" "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA=="
+  "resolved" "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz"
+  "version" "1.0.7"
+
+"tailwindcss@^3.0.23", "tailwindcss@>=3.0.0 || >= 3.0.0-alpha.1 || insiders", "tailwindcss@>=3.0.0 || insiders":
   "integrity" "sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA=="
   "resolved" "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.23.tgz"
   "version" "3.0.23"
-Original file line number
+Diff line change
@@ Expand Up / @@ -306,5 +306,7 @@ module.exports = { @@
                     },
                 });
             },
+            require("tailwindcss-animate"),
+            require("tailwindcss-animate")
         ],
     };