From 2ec7adab43ab92886dcd11088655dc615a8878bf Mon Sep 17 00:00:00 2001 From: Wikid82 Date: Fri, 21 Nov 2025 10:49:42 -0500 Subject: [PATCH 01/92] feat: add PasswordStrengthMeter component and integrate it into Security and Setup pages --- .../src/components/PasswordStrengthMeter.tsx | 57 +++++++++++++ frontend/src/pages/Security.tsx | 18 +++-- frontend/src/pages/Setup.tsx | 25 +++--- frontend/src/utils/passwordStrength.ts | 80 +++++++++++++++++++ 4 files changed, 162 insertions(+), 18 deletions(-) create mode 100644 frontend/src/components/PasswordStrengthMeter.tsx create mode 100644 frontend/src/utils/passwordStrength.ts diff --git a/frontend/src/components/PasswordStrengthMeter.tsx b/frontend/src/components/PasswordStrengthMeter.tsx new file mode 100644 index 00000000..a018b03b --- /dev/null +++ b/frontend/src/components/PasswordStrengthMeter.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { calculatePasswordStrength } from '../utils/passwordStrength'; + +interface Props { + password: string; +} + +export const PasswordStrengthMeter: React.FC = ({ password }) => { + const { score, label, color, feedback } = calculatePasswordStrength(password); + + // Calculate width percentage based on score (0-4) + // 0: 5%, 1: 25%, 2: 50%, 3: 75%, 4: 100% + const width = Math.max(5, (score / 4) * 100); + + // Map color name to Tailwind classes + const getColorClass = (c: string) => { + switch (c) { + case 'red': return 'bg-red-500'; + case 'yellow': return 'bg-yellow-500'; + case 'green': return 'bg-green-500'; + default: return 'bg-gray-300'; + } + }; + + const getTextColorClass = (c: string) => { + switch (c) { + case 'red': return 'text-red-500'; + case 'yellow': return 'text-yellow-600'; + case 'green': return 'text-green-600'; + default: return 'text-gray-500'; + } + }; + + if (!password) return null; + + return ( +
+
+ + {label} + + {feedback.length > 0 && ( + + {feedback[0]} + + )} +
+ +
+
+
+
+ ); +}; diff --git a/frontend/src/pages/Security.tsx b/frontend/src/pages/Security.tsx index 87aae42d..00551e1f 100644 --- a/frontend/src/pages/Security.tsx +++ b/frontend/src/pages/Security.tsx @@ -7,6 +7,7 @@ import { toast } from '../utils/toast' import client from '../api/client' import { getProfile, regenerateApiKey } from '../api/user' import { Copy, RefreshCw, Shield } from 'lucide-react' +import { PasswordStrengthMeter } from '../components/PasswordStrengthMeter' export default function Security() { const [oldPassword, setOldPassword] = useState('') @@ -80,13 +81,16 @@ export default function Security() { onChange={e => setOldPassword(e.target.value)} required /> - setNewPassword(e.target.value)} - required - /> +
+ setNewPassword(e.target.value)} + required + /> + +
{ const navigate = useNavigate(); @@ -104,17 +105,19 @@ const Setup: React.FC = () => { onChange={(e) => setFormData({ ...formData, email: e.target.value })} helperText="This email will be used for Let's Encrypt certificate notifications and recovery." /> - setFormData({ ...formData, password: e.target.value })} - /> +
+ setFormData({ ...formData, password: e.target.value })} + /> + +
{error && ( diff --git a/frontend/src/utils/passwordStrength.ts b/frontend/src/utils/passwordStrength.ts new file mode 100644 index 00000000..768f8c2a --- /dev/null +++ b/frontend/src/utils/passwordStrength.ts @@ -0,0 +1,80 @@ +export interface PasswordStrength { + score: number; // 0-4 + label: string; + color: string; // Tailwind color class prefix (e.g., 'red', 'yellow', 'green') + feedback: string[]; +} + +export function calculatePasswordStrength(password: string): PasswordStrength { + let score = 0; + const feedback: string[] = []; + + if (!password) { + return { + score: 0, + label: 'Empty', + color: 'gray', + feedback: [], + }; + } + + // Length check + if (password.length < 8) { + feedback.push('Too short (min 8 chars)'); + } else { + score += 1; + } + + if (password.length >= 12) { + score += 1; + } + + // Complexity checks + const hasLower = /[a-z]/.test(password); + const hasUpper = /[A-Z]/.test(password); + const hasNumber = /\d/.test(password); + const hasSpecial = /[^A-Za-z0-9]/.test(password); + + const varietyCount = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean).length; + + if (varietyCount >= 3) { + score += 1; + } + if (varietyCount === 4) { + score += 1; + } + + // Penalties + if (varietyCount < 2 && password.length >= 8) { + feedback.push('Add more variety (uppercase, numbers, symbols)'); + } + + // Cap score at 4 + score = Math.min(score, 4); + + // Determine label and color + let label = 'Very Weak'; + let color = 'red'; + + switch (score) { + case 0: + case 1: + label = 'Weak'; + color = 'red'; + break; + case 2: + label = 'Fair'; + color = 'yellow'; + break; + case 3: + label = 'Good'; + color = 'green'; + break; + case 4: + label = 'Strong'; + color = 'green'; + break; + } + + return { score, label, color, feedback }; +} From 9914e20817479e459ebab74895f7a508b598d7aa Mon Sep 17 00:00:00 2001 From: Wikid82 Date: Fri, 21 Nov 2025 10:54:03 -0500 Subject: [PATCH 02/92] feat: optimize Dockerfile build process with cache mounts for frontend and backend --- Dockerfile | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/Dockerfile b/Dockerfile index 17fb147c..6e731806 100644 --- a/Dockerfile +++ b/Dockerfile @@ -29,7 +29,8 @@ RUN npm ci # Copy frontend source and build COPY frontend/ ./ -RUN npm run build +RUN --mount=type=cache,target=/app/frontend/node_modules/.cache \ + npm run build # ---- Backend Builder ---- FROM --platform=$BUILDPLATFORM golang:alpine AS backend-builder @@ -49,7 +50,7 @@ RUN CGO_ENABLED=0 xx-go install github.com/go-delve/delve/cmd/dlv@latest # Copy Go module files COPY backend/go.mod backend/go.sum ./ -RUN go mod download +RUN --mount=type=cache,target=/go/pkg/mod go mod download # Copy backend source COPY backend/ ./ @@ -62,7 +63,9 @@ ARG BUILD_DATE=unknown # Build the Go binary with version information injected via ldflags # -gcflags "all=-N -l" disables optimizations and inlining for better debugging # xx-go handles CGO and cross-compilation flags automatically -RUN CGO_ENABLED=1 xx-go build \ +RUN --mount=type=cache,target=/root/.cache/go-build \ + --mount=type=cache,target=/go/pkg/mod \ + CGO_ENABLED=1 xx-go build \ -gcflags "all=-N -l" \ -a -installsuffix cgo \ -ldflags "-X github.com/Wikid82/CaddyProxyManagerPlus/backend/internal/version.Version=${VERSION} \ @@ -78,10 +81,13 @@ ARG TARGETOS ARG TARGETARCH RUN apk add --no-cache git -RUN go install github.com/caddyserver/xcaddy/cmd/xcaddy@latest +RUN --mount=type=cache,target=/go/pkg/mod \ + go install github.com/caddyserver/xcaddy/cmd/xcaddy@latest # Build Caddy for the target architecture -RUN GOOS=$TARGETOS GOARCH=$TARGETARCH xcaddy build v2.9.1 \ +RUN --mount=type=cache,target=/root/.cache/go-build \ + --mount=type=cache,target=/go/pkg/mod \ + GOOS=$TARGETOS GOARCH=$TARGETARCH xcaddy build v2.9.1 \ --replace github.com/quic-go/quic-go=github.com/quic-go/quic-go@v0.49.1 \ --replace golang.org/x/crypto=golang.org/x/crypto@v0.35.0 \ --output /usr/bin/caddy From 8a0d7952a9dd29b21e5651e725f419a86900b5c0 Mon Sep 17 00:00:00 2001 From: Wikid82 Date: Fri, 21 Nov 2025 11:25:58 -0500 Subject: [PATCH 03/92] feat: add profile update functionality and integrate it into the Security page --- backend/internal/api/handlers/user_handler.go | 43 +++++ backend/internal/api/routes/routes.go | 1 + frontend/src/api/user.ts | 5 + frontend/src/pages/Security.tsx | 158 ++++++++++++++++-- frontend/src/pages/SystemSettings.tsx | 19 +-- 5 files changed, 200 insertions(+), 26 deletions(-) diff --git a/backend/internal/api/handlers/user_handler.go b/backend/internal/api/handlers/user_handler.go index 1c2ccda8..d5761277 100644 --- a/backend/internal/api/handlers/user_handler.go +++ b/backend/internal/api/handlers/user_handler.go @@ -23,6 +23,7 @@ func (h *UserHandler) RegisterRoutes(r *gin.RouterGroup) { r.POST("/setup", h.Setup) r.GET("/profile", h.GetProfile) r.POST("/regenerate-api-key", h.RegenerateAPIKey) + r.PUT("/profile", h.UpdateProfile) } // GetSetupStatus checks if the application needs initial setup (i.e., no users exist). @@ -154,3 +155,45 @@ func (h *UserHandler) GetProfile(c *gin.Context) { "api_key": user.APIKey, }) } + +type UpdateProfileRequest struct { + Name string `json:"name" binding:"required"` + Email string `json:"email" binding:"required,email"` +} + +// UpdateProfile updates the authenticated user's profile. +func (h *UserHandler) UpdateProfile(c *gin.Context) { + userID, exists := c.Get("userID") + if !exists { + c.JSON(http.StatusUnauthorized, gin.H{"error": "Unauthorized"}) + return + } + + var req UpdateProfileRequest + if err := c.ShouldBindJSON(&req); err != nil { + c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()}) + return + } + + // Check if email is already taken by another user + var count int64 + if err := h.DB.Model(&models.User{}).Where("email = ? AND id != ?", req.Email, userID).Count(&count).Error; err != nil { + c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to check email availability"}) + return + } + + if count > 0 { + c.JSON(http.StatusConflict, gin.H{"error": "Email already in use"}) + return + } + + if err := h.DB.Model(&models.User{}).Where("id = ?", userID).Updates(map[string]interface{}{ + "name": req.Name, + "email": req.Email, + }).Error; err != nil { + c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to update profile"}) + return + } + + c.JSON(http.StatusOK, gin.H{"message": "Profile updated successfully"}) +} diff --git a/backend/internal/api/routes/routes.go b/backend/internal/api/routes/routes.go index c4c8d7b2..13875218 100644 --- a/backend/internal/api/routes/routes.go +++ b/backend/internal/api/routes/routes.go @@ -79,6 +79,7 @@ func Register(router *gin.Engine, db *gorm.DB, cfg config.Config) error { // User Profile & API Key userHandler := handlers.NewUserHandler(db) protected.GET("/user/profile", userHandler.GetProfile) + protected.POST("/user/profile", userHandler.UpdateProfile) protected.POST("/user/api-key", userHandler.RegenerateAPIKey) // Updates diff --git a/frontend/src/api/user.ts b/frontend/src/api/user.ts index b27e5d75..faf1b934 100644 --- a/frontend/src/api/user.ts +++ b/frontend/src/api/user.ts @@ -17,3 +17,8 @@ export const regenerateApiKey = async (): Promise<{ api_key: string }> => { const response = await client.post('/user/api-key') return response.data } + +export const updateProfile = async (data: { name: string; email: string }): Promise<{ message: string }> => { + const response = await client.post('/user/profile', data) + return response.data +} diff --git a/frontend/src/pages/Security.tsx b/frontend/src/pages/Security.tsx index 00551e1f..6a85ad0d 100644 --- a/frontend/src/pages/Security.tsx +++ b/frontend/src/pages/Security.tsx @@ -1,12 +1,13 @@ -import { useState } from 'react' +import { useState, useEffect } from 'react' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' import { Card } from '../components/ui/Card' import { Input } from '../components/ui/Input' import { Button } from '../components/ui/Button' import { toast } from '../utils/toast' import client from '../api/client' -import { getProfile, regenerateApiKey } from '../api/user' -import { Copy, RefreshCw, Shield } from 'lucide-react' +import { getProfile, regenerateApiKey, updateProfile } from '../api/user' +import { getSettings, updateSetting } from '../api/settings' +import { Copy, RefreshCw, Shield, Mail, User } from 'lucide-react' import { PasswordStrengthMeter } from '../components/PasswordStrengthMeter' export default function Security() { @@ -15,6 +16,14 @@ export default function Security() { const [confirmPassword, setConfirmPassword] = useState('') const [loading, setLoading] = useState(false) + // Profile State + const [name, setName] = useState('') + const [email, setEmail] = useState('') + + // Certificate Email State + const [certEmail, setCertEmail] = useState('') + const [useUserEmail, setUseUserEmail] = useState(true) + const queryClient = useQueryClient() const { data: profile, isLoading: isLoadingProfile } = useQuery({ @@ -22,6 +31,44 @@ export default function Security() { queryFn: getProfile, }) + const { data: settings } = useQuery({ + queryKey: ['settings'], + queryFn: getSettings, + }) + + // Initialize profile state + useEffect(() => { + if (profile) { + setName(profile.name) + setEmail(profile.email) + } + }, [profile]) + + // Initialize cert email state + useEffect(() => { + if (settings && profile) { + const savedEmail = settings['caddy.email'] + if (savedEmail && savedEmail !== profile.email) { + setCertEmail(savedEmail) + setUseUserEmail(false) + } else { + setCertEmail(profile.email) + setUseUserEmail(true) + } + } + }, [settings, profile]) + + const updateProfileMutation = useMutation({ + mutationFn: updateProfile, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['profile'] }) + toast.success('Profile updated successfully') + }, + onError: (error: any) => { + toast.error(`Failed to update profile: ${error.message}`) + }, + }) + const regenerateMutation = useMutation({ mutationFn: regenerateApiKey, onSuccess: () => { @@ -33,6 +80,21 @@ export default function Security() { }, }) + const saveCertEmailMutation = useMutation({ + mutationFn: async () => { + const emailToSave = useUserEmail ? profile?.email : certEmail + if (!emailToSave) return + await updateSetting('caddy.email', emailToSave, 'caddy', 'string') + }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['settings'] }) + toast.success('Certificate email updated') + }, + onError: (error: any) => { + toast.error(`Failed to update certificate email: ${error.message}`) + }, + }) + const handleChangePassword = async (e: React.FormEvent) => { e.preventDefault() if (newPassword !== confirmPassword) { @@ -70,6 +132,33 @@ export default function Security() {
+ {/* Profile Settings */} + +
+ +

Profile Settings

+
+
+ setName(e.target.value)} + /> + setEmail(e.target.value)} + /> + +
+ + {/* Change Password */}

Change Password

@@ -91,19 +180,68 @@ export default function Security() { />
- setConfirmPassword(e.target.value)} - required - /> +
+ setConfirmPassword(e.target.value)} + required + className={confirmPassword && newPassword !== confirmPassword ? 'border-red-500 focus:ring-red-500' : ''} + /> + {confirmPassword && newPassword !== confirmPassword && ( +

Passwords do not match

+ )} +
+ {/* Certificate Email Configuration */} + +
+ +

