@hostlink/nuxt-light 0.0.75 → 0.0.76

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.75"
+  "version": "0.0.76"
 }

package/dist/runtime/components/l-app-main.vue

@@ -5,12 +5,10 @@ import { useLight, q, getCurrentUser, m, f } from '../';
 import { ref, computed, reactive, provide, watch } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
-
 const config = useRuntimeConfig();
 
 const appVersion = config.public.appVersion ?? '0.0.1';
 
-
 const quasar = useQuasar();
 quasar.dark.set(false);
 const light = useLight();
@@ -62,15 +60,11 @@ const toggleRightDrawer = () => {
     rightDrawerOpen.value = !rightDrawerOpen.value
 }
 
-
-let isAdmin = false;
 let showViewAs = false;
 if (user.value && user.value.roles.indexOf('Administrators') != -1) {
-    isAdmin = true;
     showViewAs = true;
 }
 
-
 const menuOverlayHeader = ref(false)
 const layoutView = computed(() => {
     let s = ''
@@ -86,10 +80,8 @@ const style = reactive({
     dense: my.styles?.dense || false
 });
 
-
 const isMouseOnDrawer = ref(false)
 
-
 const isMini = computed(() => {
     if (isMouseOnDrawer.value) {
         return false
@@ -165,7 +157,6 @@ const exitViewAs = async () => {
     window.location.reload();
 }
 
-
 const storageColor = computed(() => {
     if (system) {
         if (system.diskFreeSpacePercent < 0.05) {
@@ -196,7 +187,6 @@ const storageUsagePercent = computed(() => {
     return 0;
 })
 
-
 </script>
 
 <template>
@@ -247,13 +237,10 @@ const storageUsagePercent = computed(() => {
                     </div>
 
                     <div class="text-right">
-                        {{ user.roles.join(",") }}
+                        {{ user.roles[0] }}
                     </div>
                 </div>
 
-
-
-
                 <q-btn flat round dense icon="sym_o_person" class="q-mr-sm">
                     <q-menu max-width="250px">
                         <q-list>

package/dist/runtime/components/l-page.vue

@@ -71,11 +71,7 @@ if (props.addBtn) {
     showAddBtn = true
 }
 
-//const title = props.title || route.path.split("/")[1];
-
-//title split by Capital letter, but if Captial letter is followed by another Capital letter, it is not split
-const title = props.title || route.path.split("/")[1].replace(/([A-Z])(?=[A-Z])/g, '$1 ').replace(/([a-z])(?=[A-Z])/g, '$1 ');
-
+const title = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, '$1 ').replace(/([A-Z]*)(?=[A-Z][a-z])/g, '$1 ')
 const module = route.path.split("/")[1];
 const onDelete = async () => {
 

package/dist/runtime/pages/User/setting/open_id.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { reactive, onMounted } from "vue"
+import { Notify } from "quasar";
+import { q, m } from '../../../'
+let { app, my } = await q({ app: ['googleClientId'], my: ["gmail"] })
+
+my = reactive(my);
+
+const handleGoogleCredentialResponse = async (response) => {
+    try {
+        await m("googleRegister", { credential: response.credential })
+
+        const resp = await q("my", ["gmail"]);
+        my.gmail = resp.gmail;
+
+        Notify.create({
+            message: "Google account linked",
+            color: "positive",
+            position: "top",
+            timeout: 2000
+        });
+    } catch (e) {
+        console.log(e)
+    }
+}
+
+onMounted(() => {
+    if (app.googleClientId) {
+        if (!window.google) {
+            Notify.create({
+                message: "Google login is not available", //set script https://accounts.google.com/gsi/client in nuuxt.config.js
+                color: "negative",
+                icon: "sym_o_error",
+                position: "top",
+                timeout: 2000
+            });
+            return;
+        }
+    }
+
+    //google 
+    google.accounts.id.initialize({
+        client_id: app.googleClientId,
+        callback: handleGoogleCredentialResponse,
+    });
+
+    google.accounts.id.renderButton(
+        document.getElementById('g_id_signin'),
+        {
+            type: 'profile',
+            shape: 'pill',
+            theme: 'outline',
+            text: 'signin_with',
+            size: 'large',
+            logo_alignment: 'left'
+        }
+    );
+
+});
+
+const unlink = async () => {
+    await m("unlinkGoogle");
+    my.gmail = null;
+    window.location.reload();
+}
+
+</script>
+<template>
+    <l-card :bordered="false">
+
+        <template v-if="app.googleClientId">
+            <q-card-section v-if="my.gmail">
+                You have already linked your Google account.<br />
+
+                Your gmail is {{ my.gmail }}
+
+
+
+                <l-btn label="Unlink" @click="unlink" icon="sym_o_delete"></l-btn>
+            </q-card-section>
+
+            <q-card-section v-else>
+                Click the button below to link your Google account.
+                <div id="g_id_signin"></div>
+            </q-card-section>
+        </template>
+
+        <q-card-section v-else>
+            Google login is not available. Please set GOOGLE_CLIENT_ID in server settings.
+        </q-card-section>
+
+    </l-card>
+</template>

package/dist/runtime/pages/User/setting.vue

@@ -23,6 +23,8 @@ const route = useRoute()
                             replace />
                         <q-route-tab name="bio" icon="sym_o_fingerprint" :label="$t('Bio')" to="/User/setting/bio-auth"
                             exact replace />
+                        <q-route-tab name="openid" icon="sym_o_key" :label="$t('Open ID')" to="/User/setting/open_id" exact replace />
+
                     </q-tabs>
                 </template>
 

package/dist/runtime/routes.mjs

@@ -121,6 +121,11 @@ function User_setting_information() {
     /* webpackChunkName: "User-setting-information" */ './pages/User/setting/information.vue'
   )
 }
+function User_setting_open_id() {
+  return import(
+    /* webpackChunkName: "User-setting-open_id" */ './pages/User/setting/open_id.vue'
+  )
+}
 function User_setting_password() {
   return import(
     /* webpackChunkName: "User-setting-password" */ './pages/User/setting/password.vue'
@@ -317,6 +322,11 @@ export default [
         path: 'information',
         component: User_setting_information,
       },
+      {
+        name: 'User-setting-open_id',
+        path: 'open_id',
+        component: User_setting_open_id,
+      },
       {
         name: 'User-setting-password',
         path: 'password',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",