account creation wip

simular · Mar 20, 2024 · 5fa6d3b · 5fa6d3b
1 parent c94c3db
commit 5fa6d3b
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 16 deletions.
diff --git a/src/components/account/NewAccountNav.vue b/src/components/account/NewAccountNav.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import AccountCreation from '@/components/account/new/AccountCreation.vue';
+import { IonNav } from '@ionic/vue';
+import { provide, ref } from 'vue';
+
+const nav = ref<HTMLIonNavElement>();
+
+provide('nav', nav);
+</script>
+
+<template>
+<ion-nav ref="nav" :root="AccountCreation">
+
+</ion-nav>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/account/new/AccountCreation.vue b/src/components/account/new/AccountCreation.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+import ModalLayout from '@/components/layout/ModalLayout.vue';
+import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+import { ref } from 'vue';
+
+const currentSegment = ref<'qrcode'|'entering'>('qrcode');
+</script>
+
+<template>
+<ModalLayout title="Create an account">
+  <template #title>
+    <ion-segment v-model="currentSegment">
+      <ion-segment-button value="qrcode">
+        <ion-label>QRCode</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="entering">
+        <ion-label>Entering</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </template>
+
+
+</ModalLayout>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/layout/MainLayout.vue b/src/components/layout/MainLayout.vue
@@ -17,19 +17,23 @@ defineProps<{
 
 <template>
   <ion-page>
-    <ion-header class="py-0 px-3">
+    <ion-header class="">
       <ion-toolbar>
-        <ion-buttons slot="start" class="m-0">
-          <ion-back-button></ion-back-button>
-        </ion-buttons>
+        <div slot="start">
+          <slot name="start">
+            <ion-buttons>
+              <ion-menu-button></ion-menu-button>
+            </ion-buttons>
+          </slot>
+        </div>
 
         <ion-title class="text-center">{{ title }}</ion-title>
 
-        <slot name="end" slot="end" class="m-0">
-          <ion-buttons>
-            <ion-menu-button></ion-menu-button>
-          </ion-buttons>
-        </slot>
+        <div slot="end">
+          <slot name="end">
+
+          </slot>
+        </div>
       </ion-toolbar>
     </ion-header>
 

diff --git a/src/components/layout/ModalLayout.vue b/src/components/layout/ModalLayout.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonFooter,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from '@ionic/vue';
+import { inject, nextTick, ref } from 'vue';
+
+defineProps<{
+  title?: string;
+}>();
+
+const nav: any = inject('nav');
+
+// Nav
+const canGoBack = ref(false);
+
+if (nav) {
+  nextTick(async () => {
+    canGoBack.value = await nav.value.$el.canGoBack();
+  });
+}
+
+async function back() {
+  if (!nav) {
+    return;
+  }
+
+  nav.value.$el.pop();
+}
+
+function dismissModal() {
+  modalController.dismiss();
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <div slot="start">
+          <ion-buttons v-if="canGoBack">
+            <ion-button @click="back">返回</ion-button>
+          </ion-buttons>
+        </div>
+
+        <slot name="title">
+          <ion-title v-if="title" class="">{{ title }}</ion-title>
+        </slot>
+
+        <ion-buttons slot="end">
+          <ion-button @click="dismissModal" size="large" color="dark">
+            <FontAwesomeIcon :icon="faTimes" />
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <slot></slot>
+    </ion-content>
+
+    <ion-footer v-if="$slots.footer">
+      <ion-toolbar>
+        <slot name="footer"></slot>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-page>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/AccountsPage.vue b/src/views/AccountsPage.vue
@@ -1,13 +1,31 @@
 <template>
   <MainLayout>
+    <template #end>
+      <ion-buttons>
+        <ion-button>
+          <FontAwesomeIcon :icon="faCheckCircle" style="margin-right: .25rem" />
+          <span>Select</span>
+        </ion-button>
+
+        <ion-button @click="createAccount">
+          <FontAwesomeIcon :icon="faPlus" style="margin-right: .25rem" />
+          <span>New</span>
+        </ion-button>
+      </ion-buttons>
+    </template>
+
     <ion-searchbar :animated="true" placeholder="Search" v-model="q"></ion-searchbar>
 
     <ion-grid>
       <ion-row>
-        <ion-col size="6" size-md="4" size-lg="3"
-          v-for="item of items" :key="item.id">
+        <ion-col v-for="item of items" :key="item.id"
+          size="6" size-md="4" size-lg="3"
+        >
+
+          <!-- Account Card -->
           <ion-card @click="selectAccount(item)"
-          style="margin: 0; height: 100%">
+            button
+            style="margin: 0; height: 100%">
             <ion-card-content>
               <div class="ion-text-center ion-padding">
                 <img :src="item.content.icon" alt="img" style="width: 56px; aspect-ratio: 1">
@@ -17,13 +35,15 @@
               </div>
             </ion-card-content>
           </ion-card>
+
         </ion-col>
       </ion-row>
     </ion-grid>
 
+    <!-- Account Page Modal -->
     <ion-modal
       class="account-modal"
-      :is-open="modalOpen"
+      :is-open="accountModalOpen"
       @didDismiss="active = undefined"
     >
       <ion-content class="ion-padding" v-if="active"
@@ -33,19 +53,48 @@
         </div>
       </ion-content>
     </ion-modal>
+
+    <!-- Account New Modal -->
+    <ion-modal
+      class="new-modal"
+      :is-open="newModalOpen"
+      @didDismiss="newModalOpen = false"
+    >
+      <NewAccountNav />
+    </ion-modal>
   </MainLayout>
 </template>
 
 <script setup lang="ts">
+import NewAccountNav from '@/components/account/NewAccountNav.vue';
 import AccountToken from '@/components/AccountToken.vue';
 import MainLayout from '@/components/layout/MainLayout.vue';
 import apiClient from '@/service/api-client';
 import { sodiumCipher } from '@/service/cipher';
-import { accountsStorage, encMasterStorage, encSecretStorage, kekStorage } from '@/store/main-store';
+import {
+  accountsStorage,
+  encMasterStorage,
+  encSecretStorage,
+  kekStorage,
+} from '@/store/main-store';
 import { Account, AccountContent } from '@/types';
 import { base64UrlDecode, uint82text } from '@/utilities/convert';
 import secretToolkit from '@/utilities/secret-toolkit';
-import { IonCard, IonCardContent, IonCol, IonContent, IonGrid, IonModal, IonRow, IonSearchbar } from '@ionic/vue';
+import { faCheckCircle } from '@fortawesome/free-regular-svg-icons';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import {
+  IonButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonModal,
+  IonRow,
+  IonSearchbar,
+} from '@ionic/vue';
 import { computed, onMounted, ref } from 'vue';
 
 const items = computed(() => {
@@ -108,12 +157,19 @@ async function prepareAccounts(items: Account<string>[]): Promise<Account[]> {
 }
 
 // Select account
-const modalOpen = computed(() => active.value != undefined);
+const accountModalOpen = computed(() => active.value != undefined);
 
 function selectAccount(account: Account) {
   active.value = account;
 }
 
+// Account New
+const newModalOpen = ref(false);
+
+function createAccount() {
+  newModalOpen.value = true;
+}
+
 // Search
 const q = ref('');