Update login form with additional links and error messaging

public/manifest.json

@@ -1,6 +1,6 @@
 {
-    "name": "MaxCoach Education Template",
-    "short_name": "MaxCoach",
+    "name": "Vets Who Code",
+    "short_name": "Vets Who Code",
     "theme_color": "#696969",
     "background_color": "#20AD96",
     "display": "standalone",

src/assets/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+    return twMerge(clsx(inputs));
 }

src/components/forms/login-form.tsx

@@ -6,6 +6,7 @@ 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 Anchor from "@ui/anchor";
 import { hasKey } from "@utils/methods";
 import { useUser } from "@contexts/user-context";
 
@@ -88,10 +89,16 @@ const LoginForm = () => {
                     <small>Default Password: Admin</small>
                 </div>
                 <Checkbox name="remember" id="remember" label="Remember me" />
+                {serverState && <FeedbackText>{serverState}</FeedbackText>}
                 <Button type="submit" fullwidth className="tw-mt-7.5">
                     Log In
                 </Button>
-                {serverState && <FeedbackText>{serverState}</FeedbackText>}
+                <div className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-5">
+                    <Anchor path="/forgot-password" className="tw-mb-2">
+                        Forgot Password?
+                    </Anchor>
+                    <Anchor path="/register">Register New Account</Anchor>
+                </div>
             </form>
         </div>
     );

src/components/seo/deafult-seo.tsx

@@ -1,27 +1,27 @@
 import { DefaultSeo } from "next-seo";
 import siteConfig from "@data/site-config";
 
-const SEO = () => {
+const DefaultSEO = () => {
     return (
         <DefaultSeo
             title={siteConfig.name}
             titleTemplate={`%s - ${siteConfig.titleTemplate}`}
             defaultTitle={siteConfig.name}
             description={siteConfig.description}
-            canonical=""
+            canonical={siteConfig.url}
             openGraph={{
                 type: "website",
                 locale: "en_IE",
                 site_name: siteConfig.name,
                 images: [
                     {
-                        url: "",
+                        url: "https://res.cloudinary.com/vetswhocode/image/upload/v1656268751/favicon_dpiacy.png",
                         width: 800,
                         height: 600,
                         alt: "Og Image Alt",
                     },
                     {
-                        url: "",
+                        url: "https://res.cloudinary.com/vetswhocode/image/upload/v1656268751/favicon_dpiacy.png",
                         width: 900,
                         height: 800,
                         alt: "Og Image Alt Second",
@@ -40,7 +40,7 @@ const SEO = () => {
                 {
                     name: "viewport",
                     content:
-                        "width=device-width, initial-scale=1 maximum-scale=1",
+                        "width=device-width, initial-scale=1, maximum-scale=1",
                 },
                 {
                     name: "apple-mobile-web-app-capable",
@@ -64,4 +64,5 @@ const SEO = () => {
         />
     );
 };
-export default SEO;
+
+export default DefaultSEO;

src/components/seo/page-seo.tsx

@@ -58,8 +58,8 @@ const PageSeo = ({
                 title={title}
                 titleTemplate={
                     template
-                        ? `${title as string} - ${template}`
-                        : siteConfig.titleTemplate
+                        ? `${title ?? ""} - ${template}`
+                        : `%s - ${siteConfig.titleTemplate}`
                 }
                 description={description}
                 openGraph={{

src/components/ui/spinner/index.tsx

@@ -1,7 +1,11 @@
 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]">
-            <img src="https://res.cloudinary.com/vetswhocode/image/upload/v1627489505/vwc_kym0qt.gif" alt="Loading" className="tw-w-full tw-h-full" />
+            <img
+                src="https://res.cloudinary.com/vetswhocode/image/upload/v1627489505/vwc_kym0qt.gif"
+                alt="Loading"
+                className="tw-w-full tw-h-full"
+            />
         </div>
     );
 };

src/components/welcome-message/index.tsx

@@ -0,0 +1,13 @@
+const WelcomeMessage = () => (
+    <div>
+        <h2 className="tw-mb-4 tw-text-xl tw-font-bold">
+            Welcome to Vets Who Code
+        </h2>
+        <p>
+            Make sure to connect with the leadership to get access to all the
+            resources and support you need to succeed.
+        </p>
+    </div>
+);
+
+export default WelcomeMessage;