@hostlink/nuxt-light 1.16.0 → 1.17.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/L/System/Setting/mail.vue

@@ -74,7 +74,7 @@ const onSubmit = async (d) => {
             <FormKit type="l-input" label="SMTP Password" name="mail_password"></FormKit>
 
             <FormKit type="l-select" label="SMTP Encryption" name="mail_encryption" :options="[
-                { label: 'None', value: 'none' },
+                { label: 'None', value: '' },
                 { label: 'SSL', value: 'ssl' },
                 { label: 'TLS', value: 'tls' },
             ]"></FormKit>

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

@@ -18,7 +18,16 @@ watch(route, (to, from) => {
 
 let app = null
 try {
-    app = (await q({ app: ['company', 'companyLogo', 'logged', 'twoFactorAuthentication', 'googleClientId'] })).app;
+    app = (await q({
+        app: {
+            company: true,
+            companyLogo: true,
+            logged: true,
+            twoFactorAuthentication: true,
+            googleClientId: true,
+            forgetPasswordEnabled: true
+        }
+    })).app;
     light.setCompany(app.company);
     light.setCompanyLogo(app.companyLogo);
 } catch (e) {
@@ -41,8 +50,7 @@ provide('color', color)
     <q-layout v-if="!app.logged">
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
-                <l-login :two-factor-authentication="app.twoFactorAuthentication"
-                    :google-client-id="app.googleClientId"></l-login>
+                <l-login v-bind="app"></l-login>
             </q-page>
         </q-page-container>
     </q-layout>
@@ -53,7 +61,7 @@ provide('color', color)
             <slot name="header"></slot>
         </template>
 
-      
+
 
 
 

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

@@ -3,14 +3,15 @@ import { useLight } from "#imports";
 import { ref, reactive, onMounted } from 'vue'
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { m, notify, api } from '#imports';
+import { m, api } from '#imports';
 
 
 const light = useLight();
 
 const props = defineProps({
   twoFactorAuthentication: Boolean,
-  googleClientId: String
+  googleClientId: String,
+  forgetPasswordEnabled: Boolean
 })
 
 const { t } = useI18n();
@@ -20,8 +21,28 @@ const data = reactive({
   username: "", password: "", code: ""
 });
 
+
 const $q = useQuasar()
 
+const loginWithCode = (username, password) => {
+  $q.dialog({
+    title: "Enter your code",
+    message: "Please enter your two factor authentication code (If you lost your authenticator, please contact your administrator)",
+    prompt: {
+      type: "text",
+      required: true
+    },
+    cancel: true,
+    persistent: true
+  }).onOk(async code => {
+    data.username = username;
+    data.password = password;
+    data.code = code;
+    submit();
+  });
+
+}
+
 const submit = async () => {
   if (await form1.value.validate()) {
 
@@ -29,7 +50,20 @@ const submit = async () => {
       await api.auth.login(data.username, data.password, data.code)
       window.self.location.reload();
     } catch (e) {
-      notify(e.message, "negative");
+      data.code = "";
+
+      if (e.message == "two factor authentication code is required") {
+
+        loginWithCode(data.username, data.password);
+        return;
+      }
+
+      $q.notify({
+        message: e.message,
+        color: "negative",
+        icon: "sym_o_error",
+      });
+
 
     }
   }

package/dist/runtime/pages/User/_user_id/view.vue

@@ -1,7 +1,10 @@
 <script setup>
-import { useLight, getObject } from "#imports";
+import { useLight, getObject, m } from "#imports";
 import { useRoute } from "vue-router"
 import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+
+const $q = useQuasar();
 const route = useRoute();
 
 const obj = await getObject(["canUpdate"]);
@@ -11,6 +14,36 @@ const light = useLight();
 const tab = ref('overview');
 const id = route.params.user_id;
 
+const reset2fa = async () => {
+
+    //confirm
+    await $q.dialog({
+        title: "Reset 2FA",
+        message: "Are you sure you want to reset 2FA?",
+        color: "negative",
+        ok: true,
+        cancel: true
+    }).onOk(async () => {
+        try {
+            await m('reset2FA', { id: parseInt(id) });
+            $q.notify({
+                type: 'positive',
+                message: '2FA reset successfully'
+            });
+        } catch (e) {
+            $q.notify({
+                type: 'negative',
+                message: e.message
+            });
+        }
+
+    })
+
+
+
+
+
+}
 
 </script>
 
@@ -21,6 +54,7 @@ const id = route.params.user_id;
             <l-btn to="change-password" icon="sym_o_key" permission="user.changePassword"
                 label="Change password"></l-btn>
             <l-btn to="update-role" icon="sym_o_people" permission="user.role.add" label="Update role"></l-btn>
+            <l-btn label="Reset 2FA" icon="sym_o_key" permission="user.reset2fa" @click="reset2fa"></l-btn>
         </template>
 
         <q-card flat bordered>

package/dist/runtime/pages/User/setting/two-factor-auth.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { ref, reactive } from "vue"
+import { useQuasar } from "quasar"
 import { q, m, notify } from '#imports'
+const $q = useQuasar()
 
 const my = await q("my", ["twoFactorEnabled"])
 const my2FA = await m("my2FA", [])
@@ -25,6 +27,21 @@ if (my.twoFactorEnabled) {
     show.value = false;
 }
 
+const onCopy = () => {
+    navigator.clipboard.writeText(my2FA.secret).then(() => {
+        $q.notify({
+            message: "Secret copied",
+            color: "green",
+        })
+    }, () => {
+        $q.notify({
+            message: "Failed to copy",
+            color: "red",
+        })
+
+    })
+}
+
 
 </script>
 <template>
@@ -37,18 +54,33 @@ if (my.twoFactorEnabled) {
             <p>
                 For Android user, install
                 <a type="primary" target="_blank"
-                    href="https://play.google.com/store/apps/details?id=com.azure.authenticator">Authenticator</a>
+                    href="https://play.google.com/store/apps/details?id=com.azure.authenticator">Microsoft
+                    Authenticator</a>
+
+                or
+                <a type="primary" target="_blank"
+                    href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Google
+                    Authenticator</a>
+
             </p>
 
             <p>
                 For iOS user, install
                 <a type="primary" target="_blank"
-                    href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458">Authenticator</a>
+                    href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458">Microsoft
+                    Authenticator</a>
+                or
+                <a type="primary" target="_blank"
+                    href="https://apps.apple.com/us/app/google-authenticator/id388497605">Google
+                    Authenticator</a>
+
             </p>
         </div>
         <q-img :src="my2FA.image" width="250px" />
         <p>
-            Secret : {{ my2FA.secret }}
+            Secret : <strong>{{ my2FA.secret }}</strong>
+
+            <q-btn flat round dense icon="sym_o_content_copy" @click="onCopy" />
         </p>
 
         <l-input v-model="obj.code" label="Code"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "HostLink Nuxt Light Framework",
   "repository": {
     "type": "git",