about & share

simular · May 1, 2024 · ed13e1c · ed13e1c
1 parent aa72ac8
commit ed13e1c
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 48 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,6 @@
+# 5min
+VITE_IDLE_TIMEOUT=300
+# Info
+VITE_INFO_WEBSITE=https://authman.simular.co
+VITE_INFO_POWERED_BY="Simular Inc."
+VITE_INFO_POWERED_BY_URL=https://simular.co
diff --git a/.env.dist b/.env.dist
@@ -4,5 +4,3 @@ VITE_TEST_USERNAME=
 VITE_TEST_PASSWORD=
 VITE_TEST_REGISTER_USERNAME=
 VITE_TEST_REGISTER_PASSWORD=
-# 5min
-VITE_IDLE_TIMEOUT=300
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "@capacitor-community/electron": "^5.0.1",
     "@capacitor-mlkit/barcode-scanning": "^5.4.0",
     "@capacitor/cli": "5.7.3",
+    "@capacitor/share": "^6.0.0",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",

diff --git a/src/assets/images/icon.svg b/src/assets/images/icon.svg
diff --git a/src/components/layout/MainLayout.vue b/src/components/layout/MainLayout.vue
@@ -20,6 +20,7 @@ const props = withDefaults(
     headerCondense?: boolean;
     showMenuButton?: boolean;
     color?: string;
+    defaultBack?: any;
   }>(),
   {
     headerCondense: false,
@@ -39,7 +40,7 @@ const isMobile = getPlatforms().includes('mobile');
           <slot name="start">
             <ion-buttons>
               <ion-menu-button class="c-button c-button--menu" v-if="showMenuButton && !isMobile"></ion-menu-button>
-              <ion-back-button v-else></ion-back-button>
+              <ion-back-button v-else :default-href="defaultBack"></ion-back-button>
             </ion-buttons>
           </slot>
         </div>

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -44,6 +44,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'password-change',
         component: () => import('@/views/user/PasswordChangePage.vue'),
       },
+      {
+        path: 'about',
+        name: 'about',
+        component: () => import('@/views/options/AboutPage.vue'),
+      },
     ],
   },
 ];

diff --git a/src/views/OptionsPage.vue b/src/views/OptionsPage.vue
@@ -1,56 +1,22 @@
-<template>
-  <MainLayout show-menu-button color="light">
-    <ion-list style="margin-bottom: 2rem" inset>
-      <ion-item>
-        <FontAwesomeIcon :icon="faFingerprint" slot="start" />
-        <ion-toggle v-model="enableBiometricsOption">
-          <ion-label>Enable Biometrics</ion-label>
-          <ion-note color="medium">Touch ID or Face ID</ion-note>
-        </ion-toggle>
-      </ion-item>
-
-      <ion-item button @click="lockScreen">
-        <FontAwesomeIcon :icon="faLock" slot="start" />
-        <ion-label>
-          Lock Screen
-        </ion-label>
-      </ion-item>
-
-      <ion-item button
-        href="password/change"
-        router-link="password/change"
-        @click.prevent=""
-      >
-        <FontAwesomeIcon :icon="faKey" slot="start">
-        </FontAwesomeIcon>
-        <ion-label>
-          Change Password
-        </ion-label>
-      </ion-item>
-    </ion-list>
-
-    <ion-list inset>
-      <ion-item button @click="logout" style="--color: var(--ion-color-danger)">
-        <FontAwesomeIcon :icon="faSignOut" slot="start">
-        </FontAwesomeIcon>
-        <ion-label>
-          Logout
-        </ion-label>
-      </ion-item>
-    </ion-list>
-  </MainLayout>
-</template>
-
 <script setup lang="ts">
+import icon from '@/assets/images/icon.svg';
 import MainLayout from '@/components/layout/MainLayout.vue';
 import lockScreenService from '@/service/lock-screen-service';
 import userService from '@/service/user-service';
 import { noInstantUnlock } from '@/store/main-store';
 import { enableBiometricsOption } from '@/store/options-store';
 import { simpleConfirm } from '@/utilities/alert';
-import { faFingerprint, faKey, faLock, faSignOut } from '@fortawesome/free-solid-svg-icons';
+import { Share } from '@capacitor/share';
+import {
+  faFingerprint,
+  faKey,
+  faLock,
+  faShare,
+  faShareAlt, faShareNodes,
+  faSignOut,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { IonItem, IonLabel, IonList, IonNote, IonToggle, useIonRouter } from '@ionic/vue';
+import { IonImg, IonItem, IonLabel, IonList, IonNote, IonToggle, useIonRouter } from '@ionic/vue';
 import { watch } from 'vue';
 
 const router = useIonRouter();
@@ -77,6 +43,12 @@ function lockScreen() {
   );
 }
 
