From e9d1901193c0d93c42330f3262da4d47a9cc091c Mon Sep 17 00:00:00 2001
From: Sean S <sean@goforward.group>
Date: Fri, 13 Dec 2024 09:25:35 -0500
Subject: [PATCH] product page and start of a login page

---
 src/app/register/page.tsx                | 118 +++++++++++++++++++++++
 src/app/sign-up/page.tsx                 |  10 --
 src/components/Navbar/index.tsx          |   4 +-
 src/pages/{register.tsx => register.old} |   0
 4 files changed, 120 insertions(+), 12 deletions(-)
 create mode 100644 src/app/register/page.tsx
 delete mode 100644 src/app/sign-up/page.tsx
 rename src/pages/{register.tsx => register.old} (100%)

diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
new file mode 100644
index 0000000..b7be357
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -0,0 +1,118 @@
+'use client';
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  });
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    if (formData.password !== formData.confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/auth/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: formData.name,
+          email: formData.email,
+          password: formData.password,
+        }),
+      });
+
+      if (response.ok) {
+        router.push('/login');
+      } else {
+        const data = await response.json();
+        setError(data.error || 'Something went wrong');
+      }
+    } catch (err) {
+      setError('Failed to create account');
+    }
+  };
+
+  return (
+    <div className="p-4 pt-16 mx-auto max-w-md">
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && (
+            <div className="bg-red-50 text-red-500 p-3 rounded-md">{error}</div>
+          )}
+          
+          <div>
+            <div>
+              <h1>Sign Up</h1>
+              <p>Create an account to get started building.</p>
+            </div>
+            <label className="block text-sm font-medium text-gray-700">Name</label>
+            <input
+              type="text"
+              required
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={formData.name}
+              onChange={(e) => setFormData({...formData, name: e.target.value})}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Email</label>
+            <input
+              type="email"
+              required
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={formData.email}
+              onChange={(e) => setFormData({...formData, email: e.target.value})}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Password</label>
+            <input
+              type="password"
+              required
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={formData.password}
+              onChange={(e) => setFormData({...formData, password: e.target.value})}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Confirm Password</label>
+            <input
+              type="password"
+              required
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+              value={formData.confirmPassword}
+              onChange={(e) => setFormData({...formData, confirmPassword: e.target.value})}
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+          >
+            Create Account
+          </button>
+        </form>
+        <div>OR</div>
+          <button
+          type='button'
+          >
+            Login 
+          </button>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/app/sign-up/page.tsx b/src/app/sign-up/page.tsx
deleted file mode 100644
index 84c8607..0000000
--- a/src/app/sign-up/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-
-import { ChakraProvider } from "@chakra-ui/react";
-
-export default function SignUp() {
-  return (
-    <div className="bg-gray-100 min-h-screen flex flex-col">
-     Sign Up info goes here 
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 835ede1..241a36b 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -43,8 +43,8 @@ export default function Navbar() {
             </DisclosureButton> */}
           </div>
           <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
-            <div className="flex shrink-0 items-center">
-              <Link href={"/"}><p>Ballistics Builder</p></Link>
+            <div className="flex shrink-0 items-center text-white">
+              <Link href={"/"} className="text-gray-100 "><p className="text-white">Ballistics Builder</p></Link>
             </div>
             
              {/* <div className="hidden sm:ml-6 sm:block">
diff --git a/src/pages/register.tsx b/src/pages/register.old
similarity index 100%
rename from src/pages/register.tsx
rename to src/pages/register.old