github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge pull request #251 from wingkwong/feat/i18n 

feat: add i18n on Sign in Page
pull/257/head
o1lab 4 years ago committed by GitHub
parent
bcad88eb07 0e1cd6e465
commit
56ee708d7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 207 additions and 123 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 280
      packages/nc-gui/pages/user/authentication/signin.vue
  2. 16
      packages/nc-gui/static/lang/en.json
  3. 16
      packages/nc-gui/static/lang/ja.json
  4. 16
      packages/nc-gui/static/lang/zh.json

280
packages/nc-gui/pages/user/authentication/signin.vue
Unescape View File

@ -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
*

16
packages/nc-gui/static/lang/en.json
Unescape View File

@ -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"
}

16
packages/nc-gui/static/lang/ja.json
Unescape View File

@ -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"
}

16
packages/nc-gui/static/lang/zh.json
Unescape View File

@ -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"
}
Write Preview
Loading…
Cancel
Save