fake new page, prettier

next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false, // creates problems for chat
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -29,6 +29,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/uuid": "^9.0.2"
   }
 }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/components/auth/ErrorAlert.tsx

@@ -1,13 +1,9 @@
-import { AuthError } from "@supabase/supabase-js";
+import { AuthError } from '@supabase/supabase-js';
 
 interface ErrorAlertProps {
-    error: AuthError
+  error: AuthError;
 }
 
 export default function ErrorAlert(props: ErrorAlertProps) {
-    return (
-        <p>
-            {props.error.message}
-        </p>
-    )
+  return <p>{props.error.message}</p>;
 }

src/components/auth/SignInForm.tsx

@@ -1,97 +1,109 @@
-'use client'
-import { Database } from '../../../types/supabase'
-import React, { useState } from 'react'
+'use client';
+import { Database } from '../../../types/supabase';
+import React, { useState } from 'react';
 import { AuthError } from '@supabase/supabase-js';
-import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
 import ErrorAlert from './ErrorAlert';
 import { useRouter } from 'next/router';
 
-
 export default function SignInForm() {
-    const supabase = createClientComponentClient<Database>()
-    const [error, setError] = useState<AuthError | null>(null);
-    const [isMainButtonDisabled, setIsMainButtonDisabled] = useState<boolean>(false);
-    const { push } = useRouter();
-
-    async function signInWithPassword(email: string, password: string) {
-      setIsMainButtonDisabled(true);
-      const { data, error } = await supabase.auth.signInWithPassword({
-        email,
-        password,
-      })
-      setIsMainButtonDisabled(false);
-      if (error) {
-        setError(error)
-      } else {
-        push('/home');
-      }
-    }
-
-    async function onFormSubmit(event: React.FormEvent<HTMLFormElement>) {
-      event.preventDefault()
-      const target = event.target as typeof event.target & {
-        email: { value: string }
-        password: { value: string }
-      }
-      const email = target.email.value
-      const password = target.password.value
-      await signInWithPassword(email, password)
+  const supabase = createClientComponentClient<Database>();
+  const [error, setError] = useState<AuthError | null>(null);
+  const [isMainButtonDisabled, setIsMainButtonDisabled] =
+    useState<boolean>(false);
+  const { push } = useRouter();
+
+  async function signInWithPassword(email: string, password: string) {
+    setIsMainButtonDisabled(true);
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    setIsMainButtonDisabled(false);
+    if (error) {
+      setError(error);
+    } else {
+      push('/home');
     }
+  }
 
-    return (
-      <>
-        {error && <ErrorAlert error={error} />}
-        <form className="space-y-6" action="#" method="POST" onSubmit={onFormSubmit}>
-          <div>
-            <label htmlFor="email" className="block text-sm font-medium leading-6 text-gray-900">
-              Email address
-            </label>
-            <div className="mt-2">
-              <input
-                id="email"
-                name="email"
-                type="email"
-                autoComplete="email"
-                required
-                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-              />
-            </div>
+  async function onFormSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const target = event.target as typeof event.target & {
+      email: { value: string };
+      password: { value: string };
+    };
+    const email = target.email.value;
+    const password = target.password.value;
+    await signInWithPassword(email, password);
+  }
+
+  return (
+    <>
+      {error && <ErrorAlert error={error} />}
+      <form
+        className="space-y-6"
+        action="#"
+        method="POST"
+        onSubmit={onFormSubmit}
+      >
+        <div>
+          <label
+            htmlFor="email"
+            className="block text-sm font-medium leading-6 text-gray-900"
+          >
+            Email address
+          </label>
+          <div className="mt-2">
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            />
           </div>
+        </div>
 
-          <div>
-            <div className="flex items-center justify-between">
-              <label htmlFor="password" className="block text-sm font-medium leading-6 text-gray-900">
-                Password
-              </label>
-              <div className="text-sm">
-                <a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500">
-                  Forgot password?
-                </a>
-              </div>
-            </div>
-            <div className="mt-2">
-              <input
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-              />
+        <div>
+          <div className="flex items-center justify-between">
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium leading-6 text-gray-900"
+            >
+              Password
+            </label>
+            <div className="text-sm">
+              <a
+                href="#"
+                className="font-semibold text-indigo-600 hover:text-indigo-500"
+              >
+                Forgot password?
+              </a>
             </div>
           </div>
-          <div>
-            <button
-              disabled={isMainButtonDisabled}
-              type="submit"
-              className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-              Sign in
-            </button>
+          <div className="mt-2">
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            />
           </div>
-        </form>
-      </>
-
-    )
-  }
-
+        </div>
+        <div>
+          <button
+            disabled={isMainButtonDisabled}
+            type="submit"
+            className="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >
+            Sign in
+          </button>
+        </div>
+      </form>
+    </>
+  );
+}