Certificate Email

+
+

+ This email address is used to register with Let's Encrypt for SSL certificate generation and expiration notifications. +

+ +
+
+ setUseUserEmail(e.target.checked)} + className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" + /> + +
+ + {!useUserEmail && ( + setCertEmail(e.target.value)} + placeholder="certs@example.com" + /> + )} + + +
+ + {/* API Key */}

API Key

diff --git a/frontend/src/pages/SystemSettings.tsx b/frontend/src/pages/SystemSettings.tsx index 7b267fce..ed977b02 100644 --- a/frontend/src/pages/SystemSettings.tsx +++ b/frontend/src/pages/SystemSettings.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useState, useEffect } from 'react' import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query' import { Card } from '../components/ui/Card' import { Button } from '../components/ui/Button' @@ -25,7 +25,6 @@ interface UpdateInfo { export default function SystemSettings() { const queryClient = useQueryClient() - const [caddyEmail, setCaddyEmail] = useState('') const [caddyAdminAPI, setCaddyAdminAPI] = useState('http://localhost:2019') // Fetch Settings @@ -35,12 +34,11 @@ export default function SystemSettings() { }) // Update local state when settings load - useState(() => { + useEffect(() => { if (settings) { - if (settings['caddy.email']) setCaddyEmail(settings['caddy.email']) if (settings['caddy.admin_api']) setCaddyAdminAPI(settings['caddy.admin_api']) } - }) + }, [settings]) // Fetch Health/System Status const { data: health, isLoading: isLoadingHealth } = useQuery({ @@ -67,7 +65,6 @@ export default function SystemSettings() { const saveSettingsMutation = useMutation({ mutationFn: async () => { - await updateSetting('caddy.email', caddyEmail, 'caddy', 'string') await updateSetting('caddy.admin_api', caddyAdminAPI, 'caddy', 'string') }, onSuccess: () => { @@ -90,16 +87,6 @@ export default function SystemSettings() {

