Moved authentication credentials to environment variables and added settings page for password management

.env.example

@@ -13,4 +13,9 @@ NODE_ENV="development"
 PORT=3000
 
 # Next.js
-NEXT_PUBLIC_API_URL="http://localhost:3000/api" 
+NEXT_PUBLIC_API_URL="http://localhost:3000/api" 
+
+# Authentication
+AUTH_SECRET="your-secure-auth-secret-key"
+ADMIN_USERNAME="admin"
+ADMIN_PASSWORD="strong-password-here" 

src/app/api/auth/change-password/route.ts

@@ -0,0 +1,52 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getUser } from "@/lib/auth";
+
+// Get authentication credentials from environment variables
+const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || 'stones1234';
+
+export async function POST(request: NextRequest) {
+  try {
+    // Check if user is authenticated
+    const user = await getUser();
+    if (!user) {
+      return NextResponse.json(
+        { success: false, message: "Unauthorized" },
+        { status: 401 }
+      );
+    }
+    
+    // Parse request body
+    const body = await request.json();
+    const { currentPassword, newPassword } = body;
+    
+    // Validate inputs
+    if (!currentPassword || !newPassword) {
+      return NextResponse.json(
+        { success: false, message: "Missing required fields" },
+        { status: 400 }
+      );
+    }
+    
+    // Verify current password
+    if (currentPassword !== ADMIN_PASSWORD) {
+      return NextResponse.json(
+        { success: false, message: "Current password is incorrect" },
+        { status: 400 }
+      );
+    }
+    
+    // Password validation is successful, but we don't actually change it here
+    // since it needs to be changed in environment variables
+    
+    return NextResponse.json({
+      success: true,
+      message: "Password validation successful. Please update your environment files."
+    });
+  } catch (error) {
+    console.error("Change password error:", error);
+    return NextResponse.json(
+      { success: false, message: "Internal server error" },
+      { status: 500 }
+    );
+  }
+} 

src/app/api/auth/login/route.ts

@@ -1,14 +1,18 @@
 import { NextRequest, NextResponse } from "next/server";
 import { cookies } from "next/headers";
 
+// Get authentication credentials from environment variables
+const ADMIN_USERNAME = process.env.ADMIN_USERNAME || 'admin'
+const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || 'stones1234'
+
 // Mock user data - in a real app this would come from a database
 const USERS = [
   {
     id: "1",
     name: "Admin",
     role: "admin",
-    username: "admin",
-    password: "stones1234" // In production, use hashed passwords
+    username: ADMIN_USERNAME,
+    password: ADMIN_PASSWORD
   }
 ];
 

src/app/contacts/import/page.tsx

@@ -39,6 +39,9 @@ export default async function ImportContactsPage() {
                 <span className="text-sm text-muted-foreground">
                   Hello, {user.name}
                 </span>
+                <Link href="/settings" className="text-sm font-medium">
+                  Settings
+                </Link>
                 <LogoutButton />
               </div>
             )}

src/app/contacts/new/page.tsx

@@ -39,6 +39,9 @@ export default async function NewContactPage() {
                 <span className="text-sm text-muted-foreground">
                   Hello, {user.name}
                 </span>
+                <Link href="/settings" className="text-sm font-medium">
+                  Settings
+                </Link>
                 <LogoutButton />
               </div>
             )}

src/app/contacts/page.tsx

@@ -86,6 +86,9 @@ export default async function ContactsPage({ searchParams }: ContactsPageProps)
                 <span className="text-sm text-muted-foreground">
                   Hello, {user.name}
                 </span>
+                <Link href="/settings" className="text-sm font-medium">
+                  Settings
+                </Link>
                 <LogoutButton />
               </div>
             )}

src/app/dashboard/page.tsx

@@ -41,6 +41,9 @@ export default async function DashboardPage() {
                 <span className="text-sm text-muted-foreground">
                   Hello, {user.name}
                 </span>
+                <Link href="/settings" className="text-sm font-medium">
+                  Settings
+                </Link>
                 <LogoutButton />
               </div>
             )}

src/app/settings/page.tsx

