From 3c904997faddda85737f7ca5c5c432f4352788b0 Mon Sep 17 00:00:00 2001
From: Christopher <admin@gaion.chat>
Date: Thu, 22 Jan 2026 12:23:15 -0800
Subject: [PATCH] UI Refinments Auth Improvments

---
 src/app/login/page.tsx              | 29 +++++++++++++++++++++-----
 src/app/settings/migration/page.tsx | 32 ++++++++++++++++++++++-------
 src/app/settings/page.tsx           |  2 +-
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index f2cd3ff..ce6ce30 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -10,6 +10,7 @@ export default function LoginPage() {
     const [mode, setMode] = useState<'login' | 'register'>('login');
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
     const [handle, setHandle] = useState('');
     const [displayName, setDisplayName] = useState('');
     const [error, setError] = useState('');
@@ -18,6 +19,12 @@ export default function LoginPage() {
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
         setError('');
+
+        if (mode === 'register' && password !== confirmPassword) {
+            setError('Passwords do not match');
+            return;
+        }
+
         setLoading(true);
 
         try {
@@ -198,13 +205,25 @@ export default function LoginPage() {
                             required
                             minLength={8}
                         />
-                        {mode === 'register' && (
-                            <p style={{ fontSize: '12px', color: 'var(--foreground-tertiary)', marginTop: '4px' }}>
-                                Minimum 8 characters
-                            </p>
-                        )}
                     </div>
 
+                    {mode === 'register' && (
+                        <div style={{ marginBottom: '24px' }}>
+                            <label style={{ display: 'block', marginBottom: '6px', fontSize: '14px', fontWeight: 500 }}>
+                                Confirm Password
+                            </label>
+                            <input
+                                type="password"
+                                className="input"
+                                value={confirmPassword}
+                                onChange={(e) => setConfirmPassword(e.target.value)}
+                                placeholder="••••••••"
+                                required
+                                minLength={8}
+                            />
+                        </div>
+                    )}
+
                     <button
                         type="submit"
                         className="btn btn-primary btn-lg"
diff --git a/src/app/settings/migration/page.tsx b/src/app/settings/migration/page.tsx
index 29dec01..bef0b67 100644
--- a/src/app/settings/migration/page.tsx
+++ b/src/app/settings/migration/page.tsx
@@ -315,13 +315,31 @@ export default function MigrationPage() {
                         <label style={{ fontSize: '13px', color: 'var(--foreground-tertiary)', display: 'block', marginBottom: '6px' }}>
                             Export file
                         </label>
-                        <input
-                            type="file"
-                            accept=".json"
-                            onChange={(e) => setImportFile(e.target.files?.[0] || null)}
-                            className="input"
-                            style={{ padding: '8px' }}
-                        />
+                        <div style={{ position: 'relative' }}>
+                            <input
+                                type="file"
+                                id="import-file-input"
+                                accept=".json"
+                                onChange={(e) => setImportFile(e.target.files?.[0] || null)}
+                                style={{ display: 'none' }}
+                            />
+                            <label
+                                htmlFor="import-file-input"
+                                className="input"
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    cursor: 'pointer',
+                                    color: importFile ? 'var(--foreground)' : 'var(--foreground-tertiary)'
+                                }}
+                            >
+                                <span>{importFile ? importFile.name : 'Select export file...'}</span>
+                                <span className="btn btn-ghost btn-sm" style={{ pointerEvents: 'none' }}>
+                                    Browse
+                                </span>
+                            </label>
+                        </div>
                     </div>
 
                     <div style={{ marginBottom: '20px' }}>
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 2c5b7fc..4dd18a4 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -53,7 +53,7 @@ export default function SettingsPage() {
                         Security
                     </div>
                     <div style={{ color: 'var(--foreground-secondary)', fontSize: '14px' }}>
-                        Change password, manage sessions
+                        Change password
                     </div>
                 </Link>