v0.0.1

frontend/app/components/NexusAuth.css

@@ -0,0 +1,76 @@
+.nexus-auth-form {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid var(--primary);
+    border-radius: 5px;
+    background-color: var(--accent);
+}
+
+.nexus-auth-form h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: var(--foreground);
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    color: var(--foreground);
+}
+
+.form-group input {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+    background-color: var(--secondary);
+    color: var(--foreground);
+    border: 1px solid var(--primary);
+}
+
+.form-group input:focus {
+    border-color: var(--accent);
+    outline: none;
+}
+
+.submit-button {
+    width: 100%;
+    padding: 10px;
+    color: var(--foreground);
+    background-color: var(--primary);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.submit-button:hover {
+    background-color: var(--secondary);
+}
+
+.nexus-auth-signup-login {
+    text-align: center;
+    margin-top: 50px;
+}
+
+.nexus-auth-signup-login h1 {
+    margin-bottom: 20px;
+    color: var(--foreground);
+}
+
+.nexus-auth-signup-login button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    color: var(--foreground);
+    background-color: var(--primary);
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.nexus-auth-signup-login button:hover {
+    background-color: var(--secondary);
+}

frontend/app/components/NexusAuth.js

@@ -0,0 +1,90 @@
+'use client';
+import './NexusAuth.css';
+import { useState } from "react";
+
+const SignupForm = ({ onSignup }) => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    const [email, setEmail] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSignup({ username, password, email });
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="nexus-auth-form">
+            <h2>Signup</h2>
+            <div className="form-group">
+                <label>Username:</label>
+                <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} required />
+            </div>
+            <div className="form-group">
+                <label>Password:</label>
+                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+            </div>
+            <div className="form-group">
+                <label>Email (optional):</label>
+                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+            </div>
+            <button type="submit" className="submit-button">Signup</button>
+        </form>
+    );
+};
+
+const LoginForm = ({ onLogin }) => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onLogin({ username, password });
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="nexus-auth-form">
+            <h2>Login</h2>
+            <div className="form-group">
+                <label>Username:</label>
+                <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} required />
+            </div>
+            <div className="form-group">
+                <label>Password:</label>
+                <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+            </div>
+            <button type="submit" className="submit-button">Login</button>
+        </form>
+    );
+};
+
+export const NexusAuthWrapper = ({ children }) =>{
+    const [isloggedin, setIsloggedin] = useState(false);
+    const [isSignup, setIsSignup] = useState(true);
+
+    const handleSignup = (data) => {
+        // Handle signup logic here
+        console.log('Signup data:', data);
+        setIsloggedin(true);
+    };
+    
+
+    const handleLogin = (data) => {
+        // Handle login logic here
+        console.log('Login data:', data);
+        setIsloggedin(true);
+    };
+
+    return (
+        <div>
+            {isloggedin ? children : 
+            <div className="nexus-auth-signup-login">
+                <h1>Nexus Accounts</h1>
+                {isSignup ? <SignupForm onSignup={handleSignup} /> : <LoginForm onLogin={handleLogin} />}
+                <button onClick={() => setIsSignup(!isSignup)}>
+                    {isSignup ? 'Switch to Login' : 'Switch to Signup'}
+                </button>
+            </div>
+            }
+        </div>
+    );
+};

frontend/app/globals.css

@@ -1,13 +1,9 @@
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --background: #1e1e2f;
+  --foreground: #e0e0e0;
+  --primary: #3a3a5f;
+  --secondary: #2a2a4f;
+  --accent: #4a4a7f;
 }
 
 html,
@@ -31,12 +27,32 @@ body {
 }
 
 a {
-  color: inherit;
+  color: var(--accent);
   text-decoration: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+button {
+  background-color: var(--primary);
+  color: var(--foreground);
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+button:hover {
+  background-color: var(--secondary);
+}
+
+input {
+  background-color: var(--secondary);
+  color: var(--foreground);
+  border: 1px solid var(--primary);
+  padding: 10px;
+  font-size: 1rem;
+}
+
+input:focus {
+  border-color: var(--accent);
+  outline: none;
 }

frontend/app/layout.js

@@ -1,5 +1,6 @@
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { NexusAuthWrapper } from "./components/NexusAuth";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -11,16 +12,13 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        <NexusAuthWrapper>
         {children}
+        </NexusAuthWrapper>
       </body>
     </html>
   );

frontend/app/lib/Nexus_Auth_API.js

@@ -0,0 +1,66 @@
+import axios from 'axios';
+
+const BASE_URL = 'http://localhost:YOUR_API_SERVER_PORT/v1/api/auth';
+
+export const signup = async (username, password, email) => {
+  try {
+    const response = await axios.post(`${BASE_URL}/signup`, {
+      username,
+      password,
+      email,
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(error.response.data.detail);
+  }
+};
+
+export const login = async (username, password) => {
+  try {
+    const response = await axios.post(`${BASE_URL}/login`, {
+      username,
+      password,
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(error.response.data.detail);
+  }
+};
+
+export const logout = async (userId, token) => {
+  try {
+    await axios.post(`${BASE_URL}/logout`, {
+      user_id: userId,
+      token,
+    });
+  } catch (error) {
+    console.error(error); // Handle logout errors gracefully
+  }
+};
+
+export const validateToken = async (userId, token) => {
+  try {
+    const response = await axios.get(`${BASE_URL}/validate`, {
+      params: {
+        user_id: userId,
+        token,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(error.response.data.detail);
+  }
+};
+
+export const updateUser = async (userId, token, updateData) => {
+  try {
+    const response = await axios.put(`${BASE_URL}/user/update`, updateData, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error(error.response.data.detail);
+  }
+};