Merge pull request #251 from wingkwong/feat/i18n

feat: add i18n on Sign in Page

packages/nc-gui/pages/user/authentication/signin.vue

@@ -1,20 +1,19 @@
 <template>
-
   <v-container class="text-center" fluid>
-
     <v-row align="center">
       <v-col>
         <v-row align="center">
           <v-col md="4" offset-md="4">
-
             <v-card class="pa-10 elevation-10 mt-10" color="">
               <div
-                style="position: absolute;top:-45px;
-                  left:-moz-calc(50% - 45px);
-                  left:-webkit-calc(50% - 45px);
-                  left:calc(50% - 45px);
+                style="
+                  position: absolute;
+                  top: -45px;
+                  left: -moz-calc(50% - 45px);
+                  left: -webkit-calc(50% - 45px);
+                  left: calc(50% - 45px);
                   border-radius: 15px;
-                  "
+                "
                 class="primary"
               >
                 <v-img
@@ -24,9 +23,9 @@
                   :src="require('~/assets/img/icons/512x512-trans.png')"
                 >
                 </v-img>
-
               </div>
-              <h1 class="mt-4">SIGN IN</h1>
+              <!-- SIGN IN -->
+              <h1 class="mt-4">{{ $t('signin.title') }}</h1>
 
               <div>
                 <v-alert type="error" dismissible v-model="formUtil.formErr">
@@ -34,30 +33,38 @@
                 </v-alert>
               </div>
 
-
-              <v-form v-if=" type === 'jwt'" v-model="valid" ref="formType" lazy-validation>
-
-
+              <v-form
+                v-if="type === 'jwt'"
+                v-model="valid"
+                ref="formType"
+                lazy-validation
+              >
+                <!-- Enter your work email -->
                 <v-text-field
-                  label="Enter your work email"
+                  v-bind:label="$t('signin.input_1')"
                   v-model="form.email"
                   :rules="formRules.email"
-                  required>
+                  required
+                >
                 </v-text-field>
 
+                <!-- Enter your password -->
                 <v-text-field
                   name="input-10-2"
-                  label="Enter your password"
+                  v-bind:label="$t('signin.input_2')"
                   min="8"
                   :append-icon="e3 ? 'visibility' : 'visibility_off'"
                   @click:append="() => (e3 = !e3)"
                   v-model="form.password"
                   :rules="formRules.password"
-                  :type="e3 ? 'password' : 'text'">
+                  :type="e3 ? 'password' : 'text'"
+                >
                 </v-text-field>
-
+                <!-- Forgot your password -->
                 <p class="accent--text text-right caption font-weight-light">
-                  <router-link to="/user/password/forgot">Forgot your password ?</router-link>
+                  <router-link to="/user/password/forgot">{{
+                    $t('signin.forget_password')
+                  }}</router-link>
                 </p>
 
                 <!--                <vue-recaptcha @verify="onNormalVerify" sitekey="6LfbcqMUAAAAAAb_2319UdF8m68JHSYVy_m4wPBx"-->
@@ -69,40 +76,72 @@
                 <!--                  <b>Sign In</b>-->
                 <!--                </v-btn>-->
 
-                <v-btn @click="MtdOnSignin" color="primary" large elevation-10 :disabled="false" v-ge="['Sign In','']">
+                <v-btn
+                  @click="MtdOnSignin"
+                  color="primary"
+                  large
+                  elevation-10
+                  :disabled="false"
+                  v-ge="['Sign In', '']"
+                >
                   <b>Sign In</b>
                 </v-btn>
 
-
-                <br>
-                <br>
-                <br>
-
-                <p class="caption font-weight-light">Don't have an account ?
-                  <router-link to="/user/authentication/signup" v-ge="['Don\'t have an account ?','']">Sign Up
+                <br />
+                <br />
+                <br />
+                <!-- Don't have an account ? -->
+                <p class="caption font-weight-light">
+                  {{ $t('signin.footer_text_1') }}
+                  <!-- Sign Up -->
+                  <router-link
+                    to="/user/authentication/signup"
+                    v-ge="['Don\'t have an account ?', '']"
+                  >
+                    {{ $t('signin.footer_text_2') }}
                   </router-link>
                 </p>
                 <div>
                   <v-btn
-
                     v-if="googleAuthEnabled"
-                    :href="_isDev ?'http://localhost:8080/auth/google':'../auth/google'" outlined large elevation-10
+                    :href="
+                      _isDev
+                        ? 'http://localhost:8080/auth/google'
+                        : '../auth/google'
+                    "
+                    outlined
+                    large
+                    elevation-10
                     block
