first

frontend/src/routes/auth/change-password/+page.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+
+  let user: { email?: string; username?: string } | null = null;
+  let oldPassword = $state('');
+  let newPassword = $state('');
+  let confirmPassword = $state('');
+  let error = $state('');
+  let success = $state(false);
+  let loading = $state(false);
+
+  onMount(async () => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      await goto('/auth/login');
+      return;
+    }
+
+    try {
+      const res = await fetch('/api/auth/me', {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      
+      if (!res.ok) {
+        await goto('/auth/login');
+        return;
+      }
+
+      const data = await res.json();
+      user = data.data;
+    } catch {
+      await goto('/auth/login');
+    }
+  });
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    error = '';
+
+    if (newPassword !== confirmPassword) {
+      error = 'Passwords do not match';
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      error = 'Password must be at least 8 characters';
+      return;
+    }
+
+    loading = true;
+
+    try {
+      const res = await fetch('/api/auth/change-password', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${localStorage.getItem('token')}`,
+        },
+        body: JSON.stringify({ oldPassword, newPassword }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        error = data.error || 'Failed to change password';
+        return;
+      }
+
+      success = true;
+      oldPassword = '';
+      newPassword = '';
+      confirmPassword = '';
+    } catch (err) {
+      error = 'Connection error';
+    } finally {
+      loading = false;
+    }
+  }
+
+  function handleLogout() {
+    localStorage.removeItem('token');
+    goto('/auth/login');
+  }
+</script>
+
+<div class="page-container">
+  <header class="header">
+    <div class="header-content">
+      <h1>Change Password</h1>
+      <div class="user-info">
+        {#if user}
+          <span>Logged in as <strong>{user.email || user.username}</strong></span>
+        {/if}
+        <button class="logout" onclick={handleLogout}>Logout</button>
+      </div>
+    </div>
+  </header>
+
+  <div class="content">
+    {#if error}
+      <div class="error">{error}</div>
+    {/if}
+
+    {#if success}
+      <div class="success">
+        Password changed successfully!
+      </div>
+    {/if}
+
+    <form onsubmit={handleSubmit}>
+      <label>
+        Current Password
+        <input 
+          type="password" 
+          bind:value={oldPassword} 
+          placeholder="Enter current password"
+          required 
+          disabled={loading}
+        />
+      </label>
+
+      <label>
+        New Password
+        <input 
+          type="password" 
+          bind:value={newPassword} 
+          placeholder="Enter new password (min 8 characters)"
+          required 
+          disabled={loading}
+        />
+      </label>
+
+      <label>
+        Confirm New Password
+        <input 
+          type="password" 
+          bind:value={confirmPassword} 
+          placeholder="Confirm new password"
+          required 
+          disabled={loading}
+        />
+      </label>
+
+      <button type="submit" disabled={loading}>
+        {loading ? 'Changing...' : 'Change Password'}
+      </button>
+    </form>
+
+    <div class="links">
+      <a href="/auth/dashboard">Back to Dashboard</a>
+    </div>
+  </div>
+</div>
+
+<style>
+  .page-container {
+    min-height: 100vh;
+    background: #f5f7fa;
+  }
+
+  .header {
+    background: white;
+    padding: 1rem 2rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  }
+
+  .header-content {
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: #2c3e50;
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .logout {
+    padding: 0.5rem 1rem;
+    background: #e74c3c;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .content {
+    max-width: 500px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  }
+
+  .error {
+    background: #fee;
+    color: #c00;
+    padding: 0.75rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+  }
+
+  .success {
+    background: #efe;
+    color: #060;
+    padding: 0.75rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    font-weight: 500;
+    color: #555;
+  }
+
+  input {
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 1rem;
+  }
+
+  input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  }
+
+  button {
+    padding: 0.75rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    margin-top: 0.5rem;
+  }
+
+  button:hover:not(:disabled) {
+    opacity: 0.9;
+  }
+
+  button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .links {
+    margin-top: 1.5rem;
+    text-align: center;
+  }
+
+  .links a {
+    color: #667eea;
+    text-decoration: none;
+  }
+
+  .links a:hover {
+    text-decoration: underline;
+  }
+</style>

frontend/src/routes/auth/dashboard/+page.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+
+  let user: { email?: string; username?: string; quota?: number; role?: string } | null = null;
+  let loading = $state(true);
+
+  onMount(async () => {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      await goto('/auth/login');
+      return;
+    }
+
+    try {
+      const res = await fetch('/api/auth/me', {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      
+      if (!res.ok) {
+        await goto('/auth/login');
+        return;
+      }
+
+      const data = await res.json();
+      user = data.data;
+
+      if (user?.role === 'admin') {
+        await goto('/');
+        return;
+      }
+    } catch {
+      await goto('/auth/login');
+    } finally {
+      loading = false;
+    }
+  });
+
+  function handleLogout() {
+    localStorage.removeItem('token');
+    goto('/auth/login');
+  }
+</script>
+
+<div class="page-container">
+  <header class="header">
+    <h1>User Dashboard</h1>
+    <div class="user-info">
+      {#if user}
+        <span>Logged in as <strong>{user.email || user.username}</strong></span>
+      {/if}
+      <button class="logout" onclick={handleLogout}>Logout</button>
+    </div>
+  </header>
+
+  <div class="content">
+    {#if loading}
+      <p>Loading...</p>
+    {:else if user}
+      <div class="card">
+        <h2>Account Information</h2>
+        <div class="info-row">
+          <span class="label">Email:</span>
+          <span class="value">{user.email || 'N/A'}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">Username:</span>
+          <span class="value">{user.username || 'N/A'}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">Role:</span>
+          <span class="value">{user.role}</span>
+        </div>
+        {#if user.quota !== undefined}
+          <div class="info-row">
+            <span class="label">Quota:</span>
+            <span class="value">{user.quota > 0 ? (user.quota / 1024 / 1024).toFixed(0) + ' MB' : 'Unlimited'}</span>
+          </div>
+        {/if}
+      </div>
+
+      <div class="card">
+        <h2>Quick Actions</h2>
+        <div class="actions">
+          <a href="/auth/change-password" class="action-btn">Change Password</a>
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .page-container {
+    min-height: 100vh;
+    background: #f5f7fa;
+  }
+
+  .header {
+    background: white;
+    padding: 1rem 2rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    color: #2c3e50;
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .logout {
+    padding: 0.5rem 1rem;
+    background: #e74c3c;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .content {
+    max-width: 800px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+  }
+
+  .card {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    margin-bottom: 1.5rem;
+  }
+
+  .card h2 {
+    margin: 0 0 1rem;
+    color: #2c3e50;
+    font-size: 1.2rem;
+  }
+
+  .info-row {
+    display: flex;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid #eee;
+  }
+
+  .info-row:last-child {
+    border-bottom: none;
+  }
+
+  .label {
+    font-weight: 500;
+    color: #666;
+    width: 120px;
+  }
+
+  .value {
+    color: #2c3e50;
+  }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .action-btn {
+    padding: 0.75rem 1.5rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    text-decoration: none;
+    border-radius: 6px;
+    font-weight: 500;
+    transition: opacity 0.2s;
+  }
+
+  .action-btn:hover {
+    opacity: 0.9;
+  }
+</style>

frontend/src/routes/auth/forgot/+page.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+
+  let identifier = $state('');
+  let error = $state('');
+  let success = $state(false);
+  let loading = $state(false);
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    error = '';
+    loading = true;
+
+    try {
+      const res = await fetch('/api/auth/forgot', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ identifier }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        error = data.error || 'Request failed';
+        return;
+      }
+
+      success = true;
+    } catch (err) {
+      error = 'Connection error';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<div class="login-container">
+  <div class="login-card">
+    <h1>Reset Password</h1>
+    
+    {#if error}
+      <div class="error">{error}</div>
+    {/if}
+
+    {#if success}
+      <div class="success">
+        <p>If an account exists with that email or username, a password reset link has been sent.</p>
+        <p>Please check your inbox.</p>
+      </div>
+      <div class="links">
+        <a href="/auth/login">Back to Login</a>
+      </div>
+    {:else}
+      <p class="info">Enter your email address or username and we'll send you a link to reset your password.</p>
+
+      <form onsubmit={handleSubmit}>
+        <label>
+          Email or Username
+          <input 
+            type="text" 
+            bind:value={identifier} 
+            placeholder="user@example.org or username"
+            required 
+            disabled={loading}
+          />
+        </label>
+
+        <button type="submit" disabled={loading}>
+          {loading ? 'Sending...' : 'Send Reset Link'}
+        </button>
+      </form>
+
+      <div class="links">
+        <a href="/auth/login">Back to Login</a>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .login-container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 1rem;
+  }
+
+  .login-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+    width: 100%;
+    max-width: 400px;
+  }
+
+  h1 {
+    text-align: center;
+    margin: 0 0 1rem;
+    color: #2c3e50;
+  }
+
+  .info {
+    color: #666;
+    text-align: center;
+    margin-bottom: 1.5rem;
+    font-size: 0.9rem;
+  }
+
+  .error {
+    background: #fee;
+    color: #c00;
+    padding: 0.75rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+  }
+
+  .success {
+    background: #efe;
+    color: #060;
+    padding: 1rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    text-align: center;
+  }
+
+  .success p {
+    margin: 0.5rem 0;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    font-weight: 500;
+    color: #555;
+  }
+
+  input {
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 1rem;
+  }
+
+  input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  }
+
+  button {
+    padding: 0.75rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: opacity 0.2s;
+  }
+
+  button:hover:not(:disabled) {
+    opacity: 0.9;
+  }
+
+  button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .links {
+    margin-top: 1.5rem;
+    text-align: center;
+    padding-top: 1rem;
+    border-top: 1px solid #eee;
+  }
+
+  .links a {
+    color: #667eea;
+    text-decoration: none;
+    font-size: 0.9rem;
+  }
+
+  .links a:hover {
+    text-decoration: underline;
+  }
+</style>

frontend/src/routes/auth/login/+page.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+
+  let identifier = $state('');
+  let password = $state('');
+  let error = $state('');
+  let loading = $state(false);
+
+  async function handleSubmit() {
+    loading = true;
+    error = '';
+
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: identifier, password })
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        error = data.error || 'Login failed';
+        return;
+      }
+
+      localStorage.setItem('token', data.data.token);
+      
+      if (data.data.user.role === 'admin') {
+        goto('/');
+      } else {
+        goto('/auth/dashboard');
+      }
+    } catch (e) {
+      error = 'Connection error';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<div class="login-container">
+  <div class="login-card">
+    <h1>IMC Vibe</h1>
+    <p class="subtitle">Mail Server Administration</p>
+
+    {#if error}
+      <div class="error">{error}</div>
+    {/if}
+
+    <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+      <label>
+        Email or Username
+        <input
+          type="text"
+          bind:value={identifier}
+          placeholder="user@example.org or username"
+          required
+          autocomplete="username"
+        />
+      </label>
+
+      <label>
+        Password
+        <input
+          type="password"
+          bind:value={password}
+          placeholder="Enter password"
+          required
+          autocomplete="current-password"
+        />
+      </label>
+
+      <div class="forgot">
+        <a href="/auth/forgot">Forgot password?</a>
+      </div>
+
+      <button type="submit" disabled={loading}>
+        {loading ? 'Signing in...' : 'Sign In'}
+      </button>
+    </form>
+  </div>
+</div>
+
+<style>
+  .login-container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+  }
+
+  .login-card {
+    background: white;
+    padding: 3rem;
+    border-radius: 12px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    width: 100%;
+    max-width: 400px;
+  }
+
+  h1 {
+    margin: 0;
+    text-align: center;
+    color: #2c3e50;
+    font-size: 2rem;
+  }
+
+  .subtitle {
+    text-align: center;
+    color: #7f8c8d;
+    margin: 0.5rem 0 2rem;
+  }
+
+  .error {
+    background: #fee;
+    border: 1px solid #fcc;
+    color: #c00;
+    padding: 0.75rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    font-weight: 500;
+    color: #2c3e50;
+  }
+
+  input {
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 1rem;
+    transition: border-color 0.2s;
+  }
+
+  input:focus {
+    outline: none;
+    border-color: #3498db;
+  }
+
+  .forgot {
+    text-align: right;
+    margin-top: -0.5rem;
+  }
+
+  .forgot a {
+    color: #3498db;
+    text-decoration: none;
+    font-size: 0.9rem;
+  }
+
+  .forgot a:hover {
+    text-decoration: underline;
+  }
+
+  button {
+    padding: 0.875rem;
+    background: #3498db;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+    margin-top: 0.5rem;
+  }
+
+  button:hover:not(:disabled) {
+    background: #2980b9;
+  }
+
+  button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+</style>