Update Ui Signin

constants/company.js

@@ -0,0 +1,25 @@
+export const COMPANY = {
+  name: 'BigDataTechCloud',
+  website: 'https://bigdatatech.cloud',
+
+  parent: {
+    name: 'BigDataTech',
+    website: 'https://bigdatatech.vn/',
+    email: 'contact@bigdatatech.vn',
+    phone: '(+84) 943 833 599',
+    address: 'Tầng 4, 505 Đường Minh Khai, Phường Vĩnh Tuy, Hà Nội',
+    slogan: 'BigDataTech - Giải pháp Big Data & Phát triển Phần mềm',
+  },
+
+  email: {
+    contact: 'contact@bigdatatech.vn',
+    support: 'contact@bigdatatech.vn',
+  },
+
+  phone: {
+    main: '(+84) 943 833 599',
+    hotline: '(+84) 943 833 599',
+  },
+
+  address: 'Tầng 4, 505 Đường Minh Khai, Phường Vĩnh Tuy, Hà Nội',
+};

layouts/default.vue

@@ -1,56 +1,78 @@
 <template>
   <div>
-    <Nuxt class="has-background-light" style="min-height: 100vh;" v-if="ready" />
+    <Nuxt class="has-background-light" style="min-height: 100vh" v-if="ready" />
-    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
+    <Modal @close="showmodal = undefined" v-bind="showmodal" v-if="showmodal"></Modal>
-    <SnackBar @close="snackbar=undefined" v-bind="snackbar" v-if="snackbar" />
+    <SnackBar @close="snackbar = undefined" v-bind="snackbar" v-if="snackbar" />
   </div>
 </template>
+
 <script>
+import { COMPANY } from '../constants/company';
+
 export default {
   data() {
     return {
-      ready: false
+      ready: false,
-    }
+      company: COMPANY,
+    };
   },
   head() {
-    return {title: 'Login'}
+    return { title: `${this.company.name}` };
   },
   async created() {
-    let connlist = this.$readyapi(['registermethod', 'authmethod', 'usertype', 'authstatus', 'common'])
+    let connlist = this.$readyapi(['registermethod', 'authmethod', 'usertype', 'authstatus', 'common']);
-    let filter = connlist.filter(v=>!v.ready)
+    let filter = connlist.filter((v) => !v.ready);
-    let result = filter.length>0? await this.$getapi(filter) : undefined
+    let result = filter.length > 0 ? await this.$getapi(filter) : undefined;
-    if(result==='error') {
+    if (result === 'error') {
-      this.$dialog({width: '500px', icon: 'mdi mdi-alert-circle',
+      this.$dialog({
-      content: 'An error occurred while connecting to the data. Please try again in a few minutes.', type: 'is-danger', progress:true, duration: 6})
+        width: '500px',
+        icon: 'mdi mdi-alert-circle',
+        content: 'An error occurred while connecting to the data. Please try again in a few minutes.',
+        type: 'is-danger',
+        progress: true,
+        duration: 6,
+      });
     } else {
-      this.ready = true
+      this.ready = true;
     }
   },
   mounted() {
-    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    if(this.$empty(this.viewport)) {
+    if (this.$empty(this.viewport)) {
-      if(width<=768) this.viewport = 1 //'mobile'
+      if (width <= 768) this.viewport = 1; //'mobile'
-      else if(width>=769 && width<=1023) this.viewport = 2  //'tablet'
+      else if (width >= 769 && width <= 1023) this.viewport = 2; //'tablet'
-      else if(width>=1024 && width<=1215) this.viewport = 3 //'desktop'
+      else if (width >= 1024 && width <= 1215) this.viewport = 3; //'desktop'
-      else if(width>=1216 && width<=1407) this.viewport = 4 //'widescreen'
+      else if (width >= 1216 && width <= 1407) this.viewport = 4; //'widescreen'
-      else if(width>=1408) this.viewport = 5 //'fullhd'
+      else if (width >= 1408) this.viewport = 5; //'fullhd'
     }
-    if(this.$route.query.link) this.$store.commit("updateLink", {link: this.$route.query.link})
+    if (this.$route.query.link) this.$store.commit('updateLink', { link: this.$route.query.link });
-    if(this.$route.query.module) this.$store.commit('updateStore', {name: 'module', data: this.$route.query.module})
+    if (this.$route.query.module) this.$store.commit('updateStore', { name: 'module', data: this.$route.query.module });
   },
   computed: {
     showmodal: {
-      get: function() {return this.$store.state['showmodal']},
+      get: function () {
-      set: function(val) {this.$store.commit('updateStore', {name: 'showmodal', data: val})}
+        return this.$store.state['showmodal'];
+      },
+      set: function (val) {
+        this.$store.commit('updateStore', { name: 'showmodal', data: val });
+      },
     },
     snackbar: {
-      get: function() {return this.$store.state['snackbar']},
+      get: function () {
-      set: function(val) {this.$store.commit('updateStore', {name: 'snackbar', data: val})}
+        return this.$store.state['snackbar'];
+      },
+      set: function (val) {
+        this.$store.commit('updateStore', { name: 'snackbar', data: val });
+      },
     },
     viewport: {
-      get: function() {return this.$store.state.viewport},
+      get: function () {
-      set: function(val) {this.$store.commit("updateViewPort", {viewport: val})}
+        return this.$store.state.viewport;
-    }
+      },
-  }
+      set: function (val) {
-}
+        this.$store.commit('updateViewPort', { viewport: val });
+      },
+    },
+  },
+};
 </script>

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "nuxt",
+    "dev": "nuxt dev",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate"

