feat(token): Can pre-search icon by issuer and store issuer name.

src/components/account/edit/CreationStep1.vue

@@ -16,6 +16,7 @@ const secretInput = ref<typeof IonInput>();
 const secret = ref('');
 const title = ref('');
 const host = ref('');
+const issuer = ref('');
 
 onMounted(async () => {
   try {
@@ -34,6 +35,9 @@ onMounted(async () => {
   }, 500);
 });
 
+// Quick test code
+// otpauth://totp/Google:example@gmail.com?secret=JBSWY3DPEHPK3PXP&issuer=Google
+
 async function scanQRCode() {
   await stopScan();
 
@@ -95,7 +99,7 @@ function decodeTheUri(uri: string) {
   const url = new URL(uri);
 
   if (url.protocol !== 'otpauth:') {
-    simpleAlert('Wrong account URI');
+    simpleAlert('Wrong URI format');
     return;
   }
   
@@ -105,7 +109,12 @@ function decodeTheUri(uri: string) {
 
   host.value = path[0];
   secret.value = url.searchParams.get('secret') || '';
+  issuer.value = url.searchParams.get('issuer') || '';
   title.value = decodeURIComponent(String(path[1])) || '';
+
+  if (issuer.value === '') {
+    issuer.value = String(String(path[1]).split(':').shift());
+  }
 }
 
 const saving = ref(false);
@@ -125,6 +134,7 @@ async function next() {
       secret: secret.value,
       title: title.value,
       host: host.value,
+      issuer: issuer.value,
     },
   );
 

src/components/account/edit/CreationStep2.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
   secret: string;
   title: string;
   host: string;
+  issuer: string;
 }>();
 
 const logo = ref('');
@@ -31,6 +32,7 @@ async function save() {
       secret: props.secret.replace(/\s+/, ''),
       url: props.host,
       image: logo.value,
+      issuer: props.issuer,
     },
     image: '',
     created: dayjs().toISOString(),
@@ -52,13 +54,18 @@ async function save() {
     }, 300);
   });
 }
+
+function simplifyIssuer(issuer: string): string {
+  return issuer.toLowerCase()
+    .replace(/\s+/g, '-');
+}
 </script>
 
 <template>
   <ModalLayout title="Select Logo">
     <div class="box-center ion-padding" style="height: 100%;">
       <div style="width: 85%">
-        <LogoSelect v-model="logo" />
+        <LogoSelect v-model="logo" :pre-search="simplifyIssuer(issuer || '')" />
 
         <div style="margin-top: 2rem">
           <ion-button expand="block" @click="save"

src/components/account/edit/LogoSelect.vue

@@ -18,19 +18,27 @@ enum ImageSource {
   DEFAULT,
 }
 
+const props = defineProps<{
+  preSearch?: string;
+}>();
+
 const logo = defineModel({ default: '' });
 const q = ref('');
 const imageSource = ref(ImageSource.DEFAULT);
 const { loading, run } = useLoading();
 
 onMounted(async () => {
   logo.value = logo.value || await findFontAwesome('key');
+
+  if (props.preSearch) {
+    searchIcon(props.preSearch);
+  }
 });
 
 const emptyImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 
-async function searchIcon() {
-  const img = await findFontAwesome(q.value);
+async function searchIcon(text?: string) {
+  const img = await findFontAwesome(text || props.preSearch || '');
 
   if (img) {
     logo.value = img;

src/types/entity/account.d.ts

@@ -14,4 +14,5 @@ export interface AccountContent {
   secret: string;
   image: string;
   url: string;
+  issuer?: string;
 }