+async function share() {
+  await Share.share({
+    title: 'Authman App',
+    url: import.meta.env.VITE_INFO_WEBSITE
+  });
+}
 
 async function logout() {
   const v = await simpleConfirm('Do you want to logout?');
@@ -86,3 +58,75 @@ async function logout() {
   }
 }
 </script>
+
+<template>
+  <MainLayout show-menu-button color="light">
+    <div class="l-content">
+      <ion-list style="" inset>
+        <ion-item button router-link="about">
+          <ion-img :src="icon" slot="start" style="height: 1.5rem" />
+          <ion-label>
+            About Authman
+          </ion-label>
+        </ion-item>
+      </ion-list>
+
+      <ion-list style="" inset>
+        <ion-item>
+          <FontAwesomeIcon :icon="faFingerprint" slot="start" />
+          <ion-toggle v-model="enableBiometricsOption">
+            <ion-label>Enable Biometrics</ion-label>
+            <ion-note color="medium">Touch ID or Face ID</ion-note>
+          </ion-toggle>
+        </ion-item>
+
+        <ion-item button @click="lockScreen">
+          <FontAwesomeIcon :icon="faLock" slot="start" />
+          <ion-label>
+            Lock Screen
+          </ion-label>
+        </ion-item>
+
+        <ion-item button
+          href="password/change"
+          router-link="password/change"
+          @click.prevent=""
+        >
+          <FontAwesomeIcon :icon="faKey" slot="start">
+          </FontAwesomeIcon>
+          <ion-label>
+            Change Password
+          </ion-label>
+        </ion-item>
+      </ion-list>
+
+      <ion-list inset>
+        <ion-item button @click="share">
+          <FontAwesomeIcon :icon="faShareNodes" slot="start">
+          </FontAwesomeIcon>
+          <ion-label>
+            Share
+          </ion-label>
+        </ion-item>
+      </ion-list>
+
+      <ion-list inset>
+        <ion-item button @click="logout" style="--color: var(--ion-color-danger)">
+          <FontAwesomeIcon :icon="faSignOut" slot="start">
+          </FontAwesomeIcon>
+          <ion-label>
+            Logout
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </div>
+  </MainLayout>
+</template>
+
+<style scoped lang="scss">
+.l-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>
diff --git a/src/views/options/AboutPage.vue b/src/views/options/AboutPage.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+
+import MainLayout from '@/components/layout/MainLayout.vue';
+import logo from '@/assets/images/logo-h-dark.svg';
+import { App, AppInfo } from '@capacitor/app';
+import { IonImg, IonItem, IonLabel, IonList, IonNote } from '@ionic/vue';
+import { onMounted, ref } from 'vue';
+
+const appInfo = ref<AppInfo>();
+const website = import.meta.env.VITE_INFO_WEBSITE || '';
+const poweredBy = import.meta.env.VITE_INFO_POWERED_BY || '';
+const poweredByUrl = import.meta.env.VITE_INFO_POWERED_BY_URL || '';
+
+onMounted(async () => {
+  appInfo.value = await App.getInfo();
+});
+
+</script>
+
+<template>
+<MainLayout title="About Authman" color="light"
+  default-back="options">
+  <div class="l-content">
+    <div class="l-content__logo">
+      <ion-img :src="logo" style="max-width: 550px;" />
+    </div>
+
+    <ion-list inset>
+      <ion-item>
+        <ion-label>Version</ion-label>
+        <span>
+          {{ appInfo?.version }}
+        </span>
+      </ion-item>
+      <ion-item>
+        <ion-label>Build</ion-label>
+        <span>
+          {{ appInfo?.build }}
+        </span>
+      </ion-item>
+    </ion-list>
+
+    <ion-list inset>
+      <ion-item button :href="website" target="_blank">
+        <ion-label>
+          <h4>Website</h4>
+          <ion-note>{{ website }}</ion-note>
+        </ion-label>
+
+      </ion-item>
+      <ion-item button :href="poweredByUrl" target="_blank">
+        <ion-label>
+          <h4>Powered By</h4>
+          <ion-note>{{ poweredBy }}</ion-note>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
+</MainLayout>
+</template>
+
+<style scoped lang="scss">
+.l-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__logo {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+  }
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
@@ -1309,6 +1309,11 @@
   resolved "https://registry.yarnpkg.com/@capacitor/keyboard/-/keyboard-5.0.8.tgz#b8cc21bd6e06273ec61974be9d7f4d8c421a63a4"
   integrity sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==
 
+"@capacitor/share@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@capacitor/share/-/share-6.0.0.tgz#fe53f8619c2cccc16afdbe46d17714076d60dda6"
+  integrity sha512-Doqvtxe9tejkjq+P9hZzDslR6VetM02R6N61GBavVBWkQj4N+xWNDA8zISG3PzuGBffGtTfHC6L0W+XySFY5nw==
+
 "@capacitor/status-bar@5.0.7":
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/@capacitor/status-bar/-/status-bar-5.0.7.tgz#a341e8dec9f93769bed4a42e8ad397e5df1b5287"