diff --git a/AppImage/components/auth-setup.tsx b/AppImage/components/auth-setup.tsx index e2915d4..8cec24d 100644 --- a/AppImage/components/auth-setup.tsx +++ b/AppImage/components/auth-setup.tsx @@ -2,10 +2,10 @@ import { useState, useEffect } from "react" import { Button } from "./ui/button" -import { Dialog, DialogContent } from "./ui/dialog" +import { Dialog, DialogContent, DialogTitle } from "./ui/dialog" import { Input } from "./ui/input" import { Label } from "./ui/label" -import { Shield, Lock, User, AlertCircle } from "lucide-react" +import { Shield, Lock, User, AlertCircle, Eye, EyeOff } from "lucide-react" import { getApiUrl } from "../lib/api-config" interface AuthSetupProps { @@ -20,6 +20,8 @@ export function AuthSetup({ onComplete }: AuthSetupProps) { const [confirmPassword, setConfirmPassword] = useState("") const [error, setError] = useState("") const [loading, setLoading] = useState(false) + const [showPassword, setShowPassword] = useState(false) + const [showConfirmPassword, setShowConfirmPassword] = useState(false) useEffect(() => { const checkOnboardingStatus = async () => { @@ -135,6 +137,9 @@ export function AuthSetup({ onComplete }: AuthSetupProps) { return ( + + {step === "choice" ? "Setup Dashboard Protection" : "Create Password"} + {step === "choice" ? (
@@ -210,7 +215,7 @@ export function AuthSetup({ onComplete }: AuthSetupProps) { setPassword(e.target.value)} @@ -218,6 +223,14 @@ export function AuthSetup({ onComplete }: AuthSetupProps) { disabled={loading} autoComplete="new-password" /> +
@@ -229,7 +242,7 @@ export function AuthSetup({ onComplete }: AuthSetupProps) { setConfirmPassword(e.target.value)} @@ -237,6 +250,14 @@ export function AuthSetup({ onComplete }: AuthSetupProps) { disabled={loading} autoComplete="new-password" /> + diff --git a/AppImage/components/onboarding-carousel.tsx b/AppImage/components/onboarding-carousel.tsx index a290977..bea3426 100644 --- a/AppImage/components/onboarding-carousel.tsx +++ b/AppImage/components/onboarding-carousel.tsx @@ -4,7 +4,7 @@ import type React from "react" import { useState, useEffect } from "react" import { Button } from "./ui/button" -import { Dialog, DialogContent } from "./ui/dialog" +import { Dialog, DialogContent, DialogTitle } from "./ui/dialog" import { ChevronLeft, ChevronRight, @@ -159,6 +159,7 @@ export function OnboardingCarousel() { return ( + ProxMenux Onboarding