Add frontend for login and sign up

app/core/config.py

@@ -6,7 +6,7 @@ class Settings(BaseSettings):
     app_name: str = "Shopping App"
     database_url: str  # Ensure lowercase to match the .env key
     secret_key: str
-    debug: bool = True  # Lowercase to match Python conventions
+    debug: bool = True
 
     model_config = SettingsConfigDict(
         env_file=str(Path(__file__).resolve().parent.parent / ".env"),

app/frontend/components/login.py

 import ttkbootstrap as tb
 from ttkbootstrap.constants import *
 from tkinter import messagebox
+import requests  # Import requests for API communication
+
+def login_frame(parent, switch_func, api_url):  # Added api_url parameter
+    frame = tb.Frame(parent)
 
-# Function to handle login
     def login():
-    username = entry_username.get()
+        email = entry_email.get()
         password = entry_password.get()
 
-    if username == "admin" and password == "password":  # Dummy credentials
-        messagebox.showinfo("Login Successful", "Welcome, Admin!")
+        if not email or not password:
+            messagebox.showwarning("Input Error", "Both fields are required!")
+            return
+
+        # Sending login request to backend
+        response = requests.post(f"{api_url}/auth/login", json={
+            "email": email,
+            "password": password
+        })
+
+        try:
+            response_data = response.json()
+            if response.status_code == 200:
+                messagebox.showinfo("Login Successful", f"Welcome back, {email}!")
+                # TODO: Implement navigation after login (e.g., open dashboard)
             else:
-        messagebox.showerror("Login Failed", "Invalid username or password.")
-
-# Create main window
-root = tb.Window(themename="superhero")  # Try different themes like "darkly", "minty", etc.
-root.title("Login Form")
-root.geometry("900x800")
+                messagebox.showerror("Login Failed", response_data.get("detail", "Invalid credentials"))
+        except requests.exceptions.JSONDecodeError:
+            messagebox.showerror("Login Failed", "Server returned an invalid response.")
 
-# Title Label
-label_title = tb.Label(root, text="Login", font=("Helvetica", 18, "bold"))
-label_title.pack(pady=10)
+    tb.Label(frame, text="Login", font=("Helvetica", 18, "bold")).pack(pady=10)
 
-# Username Entry
-tb.Label(root, text="Username:").pack(pady=5)
-entry_username = tb.Entry(root, bootstyle="info")
-entry_username.pack(pady=5)
+    tb.Label(frame, text="Email:").pack(pady=5)
+    entry_email = tb.Entry(frame, bootstyle="info")
+    entry_email.pack(pady=5)
 
-# Password Entry
-tb.Label(root, text="Password:").pack(pady=5)
-entry_password = tb.Entry(root, bootstyle="info", show="*")  # Masked input
+    tb.Label(frame, text="Password:").pack(pady=5)
+    entry_password = tb.Entry(frame, bootstyle="info", show="*")
     entry_password.pack(pady=5)
 
-# Login Button
-btn_login = tb.Button(root, text="Login", bootstyle="primary", command=login)
+    btn_login = tb.Button(frame, text="Login", bootstyle="primary", command=login)
     btn_login.pack(pady=15)
 
-# Run the GUI
-root.mainloop()
+    tb.Button(frame, text="Don't have an account? Register", bootstyle="link",
+              command=lambda: switch_func("register")).pack()
+
+    return frame

app/frontend/components/register.py

 import ttkbootstrap as tb
 from ttkbootstrap.constants import *
 from tkinter import messagebox
+import requests  # Import requests for API communication
+
+def register_frame(parent, switch_func, api_url):  # Added api_url parameter
+    frame = tb.Frame(parent)
 
-# Function to handle registration
     def register():
         username = entry_username.get()
         email = entry_email.get()
@@ -18,46 +21,50 @@ def register():
             messagebox.showerror("Password Error", "Passwords do not match!")
             return
 
-    # Dummy registration success message (Replace with DB logic)
-    messagebox.showinfo("Registration Successful", f"Welcome, {username}!")
+        # Sending registration data to backend
+        response = requests.post(f"{api_url}/auth/signup", json={
+            "username": username,
+            "email": email,
+            "phone_number": phone_number,
+            "password": password
+        })
 
-# Create main window
-root = tb.Window(themename="superhero")  # Change to "darkly", "superhero", etc.
-root.title("Register")
-root.geometry("900x800")
+        try:
+            response_data = response.json()
+            if response.status_code == 200:
+                messagebox.showinfo("Registration Successful", f"Welcome, {username}!")
+                switch_func("login")  # Switch to login after successful registration
+            else:
+                messagebox.showerror("Registration Failed", response_data.get("detail", "Unknown error"))
+        except requests.exceptions.JSONDecodeError:
+            messagebox.showerror("Registration Failed", f"Server returned an invalid response.")
 
-# Title Label
-label_title = tb.Label(root, text="Register", font=("Helvetica", 18, "bold"))
-label_title.pack(pady=10)
+    tb.Label(frame, text="Register", font=("Helvetica", 18, "bold")).pack(pady=10)
 
-# Username Entry
-tb.Label(root, text="Username:").pack(pady=5)
-entry_username = tb.Entry(root, bootstyle="info")
+    tb.Label(frame, text="Username:").pack(pady=5)
+    entry_username = tb.Entry(frame, bootstyle="info")
     entry_username.pack(pady=5)
 
-# Email Entry
-tb.Label(root, text="Email:").pack(pady=5)
-entry_email = tb.Entry(root, bootstyle="info")
+    tb.Label(frame, text="Email:").pack(pady=5)
+    entry_email = tb.Entry(frame, bootstyle="info")
     entry_email.pack(pady=5)
 
-# Phone Entry
-tb.Label(root, text="Phone Number:").pack(pady=5)
-entry_phone = tb.Entry(root, bootstyle="info")
+    tb.Label(frame, text="Phone Number:").pack(pady=5)
+    entry_phone = tb.Entry(frame, bootstyle="info")
     entry_phone.pack(pady=5)
 
-# Password Entry
-tb.Label(root, text="Password:").pack(pady=5)
-entry_password = tb.Entry(root, bootstyle="info", show="*")
+    tb.Label(frame, text="Password:").pack(pady=5)
+    entry_password = tb.Entry(frame, bootstyle="info", show="*")
     entry_password.pack(pady=5)
 
-# Confirm Password Entry
-tb.Label(root, text="Confirm Password:").pack(pady=5)
-entry_confirm_password = tb.Entry(root, bootstyle="info", show="*")
+    tb.Label(frame, text="Confirm Password:").pack(pady=5)
+    entry_confirm_password = tb.Entry(frame, bootstyle="info", show="*")
     entry_confirm_password.pack(pady=5)
 
-# Register Button
-btn_register = tb.Button(root, text="Register", bootstyle="success", command=register)
+    btn_register = tb.Button(frame, text="Register", bootstyle="success", command=register)
     btn_register.pack(pady=15)
 
-# Run the GUI
-root.mainloop()
+    tb.Button(frame, text="Already have an account? Login", bootstyle="link",
+              command=lambda: switch_func("login")).pack()
+
+    return frame

app/frontend/main.py

 import ttkbootstrap as tb
-from ttkbootstrap.constants import *
-from tkinter import messagebox
-import requests
+from components.login import login_frame
+from components.register import register_frame
 
 # Backend API URL
 API_URL = "http://127.0.0.1:8000"
 
-# Function to handle registration
-def register():
-    username = entry_username.get()
-    email = entry_email.get()
-    phone_number = entry_phone.get()
-    password = entry_password.get()
-    confirm_password = entry_confirm_password.get()
-
-    if not username or not email or not password or not confirm_password:
-        messagebox.showwarning("Input Error", "All fields are required!")
-        return
-
-    if password != confirm_password:
-        messagebox.showerror("Password Error", "Passwords do not match!")
-        return
-
-    # Send registration data to backend
-    response = requests.post(f"{API_URL}/auth/signup", json={
-        "username": username,
-        "email": email,
-        "phone_number": phone_number,
-        "password": password
-    })
-
-    try:
-        response_data = response.json()
-        if response.status_code == 200:
-            messagebox.showinfo("Registration Successful", f"Welcome, {username}!")
-        else:
-            messagebox.showerror("Registration Failed", response_data.get("detail", "Unknown error"))
-    except requests.exceptions.JSONDecodeError:
-        messagebox.showerror("Registration Failed", f"Server returned non-JSON response: {response.text}")
-
-# Function to handle login
-def login():
-    email = entry_email.get()
-    password = entry_password.get()
-
-    # Send login data to backend
-    response = requests.post(f"{API_URL}/auth/login", json={
-        "email": email,
-        "password": password
-    })
-
-    if response.status_code == 200:
-        messagebox.showinfo("Login Successful", "Welcome!")
-    else:
-        messagebox.showerror("Login Failed", response.json().get("detail", "Invalid credentials"))
+# Function to switch between login and register
+def switch_frame(frame_name):
+    if frame_name == "login":
+        login.tkraise()
+    elif frame_name == "register":
+        register.tkraise()
 
 # Create main window
-root = tb.Window(themename="superhero")  # Change to "darkly", "superhero", etc.
+root = tb.Window(themename="superhero")
 root.title("Shopping App")
 root.geometry("900x800")
 
-# Title Label
-label_title = tb.Label(root, text="Shopping App", font=("Helvetica", 18, "bold"))
-label_title.pack(pady=10)
-
-# Username Entry
-tb.Label(root, text="Username:").pack(pady=5)
-entry_username = tb.Entry(root, bootstyle="info")
-entry_username.pack(pady=5)
-
-# Email Entry
-tb.Label(root, text="Email:").pack(pady=5)
-entry_email = tb.Entry(root, bootstyle="info")
-entry_email.pack(pady=5)
-
-# Phone Entry
-tb.Label(root, text="Phone Number:").pack(pady=5)
-entry_phone = tb.Entry(root, bootstyle="info")
-entry_phone.pack(pady=5)
-
-# Password Entry
-tb.Label(root, text="Password:").pack(pady=5)
-entry_password = tb.Entry(root, bootstyle="info", show="*")
-entry_password.pack(pady=5)
-
-# Confirm Password Entry
-tb.Label(root, text="Confirm Password:").pack(pady=5)
-entry_confirm_password = tb.Entry(root, bootstyle="info", show="*")
-entry_confirm_password.pack(pady=5)
+# Create Frames
+login = login_frame(root, switch_frame, API_URL)
+register = register_frame(root, switch_frame, API_URL)
 
-# Register Button
-btn_register = tb.Button(root, text="Register", bootstyle="success", command=register)
-btn_register.pack(pady=15)
+for frame in (login, register):
+    frame.place(relx=0, rely=0.2, relwidth=1, relheight=1)
 
-# Login Button
-btn_login = tb.Button(root, text="Login", bootstyle="primary", command=login)
-btn_login.pack(pady=15)
+# Show Login Frame First
+switch_frame("login")
 
 # Run the GUI
 root.mainloop()