mirror of
https://github.com/Dvorinka/Trackeep.git
synced 2026-06-03 20:12:58 +00:00
feat: major feature updates and cleanup
- Add Redis architecture implementation - Update browser extension functionality - Clean up deprecated files and documentation - Enhance backend handlers for auth, messages, search - Add new configuration options and settings - Update Docker and deployment configurations
This commit is contained in:
Tomas Dvorak
@@ -1,6 +1,5 @@
|
||||
import { createSignal, onMount, Show } from 'solid-js';
|
||||
import { createSignal, onMount, Show, For } from 'solid-js';
|
||||
import { Button } from './ui/Button';
|
||||
import { Card } from './ui/Card';
|
||||
|
||||
interface TOTPSetupResponse {
|
||||
secret: string;
|
||||
@@ -272,10 +271,10 @@ export function TwoFactorAuth() {
|
||||
return (
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-bold text-white">Two-Factor Authentication</h2>
|
||||
<h2 class="text-2xl font-bold text-foreground">Two-Factor Authentication</h2>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class={`w-3 h-3 rounded-full ${totpStatus()?.enabled ? 'bg-primary' : 'bg-muted'}`}></div>
|
||||
<span class="text-gray-300">
|
||||
<span class="text-muted-foreground">
|
||||
{totpStatus()?.enabled ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
@@ -295,42 +294,42 @@ export function TwoFactorAuth() {
|
||||
</Show>
|
||||
|
||||
{/* Current Status */}
|
||||
<Card class="p-6">
|
||||
<h3 class="text-lg font-semibold text-white mb-4">Current Status</h3>
|
||||
<div class="border rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Current Status</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-300">2FA Status:</span>
|
||||
<span class="text-muted-foreground">2FA Status:</span>
|
||||
<span class={`font-medium ${totpStatus()?.enabled ? 'text-primary' : 'text-muted-foreground'}`}>
|
||||
{totpStatus()?.enabled ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-300">Setup Status:</span>
|
||||
<span class={`font-medium ${totpStatus()?.setup ? 'text-blue-400' : 'text-gray-400'}`}>
|
||||
<span class="text-muted-foreground">Setup Status:</span>
|
||||
<span class={`font-medium ${totpStatus()?.setup ? 'text-blue-500' : 'text-muted-foreground'}`}>
|
||||
{totpStatus()?.setup ? 'Configured' : 'Not Configured'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Setup TOTP */}
|
||||
<Show when={!totpStatus()?.enabled}>
|
||||
<Card class="p-6">
|
||||
<h3 class="text-lg font-semibold text-white mb-4">Setup Two-Factor Authentication</h3>
|
||||
<p class="text-gray-300 mb-4">
|
||||
<div class="border rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Setup Two-Factor Authentication</h3>
|
||||
<p class="text-muted-foreground mb-4">
|
||||
Enable 2FA to add an extra layer of security to your account. You'll need a TOTP app like Google Authenticator or Authy.
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-2">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={setupPassword()}
|
||||
onInput={(e) => setSetupPassword(e.currentTarget.value)}
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-ring"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</div>
|
||||
@@ -343,59 +342,61 @@ export function TwoFactorAuth() {
|
||||
{loading() ? 'Setting up...' : 'Setup 2FA'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* TOTP Setup Process */}
|
||||
<Show when={showSetup() && setupData()}>
|
||||
<Card class="p-6">
|
||||
<h3 class="text-lg font-semibold text-white mb-4">Complete 2FA Setup</h3>
|
||||
<div class="border rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Complete 2FA Setup</h3>
|
||||
|
||||
<div class="space-y-6">
|
||||
{/* QR Code */}
|
||||
<div class="text-center">
|
||||
<h4 class="text-md font-medium text-gray-300 mb-3">Scan QR Code</h4>
|
||||
<h4 class="text-md font-medium text-foreground mb-3">Scan QR Code</h4>
|
||||
<img
|
||||
src={setupData()!.qr_code}
|
||||
alt="TOTP QR Code"
|
||||
class="mx-auto border-2 border-gray-600 rounded-lg"
|
||||
class="mx-auto border-2 border-border rounded-lg"
|
||||
/>
|
||||
<p class="text-sm text-gray-400 mt-2">
|
||||
<p class="text-sm text-muted-foreground mt-2">
|
||||
Or manually enter this secret in your TOTP app:
|
||||
</p>
|
||||
<code class="block bg-gray-800 px-3 py-2 rounded text-blue-400 break-all">
|
||||
<code class="block bg-muted px-3 py-2 rounded text-primary break-all">
|
||||
{setupData()!.secret}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
{/* Backup Codes */}
|
||||
<div>
|
||||
<h4 class="text-md font-medium text-gray-300 mb-3">Backup Codes</h4>
|
||||
<p class="text-sm text-gray-400 mb-3">
|
||||
<h4 class="text-md font-medium text-foreground mb-3">Backup Codes</h4>
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
Save these backup codes in a secure location. You can use them to access your account if you lose your TOTP device.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
{backupCodes().map((code) => (
|
||||
<code class="bg-gray-800 px-3 py-2 rounded text-gray-300 text-sm">
|
||||
{code}
|
||||
</code>
|
||||
))}
|
||||
<For each={backupCodes()}>
|
||||
{(code) => (
|
||||
<code class="bg-muted px-3 py-2 rounded text-foreground text-sm">
|
||||
{code}
|
||||
</code>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Verification */}
|
||||
<div>
|
||||
<h4 class="text-md font-medium text-gray-300 mb-3">Verify Setup</h4>
|
||||
<h4 class="text-md font-medium text-foreground mb-3">Verify Setup</h4>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-2">
|
||||
Enter 6-digit code
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={verifyCode()}
|
||||
onInput={(e) => setVerifyCode(e.currentTarget.value.replace(/\D/g, '').slice(0, 6))}
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-ring"
|
||||
placeholder="000000"
|
||||
maxlength={6}
|
||||
/>
|
||||
@@ -413,7 +414,7 @@ export function TwoFactorAuth() {
|
||||
<Button
|
||||
onClick={enableTOTP}
|
||||
disabled={loading() || verifyCode().length !== 6}
|
||||
variant="papra"
|
||||
variant="secondary"
|
||||
class="flex-1"
|
||||
>
|
||||
{loading() ? 'Enabling...' : 'Enable 2FA'}
|
||||
@@ -422,41 +423,41 @@ export function TwoFactorAuth() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Disable 2FA */}
|
||||
<Show when={totpStatus()?.enabled}>
|
||||
<Card class="p-6">
|
||||
<h3 class="text-lg font-semibold text-white mb-4">Disable Two-Factor Authentication</h3>
|
||||
<p class="text-gray-300 mb-4">
|
||||
<div class="border rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Disable Two-Factor Authentication</h3>
|
||||
<p class="text-muted-foreground mb-4">
|
||||
Disabling 2FA will make your account less secure. You'll need to provide your current TOTP code and password.
|
||||
</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-2">
|
||||
TOTP Code
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={disableCode()}
|
||||
onInput={(e) => setDisableCode(e.currentTarget.value.replace(/\D/g, '').slice(0, 6))}
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-ring"
|
||||
placeholder="000000"
|
||||
maxlength={6}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">
|
||||
<label class="block text-sm font-medium text-muted-foreground mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={disablePassword()}
|
||||
onInput={(e) => setDisablePassword(e.currentTarget.value)}
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-ring"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</div>
|
||||
@@ -470,24 +471,24 @@ export function TwoFactorAuth() {
|
||||
{loading() ? 'Disabling...' : 'Disable 2FA'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
{/* Backup Code Management */}
|
||||
<Show when={totpStatus()?.enabled}>
|
||||
<Card class="p-6">
|
||||
<h3 class="text-lg font-semibold text-white mb-4">Backup Code Management</h3>
|
||||
<div class="border rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-4">Backup Code Management</h3>
|
||||
|
||||
<div class="space-y-6">
|
||||
{/* Verify Backup Code */}
|
||||
<div>
|
||||
<h4 class="text-md font-medium text-gray-300 mb-3">Verify Backup Code</h4>
|
||||
<h4 class="text-md font-medium text-foreground mb-3">Verify Backup Code</h4>
|
||||
<div class="space-y-4">
|
||||
<input
|
||||
type="text"
|
||||
value={backupCodeVerify()}
|
||||
onInput={(e) => setBackupCodeVerify(e.currentTarget.value)}
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-ring"
|
||||
placeholder="Enter backup code"
|
||||
/>
|
||||
|
||||
@@ -503,8 +504,8 @@ export function TwoFactorAuth() {
|
||||
|
||||
{/* Regenerate Backup Codes */}
|
||||
<div>
|
||||
<h4 class="text-md font-medium text-gray-300 mb-3">Regenerate Backup Codes</h4>
|
||||
<p class="text-sm text-gray-400 mb-3">
|
||||
<h4 class="text-md font-medium text-foreground mb-3">Regenerate Backup Codes</h4>
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
This will invalidate all existing backup codes and generate new ones.
|
||||
</p>
|
||||
|
||||
@@ -513,7 +514,7 @@ export function TwoFactorAuth() {
|
||||
type="text"
|
||||
value={regenerateCode()}
|
||||
onInput={(e) => setRegenerateCode(e.currentTarget.value.replace(/\D/g, '').slice(0, 6))}
|
||||
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-ring"
|
||||
placeholder="Current TOTP code"
|
||||
maxlength={6}
|
||||
/>
|
||||
@@ -532,21 +533,23 @@ export function TwoFactorAuth() {
|
||||
{/* Show New Backup Codes */}
|
||||
<Show when={backupCodes().length > 0}>
|
||||
<div>
|
||||
<h4 class="text-md font-medium text-gray-300 mb-3">New Backup Codes</h4>
|
||||
<p class="text-sm text-gray-400 mb-3">
|
||||
<h4 class="text-md font-medium text-foreground mb-3">New Backup Codes</h4>
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
Save these new backup codes in a secure location:
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
{backupCodes().map((code) => (
|
||||
<code class="bg-gray-800 px-3 py-2 rounded text-gray-300 text-sm">
|
||||
{code}
|
||||
</code>
|
||||
))}
|
||||
<For each={backupCodes()}>
|
||||
{(code) => (
|
||||
<code class="bg-muted px-3 py-2 rounded text-foreground text-sm">
|
||||
{code}
|
||||
</code>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user