Allow users to create accounts and securely access the application

Adds user registration functionality and updates login logic in LoginPage.tsx.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 556aa286-edd2-4cea-8583-f4fc3cfd119b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/81470e0d-8ae8-4335-9301-cd9a69e670fa/96467e4f-00f2-4d88-82b1-142a9b24784c.jpg

.replit

@@ -30,3 +30,7 @@ author = "agent"
 task = "shell.exec"
 args = "npm run dev"
 waitForPort = 5000
+
+[[ports]]
+localPort = 5000
+externalPort = 80

client/src/App.tsx

@@ -16,7 +16,7 @@ function Router() {
     <Switch>
       <Route path="/" component={LandingPage} />
       <Route path="/login" component={LoginPage} />
-      {/* <Route path="/onboarding" component={OnboardingPage} /> */}
+      <Route path="/register" component={LoginPage} />
       <Route path="/dashboard" component={DashboardPage} />
       <Route component={NotFound} />
     </Switch>

client/src/pages/LoginPage.tsx

@@ -14,14 +14,21 @@ import { Mic, Moon, Sun, Loader2, AlertCircle, CheckCircle2 } from "lucide-react
 import { cn } from "@/lib/utils";
 
 export default function LoginPage() {
-  const [, setLocation] = useLocation();
-  const { login, user } = useAuth();
+  const [location, setLocation] = useLocation();
+  const { login, register, user } = useAuth();
   const { theme, toggleTheme } = useTheme();
   const { toast } = useToast();
   
+  const isRegisterMode = location === "/register";
+  
   const [formData, setFormData] = useState({
     email: "",
     password: "",
+    confirmPassword: "",
+    username: "",
+    firstName: "",
+    lastName: "",
+    role: "standard",
     rememberMe: false,
   });
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -39,6 +46,29 @@ export default function LoginPage() {
     setIsSubmitting(true);
 
     try {
+      if (isRegisterMode) {
+        if (formData.password !== formData.confirmPassword) {
+          setError("Passwords do not match");
+          return;
+        }
+        
+        await register({
+          username: formData.username,
+          email: formData.email,
+          password: formData.password,
+          confirmPassword: formData.confirmPassword,
+          firstName: formData.firstName,
+          lastName: formData.lastName,
+          role: formData.role,
+        });
+        
+        toast({
+          title: "Account created!",
+          description: "You have successfully registered. Please sign in.",
+        });
+        
+        setLocation("/login");
+      } else {
         await login(formData.email, formData.password);
         
         toast({
@@ -47,9 +77,10 @@ export default function LoginPage() {
         });
         
         setLocation("/dashboard");
+      }
     } catch (error: any) {
-      console.error("Login error:", error);
-      setError(error.message || "Failed to sign in. Please check your credentials.");
+      console.error("Auth error:", error);
+      setError(error.message || `Failed to ${isRegisterMode ? 'register' : 'sign in'}. Please try again.`);
     } finally {
       setIsSubmitting(false);
     }