-                    color="blue">
-                    <img :src="require('~/assets/img/gmail.png')"
-                         class="img-responsive" alt="google"
-                         width="24px">
+                    color="blue"
+                  >
+                    <img
+                      :src="require('~/assets/img/gmail.png')"
+                      class="img-responsive"
+                      alt="google"
+                      width="24px"
+                    />
                     <b>&nbsp; &nbsp;Sign In with Google</b>
                   </v-btn>
                   <v-btn
-
                     v-if="githubAuthEnabled"
-                    :href="_isDev ?'http://localhost:8080/auth/github':'../auth/github'" outlined large elevation-10
+                    :href="
+                      _isDev
+                        ? 'http://localhost:8080/auth/github'
+                        : '../auth/github'
+                    "
+                    outlined
+                    large
+                    elevation-10
                     block
-                    color="blue">
-                    <img :src="require('~/assets/img/github.png')"
-                         class="img-responsive" alt="github"
-                         width="24px">
+                    color="blue"
+                  >
+                    <img
+                      :src="require('~/assets/img/github.png')"
+                      class="img-responsive"
+                      alt="github"
+                      width="24px"
+                    />
                     <b>&nbsp; &nbsp;Sign In with Github</b>
                   </v-btn>
 
@@ -117,30 +156,30 @@
                                       <b>&nbsp; &nbsp;Sign In with Github</b>
                                     </v-btn>-->
                 </div>
-
-
               </v-form>
               <!--              <p class="title">-->
               <!--                OR-->
               <!--              </p>-->
 
-              <v-form v-else-if=" type === 'masterKey'" v-model="formUtil.valid1" ref="formType1" @submit="MtdOnSignup"
-                      elevation-20>
-
-
+              <v-form
+                v-else-if="type === 'masterKey'"
+                v-model="formUtil.valid1"
+                ref="formType1"
+                @submit="MtdOnSignup"
+                elevation-20
+              >
                 <v-text-field
                   label="Admin Secret"
                   v-model="form.secret"
                   :rules="formRules.secret"
-
                   min="8"
                   :append-icon="formUtil.e4 ? 'visibility' : 'visibility_off'"
                   @click:append="() => (formUtil.e4 = !formUtil.e4)"
                   :type="formUtil.e4 ? 'password' : 'text'"
-                  required>
+                  required
+                >
                 </v-text-field>
 
-
                 <!---->
 
                 <!--                <vue-recaptcha @verify="onNormalVerify" sitekey="6LfbcqMUAAAAAAb_2319UdF8m68JHSYVy_m4wPBx"-->
@@ -148,47 +187,42 @@
 
                 <!--                </vue-recaptcha>-->
 
-                <v-btn @click="MtdOnSignin" color="primary" class="btn--large"
-                       :disabled="!formUtil.recpatcha || !formUtil.valid1" v-ge="['Authenticate','']">
+                <v-btn
+                  @click="MtdOnSignin"
+                  color="primary"
+                  class="btn--large"
+                  :disabled="!formUtil.recpatcha || !formUtil.valid1"
+                  v-ge="['Authenticate', '']"
+                >
                   Authenticate&nbsp;
-
-
                 </v-btn>
               </v-form>
 
-
               <template v-else>
-                <br/>
+                <br />
                 <v-alert type="warning" outlined icon="mdi-alert">
                   <!--                <v-icon color="warning">mdi-alert</v-icon>-->
                   Authentication not configured in configuration
                 </v-alert>
               </template>
             </v-card>
-
-
           </v-col>
         </v-row>
 
-        <br>
-
+        <br />
       </v-col>
     </v-row>
-
   </v-container>
-
-
 </template>
 
 <script>
-
-import Vue from "vue";
+import Vue from 'vue';
 
 // const {shell} = require("electron").remote.require(
 //   "./libs"
 // );
