save wip

package.json

@@ -53,7 +53,6 @@
     "jsdom": "^22.1.0",
     "libsodium-wrappers": "^0.7.13",
     "lodash-es": "^4.17.21",
-    "luxon": "^3.4.4",
     "sass": "^1.72.0",
     "terser": "^5.4.0",
     "totp-generator": "^1.0.0",

src/components/account/new/AccountLogoSelect.vue

@@ -70,7 +70,7 @@ async function findFontAwesome(q: string) {
 const colors = [
   '#f44336',
   '#e91e63',
-  '#9C27B0',
+  '#7E57C2',
   '#2196f3',
   '#009688',
   '#ffc107',
@@ -97,6 +97,10 @@ async function pasteImage() {
 
   types = types.slice().sort();
 
+  if (!checkFileType(types)) {
+    return;
+  }
+
   const type = types[0];
   const blob = await items[0].getType(type);
   const file = new File([blob], 'image.png', { type });
@@ -128,11 +132,25 @@ async function pickImage() {
     return;
   }
 
+  if (!checkFileType([file.type])) {
+    return;
+  }
+
   logo.value = await resizeImage(await readFileAsBase64(file));
 
   imageSource.value = ImageSource.UPLOAD;
 }
 
+function checkFileType(types: readonly string[]) {
+  for (const type of types) {
+    if (type.startsWith('image/')) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 async function readFileAsBase64(file: File) {
   return new Promise<string>((resolve) => {
     const reader = new FileReader();
@@ -192,6 +210,7 @@ async function resizeImage(imgDataUri: string) {
 
 async function save() {
   const user = userStorage.value!;
+  console.log(user);
   const account: Account = {
     id: uuidv7(),
     userId: user.id,
@@ -206,7 +225,7 @@ async function save() {
     params: {}
   };
 
-  accountService.create(account, logo.value);
+  await accountService.create(account, logo.value);
 }
 </script>
 
@@ -227,7 +246,7 @@ async function save() {
 
         <div class="ion-text-center l-logo-select__search">
           <div style="margin-bottom: .5rem; width: 100%; display: flex; justify-content: center">
-            <ion-searchbar autocapitalize="none" v-model="q" placeholder="Search FontAwesome"
+            <ion-searchbar autocapitalize="none" v-model="q" placeholder="Search Icon (FontAwesome)"
               color="medium"
               style="width: 85%" />
           </div>
@@ -247,7 +266,7 @@ async function save() {
               :style="{ '--background': color }"
               :active="currentColor === color"
               @click="currentColor = color"
-              :disabled="imageSource !== ImageSource.FONT_AWESOME"
+              :disabled="!(imageSource === ImageSource.FONT_AWESOME || imageSource === ImageSource.DEFAULT)"
             >
             </ion-button>
           </ion-buttons>
@@ -270,12 +289,12 @@ async function save() {
         </div>
 
         <div style="margin-top: 2rem">
-          <ion-button expand="block">
+          <ion-button expand="block" @click="save">
             <template v-if="saving">
               <ion-spinner name="dots" />
             </template>
             <template v-else>
-              Save
+              Create
             </template>
           </ion-button>
         </div>

src/main.ts

@@ -1,4 +1,5 @@
 import { isLogin } from '@/store/main-store';
+import sodium from 'libsodium-wrappers';
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router';
@@ -28,7 +29,9 @@ const app = createApp(App)
   .use(IonicVue)
   .use(router);
 
-router.isReady().then(() => {
+router.isReady().then(async () => {
+  await sodium.ready;
+
   app.mount('#app');
 
   if (!isLogin.value) {

src/service/account-service.ts

@@ -11,17 +11,18 @@ export default new class {
     const master = await encryptionService.getMasterKey();
 
     account = cloneDeep(account);
-    let encImage = '';
-
-    if (image) {
-      encImage = base64UrlEncode(
-        await sodiumCipher.encrypt(
-          image,
-          master,
-        )
-      );
+
+    if (!image) {
+      throw new Error('No image');
     }
 
+    const encImage = base64UrlEncode(
+      await sodiumCipher.encrypt(
+        image,
+        master,
+      )
+    );
+
     const encryptedAccount = await this.encryptAccount(account, master);
 
     const res = await apiClient.post(

src/store/main-store.ts

@@ -11,9 +11,9 @@ export const mainStore = reactive<{
 
 export const accessTokenStorage = useLocalStorage('@authman:access.token', '');
 export const refreshTokenStorage = useLocalStorage('@authman:refresh.token', '');
-export const userStorage = useLocalStorage<User | undefined>(
+export const userStorage = useLocalStorage<User | null>(
   '@authman:user',
-  undefined,
+  null,
   {
     serializer: StorageSerializers.object
   }

src/views/AccountsPage.vue

@@ -75,18 +75,8 @@ import NewAccountNav from '@/components/account/NewAccountNav.vue';
 import AccountToken from '@/components/AccountToken.vue';
 import MainLayout from '@/components/layout/MainLayout.vue';
 import accountService from '@/service/account-service';
-import apiClient from '@/service/api-client';
-import { sodiumCipher } from '@/service/cipher';
-import encryptionService from '@/service/encryption-service';
-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 { userStorage } from '@/store/main-store';
+import { Account } from '@/types';
 import { faCheckCircle } from '@fortawesome/free-regular-svg-icons';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -98,9 +88,12 @@ import {
   IonCol,
   IonContent,
   IonGrid,
-  IonModal, IonRefresher, IonRefresherContent,
+  IonModal,
+  IonRefresher,
+  IonRefresherContent,
   IonRow,
-  IonSearchbar, RefresherCustomEvent,
+  IonSearchbar,
+  RefresherCustomEvent,
 } from '@ionic/vue';
 import { computed, onMounted, ref } from 'vue';
 

src/views/auth/LoginPage.vue

@@ -32,13 +32,15 @@ async function authenticate() {
   });
 
   const { user, accessToken, refreshToken, encSecret, encMaster } = result;
-
+  
   userStorage.value = user;
   accessTokenStorage.value = accessToken;
   refreshTokenStorage.value = refreshToken;
   encSecretStorage.value = encSecret;
   encMasterStorage.value = encMaster;
 
+  console.log(userStorage.value, user);
+
   router.replace({
     name: 'accounts',
   });

yarn.lock

@@ -3911,11 +3911,6 @@ lru-cache@^6.0.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
   integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
 
-luxon@^3.4.4:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
-  integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==
-
 magic-string@^0.30.1, magic-string@^0.30.7:
   version "0.30.8"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"