@nathapp/na-cli 1.0.1-rc.6 → 1.0.2

package/dist/templates/vuexy-portal/src/pages/login.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { useValidators } from '@/@custom/composables/validator';
+import authV1BottomShape from '@images/svg/auth-v1-bottom-shape.svg?raw';
+import authV1TopShape from '@images/svg/auth-v1-top-shape.svg?raw';
+import { VNodeRenderer } from '@layouts/components/VNodeRenderer';
+import { themeConfig } from '@themeConfig';
+import { VForm } from 'vuetify/components/VForm';
+
+definePage({
+  meta: {
+    layout: 'blank',
+    unauthenticatedOnly: true,
+  },
+})
+
+const isPasswordVisible = ref(false)
+const { requiredValidator } = useValidators()
+const route = useRoute()
+const router = useRouter()
+
+const ability = useAbility()
+const authStore = useAuthStore();
+
+const errors = ref<Record<string, string | undefined>>({
+  email: undefined,
+  password: undefined,
+})
+
+const refVForm = ref<VForm>()
+
+const credentials = ref({
+  email: 'demo@example.com',
+  password: 'Aa123456',
+})
+
+const rememberMe = ref(false)
+const actionLoading = ref(false)
+
+
+const login = async () => {
+  try {
+    actionLoading.value = true;
+    const response = await authStore.login({
+              username: credentials.value.email,
+              password: credentials.value.password,
+            })
+    const res = response?.data;
+    const result = res?.data;
+
+    const { accessToken, user, userAbilityRules = [{"action":"manage","subject":"all"}] } = result
+    useCookie('userAbilityRules').value = userAbilityRules
+    ability.update(userAbilityRules)
+
+    useCookie('userData').value = user
+    useCookie('accessToken').value = accessToken
+
+    // Redirect to `to` query if exist or redirect to index route
+    // ❗ nextTick is required to wait for DOM updates and later redirect
+    await nextTick(() => {
+      router.replace(route.query.to ? String(route.query.to) : '/')
+    })
+  }
+  catch (err) {
+    console.log(err)
+    actionLoading.value = false;
+  }
+}
+
+const onSubmit = () => {
+  refVForm.value?.validate()
+    .then(({ valid: isValid } : {valid: boolean }) => {
+      if (isValid)
+        login()
+    })
+}
+</script>
+
+<template>
+  <div class="auth-wrapper d-flex align-center justify-center pa-4">
+    <div class="position-relative my-sm-16">
+      <!-- 👉 Top shape -->
+      <VNodeRenderer
+        :nodes="h('div', { innerHTML: authV1TopShape })"
+        class="text-primary auth-v1-top-shape d-none d-sm-block"
+      />
+
+      <!-- 👉 Bottom shape -->
+      <VNodeRenderer
+        :nodes="h('div', { innerHTML: authV1BottomShape })"
+        class="text-primary auth-v1-bottom-shape d-none d-sm-block"
+      />
+
+      <!-- 👉 Auth Card -->
+      <VCard
+        class="auth-card"
+        max-width="460"
+        :class="$vuetify.display.smAndUp ? 'pa-6' : 'pa-0'"
+      >
+        <VCardItem class="justify-center">
+          <VCardTitle>
+            <div class="app-logo">
+              <VNodeRenderer :nodes="themeConfig.app.logo" />
+              <h1 class="app-logo-title">
+                {{ themeConfig.app.title }}
+              </h1>
+            </div>
+          </VCardTitle>
+        </VCardItem>
+
+        <VCardText>
+          <h4 class="text-h4 mb-1">
+            <i18n-t keypath="loginPage.welcomeMesage" tag="label">
+              <span class="text-capitalize">{{ themeConfig.app.title }}</span>
+            </i18n-t>
+          </h4>
+          <p class="mb-0">
+            {{$t('loginPage.welcomeMesage2')}}
+          </p>
+        </VCardText>
+
+        <VCardText>
+          <VForm ref="refVForm" @submit.prevent="onSubmit">
+            <VRow>
+              <!-- email -->
+              <VCol cols="12">
+                <AppTextField
+                  v-model="credentials.email"
+                  autofocus
+                  label="Email or Username"
+                  type="email"
+                  placeholder="johndoe@email.com"
+                  :rules="[requiredValidator]"
+                  :error-messages="errors.email"                  
+                />
+              </VCol>
+
+              <!-- password -->
+              <VCol cols="12">
+                <AppTextField
+                  v-model="credentials.password"
+                  :label="$t('common.password')"
+                  :placeholder="$t('common.password')"
+                  :rules="[requiredValidator]"
+                  :error-messages="errors.password"
+                  :type="isPasswordVisible ? 'text' : 'password'"
+                  :append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
+                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                />
+
+                <!-- remember me checkbox -->
+                <div class="d-flex align-center justify-space-between flex-wrap my-6">
+                  <VCheckbox
+                    v-model="rememberMe"
+                    label="Remember me"
+                  />
+                </div>            
+
+                <!-- login button -->
+                <VBtn
+                  block
+                  type="submit"
+                  :loading="actionLoading"
+                  :disabled="actionLoading"                  
+                >
+                {{ $t("loginPage.login") }}
+                </VBtn>
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+      </VCard>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use "@core/scss/template/pages/page-auth.scss";
+</style>