-import {mapGetters, mapActions} from 'vuex'
-import {VueReCaptcha} from "vue-recaptcha-v3";
+import { mapGetters, mapActions } from 'vuex';
+import { VueReCaptcha } from 'vue-recaptcha-v3';
 // import VueRecaptcha from 'vue-recaptcha';
 
 export default {
@@ -199,21 +233,26 @@ export default {
 
   data() {
     return {
-
-
       form: {
         email: null,
-        password: null
+        password: null,
       },
 
       formRules: {
         email: [
-          v => !!v || 'E-mail is required',
-          v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
+          // E-mail is required
+          (v) => !!v || this.$t('signin.form.rules.email_1'),
+          // E-mail must be valid
+          (v) =>
+            /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
+            this.$t('signin.form.rules.email_2'),
         ],
         password: [
-          v => !!v || 'Password is required',
-          v => (v && v.length >= 8) || 'You password must be atleast 8 characters'
+          // Password is required
+          (v) => !!v || this.$t('signin.form.rules.password_1'),
+          // You password must be atleast 8 characters
+          (v) =>
+            (v && v.length >= 8) || this.$t('signin.form.rules.password_2'),
         ],
       },
       formUtil: {
@@ -223,14 +262,13 @@ export default {
         recpatcha: true,
         e3: true,
         passwordProgress: 0,
-        progressColorValue: 'red'
+        progressColorValue: 'red',
       },
 
       valid: false,
       e3: true,
       recpatcha: false,
-
-    }
+    };
   },
   methods: {
     openGoogleSiginInBrowser(e) {
@@ -247,15 +285,13 @@ export default {
     },
 
     PlusCounter() {
-      this.$store.dispatch('ActPlusCounter')
+      this.$store.dispatch('ActPlusCounter');
     },
 
     async MtdOnSignin(e) {
-
       e.preventDefault();
       if (this.type === 'jwt') {
         if (this.$refs.formType.validate()) {
-
           let err = null;
           //this.$nuxt.$loading.start()
           this.form.firstName = this.form.email;
@@ -265,23 +301,25 @@ export default {
           // await this.$recaptchaLoaded()
           // const recaptchaToken = await this.$recaptcha('login')
 
-          err = await this.$store.dispatch('users/ActSignIn', {...this.form})//, recaptchaToken});
+          err = await this.$store.dispatch('users/ActSignIn', { ...this.form }); //, recaptchaToken});
           if (err) {
             this.formUtil.formErr = true;
             this.formUtil.formErrMsg = err.data.msg;
-            return
+            return;
           }
           //this.$nuxt.$loading.finish()
-
         }
       } else if (this.type === 'masterKey') {
-        const valid = await this.$store.dispatch('users/ActVerifyMasterKey', this.form.secret);
+        const valid = await this.$store.dispatch(
+          'users/ActVerifyMasterKey',
+          this.form.secret
+        );
         if (!valid) {
           this.formUtil.formErr = true;
           this.formUtil.formErrMsg = 'Invalid admin secret';
-          return
+          return;
         }
-        this.$store.commit('users/MutMasterKey', this.form.secret)
+        this.$store.commit('users/MutMasterKey', this.form.secret);
       }
 
       if ('redirect_to' in this.$route.query) {
@@ -296,74 +334,78 @@ export default {
       this.$store.dispatch('users/ActAuthGoogle');
     },
 
-
     MtdOnReset() {
       //console.log('in method reset');
-    }
-
-
+    },
   },
   computed: {
     counter() {
-      return this.$store.getters['users/GtrCounter']
+      return this.$store.getters['users/GtrCounter'];
     },
     displayName() {
-      return this.$store.getters['users/GtrUser']
+      return this.$store.getters['users/GtrUser'];
     },
     type() {
-      return this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.authType;
+      return (
+        this.$store.state.project.projectInfo &&
+        this.$store.state.project.projectInfo.authType
+      );
     },
     googleAuthEnabled() {
-      return this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.googleAuthEnabled;
+      return (
+        this.$store.state.project.projectInfo &&
+        this.$store.state.project.projectInfo.googleAuthEnabled
+      );
     },
     githubAuthEnabled() {
-      return this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.githubAuthEnabled;
-    }
-  },
-  beforeCreated() {
+      return (
+        this.$store.state.project.projectInfo &&
+        this.$store.state.project.projectInfo.githubAuthEnabled
+      );
+    },
   },
+  beforeCreated() {},
   async created() {
-
     // this.type = (await this.$store.dispatch('users/ActGetAuthType')).type;
     if (this.$route.query && this.$route.query.error) {
-      this.$nextTick(() => this.$toast.error(this.$route.query.error).goAway(5000));
-      this.$router.replace({path: '/user/authentication/signin'})
+      this.$nextTick(() =>
+        this.$toast.error(this.$route.query.error).goAway(5000)
+      );
+      this.$router.replace({ path: '/user/authentication/signin' });
     }
   },
-  mounted() {
-  },
-  beforeDestroy() {
-  },
-  destroy() {
-  },
-  validate({params}) {
-    return true
+  mounted() {},
+  beforeDestroy() {},
+  destroy() {},
+  validate({ params }) {
+    return true;
   },
   head() {
     return {
-      title: 'Log In | Noco',
+      title: this.$t('signin.head.title'),
       meta: [
-        {hid: 'Log In To Noco', name: 'Log In To Noco', content: 'Log In To Noco'}
-      ]
-    }
-
+        {
+          hid: this.$t('signin.head.meta.hid'),
+          name: this.$t('signin.head.meta.name'),
+          content: this.$t('signin.head.meta.content'),
+        },
+      ],
+    };
   },
   props: {},
   watch: {},
-  directives: {}
-}
-
+  directives: {},
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
  *
  * @author Naveen MR <oof1lab@gmail.com>
  * @author Pranav C Balan <pranavxc@gmail.com>
+ * @author Wing-Kam Wong <wingkwong.code@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
@@ -381,4 +423,4 @@ export default {
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
--->
+-->

packages/nc-gui/static/lang/en.json

@@ -23,5 +23,19 @@
   "home.show_community_message_2": "Book a Free DEMO",
   "home.show_community_message_3": "Get your questions answered",
   "home.show_community_message_4": "Follow NocoDB",
-  "home.search.no_result": "Your search for {search} found no results"
+  "home.search.no_result": "Your search for {search} found no results",
+  "signin.title": "SIGN IN",
+  "signin.input_1": "Enter your work email",
+  "signin.input_2": "Enter your password",
+  "signin.forget_password": "Forgot your password ?",
+  "signin.footer_text_1": "Don't have an account ?",
+  "signin.footer_text_2": "Sign Up",
+  "signin.form.rules.email_1": "E-mail is required",
+  "signin.form.rules.email_2": "E-mail must be valid",
+  "signin.form.rules.password_1": "Password is required",
+  "signin.form.rules.password_2": "You password must be atleast 8 characters",
+  "signin.head.title": "Log In | Noco",
+  "signin.head.meta.hid": "Log In To Noco",
+  "signin.head.meta.name": "Log In To Noco",
+  "signin.head.meta.content": "Log In To Noco"
 }

packages/nc-gui/static/lang/ja.json

@@ -23,5 +23,19 @@
   "home.show_community_message_2": "Book a Free DEMO",
   "home.show_community_message_3": "Get your questions answered",
   "home.show_community_message_4": "Follow NocoDB",
-  "home.search.no_result": "Your search for {search} found no results"
+  "home.search.no_result": "Your search for {search} found no results",
+  "signin.title": "SIGN IN",
+  "signin.input_1": "Enter your work email",
+  "signin.input_2": "Enter your password",
+  "signin.forget_password": "Forgot your password ?",
+  "signin.footer_text_1": "Don't have an account ?",
+  "signin.footer_text_2": "Sign Up",
+  "signin.form.rules.email_1": "E-mail is required",
+  "signin.form.rules.email_2": "E-mail must be valid",
+  "signin.form.rules.password_1": "Password is required",
+  "signin.form.rules.password_2": "You password must be atleast 8 characters",
+  "signin.head.title": "Log In | Noco",
+  "signin.head.meta.hid": "Log In To Noco",
+  "signin.head.meta.name": "Log In To Noco",
+  "signin.head.meta.content": "Log In To Noco"
 }

packages/nc-gui/static/lang/zh.json

@@ -23,6 +23,20 @@
     "home.show_community_message_2": "Book a Free DEMO",
     "home.show_community_message_3": "Get your questions answered",
     "home.show_community_message_4": "Follow NocoDB",
-    "home.search.no_result": "Your search for {search} found no results"
+    "home.search.no_result": "Your search for {search} found no results",
+    "signin.title": "SIGN IN",
+    "signin.input_1": "Enter your work email",
+    "signin.input_2": "Enter your password",
+    "signin.forget_password": "Forgot your password ?",
+    "signin.footer_text_1": "Don't have an account ?",
+    "signin.footer_text_2": "Sign Up",
+    "signin.form.rules.email_1": "E-mail is required",
+    "signin.form.rules.email_2": "E-mail must be valid",
+    "signin.form.rules.password_1": "Password is required",
+    "signin.form.rules.password_2": "You password must be atleast 8 characters",
+    "signin.head.title": "Log In | Noco",
+    "signin.head.meta.hid": "Log In To Noco",
+    "signin.head.meta.name": "Log In To Noco",
+    "signin.head.meta.content": "Log In To Noco"
   }