cardosofelipe/syndarix
1
0
Fork 0
forked from cardosofelipe/pragma-stack
Code Issues 17 Pull Requests Wiki Activity

Refactor useAuth hook, settings components, and docs for formatting and readability improvements

Browse Source 
- Consolidated multi-line arguments into single lines where appropriate in `useAuth`.
- Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`).
- Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`).
- Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.
This commit is contained in:
Felipe Cardoso
2025-11-10 11:03:45 +01:00
parent 464a6140c4
commit 96df7edf88
208 changed files with 4056 additions and 4556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/settings/PasswordChangeForm.tsx
View File

@@ -22,25 +22,23 @@ import { getGeneralError, getFieldErrors, isAPIErrorArray } from '@/lib/api/erro
// Validation Schema
// ============================================================================
const passwordChangeSchema = z.object({
current_password: z
.string()
.min(1, 'Current password is required'),
new_password: z
.string()
.min(1, 'New password is required')
.min(8, 'Password must be at least 8 characters')
.regex(/[0-9]/, 'Password must contain at least one number')
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
.regex(/[a-z]/, 'Password must contain at least one lowercase letter')
.regex(/[^A-Za-z0-9]/, 'Password must contain at least one special character'),
confirm_password: z
.string()
.min(1, 'Please confirm your new password'),
}).refine((data) => data.new_password === data.confirm_password, {
message: 'Passwords do not match',
path: ['confirm_password'],
});
const passwordChangeSchema = z
.object({
current_password: z.string().min(1, 'Current password is required'),
new_password: z
.string()
.min(1, 'New password is required')
.min(8, 'Password must be at least 8 characters')
.regex(/[0-9]/, 'Password must contain at least one number')
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
.regex(/[a-z]/, 'Password must contain at least one lowercase letter')
.regex(/[^A-Za-z0-9]/, 'Password must contain at least one special character'),
confirm_password: z.string().min(1, 'Please confirm your new password'),
})
.refine((data) => data.new_password === data.confirm_password, {
message: 'Passwords do not match',
path: ['confirm_password'],
});
type PasswordChangeFormData = z.infer<typeof passwordChangeSchema>;
@@ -73,10 +71,7 @@ interface PasswordChangeFormProps {
* <PasswordChangeForm onSuccess={() => console.log('Password changed')} />
* ```
*/
export function PasswordChangeForm({
onSuccess,
className,
}: PasswordChangeFormProps) {
export function PasswordChangeForm({ onSuccess, className }: PasswordChangeFormProps) {
const [serverError, setServerError] = useState<string | null>(null);
const passwordChangeMutation = usePasswordChange((message) => {
toast.success(message);
@@ -191,19 +186,12 @@ export function PasswordChangeForm({
{/* Submit Button */}
<div className="flex items-center gap-4">
<Button
type="submit"
disabled={isSubmitting || !isDirty}
>
<Button type="submit" disabled={isSubmitting || !isDirty}>
{isSubmitting ? 'Changing Password...' : 'Change Password'}
</Button>
{/* istanbul ignore next - Cancel button requires isDirty state, tested in E2E */}
{isDirty && !isSubmitting && (
<Button
type="button"
variant="outline"
onClick={() => form.reset()}
>
<Button type="button" variant="outline" onClick={() => form.reset()}>
Cancel
</Button>
)}

20
frontend/src/components/settings/ProfileSettingsForm.tsx
View File

@@ -34,9 +34,7 @@ const profileSchema = z.object({
.max(50, 'Last name must not exceed 50 characters')
.optional()
.or(z.literal('')),
email: z
.string()
.email('Invalid email address'),
email: z.string().email('Invalid email address'),
});
type ProfileFormData = z.infer<typeof profileSchema>;
@@ -68,10 +66,7 @@ interface ProfileSettingsFormProps {
* <ProfileSettingsForm onSuccess={() => console.log('Profile updated')} />
* ```
*/
export function ProfileSettingsForm({
onSuccess,
className,
}: ProfileSettingsFormProps) {
export function ProfileSettingsForm({ onSuccess, className }: ProfileSettingsFormProps) {
const [serverError, setServerError] = useState<string | null>(null);
const currentUser = useCurrentUser();
const updateProfileMutation = useUpdateProfile((message) => {
@@ -201,19 +196,12 @@ export function ProfileSettingsForm({
{/* Submit Button */}
<div className="flex items-center gap-4">
<Button
type="submit"
disabled={isSubmitting || !isDirty}
>
<Button type="submit" disabled={isSubmitting || !isDirty}>
{isSubmitting ? 'Saving...' : 'Save Changes'}
</Button>
{/* istanbul ignore next - Reset button requires isDirty state, tested in E2E */}
{isDirty && !isSubmitting && (
<Button
type="button"
variant="outline"
onClick={() => form.reset()}
>
<Button type="button" variant="outline" onClick={() => form.reset()}>
Reset
</Button>
)}

8
frontend/src/components/settings/SessionCard.tsx
View File

@@ -61,7 +61,9 @@ export function SessionCard({ session, onRevoke, isRevoking = false }: SessionCa
const DeviceIcon = Monitor;
// Format location string
const location = [session.location_city, session.location_country].filter(Boolean).join(', ') || 'Unknown location';
const location =
[session.location_city, session.location_country].filter(Boolean).join(', ') ||
'Unknown location';
// Format device string
const deviceInfo = session.device_name || 'Unknown device';
@@ -145,8 +147,8 @@ export function SessionCard({ session, onRevoke, isRevoking = false }: SessionCa
<DialogHeader>
<DialogTitle>Revoke Session?</DialogTitle>
<DialogDescription>
This will sign out this device and you&apos;ll need to sign in again to access your account
from it. This action cannot be undone.
This will sign out this device and you&apos;ll need to sign in again to access your
account from it. This action cannot be undone.
</DialogDescription>
</DialogHeader>
<div className="py-4">

14
frontend/src/components/settings/SessionsManager.tsx
View File

@@ -21,7 +21,11 @@ import {
DialogTitle,
} from '@/components/ui/dialog';
import { SessionCard } from './SessionCard';
import { useListSessions, useRevokeSession, useRevokeAllOtherSessions } from '@/lib/api/hooks/useSession';
import {
useListSessions,
useRevokeSession,
useRevokeAllOtherSessions,
} from '@/lib/api/hooks/useSession';
import { useState } from 'react';
// ============================================================================
@@ -195,8 +199,8 @@ export function SessionsManager({ className }: SessionsManagerProps) {
{/* Security Tip */}
<div className="pt-4 border-t">
<p className="text-sm text-muted-foreground">
<strong className="text-foreground">Security tip:</strong> If you see a session you don&apos;t
recognize, revoke it immediately and change your password.
<strong className="text-foreground">Security tip:</strong> If you see a session you
don&apos;t recognize, revoke it immediately and change your password.
</p>
</div>
</CardContent>
@@ -208,8 +212,8 @@ export function SessionsManager({ className }: SessionsManagerProps) {
<DialogHeader>
<DialogTitle>Revoke All Other Sessions?</DialogTitle>
<DialogDescription>
This will sign out all devices except the one you&apos;re currently using.
You&apos;ll need to sign in again on those devices.
This will sign out all devices except the one you&apos;re currently using. You&apos;ll
need to sign in again on those devices.
</DialogDescription>
</DialogHeader>
<div className="py-4">