package/dist/templates/vuexy-portal/src/pages/not-authorized.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import miscMaskDark from '@images/pages/misc-mask-dark.png'
+import miscMaskLight from '@images/pages/misc-mask-light.png'
+
+import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
+
+definePage({
+  alias: '/pages/not-authorized',
+  meta: {
+    layout: 'blank',
+    public: true,
+  },
+})
+
+const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
+</script>
+
+<template>
+  <div class="misc-wrapper">
+    <ErrorHeader
+      status-code="401"
+      :title="$t('errorPage.notAuthorized')"
+      :description="$t('errorPage.notAuthorizedMessage')"
+    />
+
+    <VBtn
+      class="mb-11"
+      to="/"
+    >
+      {{ $t('common.backToHome') }}
+    </VBtn>
+
+    <!-- 👉 Image -->
+    <div class="misc-avatar w-100 text-center" />
+
+    <img
+      class="misc-footer-img d-none d-md-block"
+      :src="authThemeMask"
+      alt="misc-footer-img"
+      height="320"
+    >
+  </div>
+</template>
+
+<style lang="scss">
+@use "@core/scss/template/pages/misc.scss";
+</style>

package/dist/templates/vuexy-portal/src/pages/second-page.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <VCard title="Create Awesome 🙌">
+      <VCardText>This is your second page.</VCardText>
+      <VCardText>
+        Chocolate sesame snaps pie carrot cake pastry pie lollipop muffin.
+        Carrot cake dragée chupa chups jujubes. Macaroon liquorice cookie
+        wafer tart marzipan bonbon. Gingerbread jelly-o dragée
+        chocolate.
+      </VCardText>
+    </VCard>
+  </div>
+</template>

package/dist/templates/vuexy-portal/src/plugins/casl/shims-ability.d.ts

@@ -0,0 +1,8 @@
+import { ability } from './ability';
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $ability: typeof ability;
+    $can(this: this, ...args: Parameters<this['$ability']['can']>): boolean;
+  }
+}

package/dist/templates/vuexy-portal/src/plugins/i18n/locales/en_US.json

@@ -0,0 +1,88 @@
+{
+  "Home": "Home",
+  "navigation": {
+    "home": "Dashboard"
+  },
+  "common": {
+    "password": "Password",
+    "username": "Username",
+    "email": "Email",
+    "mobile": "Mobile Number",
+    "mobileNoPlaceholder": "123456789",
+    "logout": "Logout",
+    "name": "Name",
+    "joinDate": "Join Date",
+    "remark": "Remark",
+    "cancel": "Cancel",
+    "submit": "Submit", 
+    "search": "Search",
+    "select": "Select",
+    "filters": "Filters",
+    "transactionDate": "Transaction Date",
+    "amount": "Amount",
+    "details": "Details",
+    "address1": "Address Line 1",
+    "address2": "Address Line 2",
+    "address2Placeholder": "Address Line 2 (optional)",
+    "address3": "Address Line 3",
+    "address3Placeholder": "Address Line 3 (optional)",
+    "city": "City",
+    "state": "State",
+    "postalCode": "Postal Code",
+    "country": "Country",
+    "total": "Total",
+    "next": "Next",
+    "previous": "Previous",
+    "confirm": "Confirm",
+    "ok": "OK",
+    "reset": "Reset",
+    "saveChanges": "Save Changes",
+    "backToHome": "Back To Home"
+  },
+  "validation": {
+    "requiredMessage": "This field is required",
+    "invalidEmailFormat": "The Email field must be a valid email",
+    "invalidPasswordFormat": "Field must contain at least one uppercase, lowercase, special character and digit with min 8 chars",
+    "confirmPasswordNotMatch": "The Confirm Password field confirmation does not match",
+    "betweenMessage": "Enter number between {min} and {max}",
+    "integerMessage": "This field must be an integer",
+    "alphaMessage": "The field may only contain alphabetic characters",
+    "urlMessage": "URL is invalid",
+    "lengthMessage": "The field must be {length} characters",
+    "alphaDashMessage": "The field may only contain alpha-numeric characters, as well as dashes",
+    "mobileNumberFormat": "The Mobile Number field must be a valid mobile number",
+    "currencyFormat": "The field must be a valid currency and must be greater than 0"
+  },
+  "pagination": {
+    "paginationMeta": "Showing {start} to {end} of {total} entries"
+  },
+  "errorPage": {
+    "pageNotFound": "Page Not Found ⚠️",
+    "pageNotFoundMessage": "We couldn't find the page you are looking for.",
+    "notAuthorized": "You are not authorized! 🔐",
+    "notAuthorizedMessage": "You don’t have permission to access this page."
+  },
+  "loginPage": {
+    "login": "Login",
+    "mobileNoPlaceholder": "+60123456789",
+    "welcomeMesage": "Welcome to {0}",
+    "welcomeMesage2": "Please sign-in to your account and start using merchant platform"
+  },
+  "accountSetting": {
+    "settings": "Settings",
+    "security": "Security"
+  },
+  "changePassword": {
+    "changePassword": "Change Password",
+    "currentPassword": "Current Password",
+    "newPassword": "New Password",
+    "confirmPassword": "Confirm New Password",
+    "passwordRequirements": "Password Requirements:",
+    "passwordRequirement1": "Minimum 8 characters long - the more, the better",
+    "passwordRequirement2": "At least one uppercase letter",
+    "passwordRequirement3": "At least one lowercase letter",
+    "passwordRequirement4": "At least one number",
+    "passwordRequirement5": "At least one special character",
+    "passwordChangeSuccess": "Password changed successfully"
+  }
+}

