Initialer Laravel Commit für BetiX
This commit is contained in:
35
resources/js/pages/settings/Appearance.vue
Normal file
35
resources/js/pages/settings/Appearance.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import AppearanceTabs from '@/components/AppearanceTabs.vue';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import SettingsLayout from '@/layouts/settings/Layout.vue';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import { edit } from '@/routes/appearance';
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Appearance settings',
|
||||
href: edit().url,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :breadcrumbs="breadcrumbItems">
|
||||
<Head title="Appearance settings" />
|
||||
|
||||
<h1 class="sr-only">Appearance Settings</h1>
|
||||
|
||||
<SettingsLayout>
|
||||
<div class="space-y-6">
|
||||
<Heading
|
||||
variant="small"
|
||||
title="Appearance settings"
|
||||
description="Update your account's appearance settings"
|
||||
/>
|
||||
<AppearanceTabs />
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
</template>
|
||||
373
resources/js/pages/settings/Kyc.vue
Normal file
373
resources/js/pages/settings/Kyc.vue
Normal file
@@ -0,0 +1,373 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, router } from '@inertiajs/vue3';
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
import UserLayout from '../../layouts/user/userlayout.vue';
|
||||
|
||||
type Doc = {
|
||||
id: number
|
||||
category: string
|
||||
type: string
|
||||
status: string
|
||||
rejection_reason?: string | null
|
||||
mime: string
|
||||
size: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
documents: Doc[]
|
||||
accepted: Record<string, string[]>
|
||||
maxUploadMb: number
|
||||
}>()
|
||||
|
||||
const uploading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
const success = ref<string | null>(null);
|
||||
|
||||
const category = ref<'identity'|'address'|'payment'>('identity');
|
||||
const type = ref<string>('passport');
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
|
||||
function onFileChosen(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
if (!input.files || input.files.length === 0) return;
|
||||
upload(input.files[0]);
|
||||
}
|
||||
|
||||
async function upload(file: File) {
|
||||
uploading.value = true;
|
||||
error.value = null;
|
||||
success.value = null;
|
||||
const form = new FormData();
|
||||
form.append('category', category.value);
|
||||
form.append('type', type.value);
|
||||
form.append('file', file);
|
||||
try {
|
||||
const res = await fetch('/settings/kyc', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || ''
|
||||
},
|
||||
body: form,
|
||||
});
|
||||
if (!res.ok) {
|
||||
const j = await res.json().catch(() => ({}));
|
||||
throw new Error(j.message || 'Upload failed');
|
||||
}
|
||||
success.value = 'Document uploaded successfully';
|
||||
router.reload({ only: ['documents'] });
|
||||
} catch (e: any) {
|
||||
error.value = e?.message || 'Upload failed';
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
if (fileInput.value) fileInput.value.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function removeDoc(id: number) {
|
||||
if (!confirm('Delete this document? Only pending documents can be deleted.')) return;
|
||||
const res = await fetch(`/settings/kyc/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || ''
|
||||
},
|
||||
});
|
||||
if (res.ok) {
|
||||
router.reload({ only: ['documents'] });
|
||||
}
|
||||
}
|
||||
|
||||
function formatSize(bytes: number) {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
const kb = bytes/1024; if (kb < 1024) return `${kb.toFixed(1)} KB`;
|
||||
const mb = kb/1024; return `${mb.toFixed(2)} MB`;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UserLayout>
|
||||
<Head title="KYC Verification" />
|
||||
<section class="content">
|
||||
<div class="wrap">
|
||||
<div class="panel main-panel">
|
||||
<header class="page-head">
|
||||
<div class="head-flex">
|
||||
<div class="title-group">
|
||||
<div class="title">KYC Protocol</div>
|
||||
<p class="subtitle">Secure identity verification & document management</p>
|
||||
</div>
|
||||
<div class="status-indicator">
|
||||
<span class="dot"></span>
|
||||
<span class="status-text">System Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="settings-nav">
|
||||
<a href="/settings/profile" class="nav-item"><i data-lucide="user"></i> Profile</a>
|
||||
<a href="/settings/kyc" class="nav-item active"><i data-lucide="file-check"></i> KYC</a>
|
||||
<a href="/settings/security" class="nav-item"><i data-lucide="lock"></i> Security</a>
|
||||
<a href="/settings/two-factor" class="nav-item"><i data-lucide="shield"></i> 2FA</a>
|
||||
</div>
|
||||
|
||||
<div class="grid-layout">
|
||||
<div class="left-col">
|
||||
<div class="glass-card uploader-box">
|
||||
<div class="form-grid">
|
||||
<div class="input-group">
|
||||
<label class="lbl">Category</label>
|
||||
<div class="select-wrapper">
|
||||
<select v-model="category">
|
||||
<option value="identity">Identity</option>
|
||||
<option value="address">Address</option>
|
||||
<option value="payment">Payment</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="lbl">Document Type</label>
|
||||
<div class="select-wrapper">
|
||||
<select v-model="type">
|
||||
<option value="passport">Passport</option>
|
||||
<option value="driver_license">Driver license</option>
|
||||
<option value="id_card">ID card</option>
|
||||
<option value="bank_statement">Bank statement</option>
|
||||
<option value="utility_bill">Utility bill</option>
|
||||
<option value="online_banking">Online banking</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drop-zone" @click="fileInput?.click()" :class="{ 'is-uploading': uploading }">
|
||||
<div class="drop-content">
|
||||
<i data-lucide="shield-check" class="drop-icon"></i>
|
||||
<div class="drop-text">Click or drag-and-drop file</div>
|
||||
<small class="drop-info">JPG, PNG, WEBP, PDF • Max {{ maxUploadMb }} MB</small>
|
||||
</div>
|
||||
<div v-if="uploading" class="upload-overlay">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<input ref="fileInput" type="file" class="hidden" @change="onFileChosen" :disabled="uploading" />
|
||||
</div>
|
||||
|
||||
<div class="feedback-area">
|
||||
<p v-if="error" class="msg err"><i data-lucide="alert-circle"></i> {{ error }}</p>
|
||||
<p v-if="success" class="msg ok"><i data-lucide="check-circle"></i> {{ success }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="document-list-container">
|
||||
<div class="list-header">
|
||||
<h3>Your Documents</h3>
|
||||
<span class="count">{{ documents.length }} Files</span>
|
||||
</div>
|
||||
|
||||
<div v-if="!documents.length" class="empty-state">
|
||||
<i data-lucide="folder-open"></i>
|
||||
<p>No documents uploaded yet</p>
|
||||
</div>
|
||||
|
||||
<div class="docs-grid">
|
||||
<div v-for="d in documents" :key="d.id" class="doc-card" :data-status="d.status">
|
||||
<div class="doc-main">
|
||||
<div class="doc-info">
|
||||
<div class="doc-badges">
|
||||
<span class="badge-cat">{{ d.category }}</span>
|
||||
<span class="badge-type">{{ d.type }}</span>
|
||||
</div>
|
||||
<div class="doc-status">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-label">{{ d.status }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-meta">
|
||||
<span>{{ d.mime.split('/')[1]?.toUpperCase() }}</span>
|
||||
<span>{{ formatSize(d.size) }}</span>
|
||||
<span>{{ new Date(d.created_at).toLocaleDateString() }}</span>
|
||||
</div>
|
||||
<div v-if="d.rejection_reason" class="rejection-box">
|
||||
Reason: {{ d.rejection_reason }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="doc-actions">
|
||||
<a :href="`/settings/kyc/${d.id}/download`" target="_blank" class="act-btn view">
|
||||
<i data-lucide="eye"></i>
|
||||
</a>
|
||||
<button v-if="d.status==='pending'" @click="removeDoc(d.id)" class="act-btn delete">
|
||||
<i data-lucide="trash-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="right-col">
|
||||
<div class="glass-card side-info">
|
||||
<div class="side-head">Guidelines</div>
|
||||
<div class="guide-sections">
|
||||
<div class="guide-item">
|
||||
<div class="g-title"><i data-lucide="user"></i> Identity</div>
|
||||
<ul>
|
||||
<li>Passport (Full page)</li>
|
||||
<li>Driver’s license (Both sides)</li>
|
||||
<li>ID Card (Both sides)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="guide-item">
|
||||
<div class="g-title"><i data-lucide="map-pin"></i> Address</div>
|
||||
<ul>
|
||||
<li>Bank statement (Last 3m)</li>
|
||||
<li>Utility bill (Electricity/Water)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="guide-item">
|
||||
<div class="g-title"><i data-lucide="credit-card"></i> Payment</div>
|
||||
<ul>
|
||||
<li>Online banking screenshot</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="secure-footer">
|
||||
<i data-lucide="lock" style="width:12px"></i> End-to-end Encrypted
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</UserLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:global(:root) {
|
||||
--bg-card: #0a0a0a;
|
||||
--border: #151515;
|
||||
--cyan: #00f2ff;
|
||||
--magenta: #ff007a;
|
||||
--green: #00ff9d;
|
||||
--gold: #f7931a;
|
||||
--red: #ff3e3e;
|
||||
}
|
||||
|
||||
.content { padding: 30px; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
|
||||
.wrap { max-width: 1200px; margin: 0 auto; }
|
||||
|
||||
.main-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
|
||||
|
||||
/* Header Styles */
|
||||
.page-head { padding: 25px 30px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(0,242,255,0.03), transparent); }
|
||||
.head-flex { display: flex; justify-content: space-between; align-items: center; }
|
||||
.title { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 3px; text-transform: uppercase; }
|
||||
.subtitle { color: #555; font-size: 12px; margin-top: 4px; font-weight: 600; }
|
||||
|
||||
.status-indicator { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.3); padding: 6px 12px; border-radius: 50px; border: 1px solid #111; }
|
||||
.status-indicator .dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 10px var(--green); animation: pulse 2s infinite; }
|
||||
.status-text { font-size: 10px; font-weight: 900; color: #666; text-transform: uppercase; letter-spacing: 1px; }
|
||||
|
||||
/* Navigation */
|
||||
.settings-nav { display: flex; gap: 5px; padding: 15px 30px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); overflow-x: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #666; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: var(--cyan); background: rgba(0,242,255,0.1); }
|
||||
.nav-item i { width: 14px; }
|
||||
|
||||
/* Grid Layout */
|
||||
.grid-layout { display: grid; grid-template-columns: 1fr 320px; gap: 30px; padding: 30px; }
|
||||
|
||||
/* Left Column / Uploader */
|
||||
.left-col { display: flex; flex-direction: column; gap: 30px; animation: slide-up 0.6s cubic-bezier(0.2, 0, 0, 1) backwards; animation-delay: 0.1s; }
|
||||
.glass-card { background: #050505; border: 1px solid var(--border); border-radius: 16px; padding: 20px; transition: 0.3s; }
|
||||
.glass-card:hover { border-color: #222; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
|
||||
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
|
||||
.lbl { display: block; font-size: 10px; font-weight: 900; color: #444; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
|
||||
|
||||
.select-wrapper { position: relative; }
|
||||
select { width: 100%; background: #000; border: 1px solid var(--border); color: #fff; padding: 12px; border-radius: 12px; font-size: 13px; appearance: none; transition: 0.3s; }
|
||||
select:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 15px rgba(0,242,255,0.1); }
|
||||
|
||||
/* Drop Zone */
|
||||
.drop-zone { border: 2px dashed #1a1a1a; border-radius: 16px; padding: 40px 20px; text-align: center; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; }
|
||||
.drop-zone:hover { border-color: var(--cyan); background: rgba(0,242,255,0.02); transform: scale(1.01); }
|
||||
.drop-icon { width: 32px; height: 32px; color: #222; margin: 0 auto 15px; transition: 0.3s; }
|
||||
.drop-zone:hover .drop-icon { color: var(--cyan); transform: translateY(-3px); }
|
||||
.drop-text { font-weight: 800; color: #eee; font-size: 14px; margin-bottom: 5px; }
|
||||
.drop-info { color: #444; font-size: 11px; }
|
||||
|
||||
.upload-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 10; }
|
||||
.spinner { width: 24px; height: 24px; border: 3px solid rgba(0,242,255,0.1); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.8s linear infinite; }
|
||||
|
||||
/* Documents List */
|
||||
.list-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px; }
|
||||
.list-header h3 { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #444; margin: 0; }
|
||||
.list-header .count { font-size: 10px; color: #666; font-weight: 800; }
|
||||
|
||||
.docs-grid { display: grid; gap: 12px; }
|
||||
.doc-card { display: flex; justify-content: space-between; align-items: center; background: #070707; border: 1px solid var(--border); padding: 16px; border-radius: 14px; transition: 0.3s; animation: fade-in 0.5s backwards; }
|
||||
.doc-card:hover { border-color: #222; transform: translateX(5px); }
|
||||
|
||||
.doc-info { display: flex; align-items: center; gap: 15px; margin-bottom: 8px; }
|
||||
.doc-badges { display: flex; gap: 6px; }
|
||||
.badge-cat { font-size: 9px; font-weight: 900; color: var(--cyan); text-transform: uppercase; background: rgba(0,242,255,0.05); padding: 2px 8px; border-radius: 4px; }
|
||||
.badge-type { font-size: 9px; font-weight: 900; color: #666; text-transform: uppercase; background: #111; padding: 2px 8px; border-radius: 4px; }
|
||||
|
||||
.doc-status { display: flex; align-items: center; gap: 6px; }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #444; }
|
||||
.status-label { font-size: 10px; font-weight: 900; text-transform: uppercase; color: #444; }
|
||||
|
||||
.doc-card[data-status="approved"] .status-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
|
||||
.doc-card[data-status="approved"] .status-label { color: var(--green); }
|
||||
.doc-card[data-status="pending"] .status-dot { background: var(--gold); }
|
||||
.doc-card[data-status="rejected"] .status-dot { background: var(--red); }
|
||||
|
||||
.doc-meta { display: flex; gap: 15px; font-size: 11px; color: #333; font-weight: 700; }
|
||||
.rejection-box { margin-top: 8px; font-size: 11px; color: var(--red); background: rgba(255,62,62,0.05); padding: 6px 10px; border-radius: 6px; }
|
||||
|
||||
.doc-actions { display: flex; gap: 8px; }
|
||||
.act-btn { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid #151515; background: #000; color: #444; transition: 0.2s; }
|
||||
.act-btn:hover { color: #fff; border-color: #333; }
|
||||
.act-btn.delete:hover { color: var(--red); border-color: var(--red); background: rgba(255,62,62,0.05); }
|
||||
|
||||
/* Right Column */
|
||||
.right-col { animation: slide-up 0.6s cubic-bezier(0.2, 0, 0, 1) backwards; animation-delay: 0.2s; }
|
||||
.side-info { position: sticky; top: 30px; }
|
||||
.side-head { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; margin-bottom: 20px; border-left: 3px solid var(--cyan); padding-left: 12px; }
|
||||
.guide-sections { display: flex; flex-direction: column; gap: 20px; }
|
||||
.g-title { font-size: 10px; font-weight: 900; text-transform: uppercase; color: #555; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
.g-title i { width: 12px; }
|
||||
.guide-item ul { padding-left: 20px; margin: 0; }
|
||||
.guide-item li { font-size: 12px; color: #888; margin-bottom: 5px; }
|
||||
|
||||
.secure-footer { margin-top: 25px; padding-top: 15px; border-top: 1px solid #111; font-size: 10px; font-weight: 800; color: #333; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
|
||||
|
||||
/* Utility */
|
||||
.empty-state { padding: 40px; text-align: center; color: #222; }
|
||||
.empty-state i { width: 40px; height: 40px; margin-bottom: 10px; opacity: 0.5; }
|
||||
.msg { font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-top: 15px; }
|
||||
.msg i { width: 14px; }
|
||||
.msg.err { color: var(--red); }
|
||||
.msg.ok { color: var(--green); }
|
||||
.hidden { display: none; }
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
|
||||
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.grid-layout { grid-template-columns: 1fr; }
|
||||
.side-info { position: static; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.settings-nav { padding: 10px 15px; }
|
||||
}
|
||||
</style>
|
||||
115
resources/js/pages/settings/Password.vue
Normal file
115
resources/js/pages/settings/Password.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head } from '@inertiajs/vue3';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import InputError from '@/components/InputError.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import SettingsLayout from '@/layouts/settings/Layout.vue';
|
||||
import PasswordController from '@/actions/App/Http/Controllers/Settings/PasswordController';
|
||||
import { edit } from '@/routes/user-password';
|
||||
|
||||
const breadcrumbItems: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Password settings',
|
||||
href: edit().url,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :breadcrumbs="breadcrumbItems">
|
||||
<Head title="Password settings" />
|
||||
|
||||
<h1 class="sr-only">Password Settings</h1>
|
||||
|
||||
<SettingsLayout>
|
||||
<div class="space-y-6">
|
||||
<Heading
|
||||
variant="small"
|
||||
title="Update password"
|
||||
description="Ensure your account is using a long, random password to stay secure"
|
||||
/>
|
||||
|
||||
<Form
|
||||
v-bind="PasswordController.update.form()"
|
||||
:options="{
|
||||
preserveScroll: true,
|
||||
}"
|
||||
reset-on-success
|
||||
:reset-on-error="[
|
||||
'password',
|
||||
'password_confirmation',
|
||||
'current_password',
|
||||
]"
|
||||
class="space-y-6"
|
||||
v-slot="{ errors, processing, recentlySuccessful }"
|
||||
>
|
||||
<div class="grid gap-2">
|
||||
<Label for="current_password">Current password</Label>
|
||||
<Input
|
||||
id="current_password"
|
||||
name="current_password"
|
||||
type="password"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="current-password"
|
||||
placeholder="Current password"
|
||||
/>
|
||||
<InputError :message="errors.current_password" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">New password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="new-password"
|
||||
placeholder="New password"
|
||||
/>
|
||||
<InputError :message="errors.password" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="password_confirmation"
|
||||
>Confirm password</Label
|
||||
>
|
||||
<Input
|
||||
id="password_confirmation"
|
||||
name="password_confirmation"
|
||||
type="password"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="new-password"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
<InputError :message="errors.password_confirmation" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<Button
|
||||
:disabled="processing"
|
||||
data-test="update-password-button"
|
||||
>Save password</Button
|
||||
>
|
||||
|
||||
<Transition
|
||||
enter-active-class="transition ease-in-out"
|
||||
enter-from-class="opacity-0"
|
||||
leave-active-class="transition ease-in-out"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<p
|
||||
v-show="recentlySuccessful"
|
||||
class="text-sm text-neutral-600"
|
||||
>
|
||||
Saved.
|
||||
</p>
|
||||
</Transition>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
</template>
|
||||
407
resources/js/pages/settings/Profile.vue
Normal file
407
resources/js/pages/settings/Profile.vue
Normal file
@@ -0,0 +1,407 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, usePage } from '@inertiajs/vue3';
|
||||
import { ref, onMounted, nextTick, computed, watch } from 'vue';
|
||||
import Select from '@/components/ui/Select.vue';
|
||||
import { usePrimaryColor } from '@/composables/usePrimaryColor';
|
||||
import UserLayout from '../../layouts/user/userlayout.vue';
|
||||
|
||||
type Props = { mustVerifyEmail: boolean; status?: string };
|
||||
defineProps<Props>();
|
||||
|
||||
const page = usePage();
|
||||
const user = computed(() => (page.props.auth as any).user || {});
|
||||
|
||||
const form = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
birthdate: '',
|
||||
gender: '',
|
||||
country: '',
|
||||
address_line1: '',
|
||||
address_line2: '',
|
||||
city: '',
|
||||
state: '',
|
||||
postal_code: '',
|
||||
phone: '',
|
||||
});
|
||||
|
||||
const locked = ref<Record<string, boolean>>({});
|
||||
const isSaving = ref(false);
|
||||
const showSuccess = ref(false);
|
||||
|
||||
// Accent color controls for quick access on Profile page
|
||||
const { primaryColor, updatePrimaryColor } = usePrimaryColor();
|
||||
const hexInput = ref<string>(primaryColor.value || '#ff007a');
|
||||
|
||||
watch(primaryColor, (val) => {
|
||||
if (val && val.toLowerCase() !== hexInput.value.toLowerCase()) {
|
||||
hexInput.value = val;
|
||||
}
|
||||
});
|
||||
|
||||
function onPickColor(e: Event) {
|
||||
const value = (e.target as HTMLInputElement).value;
|
||||
hexInput.value = value;
|
||||
updatePrimaryColor(value);
|
||||
}
|
||||
|
||||
function onHexInput(e: Event) {
|
||||
const value = (e.target as HTMLInputElement).value.trim();
|
||||
hexInput.value = value;
|
||||
}
|
||||
|
||||
function applyHex() {
|
||||
let v = hexInput.value.trim();
|
||||
if (!v.startsWith('#')) v = `#${v}`;
|
||||
const isValid = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v);
|
||||
if (isValid) {
|
||||
hexInput.value = v.toLowerCase();
|
||||
updatePrimaryColor(hexInput.value);
|
||||
}
|
||||
}
|
||||
|
||||
function resetToDefault() {
|
||||
const def = '#ff007a';
|
||||
hexInput.value = def;
|
||||
updatePrimaryColor(def);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const u: any = user.value || {};
|
||||
|
||||
// Map fields
|
||||
form.value = {
|
||||
name: u.name || '',
|
||||
email: u.email || '',
|
||||
first_name: u.first_name || '',
|
||||
last_name: u.last_name || '',
|
||||
birthdate: u.birthdate ? String(u.birthdate).slice(0, 10) : '',
|
||||
gender: u.gender || '',
|
||||
country: (u.country || '').toString().toUpperCase(),
|
||||
address_line1: u.address_line1 || '',
|
||||
address_line2: u.address_line2 || '',
|
||||
city: u.city || '',
|
||||
state: u.state || '',
|
||||
postal_code: u.postal_code || '',
|
||||
phone: u.phone || '',
|
||||
};
|
||||
|
||||
// Determine locks: If data exists in DB, it is locked.
|
||||
const fields = Object.keys(form.value);
|
||||
fields.forEach(f => {
|
||||
if (u[f] && String(u[f]).trim() !== '') {
|
||||
locked.value[f] = true;
|
||||
}
|
||||
});
|
||||
|
||||
nextTick(() => { if ((window as any).lucide) (window as any).lucide.createIcons(); });
|
||||
});
|
||||
|
||||
async function submit() {
|
||||
isSaving.value = true;
|
||||
|
||||
const res = await fetch('/settings/profile', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ ...form.value, _method: 'PATCH' }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
showSuccess.value = true;
|
||||
setTimeout(() => { window.location.reload(); }, 1000);
|
||||
} else {
|
||||
isSaving.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UserLayout>
|
||||
<Head title="Profile Settings" />
|
||||
<section class="content">
|
||||
<div class="wrap">
|
||||
<div class="panel main-panel">
|
||||
<header class="page-head">
|
||||
<div class="head-flex">
|
||||
<div class="title-group">
|
||||
<div class="title">User Profile</div>
|
||||
<p class="subtitle">Manage your personal identity and contact details</p>
|
||||
</div>
|
||||
<div class="security-badge">
|
||||
<i data-lucide="shield-check"></i>
|
||||
<span>Verified Account</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="settings-nav">
|
||||
<a href="/settings/profile" class="nav-item active"><i data-lucide="user"></i> Profile</a>
|
||||
<a href="/settings" class="nav-item"><i data-lucide="globe"></i> Public Profile</a>
|
||||
<a href="/settings/kyc" class="nav-item"><i data-lucide="file-check"></i> KYC</a>
|
||||
<a href="/settings/security" class="nav-item"><i data-lucide="lock"></i> Security</a>
|
||||
<a href="/settings/two-factor" class="nav-item"><i data-lucide="shield"></i> 2FA</a>
|
||||
</div>
|
||||
|
||||
<form class="profile-form" @submit.prevent="submit">
|
||||
<div class="form-section">
|
||||
<div class="sec-label">Account Core</div>
|
||||
<div class="grid2">
|
||||
<label class="field" :class="{ locked: locked.email }">
|
||||
<span class="lbl">Email Address</span>
|
||||
<div class="input-wrapper">
|
||||
<i data-lucide="mail"></i>
|
||||
<input class="inp" type="email" v-model="form.email" :disabled="locked.email" required />
|
||||
<i v-if="locked.email" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
<div v-if="locked.email" class="locked-hint">Contact support to change</div>
|
||||
</label>
|
||||
<label class="field" :class="{ locked: locked.name }">
|
||||
<span class="lbl">Display Name</span>
|
||||
<div class="input-wrapper">
|
||||
<i data-lucide="user"></i>
|
||||
<input class="inp" type="text" v-model="form.name" :disabled="locked.name" required />
|
||||
<i v-if="locked.name" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
<div v-if="locked.name" class="locked-hint">Contact support to change</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="sec-label">Identity Details</div>
|
||||
<div class="grid2">
|
||||
<label class="field" :class="{ locked: locked.first_name }">
|
||||
<span class="lbl">First Name</span>
|
||||
<div class="input-wrapper">
|
||||
<input class="inp pl-reset" type="text" v-model="form.first_name" :disabled="locked.first_name" />
|
||||
<i v-if="locked.first_name" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field" :class="{ locked: locked.last_name }">
|
||||
<span class="lbl">Last Name</span>
|
||||
<div class="input-wrapper">
|
||||
<input class="inp pl-reset" type="text" v-model="form.last_name" :disabled="locked.last_name" />
|
||||
<i v-if="locked.last_name" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid3">
|
||||
<label class="field" :class="{ locked: locked.birthdate }">
|
||||
<span class="lbl">Birthdate</span>
|
||||
<div class="input-wrapper">
|
||||
<input class="inp pl-reset" type="date" v-model="form.birthdate" :disabled="locked.birthdate" />
|
||||
<i v-if="locked.birthdate" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field" :class="{ locked: locked.gender }">
|
||||
<span class="lbl">Gender</span>
|
||||
<div class="input-wrapper">
|
||||
<Select
|
||||
v-model="form.gender"
|
||||
:disabled="locked.gender"
|
||||
:options="[
|
||||
{ label: 'Male', value: 'male', icon: 'user' },
|
||||
{ label: 'Female', value: 'female', icon: 'user' },
|
||||
{ label: 'Other', value: 'other', icon: 'user' }
|
||||
]"
|
||||
placeholder="Select Gender"
|
||||
/>
|
||||
<i v-if="locked.gender" data-lucide="lock" class="lock-icon" style="right: 30px; left: auto; z-index: 10;"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field" :class="{ locked: locked.country }">
|
||||
<span class="lbl">Country (ISO)</span>
|
||||
<div class="input-wrapper">
|
||||
<input class="inp pl-reset" type="text" v-model="form.country" placeholder="e.g. DE" maxlength="2" :disabled="locked.country" />
|
||||
<i v-if="locked.country" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="sec-label">Residential Address</div>
|
||||
<div class="grid1">
|
||||
<label class="field" :class="{ locked: locked.address_line1 }">
|
||||
<span class="lbl">Address Line 1</span>
|
||||
<div class="input-wrapper">
|
||||
<input class="inp pl-reset" type="text" v-model="form.address_line1" placeholder="Street and house number" :disabled="locked.address_line1" />
|
||||
<i v-if="locked.address_line1" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid2">
|
||||
<label class="field" :class="{ locked: locked.address_line2 }">
|
||||
<span class="lbl">Address Line 2 (Optional)</span>
|
||||
<div class="input-wrapper">
|
||||
<input class="inp pl-reset" type="text" v-model="form.address_line2" :disabled="locked.address_line2" />
|
||||
<i v-if="locked.address_line2" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field" :class="{ locked: locked.city }">
|
||||
<span class="lbl">City</span>
|
||||
<div class="input-wrapper">
|
||||
<input class="inp pl-reset" type="text" v-model="form.city" :disabled="locked.city" />
|
||||
<i v-if="locked.city" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid2">
|
||||
<label class="field" :class="{ locked: locked.state }">
|
||||
<span class="lbl">State / Region</span>
|
||||
<div class="input-wrapper">
|
||||
<input class="inp pl-reset" type="text" v-model="form.state" :disabled="locked.state" />
|
||||
<i v-if="locked.state" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="field" :class="{ locked: locked.postal_code }">
|
||||
<span class="lbl">Postal Code</span>
|
||||
<div class="input-wrapper">
|
||||
<input class="inp pl-reset" type="text" v-model="form.postal_code" :disabled="locked.postal_code" />
|
||||
<i v-if="locked.postal_code" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="sec-label">Contact Information</div>
|
||||
<div class="grid1">
|
||||
<label class="field" :class="{ locked: locked.phone }">
|
||||
<span class="lbl">Mobile Phone</span>
|
||||
<div class="input-wrapper">
|
||||
<i data-lucide="phone"></i>
|
||||
<input class="inp" type="tel" v-model="form.phone" placeholder="+49 123 456789" :disabled="locked.phone" />
|
||||
<i v-if="locked.phone" data-lucide="lock" class="lock-icon"></i>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="sec-label">Appearance</div>
|
||||
<div class="grid1">
|
||||
<div class="field">
|
||||
<span class="lbl">Accent color</span>
|
||||
<div class="input-wrapper" style="gap:8px; align-items:center;">
|
||||
<input class="inp pl-reset" type="color" :value="primaryColor" @input="onPickColor" style="width:46px; height:36px; padding:0;" />
|
||||
<input class="inp pl-reset" type="text" v-model="hexInput" @input="onHexInput" placeholder="#ff007a" style="max-width:160px;" />
|
||||
<button type="button" class="inp pl-reset" @click="applyHex" style="width:auto; cursor:pointer;">Apply</button>
|
||||
<button type="button" class="inp pl-reset" @click="resetToDefault" style="width:auto; cursor:pointer;">Reset</button>
|
||||
</div>
|
||||
<div class="locked-hint" style="margin-top:6px; display:flex; align-items:center; gap:6px;">
|
||||
<span>Preview:</span>
|
||||
<span :style="{background: primaryColor, display:'inline-block', width:'18px', height:'12px', borderRadius:'4px', border:'1px solid #222'}"></span>
|
||||
<code style="color:#aaa;">{{ primaryColor }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button class="btn-save" type="submit" :disabled="isSaving">
|
||||
<span v-if="!isSaving">{{ showSuccess ? 'Updated!' : 'Save Protocol' }}</span>
|
||||
<div v-else class="loader"></div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</UserLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:global(:root) {
|
||||
--bg-card: #0a0a0a;
|
||||
--border: #151515;
|
||||
--cyan: #00f2ff;
|
||||
--magenta: #ff007a;
|
||||
--green: #00ff9d;
|
||||
}
|
||||
|
||||
.content { padding: 30px; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
|
||||
.wrap { max-width: 900px; margin: 0 auto; }
|
||||
|
||||
.main-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
|
||||
|
||||
/* Header */
|
||||
.page-head { padding: 25px 30px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(0,242,255,0.03), transparent); }
|
||||
.head-flex { display: flex; justify-content: space-between; align-items: center; }
|
||||
.title { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 3px; text-transform: uppercase; }
|
||||
.subtitle { color: #555; font-size: 12px; margin-top: 4px; font-weight: 600; }
|
||||
|
||||
.security-badge { display: flex; align-items: center; gap: 8px; color: var(--green); background: rgba(0,255,157,0.05); padding: 6px 14px; border-radius: 50px; border: 1px solid rgba(0,255,157,0.1); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
|
||||
.security-badge i { width: 14px; }
|
||||
|
||||
/* Navigation */
|
||||
.settings-nav { display: flex; gap: 5px; padding: 15px 30px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); overflow-x: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #666; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: var(--cyan); background: rgba(0,242,255,0.1); }
|
||||
.nav-item i { width: 14px; }
|
||||
|
||||
/* Form Layout */
|
||||
.profile-form { padding: 30px; display: grid; gap: 30px; }
|
||||
.form-section { display: grid; gap: 15px; animation: slide-up 0.6s cubic-bezier(0.2, 0, 0, 1) backwards; }
|
||||
.form-section:nth-child(1) { animation-delay: 0.1s; }
|
||||
.form-section:nth-child(2) { animation-delay: 0.2s; }
|
||||
.form-section:nth-child(3) { animation-delay: 0.3s; }
|
||||
.form-section:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
.sec-label { font-size: 10px; font-weight: 900; color: #333; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; border-bottom: 1px solid #111; padding-bottom: 8px; }
|
||||
|
||||
.grid1 { display: grid; gap: 15px; }
|
||||
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
|
||||
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
|
||||
|
||||
/* Inputs */
|
||||
.field { display: block; position: relative; }
|
||||
.lbl { display: block; font-size: 10px; font-weight: 900; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; transition: 0.3s; }
|
||||
|
||||
.input-wrapper { position: relative; display: flex; align-items: center; }
|
||||
.input-wrapper i:not(.lock-icon) { position: absolute; left: 14px; width: 14px; color: #444; pointer-events: none; transition: 0.3s; }
|
||||
.input-wrapper .inp { padding-left: 40px; }
|
||||
.input-wrapper .inp.pl-reset { padding-left: 14px; }
|
||||
|
||||
.inp, select { width: 100%; background: #000; border: 1px solid var(--border); color: #fff; padding: 12px 14px; border-radius: 12px; font-size: 13px; transition: 0.3s cubic-bezier(0.2, 0, 0, 1); }
|
||||
.inp:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 15px rgba(0,242,255,0.1); background: #050505; }
|
||||
.inp:focus + i { color: var(--cyan); }
|
||||
|
||||
/* Locked State */
|
||||
.inp:disabled { background: #080808; color: #666; border-color: #111; cursor: not-allowed; }
|
||||
.lock-icon { position: absolute; right: 14px; width: 12px; color: #333; pointer-events: none; }
|
||||
.locked-hint { font-size: 9px; color: #444; margin-top: 6px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
|
||||
.locked-hint::before { content: ''; display: block; width: 4px; height: 4px; background: #333; border-radius: 50%; }
|
||||
|
||||
/* Custom Select */
|
||||
.select-wrapper { position: relative; }
|
||||
.select-wrapper::after { content: '↓'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #444; pointer-events: none; }
|
||||
|
||||
/* Actions & Footer */
|
||||
.form-footer { display: flex; justify-content: flex-end; align-items: center; margin-top: 20px; padding-top: 25px; border-top: 1px solid var(--border); animation: fade-in 1s 0.5s backwards; }
|
||||
|
||||
.btn-save { background: var(--cyan); color: #000; border: none; border-radius: 12px; padding: 14px 30px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.3s; box-shadow: 0 0 20px rgba(0,242,255,0.2); min-width: 160px; display: flex; justify-content: center; }
|
||||
.btn-save:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 25px rgba(0,242,255,0.4); }
|
||||
.btn-save:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
.loader { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.1); border-top-color: #000; border-radius: 50%; animation: spin 0.8s linear infinite; }
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid2, .grid3 { grid-template-columns: 1fr; }
|
||||
.form-footer { flex-direction: column-reverse; gap: 20px; align-items: stretch; }
|
||||
.profile-form { padding: 20px; }
|
||||
.settings-nav { padding: 10px 15px; }
|
||||
}
|
||||
</style>
|
||||
180
resources/js/pages/settings/Security.vue
Normal file
180
resources/js/pages/settings/Security.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<script setup lang="ts">
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
import UserLayout from '../../layouts/user/userlayout.vue';
|
||||
|
||||
type Sess = { id: string; ip: string|null; user_agent: string|null; last_activity: number; current: boolean };
|
||||
|
||||
const sessions = ref<Sess[]>([]);
|
||||
const loading = ref(true);
|
||||
const error = ref<string|null>(null);
|
||||
|
||||
async function loadSessions() {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const res = await fetch('/settings/security/sessions', { headers: { 'X-Requested-With':'XMLHttpRequest' } });
|
||||
if (!res.ok) throw new Error('Failed to load sessions');
|
||||
const j = await res.json();
|
||||
sessions.value = j.data || [];
|
||||
} catch (e: any) {
|
||||
error.value = e?.message || 'Failed to load sessions';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
|
||||
}
|
||||
}
|
||||
|
||||
async function revoke(id: string) {
|
||||
if (!confirm('Revoke this session?')) return;
|
||||
const res = await fetch(`/settings/security/sessions/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'X-Requested-With':'XMLHttpRequest', 'X-CSRF-TOKEN': (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content || '' },
|
||||
});
|
||||
if (res.ok) {
|
||||
await loadSessions();
|
||||
}
|
||||
}
|
||||
|
||||
function fmtTime(ts: number) {
|
||||
try { return new Date(ts * 1000).toLocaleString(); } catch { return String(ts); }
|
||||
}
|
||||
|
||||
onMounted(loadSessions);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UserLayout>
|
||||
<Head title="Security" />
|
||||
<section class="content">
|
||||
<div class="wrap">
|
||||
<div class="main-panel">
|
||||
<header class="page-head">
|
||||
<div class="head-flex">
|
||||
<div class="title-group">
|
||||
<div class="title">Security Center</div>
|
||||
<p class="subtitle">Manage sessions, change your password, and configure two-factor authentication.</p>
|
||||
</div>
|
||||
<div class="security-badge">
|
||||
<i data-lucide="shield"></i>
|
||||
<span>Protection Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="settings-nav">
|
||||
<a href="/settings/profile" class="nav-item"><i data-lucide="user"></i> Profile</a>
|
||||
<a href="/settings/kyc" class="nav-item"><i data-lucide="file-check"></i> KYC</a>
|
||||
<a href="/settings/security" class="nav-item active"><i data-lucide="lock"></i> Security</a>
|
||||
<a href="/settings/two-factor" class="nav-item"><i data-lucide="shield"></i> 2FA</a>
|
||||
</div>
|
||||
|
||||
<div class="settings-body">
|
||||
<div class="left-col">
|
||||
<div class="card">
|
||||
<div class="card-head"><i data-lucide="monitor-smartphone"></i> Active sessions</div>
|
||||
<div v-if="loading" class="empty">
|
||||
<div class="spinner"></div>
|
||||
<span>Loading sessions...</span>
|
||||
</div>
|
||||
<div v-else-if="error" class="err">{{ error }}</div>
|
||||
<div v-else>
|
||||
<div v-if="!sessions.length" class="empty">No active sessions found.</div>
|
||||
<div v-for="s in sessions" :key="s.id" class="sess">
|
||||
<div class="meta">
|
||||
<div class="ua">{{ s.user_agent || 'Unknown device' }}</div>
|
||||
<div class="ip">IP: {{ s.ip || '—' }}</div>
|
||||
</div>
|
||||
<div class="meta2">
|
||||
<span class="muted">Last activity: {{ fmtTime(s.last_activity) }}</span>
|
||||
<span v-if="s.current" class="badge cur">Current session</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn danger" :disabled="s.current" @click="revoke(s.id)">Revoke</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row2">
|
||||
<div class="card hover-effect">
|
||||
<div class="card-head"><i data-lucide="key-round"></i> Change password</div>
|
||||
<p class="muted">Use a strong and unique password. You will be asked for your current password.</p>
|
||||
<a class="btn" href="/settings/password">Change password</a>
|
||||
</div>
|
||||
<div class="card hover-effect">
|
||||
<div class="card-head"><i data-lucide="shield"></i> Two-Factor Authentication (2FA)</div>
|
||||
<p class="muted">Protect your account with a second step, like an authenticator app.</p>
|
||||
<a class="btn" href="/settings/two-factor">Manage 2FA</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="right-col">
|
||||
<div class="side-card">
|
||||
<div class="card-head">Tips</div>
|
||||
<ul>
|
||||
<li>Enable 2FA for better security.</li>
|
||||
<li>Review sessions regularly and revoke unknown devices.</li>
|
||||
<li>Never share your password or 2FA codes.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</UserLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:global(:root) { --bg-card:#0a0a0a; --border:#151515; --cyan:#00f2ff; --magenta:#ff007a; --green:#00ff9d; }
|
||||
.content { padding: 30px; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
|
||||
.wrap { max-width: 1100px; margin: 0 auto; }
|
||||
.main-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
|
||||
.page-head { padding: 25px 30px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(0,242,255,0.03), transparent); }
|
||||
.head-flex { display: flex; justify-content: space-between; align-items: center; }
|
||||
.title { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 3px; text-transform: uppercase; }
|
||||
.subtitle { color: #555; font-size: 12px; margin-top: 4px; font-weight: 600; }
|
||||
.security-badge { display:flex; align-items:center; gap:8px; color: var(--green); background: rgba(0,255,157,0.05); padding:6px 14px; border-radius:50px; border:1px solid rgba(0,255,157,0.1); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:1px; }
|
||||
|
||||
/* Navigation */
|
||||
.settings-nav { display: flex; gap: 5px; padding: 15px 30px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); overflow-x: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #666; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: var(--cyan); background: rgba(0,242,255,0.1); }
|
||||
.nav-item i { width: 14px; }
|
||||
|
||||
.settings-body { padding: 24px 28px; display:grid; grid-template-columns: 1.6fr .8fr; gap: 24px; }
|
||||
.left-col { display: flex; flex-direction: column; gap: 18px; animation: slide-up 0.6s cubic-bezier(0.2, 0, 0, 1) backwards; animation-delay: 0.1s; }
|
||||
.right-col { animation: slide-up 0.6s cubic-bezier(0.2, 0, 0, 1) backwards; animation-delay: 0.2s; }
|
||||
|
||||
.card { border: 1px solid var(--border); background: #0a0a0a; border-radius: 14px; padding: 14px; display: grid; gap: 12px; transition: 0.3s; }
|
||||
.card.hover-effect:hover { border-color: #333; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
|
||||
.card-head { color: #fff; font-weight: 900; display:flex; align-items:center; gap:8px; }
|
||||
.row2 { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
|
||||
|
||||
.empty { color: #666; display: flex; align-items: center; gap: 10px; padding: 20px; justify-content: center; }
|
||||
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.1); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
|
||||
.err { color: #ff5b5b; }
|
||||
|
||||
.sess { border: 1px solid #151515; background: #050505; border-radius: 12px; padding: 12px; display: grid; gap: 8px; transition: 0.3s; animation: fade-in 0.5s backwards; }
|
||||
.sess:hover { border-color: #333; }
|
||||
.meta { display:flex; justify-content:space-between; gap:10px; color:#ddd; }
|
||||
.meta2 { display:flex; gap:14px; color:#666; font-size:12px; align-items:center; }
|
||||
.badge.cur { font-size:10px; font-weight:900; padding:3px 8px; border-radius:999px; border:1px solid var(--border); color:#bbb; background:#0b0b0b; }
|
||||
.actions { display:flex; gap:8px; }
|
||||
.btn { background: var(--cyan); color: #000; border: none; border-radius: 10px; padding: 10px 14px; font-weight: 900; cursor: pointer; text-decoration: none; text-align: center; display: inline-block; transition: 0.3s; }
|
||||
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,242,255,0.2); }
|
||||
.btn.danger { background: #ff5b5b; color: #000; }
|
||||
.btn.danger:hover { box-shadow: 0 5px 15px rgba(255,91,91,0.2); }
|
||||
|
||||
.side-card { border: 1px solid var(--border); background: #0a0a0a; border-radius: 14px; padding: 16px; position: sticky; top: 20px; }
|
||||
.side-card ul { padding-left: 16px; color:#9aa0a6; }
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
@media (max-width: 900px) { .settings-body { grid-template-columns: 1fr; padding: 16px; } .row2 { grid-template-columns: 1fr; } .side-card { position: static; } .settings-nav { padding: 10px 15px; } }
|
||||
</style>
|
||||
151
resources/js/pages/settings/TwoFactor.vue
Normal file
151
resources/js/pages/settings/TwoFactor.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<script setup lang="ts">
|
||||
import { Form, Head } from '@inertiajs/vue3';
|
||||
import { onMounted, onUnmounted, ref, nextTick } from 'vue';
|
||||
import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
|
||||
import { disable, enable } from '@/routes/two-factor';
|
||||
import UserLayout from '../../layouts/user/userlayout.vue';
|
||||
import TwoFactorRecoveryCodes from '@/components/TwoFactorRecoveryCodes.vue';
|
||||
import TwoFactorSetupModal from '@/components/TwoFactorSetupModal.vue';
|
||||
|
||||
type Props = {
|
||||
requiresConfirmation?: boolean;
|
||||
twoFactorEnabled?: boolean;
|
||||
};
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
requiresConfirmation: false,
|
||||
twoFactorEnabled: false,
|
||||
});
|
||||
|
||||
const { hasSetupData, clearTwoFactorAuthData } = useTwoFactorAuth();
|
||||
const showSetupModal = ref<boolean>(false);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearTwoFactorAuthData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UserLayout>
|
||||
<Head title="Two-Factor Authentication" />
|
||||
<section class="content">
|
||||
<div class="wrap">
|
||||
<div class="main-panel">
|
||||
<header class="page-head">
|
||||
<div class="head-flex">
|
||||
<div class="title-group">
|
||||
<div class="title">Two-Factor Authentication</div>
|
||||
<p class="subtitle">Manage your two-factor authentication settings</p>
|
||||
</div>
|
||||
<div class="security-badge">
|
||||
<i data-lucide="shield-check"></i>
|
||||
<span v-if="twoFactorEnabled">Enabled</span>
|
||||
<span v-else>Disabled</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="settings-nav">
|
||||
<a href="/settings/profile" class="nav-item"><i data-lucide="user"></i> Profile</a>
|
||||
<a href="/settings/kyc" class="nav-item"><i data-lucide="file-check"></i> KYC</a>
|
||||
<a href="/settings/security" class="nav-item"><i data-lucide="lock"></i> Security</a>
|
||||
<a href="/settings/two-factor" class="nav-item active"><i data-lucide="shield"></i> 2FA</a>
|
||||
</div>
|
||||
|
||||
<div class="tf-body">
|
||||
<div v-if="!twoFactorEnabled" class="section">
|
||||
<div class="badge bad">Disabled</div>
|
||||
|
||||
<p class="muted">
|
||||
When you enable two-factor authentication, you will be prompted for a secure pin during login.
|
||||
This pin can be retrieved from a TOTP-supported application on your phone.
|
||||
</p>
|
||||
|
||||
<div class="actions">
|
||||
<button v-if="hasSetupData" class="btn" @click="showSetupModal = true">
|
||||
<i data-lucide="shield-check"></i> Continue Setup
|
||||
</button>
|
||||
<Form v-else v-bind="enable.form()" @success="showSetupModal = true" #default="{ processing }">
|
||||
<button class="btn" type="submit" :disabled="processing">
|
||||
<i data-lucide="shield-check"></i> Enable 2FA
|
||||
</button>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="section">
|
||||
<div class="badge ok">Enabled</div>
|
||||
|
||||
<p class="muted">
|
||||
With two-factor authentication enabled, you will be prompted for a secure, random pin during login,
|
||||
which you can retrieve from the TOTP-supported application on your phone.
|
||||
</p>
|
||||
|
||||
<TwoFactorRecoveryCodes />
|
||||
|
||||
<div class="actions">
|
||||
<Form v-bind="disable.form()" #default="{ processing }">
|
||||
<button class="btn danger" type="submit" :disabled="processing">
|
||||
<i data-lucide="shield"></i> Disable 2FA
|
||||
</button>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TwoFactorSetupModal
|
||||
v-model:isOpen="showSetupModal"
|
||||
:requiresConfirmation="requiresConfirmation"
|
||||
:twoFactorEnabled="twoFactorEnabled"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</UserLayout>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
:global(:root) { --bg-card:#0a0a0a; --border:#151515; --cyan:#00f2ff; --magenta:#ff007a; --green:#00ff9d; }
|
||||
.content { padding: 30px; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
|
||||
.wrap { max-width: 900px; margin: 0 auto; }
|
||||
.main-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
|
||||
.page-head { padding: 25px 30px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(0,242,255,0.03), transparent); }
|
||||
.head-flex { display: flex; justify-content: space-between; align-items: center; }
|
||||
.title { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 3px; text-transform: uppercase; }
|
||||
.subtitle { color: #555; font-size: 12px; margin-top: 4px; font-weight: 600; }
|
||||
.security-badge { display:flex; align-items:center; gap:8px; color: var(--green); background: rgba(0,255,157,0.05); padding:6px 14px; border-radius:50px; border:1px solid rgba(0,255,157,0.1); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:1px; }
|
||||
|
||||
/* Navigation */
|
||||
.settings-nav { display: flex; gap: 5px; padding: 15px 30px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.2); overflow-x: auto; }
|
||||
.nav-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #666; text-transform: uppercase; letter-spacing: 1px; transition: 0.2s; text-decoration: none; }
|
||||
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.05); }
|
||||
.nav-item.active { color: var(--cyan); background: rgba(0,242,255,0.1); }
|
||||
.nav-item i { width: 14px; }
|
||||
|
||||
.tf-body { padding: 24px 28px; display: grid; gap: 22px; }
|
||||
.section { border: 1px solid var(--border); background: #0a0a0a; border-radius: 14px; padding: 18px; display: grid; gap: 12px; animation: slide-up 0.6s cubic-bezier(0.2, 0, 0, 1) backwards; }
|
||||
.badge { width: max-content; font-size:10px; font-weight:900; text-transform: uppercase; letter-spacing:1px; padding:6px 10px; border-radius:999px; border:1px solid #222; }
|
||||
.badge.ok { color:#000; background: var(--green); border-color: rgba(0,255,157,.35); }
|
||||
.badge.bad { color:#000; background: #ff5b5b; border-color: rgba(255,91,91,.35); }
|
||||
|
||||
.muted { color:#9aa0a6; }
|
||||
.actions { display:flex; gap:10px; align-items:center; }
|
||||
.btn { background: var(--cyan); color: #000; border: none; border-radius: 12px; padding: 12px 16px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.3s; box-shadow: 0 0 20px rgba(0,242,255,0.2); }
|
||||
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,242,255,0.35); }
|
||||
.btn:disabled { opacity:.6; cursor:not-allowed; }
|
||||
.btn.danger { background:#ff5b5b; color:#000; box-shadow: 0 0 20px rgba(255,91,91,.25); }
|
||||
|
||||
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.wrap { max-width: 100%; }
|
||||
.tf-body { padding: 18px; }
|
||||
.settings-nav { padding: 10px 15px; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user