forked from jsnbuchanan/crowd-funder-for-time-pwa
git commit -m "feat: migrate IdentitySwitcherView.vue to Enhanced Triple Migration Pattern
- Replace databaseUtil/PlatformServiceFactory with PlatformServiceMixin - Add notification helpers + centralized constants for identity management - Extract button styling and account formatting to computed properties - Improve TypeScript typing (Account interface) - 6-minute migration achieving technical compliance - All identity switching and deletion features preserved"
This commit is contained in:
Matthew Raymer
@@ -45,7 +45,7 @@
|
||||
<li v-for="ident in otherIdentities" :key="ident.did">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div
|
||||
class="flex flex-grow items-center bg-slate-100 rounded-md px-4 py-3 mb-2 truncate cursor-pointer"
|
||||
:class="identityListItemClasses"
|
||||
@click="switchAccount(ident.did)"
|
||||
>
|
||||
<font-awesome
|
||||
@@ -87,13 +87,13 @@
|
||||
<router-link
|
||||
id="start-link"
|
||||
:to="{ name: 'start' }"
|
||||
class="block text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
|
||||
:class="primaryButtonClasses"
|
||||
>
|
||||
Add Another Identity…
|
||||
</router-link>
|
||||
<a
|
||||
href="#"
|
||||
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-8"
|
||||
:class="secondaryButtonClasses"
|
||||
@click="switchAccount(undefined)"
|
||||
>
|
||||
No Identity
|
||||
@@ -106,25 +106,92 @@ import { Router } from "vue-router";
|
||||
|
||||
import QuickNav from "../components/QuickNav.vue";
|
||||
import { NotificationIface } from "../constants/app";
|
||||
import * as databaseUtil from "../db/databaseUtil";
|
||||
import { retrieveAllAccountsMetadata } from "../libs/util";
|
||||
import { logger } from "../utils/logger";
|
||||
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
|
||||
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
||||
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
|
||||
import {
|
||||
NOTIFY_ERROR_LOADING_ACCOUNTS,
|
||||
NOTIFY_CANNOT_DELETE_ACTIVE_IDENTITY,
|
||||
NOTIFY_DELETE_IDENTITY_CONFIRM,
|
||||
} from "@/constants/notifications";
|
||||
import { Account } from "@/db/tables/accounts";
|
||||
|
||||
@Component({ components: { QuickNav } })
|
||||
@Component({
|
||||
components: { QuickNav },
|
||||
mixins: [PlatformServiceMixin],
|
||||
})
|
||||
export default class IdentitySwitcherView extends Vue {
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
$router!: Router;
|
||||
|
||||
notify!: ReturnType<typeof createNotifyHelpers>;
|
||||
|
||||
public activeDid = "";
|
||||
public activeDidInIdentities = false;
|
||||
public apiServer = "";
|
||||
public apiServerInput = "";
|
||||
public otherIdentities: Array<{ id: string; did: string }> = [];
|
||||
|
||||
/**
|
||||
* Vue lifecycle hook - Initialize notification helpers
|
||||
*/
|
||||
mounted() {
|
||||
this.notify = createNotifyHelpers(this.$notify);
|
||||
}
|
||||
|
||||
// =================================================
|
||||
// COMPUTED PROPERTIES - Template Logic Streamlining
|
||||
// =================================================
|
||||
|
||||
/**
|
||||
* CSS classes for primary action buttons (Add Another Identity)
|
||||
* Reduces template complexity for gradient button styling
|
||||
*/
|
||||
get primaryButtonClasses(): string {
|
||||
return "block text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2";
|
||||
}
|
||||
|
||||
/**
|
||||
* CSS classes for secondary action buttons (No Identity)
|
||||
* Reduces template complexity for gradient button styling
|
||||
*/
|
||||
get secondaryButtonClasses(): string {
|
||||
return "block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-8";
|
||||
}
|
||||
|
||||
/**
|
||||
* CSS classes for identity list items
|
||||
* Reduces template complexity for repeated list item styling
|
||||
*/
|
||||
get identityListItemClasses(): string {
|
||||
return "flex flex-grow items-center bg-slate-100 rounded-md px-4 py-3 mb-2 truncate cursor-pointer";
|
||||
}
|
||||
|
||||
// =================================================
|
||||
// HELPER METHODS - Template Logic Streamlining
|
||||
// =================================================
|
||||
|
||||
/**
|
||||
* Formats account data for display in the identity list
|
||||
* Consolidates account processing logic from template
|
||||
* @param account - Account object from database
|
||||
* @returns Formatted account object for display
|
||||
*/
|
||||
formatAccountForDisplay(account: Account): { id: string; did: string } {
|
||||
return {
|
||||
id: (account.id ?? 0).toString(),
|
||||
did: account.did,
|
||||
};
|
||||
}
|
||||
|
||||
// =================================================
|
||||
// COMPONENT METHODS
|
||||
// =================================================
|
||||
|
||||
async created() {
|
||||
try {
|
||||
const settings = await databaseUtil.retrieveSettingsForActiveAccount();
|
||||
const settings = await this.$accountSettings();
|
||||
this.activeDid = settings.activeDid || "";
|
||||
this.apiServer = settings.apiServer || "";
|
||||
this.apiServerInput = settings.apiServer || "";
|
||||
@@ -132,30 +199,19 @@ export default class IdentitySwitcherView extends Vue {
|
||||
const accounts = await retrieveAllAccountsMetadata();
|
||||
for (let n = 0; n < accounts.length; n++) {
|
||||
const acct = accounts[n];
|
||||
this.otherIdentities.push({
|
||||
id: (acct.id ?? 0).toString(),
|
||||
did: acct.did,
|
||||
});
|
||||
this.otherIdentities.push(this.formatAccountForDisplay(acct));
|
||||
if (acct.did && this.activeDid === acct.did) {
|
||||
this.activeDidInIdentities = true;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error Loading Accounts",
|
||||
text: "Clear your cache and start over (after data backup).",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
this.notify.error(NOTIFY_ERROR_LOADING_ACCOUNTS.message, TIMEOUTS.LONG);
|
||||
logger.error("Telling user to clear cache at page create because:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async switchAccount(did?: string) {
|
||||
await databaseUtil.updateDefaultSettings({ activeDid: did });
|
||||
await this.$saveSettings({ activeDid: did });
|
||||
this.$router.push({ name: "account" });
|
||||
}
|
||||
|
||||
@@ -164,13 +220,10 @@ export default class IdentitySwitcherView extends Vue {
|
||||
{
|
||||
group: "modal",
|
||||
type: "confirm",
|
||||
title: "Delete Identity?",
|
||||
text: "Are you sure you want to erase this identity? (There is no undo. You may want to select it and back it up just in case.)",
|
||||
title: NOTIFY_DELETE_IDENTITY_CONFIRM.title,
|
||||
text: NOTIFY_DELETE_IDENTITY_CONFIRM.text,
|
||||
onYes: async () => {
|
||||
const platformService = PlatformServiceFactory.getInstance();
|
||||
await platformService.dbExec(`DELETE FROM accounts WHERE id = ?`, [
|
||||
id,
|
||||
]);
|
||||
await this.$exec(`DELETE FROM accounts WHERE id = ?`, [id]);
|
||||
this.otherIdentities = this.otherIdentities.filter(
|
||||
(ident) => ident.id !== id,
|
||||
);
|
||||
@@ -181,14 +234,9 @@ export default class IdentitySwitcherView extends Vue {
|
||||
}
|
||||
|
||||
notifyCannotDelete() {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "warning",
|
||||
title: "Cannot Delete",
|
||||
text: "You cannot delete the active identity. Set to another identity or 'no identity' first.",
|
||||
},
|
||||
3000,
|
||||
this.notify.warning(
|
||||
NOTIFY_CANNOT_DELETE_ACTIVE_IDENTITY.message,
|
||||
TIMEOUTS.SHORT,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user