@@ -0,0 +1,85 @@
+import { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getUser } from "@/lib/auth";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { LogoutButton } from "@/components/auth/logout-button";
+import { SettingsForm } from "@/components/settings/settings-form";
+
+export const metadata: Metadata = {
+  title: "Settings - Stones Database",
+  description: "Manage your account settings",
+};
+
+export default async function SettingsPage() {
+  const user = await getUser();
+  
+  if (!user) {
+    notFound();
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container flex h-14 items-center justify-between">
+          <div className="mr-4 flex">
+            <Link href="/" className="mr-6 flex items-center space-x-2">
+              <span className="font-bold">Stones Database</span>
+            </Link>
+          </div>
+          <nav className="flex items-center space-x-4">
+            <Link href="/contacts" className="text-sm font-medium">
+              Contacts
+            </Link>
+            <Link href="/dashboard" className="text-sm font-medium">
+              Dashboard
+            </Link>
+            {user && (
+              <div className="flex items-center gap-4">
+                <span className="text-sm text-muted-foreground">
+                  Hello, {user.name}
+                </span>
+                <LogoutButton />
+              </div>
+            )}
+          </nav>
+        </div>
+      </header>
+      <main className="flex-1 container py-6">
+        <div className="flex items-center mb-6">
+          <div>
+            <Link href="/dashboard">
+              <button className="text-sm text-blue-500 hover:text-blue-700 mb-2">
+                ← Back to Dashboard
+              </button>
+            </Link>
+            <h1 className="text-3xl font-bold">Account Settings</h1>
+          </div>
+        </div>
+        
+        <Card>
+          <CardHeader>
+            <CardTitle>Change Password</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
+              <h3 className="text-sm font-semibold text-yellow-800">Important Note</h3>
+              <p className="text-sm text-yellow-700 mt-1">
+                Since this application uses environment variables for authentication, updating the password here will 
+                guide you on how to update the relevant environment files for the changes to take effect.
+              </p>
+            </div>
+            <SettingsForm />
+          </CardContent>
+        </Card>
+      </main>
+      <footer className="w-full border-t py-6">
+        <div className="container flex justify-center items-center">
+          <p className="text-center text-sm leading-loose text-muted-foreground">
+            © 2025 BoilerHaus. All rights reserved.
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+} 

src/components/settings/settings-form.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { AlertCircle, Check } from "lucide-react";
+
+export function SettingsForm() {
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [instructions, setInstructions] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError("");
+    setSuccess(false);
+    setInstructions(false);
+
+    // Validate passwords
+    if (!currentPassword || !newPassword || !confirmPassword) {
+      setError("All fields are required");
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setError("New passwords don't match");
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setError("Password must be at least 8 characters long");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const response = await fetch("/api/auth/change-password", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          currentPassword,
+          newPassword,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.message || "Something went wrong");
+      }
+
+      setSuccess(true);
+      setInstructions(true);
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+    } catch (error: any) {
+      setError(error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <label htmlFor="current-password" className="text-sm font-medium">
+            Current Password
+          </label>
+          <Input
+            id="current-password"
+            type="password"
+            value={currentPassword}
+            onChange={(e) => setCurrentPassword(e.target.value)}
+            disabled={isLoading}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label htmlFor="new-password" className="text-sm font-medium">
+            New Password
+          </label>
+          <Input
+            id="new-password"
+            type="password"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            disabled={isLoading}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label htmlFor="confirm-password" className="text-sm font-medium">
+            Confirm New Password
+          </label>
+          <Input
+            id="confirm-password"
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            disabled={isLoading}
+          />
+        </div>
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {success && (
+          <Alert className="bg-green-50 border-green-200 text-green-800">
+            <Check className="h-4 w-4 text-green-500" />
+            <AlertTitle>Success</AlertTitle>
+            <AlertDescription>Password validation successful!</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="flex justify-end">
+          <Button type="submit" disabled={isLoading}>
+            {isLoading ? "Verifying..." : "Verify Password"}
+          </Button>
+        </div>
+      </form>
+
+      {instructions && (
+        <div className="mt-8 p-4 border rounded-md bg-blue-50">
+          <h3 className="text-lg font-semibold mb-2">Next Steps to Change Your Password</h3>
+          <p className="mb-4">
+            Since this application uses environment variables for authentication, you need to update the password in your environment files:
+          </p>
+          <ol className="list-decimal pl-5 space-y-2">
+            <li>Open the <code className="bg-gray-100 px-1 rounded">.env</code> file in your project's root directory</li>
+            <li>Find the line with <code className="bg-gray-100 px-1 rounded">ADMIN_PASSWORD="current-password"</code></li>
+            <li>Replace <code className="bg-gray-100 px-1 rounded">current-password</code> with your new password: <code className="bg-gray-100 px-1 rounded">ADMIN_PASSWORD="{newPassword}"</code></li>
+            <li>Save the file</li>
+            <li>Restart the application for the changes to take effect</li>
+          </ol>
+          <p className="mt-4 text-sm text-gray-600">
+            <strong>Note:</strong> If you're running in production, make sure to also update your production environment variables.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+} 

src/components/ui/alert.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription } 

src/lib/auth.ts

@@ -9,17 +9,21 @@ export interface User {
   role: string
 }
 
-// Set to environment variable in production
+// Use environment variable for auth secret
 const AUTH_SECRET = process.env.AUTH_SECRET || 'stones-database-secret'
 
+// Get authentication credentials from environment variables
+const ADMIN_USERNAME = process.env.ADMIN_USERNAME || 'admin'
+const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD || 'stones1234'
+
 // In a real app, this would be stored in a database
 const USERS = [
   {
     id: '1',
     name: 'Admin',
     role: 'admin' as const,
-    username: 'admin',
-    password: 'stones1234' // In production, use hashed passwords
+    username: ADMIN_USERNAME,
+    password: ADMIN_PASSWORD
   }
 ]