Update Ui Signin

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
-            >©{{ new Date().getFullYear() }}
-            {{
-              isVietnamese ? 'Bản quyền thuộc về Utopia Villas & Resort' : 'Copyright by Utopia Villas & Resort'
-            }}</span
-          >
+          <span v-if="isVietnamese">
+            ©{{ new Date().getFullYear() }} Bản quyển thuộc về
+            <a :href="company.parent.website" target="_blank" :title="company.parent.slogan">
+              {{ company.parent.name }}
+            </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() {
-    window.addEventListener('keyup', (ev) =>
-      ev.key === 'Enter' && this.$route.name === 'signup' ? this.signin() : false,
-    );
-    if (!this.module) return this.$router.push('/welcome');
-
-  },
+  // mounted() {
+  //   window.addEventListener('keyup', (ev) =>
+  //     ev.key === 'Enter' && this.$route.name === 'signup' ? this.signin() : false,
+  //   );
+  //   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ợ.'
-              : 'An error occurred. Please try again or contact the hotline for support.'
+              ? `Đã 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: ${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;
 }