@startsimpli/ui 0.4.4 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/account/change-password-form.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { Loader2 } from 'lucide-react'
+
+export interface ChangePasswordFormProps {
+  onSubmit: (values: {
+    old_password: string
+    new_password: string
+    new_password_confirm: string
+  }) => Promise<void>
+  /** Called after a successful password change (e.g. to sign out) */
+  onSuccess?: () => void
+  disabled?: boolean
+}
+
+export function ChangePasswordForm({ onSubmit, onSuccess, disabled }: ChangePasswordFormProps) {
+  const [oldPassword, setOldPassword] = useState('')
+  const [newPassword, setNewPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+
+  const isValid =
+    oldPassword.length > 0 &&
+    newPassword.length >= 8 &&
+    newPassword === confirmPassword
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSuccess(false)
+
+    if (newPassword !== confirmPassword) {
+      setError('New passwords do not match.')
+      return
+    }
+
+    setSaving(true)
+
+    try {
+      await onSubmit({
+        old_password: oldPassword,
+        new_password: newPassword,
+        new_password_confirm: confirmPassword,
+      })
+      setSuccess(true)
+      setOldPassword('')
+      setNewPassword('')
+      setConfirmPassword('')
+      onSuccess?.()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to change password')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Change password</CardTitle>
+        <CardDescription>
+          Update your password. You will need to sign in again after changing it.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="cp-old-password">Current password</Label>
+            <Input
+              id="cp-old-password"
+              type="password"
+              value={oldPassword}
+              onChange={(e) => setOldPassword(e.target.value)}
+              disabled={disabled || saving}
+              autoComplete="current-password"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="cp-new-password">New password</Label>
+            <Input
+              id="cp-new-password"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={disabled || saving}
+              autoComplete="new-password"
+            />
+            {newPassword.length > 0 && newPassword.length < 8 && (
+              <p className="text-xs text-muted-foreground">
+                Must be at least 8 characters.
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="cp-confirm-password">Confirm new password</Label>
+            <Input
+              id="cp-confirm-password"
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              disabled={disabled || saving}
+              autoComplete="new-password"
+            />
+            {confirmPassword.length > 0 && newPassword !== confirmPassword && (
+              <p className="text-xs text-destructive">Passwords do not match.</p>
+            )}
+          </div>
+
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+
+          {success && (
+            <p className="text-sm text-green-600">Password changed successfully.</p>
+          )}
+
+          <Button type="submit" disabled={disabled || saving || !isValid}>
+            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Change password
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/account/index.ts

@@ -0,0 +1,4 @@
+export { ProfileForm } from './profile-form'
+export type { ProfileFormProps, ProfileFormValues } from './profile-form'
+export { ChangePasswordForm } from './change-password-form'
+export type { ChangePasswordFormProps } from './change-password-form'

package/src/components/account/profile-form.tsx

@@ -0,0 +1,110 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { Loader2 } from 'lucide-react'
+
+export interface ProfileFormValues {
+  firstName: string
+  lastName: string
+  email: string
+}
+
+export interface ProfileFormProps {
+  initialValues: ProfileFormValues
+  onSubmit: (values: { first_name: string; last_name: string }) => Promise<void>
+  disabled?: boolean
+}
+
+export function ProfileForm({ initialValues, onSubmit, disabled }: ProfileFormProps) {
+  const [firstName, setFirstName] = useState(initialValues.firstName)
+  const [lastName, setLastName] = useState(initialValues.lastName)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+
+  const hasChanges =
+    firstName !== initialValues.firstName || lastName !== initialValues.lastName
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    setSuccess(false)
+    setSaving(true)
+
+    try {
+      await onSubmit({ first_name: firstName.trim(), last_name: lastName.trim() })
+      setSuccess(true)
+      setTimeout(() => setSuccess(false), 3000)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update profile')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Profile</CardTitle>
+        <CardDescription>Update your personal information.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="profile-email">Email</Label>
+            <Input
+              id="profile-email"
+              type="email"
+              value={initialValues.email}
+              disabled
+              className="bg-muted"
+            />
+            <p className="text-xs text-muted-foreground">
+              Email cannot be changed.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="profile-first-name">First name</Label>
+              <Input
+                id="profile-first-name"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                disabled={disabled || saving}
+                placeholder="First name"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="profile-last-name">Last name</Label>
+              <Input
+                id="profile-last-name"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                disabled={disabled || saving}
+                placeholder="Last name"
+              />
+            </div>
+          </div>
+
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+
+          {success && (
+            <p className="text-sm text-green-600">Profile updated.</p>
+          )}
+
+          <Button type="submit" disabled={disabled || saving || !hasChanges}>
+            {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Save changes
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/index.ts

@@ -73,3 +73,6 @@ export * from './loading'
 
 // Wizard / StepIndicator
 export * from './wizard'
+
+// Account (profile + password forms)
+export * from './account'

package/src/utils/index.ts

@@ -81,7 +81,8 @@ export function formatCurrency(amount: number): string {
 /**
  * Get initials from a display name (up to 2 characters)
  */
-export function getInitials(name: string): string {
+export function getInitials(name: string | null | undefined): string {
+  if (!name) return '?'
   return name
     .split(' ')
     .map((word) => word[0])