pages/signin.vue

@@ -4,7 +4,7 @@
       <div class="has-background-white px-6 py-6 login-box">
         <div class="login-header">
           <Logo />
-          <h2 class="title mt-4">{{ isVietnamese ? 'Đăng nhập hệ thống' : 'Login' }}</h2>
+          <h2 class="title mt-4">{{ isVietnamese ? 'Đăng nhập' : 'Login' }}</h2>
           <p class="subtitle is-6 has-text-centered" v-if="getEnv">
             {{ getEnv }}
           </p>
@@ -71,7 +71,11 @@
           </div>
           <div class="field is-grouped mt-5 is-align-items-center is-justify-content-space-between">
             <div class="control">
-              <button class="button btn-primary" @click="signin()" @keyup.enter="signin()">
+              <button
+                :class="['button', 'btn-primary', isLoaded && 'is-loading']"
+                @click="signin()"
+                @keyup.enter="signin()"
+              >
                 {{ isVietnamese ? 'Đăng nhập' : 'Login' }}
               </button>
             </div>
@@ -83,12 +87,18 @@
           </div>
         </div>
         <footer class="login-footer">
-          <span
+          <span v-if="isVietnamese">
-            >©{{ new Date().getFullYear() }}
+            ©{{ new Date().getFullYear() }} Bản quyển thuộc về
-            {{
+            <a :href="company.parent.website" target="_blank" :title="company.parent.slogan">
-              isVietnamese ? 'Bản quyền thuộc về Utopia Villas & Resort' : 'Copyright by Utopia Villas & Resort'
+              {{ company.parent.name }}
-            }}</span
+            </a>
-          >
+          </span>
+          <span v-else>
+            ©{{ new Date().getFullYear() }} Copyright by
+            <a :href="company.parent.website" target="_blank" :title="company.parent.name">
+              {{ company.parent.name }}
+            </a>
+          </span>
         </footer>
       </div>
     </div>
@@ -96,9 +106,10 @@
 </template>
 <script>
 import Bowser from 'bowser';
+import { COMPANY } from '../constants/company';
 export default {
   head() {
-    return { title: this.isVietnamese ? 'Đăng nhập' : 'Login' };
+    return { title: this.isVietnamese ? `Đăng nhập - ${this.company.name}` : `Login - ${this.company.name}` };
   },
   data() {
     return {
@@ -112,15 +123,15 @@ export default {
       isLoaded: false,
       data: undefined,
       account: undefined,
+      company: COMPANY,
     };
   },
-  mounted() {
+  // mounted() {
-    window.addEventListener('keyup', (ev) =>
+  //   window.addEventListener('keyup', (ev) =>
-      ev.key === 'Enter' && this.$route.name === 'signup' ? this.signin() : false,
+  //     ev.key === 'Enter' && this.$route.name === 'signup' ? this.signin() : false,
-    );
+  //   );
-    if (!this.module) return this.$router.push('/welcome');
+  //   if (!this.module) return this.$router.push('/welcome');
-
+  // },
-  },
   computed: {
     login: {
       get: function () {
@@ -255,20 +266,25 @@ export default {
       return this.errors.length > 0 ? true : false;
     },
     async signin() {
-      if (this.checkError()) return;
+      this.isLoaded = true;
+      if (this.checkError()) {
+        this.isLoaded = false;
+        return;
+      }
       let conn = this.$findapi('login');
       conn.params.filter = { username: this.username, password: this.password };
       let result = await this.$getapi([conn]);
       if (result === 'error') {
+        this.isLoaded = false;
         return this.$dialog(
           `${
             this.isVietnamese
-              ? 'Đã xảy ra lỗi. Vui lòng thử lại hoặc liên hệ số hotline để được hỗ trợ.'
+              ? `Đã xảy ra lỗi. Vui lòng thử lại hoặc liên hệ số hotline: ${this.company.phone.hotline} để được hỗ trợ.`
-              : 'An error occurred. Please try again or contact the hotline for support.'
+              : `An error occurred. Please try again or contact the hotline: ${this.company.phone.hotline} for support.`
           }`,
           `${this.isVietnamese ? 'Lỗi kết nối' : 'Connection error'}`,
           'Error',
-          10,
+          20,
         );
       }
       let data = result.find((v) => v.name === 'login').data.rows;
@@ -296,7 +312,10 @@ export default {
       return this.errors.length > 0 ? true : false;
     },
     async fillData(data) {
-      if (this.invalidLogin(data)) return;
+      if (this.invalidLogin(data)) {
+        this.isLoaded = false;
+        return;
+      }
       //check permision
       if (this.module !== 'website') {
         let userapps = await this.$getdata('userapps', { user: data.id, apps__code: this.module }, undefined, true);
@@ -398,7 +417,7 @@ export default {
   width: 100%;
   height: 46px;
 
-  background-color: #1f3a3d; /* primary from logo */
+  background-color: #16a34a; /* primary from logo */
   color: #ffffff;
 
   border: none;
@@ -412,7 +431,7 @@ export default {
 }
 
 .wrapper-login .btn-primary:hover {
-  background-color: #2c5054;
+  background-color: #15803d;
 }
 
 .wrapper-login .btn-primary:active {
@@ -431,7 +450,7 @@ export default {
 .wrapper-login .reset-link {
   font-size: 14px;
   font-weight: 500;
-  color: #3f6e73;
+  color: #16a34a;
   text-decoration: none;
   transition: all 0.2s ease;
 }