@hostlink/nuxt-light 0.0.74 → 0.0.76

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.74"
+  "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-app.vue

@@ -10,7 +10,7 @@ setApiUrl(config?.public?.apiBase ?? '/api/');
 let app = null
 
 try {
-    app = (await q({ app: ['company', 'companyLogo', 'logged', 'twoFactorAuthentication'] })).app;
+    app = (await q({ app: ['company', 'companyLogo', 'logged', 'twoFactorAuthentication', 'googleClientId'] })).app;
 } catch (e) {
     Dialog.create({
         title: 'Error',
@@ -28,7 +28,7 @@ try {
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
                 <l-login :company="app.company" :company-logo="app.companyLogo"
-                    :twoFactorAuthentication="app.twoFactorAuthentication"></l-login>
+                    :twoFactorAuthentication="app.twoFactorAuthentication" :google-client-id="app.googleClientId"></l-login>
             </q-page>
         </q-page-container>
     </q-layout>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import { useQuasar } from 'quasar';
+import { useQuasar, Notify } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { m, notify } from '../';
 
@@ -11,10 +11,11 @@ import { login, webauthnLogin } from '@hostlink/light';
 const config = useRuntimeConfig();
 
 
-defineProps({
+const props = defineProps({
   company: String,
   companyLogo: String,
-  twoFactorAuthentication: Boolean
+  twoFactorAuthentication: Boolean,
+  googleClientId: String
 })
 
 const i18n = useI18n();
@@ -123,16 +124,35 @@ const bioLogin = async () => {
   }
 
 }
-const googleResponse = () => {
-
+const handleGoogleCredentialResponse = async (response) => {
+  try {
+    await m("googleLogin", { credential: response.credential });
+    window.self.location.reload();
+  } catch (e) {
+    notify(e.message, "negative");
+  }
 }
 
 onMounted(() => {
-  if (config.public.GOOGLE_CLIENT_ID) {
+  if (props.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: "829616239009-23sf7s3blsnab9a288sb4j15orqqamlp.apps.googleusercontent.com",
-      callback: googleResponse,
+      client_id: props.googleClientId,
+      callback: handleGoogleCredentialResponse,
     });
 
     google.accounts.id.renderButton(
@@ -144,7 +164,6 @@ onMounted(() => {
         text: 'signin_with',
         size: 'large',
         logo_alignment: 'left'
-
       }
     );
 
@@ -179,13 +198,10 @@ onMounted(() => {
       <l-btn v-if="hasBioLogin" outline rounded color="primary" icon="sym_o_fingerprint" @click="bioLogin" />
       <l-btn label="Forget password" outline rounded color="primary" icon="sym_o_lock_reset" @click="forgetPassword" />
     </q-card-actions>
-    <q-card-actions v-if="config.public.GOOGLE_CLIENT_ID">
-
+    <q-card-actions v-if="props.googleClientId">
       <div>
-
         <div id="g_id_signin"></div>
       </div>
-
     </q-card-actions>
   </q-card>
 </template>

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.74",
+  "version": "0.0.76",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",