General Configuration

- setCaddyEmail(e.target.value)} - placeholder="admin@example.com" - /> -

- Email address for Let's Encrypt certificate notifications -

Date: Fri, 21 Nov 2025 11:46:09 -0500 Subject: [PATCH 04/92] feat: enhance email validation in Setup and Security pages, add sidebar collapse functionality in Layout --- frontend/src/components/Layout.tsx | 72 ++++++++++---- frontend/src/pages/Security.tsx | 131 ++++++++++++++++---------- frontend/src/pages/SettingsLayout.tsx | 2 +- frontend/src/pages/Setup.tsx | 39 +++++--- frontend/src/utils/validation.ts | 4 + 5 files changed, 170 insertions(+), 78 deletions(-) create mode 100644 frontend/src/utils/validation.ts diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 67af7d6d..aeb5f41a 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useState } from 'react' +import { ReactNode, useState, useEffect } from 'react' import { Link, useLocation } from 'react-router-dom' import { useQuery } from '@tanstack/react-query' import { ThemeToggle } from './ThemeToggle' @@ -7,6 +7,7 @@ import { useAuth } from '../hooks/useAuth' import { checkHealth } from '../api/health' import NotificationCenter from './NotificationCenter' import SystemStatus from './SystemStatus' +import { ChevronLeft, ChevronRight } from 'lucide-react' interface LayoutProps { children: ReactNode @@ -14,9 +15,17 @@ interface LayoutProps { export default function Layout({ children }: LayoutProps) { const location = useLocation() - const [sidebarOpen, setSidebarOpen] = useState(false) + const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false) + const [isCollapsed, setIsCollapsed] = useState(() => { + const saved = localStorage.getItem('sidebarCollapsed') + return saved ? JSON.parse(saved) : false + }) const { logout } = useAuth() + useEffect(() => { + localStorage.setItem('sidebarCollapsed', JSON.stringify(isCollapsed)) + }, [isCollapsed]) + const { data: health } = useQuery({ queryKey: ['health'], queryFn: checkHealth, @@ -40,20 +49,21 @@ export default function Layout({ children }: LayoutProps) {
-
{/* Sidebar */} {/* Overlay for mobile */} - {sidebarOpen && ( + {/* Mobile Overlay */} + {mobileSidebarOpen && (
setSidebarOpen(false)} + className="fixed inset-0 bg-gray-900/50 z-20 lg:hidden" + onClick={() => setMobileSidebarOpen(false)} /> )} diff --git a/frontend/src/pages/Security.tsx b/frontend/src/pages/Security.tsx index 6a85ad0d..8447ebca 100644 --- a/frontend/src/pages/Security.tsx +++ b/frontend/src/pages/Security.tsx @@ -9,6 +9,7 @@ import { getProfile, regenerateApiKey, updateProfile } from '../api/user' import { getSettings, updateSetting } from '../api/settings' import { Copy, RefreshCw, Shield, Mail, User } from 'lucide-react' import { PasswordStrengthMeter } from '../components/PasswordStrengthMeter' +import { isValidEmail } from '../utils/validation' export default function Security() { const [oldPassword, setOldPassword] = useState('') @@ -19,9 +20,11 @@ export default function Security() { // Profile State const [name, setName] = useState('') const [email, setEmail] = useState('') + const [emailValid, setEmailValid] = useState(null) // Certificate Email State const [certEmail, setCertEmail] = useState('') + const [certEmailValid, setCertEmailValid] = useState(null) const [useUserEmail, setUseUserEmail] = useState(true) const queryClient = useQueryClient() @@ -44,6 +47,15 @@ export default function Security() { } }, [profile]) + // Validate profile email + useEffect(() => { + if (email) { + setEmailValid(isValidEmail(email)) + } else { + setEmailValid(null) + } + }, [email]) + // Initialize cert email state useEffect(() => { if (settings && profile) { @@ -58,6 +70,15 @@ export default function Security() { } }, [settings, profile]) + // Validate cert email + useEffect(() => { + if (certEmail && !useUserEmail) { + setCertEmailValid(isValidEmail(certEmail)) + } else { + setCertEmailValid(null) + } + }, [certEmail, useUserEmail]) + const updateProfileMutation = useMutation({ mutationFn: updateProfile, onSuccess: () => { @@ -144,12 +165,18 @@ export default function Security() { value={name} onChange={(e) => setName(e.target.value)} /> - setEmail(e.target.value)} - /> +
+ setEmail(e.target.value)} + className={emailValid === false ? 'border-red-500 focus:ring-red-500' : emailValid === true ? 'border-green-500 focus:ring-green-500' : ''} + /> + {emailValid === false && ( +

Please enter a valid email address

+ )} +
+ {/* Certificate Email Configuration */} + +
+ +

Certificate Email

+
+

+ This email address is used to register with Let's Encrypt for SSL certificate generation and expiration notifications. +

+ +
+
+ setUseUserEmail(e.target.checked)} + className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" + /> + +
+ + {!useUserEmail && ( +
+ setCertEmail(e.target.value)} + placeholder="certs@example.com" + className={certEmailValid === false ? 'border-red-500 focus:ring-red-500' : certEmailValid === true ? 'border-green-500 focus:ring-green-500' : ''} + /> + {certEmailValid === false && ( +

Please enter a valid email address

+ )} +
+ )} + + +
+ + {/* Change Password */}

Change Password

@@ -199,49 +275,6 @@ export default function Security() { - {/* Certificate Email Configuration */} - -
- -

Certificate Email

-
-

- This email address is used to register with Let's Encrypt for SSL certificate generation and expiration notifications. -

- -
-
- setUseUserEmail(e.target.checked)} - className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" - /> - -
- - {!useUserEmail && ( - setCertEmail(e.target.value)} - placeholder="certs@example.com" - /> - )} - - -
- - {/* API Key */}

API Key

diff --git a/frontend/src/pages/SettingsLayout.tsx b/frontend/src/pages/SettingsLayout.tsx index 929b3948..5d78eb94 100644 --- a/frontend/src/pages/SettingsLayout.tsx +++ b/frontend/src/pages/SettingsLayout.tsx @@ -4,7 +4,7 @@ import { useState } from 'react' export default function SettingsLayout() { const location = useLocation() - const [tasksOpen, setTasksOpen] = useState(true) + const [tasksOpen, setTasksOpen] = useState(false) const isActive = (path: string) => location.pathname === path diff --git a/frontend/src/pages/Setup.tsx b/frontend/src/pages/Setup.tsx index 36542a9c..f5d51cc8 100644 --- a/frontend/src/pages/Setup.tsx +++ b/frontend/src/pages/Setup.tsx @@ -7,6 +7,7 @@ import { useAuth } from '../hooks/useAuth'; import { Input } from '../components/ui/Input'; import { Button } from '../components/ui/Button'; import { PasswordStrengthMeter } from '../components/PasswordStrengthMeter'; +import { isValidEmail } from '../utils/validation'; const Setup: React.FC = () => { const navigate = useNavigate(); @@ -18,6 +19,7 @@ const Setup: React.FC = () => { password: '', }); const [error, setError] = useState(null); + const [emailValid, setEmailValid] = useState(null); const { data: status, isLoading: statusLoading } = useQuery({ queryKey: ['setupStatus'], @@ -25,6 +27,14 @@ const Setup: React.FC = () => { retry: false, }); + useEffect(() => { + if (formData.email) { + setEmailValid(isValidEmail(formData.email)); + } else { + setEmailValid(null); + } + }, [formData.email]); + useEffect(() => { if (isAuthenticated) { navigate('/'); @@ -94,18 +104,23 @@ const Setup: React.FC = () => { value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} /> - setFormData({ ...formData, email: e.target.value })} - helperText="This email will be used for Let's Encrypt certificate notifications and recovery." - /> -
+
+ setFormData({ ...formData, email: e.target.value })} + className={emailValid === false ? 'border-red-500 focus:ring-red-500' : emailValid === true ? 'border-green-500 focus:ring-green-500' : ''} + /> + {emailValid === false && ( +

Please enter a valid email address

+ )} +
+
{ + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ + return emailRegex.test(email) +} From b7aff5a944276b6adb4da9d5377601210c588a4b Mon Sep 17 00:00:00 2001 From: Wikid82 Date: Fri, 21 Nov 2025 11:50:48 -0500 Subject: [PATCH 05/92] feat: refactor release workflow to enhance frontend and backend builds, add Caddy build step, and streamline artifact handling --- .github/workflows/release.yml | 124 ++++++++++++++++++++++++++++------ 1 file changed, 103 insertions(+), 21 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 6d83c3f2..5f9f12cc 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -10,38 +10,120 @@ permissions: packages: write jobs: - create-release: + build-frontend: + name: Build Frontend runs-on: ubuntu-latest steps: - - name: Checkout repository - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6 + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 with: - fetch-depth: 0 + node-version: '20' + cache: 'npm' + cache-dependency-path: frontend/package-lock.json - - name: Generate changelog - id: changelog + - name: Install Dependencies + working-directory: frontend + run: npm ci + + - name: Build + working-directory: frontend + run: npm run build + + - name: Archive Frontend + working-directory: frontend + run: tar -czf ../frontend-dist.tar.gz dist/ + + - uses: actions/upload-artifact@v4 + with: + name: frontend-dist + path: frontend-dist.tar.gz + + build-backend: + name: Build Backend + runs-on: ubuntu-latest + strategy: + matrix: + goos: [linux] + goarch: [amd64, arm64] + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-go@v5 + with: + go-version: '1.23' + + - name: Build + working-directory: backend + env: + GOOS: ${{ matrix.goos }} + GOARCH: ${{ matrix.goarch }} + CGO_ENABLED: 1 run: | - # Get previous tag - PREV_TAG=$(git describe --tags --abbrev=0 $(git rev-list --tags --skip=1 --max-count=1) 2>/dev/null || echo "") - - if [ -z "$PREV_TAG" ]; then - echo "First release - generating full changelog" - CHANGELOG=$(git log --pretty=format:"- %s (%h)" --no-merges) - else - echo "Generating changelog since $PREV_TAG" - CHANGELOG=$(git log $PREV_TAG..HEAD --pretty=format:"- %s (%h)" --no-merges) + # Install dependencies for CGO (sqlite) + if [ "${{ matrix.goarch }}" = "arm64" ]; then + sudo apt-get update && sudo apt-get install -y gcc-aarch64-linux-gnu + export CC=aarch64-linux-gnu-gcc fi - # Save to file for GitHub release - echo "$CHANGELOG" > CHANGELOG.txt - echo "Generated changelog with $(echo "$CHANGELOG" | wc -l) commits" + go build -ldflags "-s -w -X github.com/Wikid82/CaddyProxyManagerPlus/backend/internal/version.Version=${{ github.ref_name }}" -o ../cpmp-${{ matrix.goos }}-${{ matrix.goarch }} ./cmd/api + + - uses: actions/upload-artifact@v4 + with: + name: backend-${{ matrix.goos }}-${{ matrix.goarch }} + path: cpmp-${{ matrix.goos }}-${{ matrix.goarch }} + + build-caddy: + name: Build Caddy + runs-on: ubuntu-latest + strategy: + matrix: + goos: [linux] + goarch: [amd64, arm64] + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-go@v5 + with: + go-version: '1.23' + + - name: Install xcaddy + run: go install github.com/caddyserver/xcaddy/cmd/xcaddy@latest + + - name: Build Caddy + env: + GOOS: ${{ matrix.goos }} + GOARCH: ${{ matrix.goarch }} + run: | + xcaddy build v2.9.1 \ + --replace github.com/quic-go/quic-go=github.com/quic-go/quic-go@v0.49.1 \ + --replace golang.org/x/crypto=golang.org/x/crypto@v0.35.0 \ + --output caddy-${{ matrix.goos }}-${{ matrix.goarch }} + + - uses: actions/upload-artifact@v4 + with: + name: caddy-${{ matrix.goos }}-${{ matrix.goarch }} + path: caddy-${{ matrix.goos }}-${{ matrix.goarch }} + + create-release: + name: Create Release + needs: [build-frontend, build-backend, build-caddy] + runs-on: ubuntu-latest + steps: + - uses: actions/download-artifact@v4 + with: + path: artifacts + + - name: Display structure of downloaded files + run: ls -R artifacts - name: Create GitHub Release - uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2 + uses: softprops/action-gh-release@v2 with: - body_path: CHANGELOG.txt + files: | + artifacts/frontend-dist/frontend-dist.tar.gz + artifacts/backend-linux-amd64/cpmp-linux-amd64 + artifacts/backend-linux-arm64/cpmp-linux-arm64 + artifacts/caddy-linux-amd64/caddy-linux-amd64 + artifacts/caddy-linux-arm64/caddy-linux-arm64 generate_release_notes: true - draft: false prerelease: ${{ contains(github.ref_name, 'alpha') || contains(github.ref_name, 'beta') || contains(github.ref_name, 'rc') }} env: GITHUB_TOKEN: ${{ secrets.PROJECT_TOKEN }} From 5db59291f4375bd57859fba3b29a5e9508153c09 Mon Sep 17 00:00:00 2001 From: Wikid82 Date: Fri, 21 Nov 2025 11:58:25 -0500 Subject: [PATCH 06/92] feat: improve setup page navigation logic to handle loading state and redirect based on authentication --- frontend/src/pages/Setup.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Setup.tsx b/frontend/src/pages/Setup.tsx index f5d51cc8..b7d7dcb4 100644 --- a/frontend/src/pages/Setup.tsx +++ b/frontend/src/pages/Setup.tsx @@ -36,14 +36,21 @@ const Setup: React.FC = () => { }, [formData.email]); useEffect(() => { - if (isAuthenticated) { - navigate('/'); + // Wait for setup status to load + if (statusLoading) return; + + // If setup is required, stay on this page (ignore stale auth) + if (status?.setupRequired) { return; } - if (status && !status.setupRequired) { + + // If setup is NOT required, redirect based on auth + if (isAuthenticated) { + navigate('/'); + } else { navigate('/login'); } - }, [status, isAuthenticated, navigate]); + }, [status, statusLoading, isAuthenticated, navigate]); const mutation = useMutation({ mutationFn: async (data: SetupRequest) => { From c8822f61efafc0365ea3bb9cb0c45d5c846437b6 Mon Sep 17 00:00:00 2001 From: Wikid82 Date: Fri, 21 Nov 2025 12:15:18 -0500 Subject: [PATCH 07/92] feat: enhance sidebar collapse functionality and improve layout header structure --- frontend/src/components/Layout.tsx | 32 ++++++++++++++++-------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index aeb5f41a..7117bd7f 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -62,9 +62,15 @@ export default function Layout({ children }: LayoutProps) { ${mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'} ${isCollapsed ? 'w-20' : 'w-64'} `}> -