package/dist/templates/vuexy-portal/src/plugins/i18n/locales/zh_CN.json

@@ -0,0 +1,88 @@
+{
+  "Home": "首页",
+  "navigation": {
+    "home": "首页"
+  },
+  "common": {
+    "password": "密码",
+    "username": "用户名",
+    "email": "电子邮件",
+    "mobile": "手机号码",
+    "mobileNoPlaceholder": "123456789",
+    "logout": "登出",
+    "name": "姓名",
+    "joinDate": "加入日期",
+    "remark": "备注",
+    "cancel": "取消",
+    "submit": "提交",
+    "search": "搜索",
+    "select": "选择",
+    "filters": "筛选器",
+    "transactionDate": "交易日期",
+    "amount": "金额",
+    "details": "详情",
+    "address1": "地址1",
+    "address2": "地址2",
+    "address2Placeholder": "地址2（可选）",
+    "address3": "地址3",
+    "address3Placeholder": "地址3（可选）",
+    "city": "城市",
+    "state": "州",
+    "postalCode": "邮政编码",
+    "country": "国家",
+    "total": "总计",
+    "next": "下一页",
+    "previous": "上一页",
+    "confirm": "确认",
+    "ok": "确定",
+    "reset": "重置",
+    "saveChanges": "保存",
+    "backToHome": "返回首页"
+  },
+  "validation": {
+    "requiredMessage": "此字段为必填项",
+    "invalidEmailFormat": "电子邮件格式无效",
+    "invalidPasswordFormat": "字段必须包含至少一个大写字母、一个小写字母、一个特殊字符和一个数字，长度至少为8个字符",
+    "confirmPasswordNotMatch": "确认密码与密码不匹配",
+    "betweenMessage": "请输入介于 {min} 和 {max} 之间的数字",
+    "integerMessage": "此字段必须为整数",
+    "alphaMessage": "此字段只能包含字母字符",
+    "urlMessage": "URL无效",
+    "lengthMessage": "此字段必须为 {length} 个字符",
+    "alphaDashMessage": "此字段只能包含字母数字字符和破折号",
+    "mobileNumberFormat": "手机号码格式无效",
+    "currencyFormat": "该字段必须是有效的金额且必须大于0"
+  },  
+  "pagination": {
+    "paginationMeta": "显示 {start} 到 {end} 条，共 {total} 条记录"
+  },
+  "errorPage": {
+    "pageNotFound": "未找到页面 ⚠️",
+    "pageNotFoundMessage": "未能找到您要查找的页面。",
+    "notAuthorized": "您没有权限！🔐",
+    "notAuthorizedMessage": "您没有权限访问此页面。"
+  },  
+  "loginPage": {
+    "login": "登录",
+    "mobileNoPlaceholder": "+60123456789",
+    "welcomeMesage": "欢迎来到 {0}",
+    "welcomeMesage2": "请登录您的账户并开始使用商家平台"
+  },
+  "accountSetting": {
+    "settings": "设置",    
+    "security": "安全设置"
+  },  
+  "changePassword": {
+    "changePassword": "修改密码",
+    "currentPassword": "当前密码",
+    "newPassword": "新密码",
+    "confirmPassword": "确认新密码",
+    "passwordRequirements": "密码要求:",
+    "passwordRequirement1": "至少8个字符长 - 越长越好",
+    "passwordRequirement2": "至少一个大写字母",
+    "passwordRequirement3": "至少一个小写字母",
+    "passwordRequirement4": "至少一个数字",
+    "passwordRequirement5": "至少一个特殊字符",
+    "passwordChangeSuccess": "密码修改成功"
+  }
+}

package/dist/templates/vuexy-portal/src/plugins/i18n/vue-i18n.d.ts

@@ -0,0 +1,17 @@
+/**
+ * global type definitions
+ * using the typescript interface, you can define the i18n resources that is type-safed!
+ */
+
+/**
+ * you need to import the some interfaces
+ */
+import en from '@/plugins/i18n/locales/en_US.json';
+import 'vue-i18n';
+
+type LocaleMessage = typeof en
+
+declare module 'vue-i18n' { 
+  export interface DefineLocaleMessage extends LocaleMessage {
+  }
+}