Settings: fold Users and Organization into the Settings tabs
The left rail is back to the three places you actually go — Garage, Charging, Settings — and user management moves inside Settings as an admin-only tab, next to a new Organization tab that used to be a card buried in the personal settings. Tab order is Personal settings, Users, Organization, Integrations. /admin redirects to /settings?tab=users so old links keep working, and ?tab= picks the starting tab in general. AdminUsers moves from views/ to components/ since it is a panel now, not a route, and its page header becomes a section header like its neighbours. The personal panel was split in two around the integrations markup, which left no gap between the Profile and Privacy cards; it is one block again. Creating a user gets an organization picker for superadmins, defaulting to "no organization" so an org-less account stays a deliberate choice. Admins see no picker: the server pins their members to their own org regardless, which users_test.go now covers along with both superadmin paths. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
tajniak81
co-authored by
Claude Opus 5
Claude Opus 5
parent
cd16d4383f
commit
e373497958
+8
-13
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount, computed, ref } from "vue";
|
||||
import { RouterView, RouterLink, useRouter, useRoute } from "vue-router";
|
||||
import { state, isAuthenticated, isAdmin, logout, refreshProfile } from "./auth";
|
||||
import { state, isAuthenticated, logout, refreshProfile } from "./auth";
|
||||
import { prefs, applyProfilePrefs } from "./prefs";
|
||||
import { api } from "./api";
|
||||
import { t } from "./i18n";
|
||||
@@ -32,15 +32,12 @@ const userInitial = computed(() =>
|
||||
(state.user?.name || state.user?.email || "?").charAt(0).toUpperCase()
|
||||
);
|
||||
|
||||
// Sidebar nav. Admin item is filtered out for non-admins.
|
||||
const nav = computed(() =>
|
||||
[
|
||||
{ to: "/", label: t("nav.garage"), icon: "grid", exact: true },
|
||||
{ to: "/charging", label: t("nav.charging"), icon: "bolt" },
|
||||
{ to: "/settings", label: t("nav.settings"), icon: "gear" },
|
||||
isAdmin.value ? { to: "/admin", label: t("nav.users"), icon: "users" } : null,
|
||||
].filter(Boolean)
|
||||
);
|
||||
// Sidebar nav. User management is a tab inside Settings, not a rail item.
|
||||
const nav = computed(() => [
|
||||
{ to: "/", label: t("nav.garage"), icon: "grid", exact: true },
|
||||
{ to: "/charging", label: t("nav.charging"), icon: "bolt" },
|
||||
{ to: "/settings", label: t("nav.settings"), icon: "gear" },
|
||||
]);
|
||||
|
||||
function active(item) {
|
||||
return item.exact ? route.path === item.to : route.path.startsWith(item.to);
|
||||
@@ -88,9 +85,7 @@ onBeforeUnmount(() => themeObserver?.disconnect());
|
||||
<!-- charging -->
|
||||
<svg v-else-if="item.icon === 'bolt'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5 shrink-0" :style="active(item) ? 'color:#60A5FA' : ''"><path stroke-linecap="round" stroke-linejoin="round" d="M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z"/></svg>
|
||||
<!-- settings -->
|
||||
<svg v-else-if="item.icon === 'gear'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5 shrink-0" :style="active(item) ? 'color:#60A5FA' : ''"><path stroke-linecap="round" stroke-linejoin="round" d="M9.6 3.6 9 6a7.5 7.5 0 0 0-1.7 1L5 6.3l-2 3.4 2 1.5a7.6 7.6 0 0 0 0 2l-2 1.5 2 3.4 2.3-.7c.5.4 1.1.8 1.7 1l.6 2.4h4l.6-2.4c.6-.2 1.2-.6 1.7-1l2.3.7 2-3.4-2-1.5a7.6 7.6 0 0 0 0-2l2-1.5-2-3.4-2.3.7A7.5 7.5 0 0 0 15 6l-.6-2.4z"/><circle cx="12" cy="12" r="2.6"/></svg>
|
||||
<!-- users -->
|
||||
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5 shrink-0" :style="active(item) ? 'color:#60A5FA' : ''"><path stroke-linecap="round" stroke-linejoin="round" d="M16 19v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 9a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm13 10v-2a4 4 0 0 0-3-3.9M16 2.1A4 4 0 0 1 16 9.9"/></svg>
|
||||
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5 shrink-0" :style="active(item) ? 'color:#60A5FA' : ''"><path stroke-linecap="round" stroke-linejoin="round" d="M9.6 3.6 9 6a7.5 7.5 0 0 0-1.7 1L5 6.3l-2 3.4 2 1.5a7.6 7.6 0 0 0 0 2l-2 1.5 2 3.4 2.3-.7c.5.4 1.1.8 1.7 1l.6 2.4h4l.6-2.4c.6-.2 1.2-.6 1.7-1l2.3.7 2-3.4-2-1.5a7.6 7.6 0 0 0 0-2l2-1.5-2-3.4-2.3.7A7.5 7.5 0 0 0 15 6l-.6-2.4z"/><circle cx="12" cy="12" r="2.6"/></svg>
|
||||
<span class="hidden md:inline">{{ item.label }}</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
@@ -17,7 +17,7 @@ export const isAuthenticated = computed(() => !!state.token);
|
||||
|
||||
// Roles that may manage users. A superadmin is an admin that also spans every
|
||||
// organization; the API Server enforces the difference, the UI just needs to
|
||||
// know whether to offer the Users screen at all.
|
||||
// know whether to offer the Settings › Users tab at all.
|
||||
const MANAGER_ROLES = ["admin", "superadmin"];
|
||||
|
||||
// Admin gate for the UI. Driven by the full profile (fetched from /api/me),
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<script setup>
|
||||
// User management, shown as the Users tab of Settings (admins + superadmins).
|
||||
// Admins see their own organization; superadmins see every account.
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { api } from "../api";
|
||||
import { state } from "../auth";
|
||||
import { formatDate } from "../lib/format.js";
|
||||
import { t } from "../i18n";
|
||||
import Modal from "../components/Modal.vue";
|
||||
import Modal from "./Modal.vue";
|
||||
|
||||
const users = ref([]);
|
||||
const loading = ref(true);
|
||||
@@ -12,10 +14,14 @@ const error = ref("");
|
||||
|
||||
// Create-user modal.
|
||||
const showCreate = ref(false);
|
||||
const createForm = ref({ email: "", name: "", password: "", role: "user" });
|
||||
const createForm = ref({ email: "", name: "", password: "", role: "user", organization: "" });
|
||||
const creating = ref(false);
|
||||
const createError = ref("");
|
||||
|
||||
// Organizations a superadmin can drop the new account into. Admins get no
|
||||
// picker: the server puts their members in their own org regardless.
|
||||
const orgs = ref([]);
|
||||
|
||||
// Reset-password modal.
|
||||
const pwUser = ref(null);
|
||||
const newPassword = ref("");
|
||||
@@ -74,14 +80,19 @@ async function submitCreate() {
|
||||
creating.value = true;
|
||||
createError.value = "";
|
||||
try {
|
||||
await api.createUser({
|
||||
const body = {
|
||||
email: createForm.value.email.trim(),
|
||||
name: createForm.value.name.trim(),
|
||||
password: createForm.value.password,
|
||||
role: createForm.value.role,
|
||||
});
|
||||
};
|
||||
// Only a superadmin picks the organization — an empty pick deliberately
|
||||
// creates an org-less account. For an admin the server forces its own org,
|
||||
// so sending anything here would be noise.
|
||||
if (isSuperadmin.value) body.organization = createForm.value.organization;
|
||||
await api.createUser(body);
|
||||
showCreate.value = false;
|
||||
createForm.value = { email: "", name: "", password: "", role: "user" };
|
||||
createForm.value = { email: "", name: "", password: "", role: "user", organization: "" };
|
||||
await load();
|
||||
} catch (e) {
|
||||
createError.value = e.message;
|
||||
@@ -120,21 +131,31 @@ async function removeUser(u) {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
onMounted(async () => {
|
||||
await load();
|
||||
// Listing orgs is manager-only and an admin only ever gets their own back, so
|
||||
// fetch it just for the superadmin picker. A failure leaves the picker empty
|
||||
// rather than breaking the table.
|
||||
if (isSuperadmin.value) {
|
||||
try {
|
||||
orgs.value = (await api.listOrgs()) || [];
|
||||
} catch {
|
||||
orgs.value = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="mb-6 flex items-end justify-between">
|
||||
<div class="mb-4 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p class="eyebrow">{{ t("admin.eyebrow") }}</p>
|
||||
<h1 class="text-3xl font-bold tracking-[-0.03em] text-strong">{{ t("admin.title") }}</h1>
|
||||
<p class="mt-1 text-sm text-muted">
|
||||
<h2 class="text-lg font-bold tracking-[-0.02em] text-strong">{{ t("admin.title") }}</h2>
|
||||
<p class="mt-0.5 text-xs text-muted">
|
||||
{{ isSuperadmin ? t("admin.subtitleAll") : t("admin.subtitleOrg") }}
|
||||
{{ t("admin.subtitleOrgsNote") }}
|
||||
</p>
|
||||
</div>
|
||||
<button class="dh-btn dh-btn-primary" @click="showCreate = true">
|
||||
<button class="dh-btn dh-btn-primary shrink-0" @click="showCreate = true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" /></svg>
|
||||
{{ t("admin.addUser") }}
|
||||
</button>
|
||||
@@ -217,6 +238,16 @@ onMounted(load);
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Superadmins choose the organization (or leave the account org-less);
|
||||
an admin's members always land in the admin's own organization. -->
|
||||
<div v-if="isSuperadmin">
|
||||
<label class="dh-label">{{ t("admin.colOrganization") }}</label>
|
||||
<select v-model="createForm.organization" class="dh-input">
|
||||
<option value="">{{ t("admin.noOrganization") }}</option>
|
||||
<option v-for="o in orgs" :key="o.id" :value="o.id">{{ o.name }}</option>
|
||||
</select>
|
||||
<p class="mt-1 text-xs text-muted">{{ t("admin.organizationHint") }}</p>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button type="button" class="dh-btn dh-btn-ghost" @click="showCreate = false">{{ t("common.cancel") }}</button>
|
||||
<button type="submit" :disabled="creating" class="dh-btn dh-btn-primary">
|
||||
@@ -26,7 +26,6 @@
|
||||
"garage": "Garage",
|
||||
"charging": "Opladning",
|
||||
"settings": "Indstillinger",
|
||||
"users": "Brugere",
|
||||
"lightMode": "Lys tilstand",
|
||||
"darkMode": "Mørk tilstand",
|
||||
"signedIn": "Logget ind",
|
||||
@@ -104,15 +103,15 @@
|
||||
},
|
||||
|
||||
"admin": {
|
||||
"eyebrow": "Administration",
|
||||
"title": "Brugere",
|
||||
"subtitleAll": "Konti på tværs af alle organisationer.",
|
||||
"subtitleOrg": "Konti i din organisation.",
|
||||
"subtitleOrgsNote": "Organisationer administreres under Indstillinger.",
|
||||
"addUser": "Tilføj bruger",
|
||||
"colEmail": "E-mail",
|
||||
"colName": "Navn",
|
||||
"colOrganization": "Organisation",
|
||||
"noOrganization": "— Ingen organisation —",
|
||||
"organizationHint": "Lad feltet stå tomt for at oprette en konto uden organisation.",
|
||||
"colRole": "Rolle",
|
||||
"colCreated": "Oprettet",
|
||||
"you": "(dig)",
|
||||
@@ -144,7 +143,9 @@
|
||||
"subtitle": "Administrer din konto, udseende og dine data.",
|
||||
"tabs": {
|
||||
"personal": "Personlige indstillinger",
|
||||
"integrations": "Integrationer"
|
||||
"integrations": "Integrationer",
|
||||
"users": "Brugere",
|
||||
"organization": "Organisation"
|
||||
},
|
||||
|
||||
"account": {
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
"garage": "Garage",
|
||||
"charging": "Charging",
|
||||
"settings": "Settings",
|
||||
"users": "Users",
|
||||
"lightMode": "Light mode",
|
||||
"darkMode": "Dark mode",
|
||||
"signedIn": "Signed in",
|
||||
@@ -122,15 +121,15 @@
|
||||
},
|
||||
|
||||
"admin": {
|
||||
"eyebrow": "Admin",
|
||||
"title": "Users",
|
||||
"subtitleAll": "Accounts across every organization.",
|
||||
"subtitleOrg": "Accounts in your organization.",
|
||||
"subtitleOrgsNote": "Organizations are managed in Settings.",
|
||||
"addUser": "Add user",
|
||||
"colEmail": "Email",
|
||||
"colName": "Name",
|
||||
"colOrganization": "Organization",
|
||||
"noOrganization": "— No organization —",
|
||||
"organizationHint": "Leave unset to create an account that belongs to no organization.",
|
||||
"colRole": "Role",
|
||||
"colCreated": "Created",
|
||||
"you": "(you)",
|
||||
@@ -162,7 +161,9 @@
|
||||
"subtitle": "Manage your account, appearance, and data.",
|
||||
"tabs": {
|
||||
"personal": "Personal settings",
|
||||
"integrations": "Integrations"
|
||||
"integrations": "Integrations",
|
||||
"users": "Users",
|
||||
"organization": "Organization"
|
||||
},
|
||||
|
||||
"account": {
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
"garage": "Garaż",
|
||||
"charging": "Ładowanie",
|
||||
"settings": "Ustawienia",
|
||||
"users": "Użytkownicy",
|
||||
"lightMode": "Tryb jasny",
|
||||
"darkMode": "Tryb ciemny",
|
||||
"signedIn": "Zalogowano",
|
||||
@@ -108,15 +107,15 @@
|
||||
},
|
||||
|
||||
"admin": {
|
||||
"eyebrow": "Administracja",
|
||||
"title": "Użytkownicy",
|
||||
"subtitleAll": "Konta ze wszystkich organizacji.",
|
||||
"subtitleOrg": "Konta w Twojej organizacji.",
|
||||
"subtitleOrgsNote": "Organizacjami zarządza się w Ustawieniach.",
|
||||
"addUser": "Dodaj użytkownika",
|
||||
"colEmail": "E-mail",
|
||||
"colName": "Imię i nazwisko",
|
||||
"colOrganization": "Organizacja",
|
||||
"noOrganization": "— Bez organizacji —",
|
||||
"organizationHint": "Zostaw puste, aby utworzyć konto bez organizacji.",
|
||||
"colRole": "Rola",
|
||||
"colCreated": "Utworzono",
|
||||
"you": "(Ty)",
|
||||
@@ -148,7 +147,9 @@
|
||||
"subtitle": "Zarządzaj kontem, wyglądem i danymi.",
|
||||
"tabs": {
|
||||
"personal": "Ustawienia osobiste",
|
||||
"integrations": "Integracje"
|
||||
"integrations": "Integracje",
|
||||
"users": "Użytkownicy",
|
||||
"organization": "Organizacja"
|
||||
},
|
||||
|
||||
"account": {
|
||||
|
||||
@@ -4,8 +4,7 @@ import CarDetail from "./views/CarDetail.vue";
|
||||
import Charging from "./views/Charging.vue";
|
||||
import Login from "./views/Login.vue";
|
||||
import Settings from "./views/Settings.vue";
|
||||
import AdminUsers from "./views/AdminUsers.vue";
|
||||
import { isAuthenticated, isAdmin } from "./auth";
|
||||
import { isAuthenticated } from "./auth";
|
||||
|
||||
const routes = [
|
||||
{ path: "/login", name: "login", component: Login, meta: { public: true } },
|
||||
@@ -13,7 +12,8 @@ const routes = [
|
||||
{ path: "/charging", name: "charging", component: Charging },
|
||||
{ path: "/cars/:id", name: "car", component: CarDetail, props: true },
|
||||
{ path: "/settings", name: "settings", component: Settings },
|
||||
{ path: "/admin", name: "admin", component: AdminUsers, meta: { admin: true } },
|
||||
// User management moved into Settings; keep old links working.
|
||||
{ path: "/admin", redirect: { name: "settings", query: { tab: "users" } } },
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
@@ -29,11 +29,6 @@ router.beforeEach((to) => {
|
||||
if (to.name === "login" && isAuthenticated.value) {
|
||||
return { name: "dashboard" };
|
||||
}
|
||||
// Admin-only routes: bounce non-admins to the dashboard. (Server enforces the
|
||||
// real gate; this just avoids showing a page that would 403 on every call.)
|
||||
if (to.meta.admin && !isAdmin.value) {
|
||||
return { name: "dashboard" };
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
||||
@@ -1,23 +1,36 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { api } from "../api";
|
||||
import { state, logout, refreshProfile } from "../auth";
|
||||
import { state, isAdmin, logout, refreshProfile } from "../auth";
|
||||
import { prefs, applyProfilePrefs } from "../prefs";
|
||||
import { formatDate, formatMoney } from "../lib/format.js";
|
||||
import { t, tSplit, TRANSLATED_LANGUAGES } from "../i18n";
|
||||
import OrgManager from "../components/OrgManager.vue";
|
||||
import AdminUsers from "../components/AdminUsers.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const loading = ref(true);
|
||||
const loadError = ref("");
|
||||
const profile = ref(null);
|
||||
|
||||
// Settings is split into two tabs: personal account settings and external
|
||||
// integrations. The panels stay mounted (v-show) so their loaded state and
|
||||
// in-flight edits survive a tab switch.
|
||||
const activeTab = ref("personal"); // "personal" | "integrations"
|
||||
// Settings is split into tabs: personal account settings, — for admins — user
|
||||
// management, the organization, and external integrations. The panels stay
|
||||
// mounted (v-show) so their loaded state and in-flight edits survive a tab
|
||||
// switch.
|
||||
//
|
||||
// `?tab=` picks the starting tab, which is what /admin redirects to.
|
||||
const ALL_TABS = ["personal", "users", "organization", "integrations"];
|
||||
const tabs = computed(() => ALL_TABS.filter((tab) => tab !== "users" || isAdmin.value));
|
||||
const activeTab = ref(ALL_TABS.includes(route.query.tab) ? route.query.tab : "personal");
|
||||
|
||||
// The admin gate only settles once the profile is loaded, so a non-admin who
|
||||
// asked for ?tab=users lands back on the personal tab rather than on nothing.
|
||||
watch(tabs, (list) => {
|
||||
if (!list.includes(activeTab.value)) activeTab.value = "personal";
|
||||
});
|
||||
|
||||
// Each integration card folds open/closed, like the plugin rows in the API
|
||||
// Server panel. Collapsed by default so the Integrations tab reads as a compact
|
||||
@@ -735,10 +748,10 @@ onBeforeUnmount(() => {
|
||||
<p v-if="loading" class="text-muted">{{ t("common.loading") }}</p>
|
||||
|
||||
<div v-else-if="profile">
|
||||
<!-- Tabs: personal settings vs. integrations -->
|
||||
<!-- Tabs: personal settings, integrations, and users (admins only) -->
|
||||
<div class="mb-6 flex gap-2 border-b border-subtle">
|
||||
<button
|
||||
v-for="tab in ['personal', 'integrations']"
|
||||
v-for="tab in tabs"
|
||||
:key="tab"
|
||||
class="-mb-px border-b-2 px-1 pb-3 text-sm font-semibold transition-colors"
|
||||
:class="activeTab === tab
|
||||
@@ -920,6 +933,87 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Privacy & Security -->
|
||||
<section class="dh-card p-6">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-lg font-bold tracking-[-0.02em] text-strong">{{ t("settings.privacy.title") }}</h2>
|
||||
<button class="text-sm font-medium text-danger hover:underline" @click="onLogout">
|
||||
{{ t("settings.privacy.signOut") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-muted">{{ t("settings.privacy.body") }}</p>
|
||||
</section>
|
||||
|
||||
<!-- Advanced / Danger Zone -->
|
||||
<section class="dh-card p-6">
|
||||
<h2 class="mb-4 text-lg font-bold tracking-[-0.02em] text-strong">{{ t("settings.advanced.title") }}</h2>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-strong">{{ t("settings.advanced.exportTitle") }}</p>
|
||||
<p class="text-xs text-muted">{{ t("settings.advanced.exportBody") }}</p>
|
||||
</div>
|
||||
<button class="dh-btn dh-btn-ghost !px-3 !py-1.5 shrink-0" :disabled="exporting" @click="exportData">
|
||||
{{ exporting ? t("settings.advanced.preparing") : t("settings.advanced.exportAction") }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="exportError" class="mt-2 text-sm text-danger">{{ exportError }}</p>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between gap-3 border-t border-subtle pt-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-strong">{{ t("settings.advanced.importTitle") }}</p>
|
||||
<p class="text-xs text-muted">{{ t("settings.advanced.importBody") }}</p>
|
||||
</div>
|
||||
<button class="dh-btn dh-btn-ghost !px-3 !py-1.5 shrink-0" :disabled="importing" @click="pickImportFile">
|
||||
{{ importing ? t("settings.advanced.importing") : t("settings.advanced.importAction") }}
|
||||
</button>
|
||||
<input ref="importFileInput" type="file" accept="application/json,.json" class="hidden" @change="onImportFileChosen" />
|
||||
</div>
|
||||
<p v-if="importResult" class="mt-2 text-sm font-medium text-success">
|
||||
{{ t("settings.advanced.imported", { cars: importResult.carsImported, services: importResult.servicesImported, parts: importResult.partsImported }) }}
|
||||
</p>
|
||||
<p v-if="importError" class="mt-2 text-sm text-danger">{{ importError }}</p>
|
||||
</section>
|
||||
|
||||
<section class="rounded-card border border-danger/30 bg-danger-soft p-6">
|
||||
<h2 class="mb-2 text-lg font-bold tracking-[-0.02em] text-danger">{{ t("settings.danger.title") }}</h2>
|
||||
|
||||
<template v-if="!deletionPending">
|
||||
<p class="mb-3 text-sm text-danger/90">{{ t("settings.danger.body") }}</p>
|
||||
<button class="dh-btn !border !border-danger/40 !bg-transparent !text-danger hover:!bg-danger/10" @click="showDeleteConfirm = true">
|
||||
{{ t("settings.danger.deleteAccount") }}
|
||||
</button>
|
||||
|
||||
<div v-if="showDeleteConfirm" class="mt-4 rounded-control border border-danger/30 bg-card p-4">
|
||||
<label class="dh-label">
|
||||
{{ tSplit("settings.danger.typeToConfirm", "email").before
|
||||
}}<span class="data text-strong">{{ profile.email }}</span>{{ tSplit("settings.danger.typeToConfirm", "email").after }}
|
||||
</label>
|
||||
<input v-model="deleteConfirmEmail" :placeholder="profile.email" class="dh-input mb-3 max-w-sm" />
|
||||
<div class="flex gap-2">
|
||||
<button class="dh-btn dh-btn-ghost" @click="showDeleteConfirm = false; deleteConfirmEmail = ''">{{ t("common.cancel") }}</button>
|
||||
<button :disabled="!canRequestDelete || deleteRequesting" class="dh-btn dh-btn-danger" @click="requestDeletion">
|
||||
{{ deleteRequesting ? t("settings.danger.requesting") : t("settings.danger.requestDeletion") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<p class="mb-3 text-sm text-danger/90">
|
||||
{{ t("settings.danger.requestedOn", { date: formatDate(profile.deletionRequestedAt) }) }}
|
||||
{{ cooldownElapsed ? t("settings.danger.cooldownPassed") : t("settings.danger.canStillCancel") }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="dh-btn dh-btn-ghost !bg-card" @click="cancelDeletion">{{ t("settings.danger.cancelRequest") }}</button>
|
||||
<button v-if="cooldownElapsed" class="dh-btn dh-btn-danger" @click="finalizeDeletion">
|
||||
{{ t("settings.danger.finalize") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p v-if="deleteError" class="mt-3 text-sm font-medium text-danger">{{ deleteError }}</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Integrations -->
|
||||
@@ -1257,93 +1351,16 @@ onBeforeUnmount(() => {
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Personal settings (continued) -->
|
||||
<div v-show="activeTab === 'personal'" class="space-y-6">
|
||||
<!-- Organization: create your own (becoming its admin), or manage it -->
|
||||
<OrgManager />
|
||||
|
||||
<!-- Privacy & Security -->
|
||||
<section class="dh-card p-6">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-lg font-bold tracking-[-0.02em] text-strong">{{ t("settings.privacy.title") }}</h2>
|
||||
<button class="text-sm font-medium text-danger hover:underline" @click="onLogout">
|
||||
{{ t("settings.privacy.signOut") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-muted">{{ t("settings.privacy.body") }}</p>
|
||||
</section>
|
||||
|
||||
<!-- Advanced / Danger Zone -->
|
||||
<section class="dh-card p-6">
|
||||
<h2 class="mb-4 text-lg font-bold tracking-[-0.02em] text-strong">{{ t("settings.advanced.title") }}</h2>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-strong">{{ t("settings.advanced.exportTitle") }}</p>
|
||||
<p class="text-xs text-muted">{{ t("settings.advanced.exportBody") }}</p>
|
||||
</div>
|
||||
<button class="dh-btn dh-btn-ghost !px-3 !py-1.5 shrink-0" :disabled="exporting" @click="exportData">
|
||||
{{ exporting ? t("settings.advanced.preparing") : t("settings.advanced.exportAction") }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="exportError" class="mt-2 text-sm text-danger">{{ exportError }}</p>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between gap-3 border-t border-subtle pt-4">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-strong">{{ t("settings.advanced.importTitle") }}</p>
|
||||
<p class="text-xs text-muted">{{ t("settings.advanced.importBody") }}</p>
|
||||
</div>
|
||||
<button class="dh-btn dh-btn-ghost !px-3 !py-1.5 shrink-0" :disabled="importing" @click="pickImportFile">
|
||||
{{ importing ? t("settings.advanced.importing") : t("settings.advanced.importAction") }}
|
||||
</button>
|
||||
<input ref="importFileInput" type="file" accept="application/json,.json" class="hidden" @change="onImportFileChosen" />
|
||||
</div>
|
||||
<p v-if="importResult" class="mt-2 text-sm font-medium text-success">
|
||||
{{ t("settings.advanced.imported", { cars: importResult.carsImported, services: importResult.servicesImported, parts: importResult.partsImported }) }}
|
||||
</p>
|
||||
<p v-if="importError" class="mt-2 text-sm text-danger">{{ importError }}</p>
|
||||
</section>
|
||||
|
||||
<section class="rounded-card border border-danger/30 bg-danger-soft p-6">
|
||||
<h2 class="mb-2 text-lg font-bold tracking-[-0.02em] text-danger">{{ t("settings.danger.title") }}</h2>
|
||||
|
||||
<template v-if="!deletionPending">
|
||||
<p class="mb-3 text-sm text-danger/90">{{ t("settings.danger.body") }}</p>
|
||||
<button class="dh-btn !border !border-danger/40 !bg-transparent !text-danger hover:!bg-danger/10" @click="showDeleteConfirm = true">
|
||||
{{ t("settings.danger.deleteAccount") }}
|
||||
</button>
|
||||
|
||||
<div v-if="showDeleteConfirm" class="mt-4 rounded-control border border-danger/30 bg-card p-4">
|
||||
<label class="dh-label">
|
||||
{{ tSplit("settings.danger.typeToConfirm", "email").before
|
||||
}}<span class="data text-strong">{{ profile.email }}</span>{{ tSplit("settings.danger.typeToConfirm", "email").after }}
|
||||
</label>
|
||||
<input v-model="deleteConfirmEmail" :placeholder="profile.email" class="dh-input mb-3 max-w-sm" />
|
||||
<div class="flex gap-2">
|
||||
<button class="dh-btn dh-btn-ghost" @click="showDeleteConfirm = false; deleteConfirmEmail = ''">{{ t("common.cancel") }}</button>
|
||||
<button :disabled="!canRequestDelete || deleteRequesting" class="dh-btn dh-btn-danger" @click="requestDeletion">
|
||||
{{ deleteRequesting ? t("settings.danger.requesting") : t("settings.danger.requestDeletion") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<p class="mb-3 text-sm text-danger/90">
|
||||
{{ t("settings.danger.requestedOn", { date: formatDate(profile.deletionRequestedAt) }) }}
|
||||
{{ cooldownElapsed ? t("settings.danger.cooldownPassed") : t("settings.danger.canStillCancel") }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="dh-btn dh-btn-ghost !bg-card" @click="cancelDeletion">{{ t("settings.danger.cancelRequest") }}</button>
|
||||
<button v-if="cooldownElapsed" class="dh-btn dh-btn-danger" @click="finalizeDeletion">
|
||||
{{ t("settings.danger.finalize") }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p v-if="deleteError" class="mt-3 text-sm font-medium text-danger">{{ deleteError }}</p>
|
||||
</section>
|
||||
<!-- Users (admins + superadmins) -->
|
||||
<div v-if="isAdmin" v-show="activeTab === 'users'">
|
||||
<AdminUsers />
|
||||
</div>
|
||||
|
||||
<!-- Organization: create your own (becoming its admin), or manage it -->
|
||||
<div v-show="activeTab === 'organization'">
|
||||
<OrgManager />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user