Browse Source

chore: format code

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
pull/251/head
Wing-Kam Wong 4 years ago
parent
commit
0e1cd6e465
  1. 244
      packages/nc-gui/pages/user/authentication/signin.vue

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

@ -1,15 +1,14 @@
<template> <template>
<v-container class="text-center" fluid> <v-container class="text-center" fluid>
<v-row align="center"> <v-row align="center">
<v-col> <v-col>
<v-row align="center"> <v-row align="center">
<v-col md="4" offset-md="4"> <v-col md="4" offset-md="4">
<v-card class="pa-10 elevation-10 mt-10" color=""> <v-card class="pa-10 elevation-10 mt-10" color="">
<div <div
style="position: absolute;top:-45px; style="
position: absolute;
top: -45px;
left: -moz-calc(50% - 45px); left: -moz-calc(50% - 45px);
left: -webkit-calc(50% - 45px); left: -webkit-calc(50% - 45px);
left: calc(50% - 45px); left: calc(50% - 45px);
@ -24,7 +23,6 @@
:src="require('~/assets/img/icons/512x512-trans.png')" :src="require('~/assets/img/icons/512x512-trans.png')"
> >
</v-img> </v-img>
</div> </div>
<!-- SIGN IN --> <!-- SIGN IN -->
<h1 class="mt-4">{{ $t('signin.title') }}</h1> <h1 class="mt-4">{{ $t('signin.title') }}</h1>
@ -35,15 +33,19 @@
</v-alert> </v-alert>
</div> </div>
<v-form
<v-form v-if=" type === 'jwt'" v-model="valid" ref="formType" lazy-validation> v-if="type === 'jwt'"
v-model="valid"
ref="formType"
lazy-validation
>
<!-- Enter your work email --> <!-- Enter your work email -->
<v-text-field <v-text-field
v-bind:label="$t('signin.input_1')" v-bind:label="$t('signin.input_1')"
v-model="form.email" v-model="form.email"
:rules="formRules.email" :rules="formRules.email"
required> required
>
</v-text-field> </v-text-field>
<!-- Enter your password --> <!-- Enter your password -->
@ -55,11 +57,14 @@
@click:append="() => (e3 = !e3)" @click:append="() => (e3 = !e3)"
v-model="form.password" v-model="form.password"
:rules="formRules.password" :rules="formRules.password"
:type="e3 ? 'password' : 'text'"> :type="e3 ? 'password' : 'text'"
>
</v-text-field> </v-text-field>
<!-- Forgot your password --> <!-- Forgot your password -->
<p class="accent--text text-right caption font-weight-light"> <p class="accent--text text-right caption font-weight-light">
<router-link to="/user/password/forgot">{{ $t('signin.forget_password') }}</router-link> <router-link to="/user/password/forgot">{{
$t('signin.forget_password')
}}</router-link>
</p> </p>
<!-- <vue-recaptcha @verify="onNormalVerify" sitekey="6LfbcqMUAAAAAAb_2319UdF8m68JHSYVy_m4wPBx"--> <!-- <vue-recaptcha @verify="onNormalVerify" sitekey="6LfbcqMUAAAAAAb_2319UdF8m68JHSYVy_m4wPBx"-->
@ -71,41 +76,72 @@
<!-- <b>Sign In</b>--> <!-- <b>Sign In</b>-->
<!-- </v-btn>--> <!-- </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> <b>Sign In</b>
</v-btn> </v-btn>
<br />
<br> <br />
<br> <br />
<br>
<!-- Don't have an account ? --> <!-- Don't have an account ? -->
<p class="caption font-weight-light"> {{ $t('signin.footer_text_1') }} <p class="caption font-weight-light">
{{ $t('signin.footer_text_1') }}
<!-- Sign Up --> <!-- Sign Up -->
<router-link to="/user/authentication/signup" v-ge="['Don\'t have an account ?','']"> {{ $t('signin.footer_text_2') }} <router-link
to="/user/authentication/signup"
v-ge="['Don\'t have an account ?', '']"
>
{{ $t('signin.footer_text_2') }}
</router-link> </router-link>
</p> </p>
<div> <div>
<v-btn <v-btn
v-if="googleAuthEnabled" 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 block
color="blue"> color="blue"
<img :src="require('~/assets/img/gmail.png')" >
class="img-responsive" alt="google" <img
width="24px"> :src="require('~/assets/img/gmail.png')"
class="img-responsive"
alt="google"
width="24px"
/>
<b>&nbsp; &nbsp;Sign In with Google</b> <b>&nbsp; &nbsp;Sign In with Google</b>
</v-btn> </v-btn>
<v-btn <v-btn
v-if="githubAuthEnabled" 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 block
color="blue"> color="blue"
<img :src="require('~/assets/img/github.png')" >
class="img-responsive" alt="github" <img
width="24px"> :src="require('~/assets/img/github.png')"
class="img-responsive"
alt="github"
width="24px"
/>
<b>&nbsp; &nbsp;Sign In with Github</b> <b>&nbsp; &nbsp;Sign In with Github</b>
</v-btn> </v-btn>
@ -120,30 +156,30 @@
<b>&nbsp; &nbsp;Sign In with Github</b> <b>&nbsp; &nbsp;Sign In with Github</b>
</v-btn>--> </v-btn>-->
</div> </div>
</v-form> </v-form>
<!-- <p class="title">--> <!-- <p class="title">-->
<!-- OR--> <!-- OR-->
<!-- </p>--> <!-- </p>-->
<v-form v-else-if=" type === 'masterKey'" v-model="formUtil.valid1" ref="formType1" @submit="MtdOnSignup" <v-form
elevation-20> v-else-if="type === 'masterKey'"
v-model="formUtil.valid1"
ref="formType1"
@submit="MtdOnSignup"
elevation-20
>
<v-text-field <v-text-field
label="Admin Secret" label="Admin Secret"
v-model="form.secret" v-model="form.secret"
:rules="formRules.secret" :rules="formRules.secret"
min="8" min="8"
:append-icon="formUtil.e4 ? 'visibility' : 'visibility_off'" :append-icon="formUtil.e4 ? 'visibility' : 'visibility_off'"
@click:append="() => (formUtil.e4 = !formUtil.e4)" @click:append="() => (formUtil.e4 = !formUtil.e4)"
:type="formUtil.e4 ? 'password' : 'text'" :type="formUtil.e4 ? 'password' : 'text'"
required> required
>
</v-text-field> </v-text-field>
<!----> <!---->
<!-- <vue-recaptcha @verify="onNormalVerify" sitekey="6LfbcqMUAAAAAAb_2319UdF8m68JHSYVy_m4wPBx"--> <!-- <vue-recaptcha @verify="onNormalVerify" sitekey="6LfbcqMUAAAAAAb_2319UdF8m68JHSYVy_m4wPBx"-->
@ -151,15 +187,17 @@
<!-- </vue-recaptcha>--> <!-- </vue-recaptcha>-->
<v-btn @click="MtdOnSignin" color="primary" class="btn--large" <v-btn
:disabled="!formUtil.recpatcha || !formUtil.valid1" v-ge="['Authenticate','']"> @click="MtdOnSignin"
color="primary"
class="btn--large"
:disabled="!formUtil.recpatcha || !formUtil.valid1"
v-ge="['Authenticate', '']"
>
Authenticate&nbsp; Authenticate&nbsp;
</v-btn> </v-btn>
</v-form> </v-form>
<template v-else> <template v-else>
<br /> <br />
<v-alert type="warning" outlined icon="mdi-alert"> <v-alert type="warning" outlined icon="mdi-alert">
@ -168,30 +206,23 @@
</v-alert> </v-alert>
</template> </template>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
<br> <br />
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
</template> </template>
<script> <script>
import Vue from 'vue';
import Vue from "vue";
// const {shell} = require("electron").remote.require( // const {shell} = require("electron").remote.require(
// "./libs" // "./libs"
// ); // );
import {mapGetters, mapActions} from 'vuex' import { mapGetters, mapActions } from 'vuex';
import {VueReCaptcha} from "vue-recaptcha-v3"; import { VueReCaptcha } from 'vue-recaptcha-v3';
// import VueRecaptcha from 'vue-recaptcha'; // import VueRecaptcha from 'vue-recaptcha';
export default { export default {
@ -202,25 +233,26 @@ export default {
data() { data() {
return { return {
form: { form: {
email: null, email: null,
password: null password: null,
}, },
formRules: { formRules: {
email: [ email: [
// E-mail is required // E-mail is required
v => !!v || this.$t('signin.form.rules.email_1'), (v) => !!v || this.$t('signin.form.rules.email_1'),
// E-mail must be valid // E-mail must be valid
v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || this.$t('signin.form.rules.email_2') (v) =>
/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
this.$t('signin.form.rules.email_2'),
], ],
password: [ password: [
// Password is required // Password is required
v => !!v || this.$t('signin.form.rules.password_1'), (v) => !!v || this.$t('signin.form.rules.password_1'),
// You password must be atleast 8 characters // You password must be atleast 8 characters
v => (v && v.length >= 8) || this.$t('signin.form.rules.password_2') (v) =>
(v && v.length >= 8) || this.$t('signin.form.rules.password_2'),
], ],
}, },
formUtil: { formUtil: {
@ -230,14 +262,13 @@ export default {
recpatcha: true, recpatcha: true,
e3: true, e3: true,
passwordProgress: 0, passwordProgress: 0,
progressColorValue: 'red' progressColorValue: 'red',
}, },
valid: false, valid: false,
e3: true, e3: true,
recpatcha: false, recpatcha: false,
};
}
}, },
methods: { methods: {
openGoogleSiginInBrowser(e) { openGoogleSiginInBrowser(e) {
@ -254,15 +285,13 @@ export default {
}, },
PlusCounter() { PlusCounter() {
this.$store.dispatch('ActPlusCounter') this.$store.dispatch('ActPlusCounter');
}, },
async MtdOnSignin(e) { async MtdOnSignin(e) {
e.preventDefault(); e.preventDefault();
if (this.type === 'jwt') { if (this.type === 'jwt') {
if (this.$refs.formType.validate()) { if (this.$refs.formType.validate()) {
let err = null; let err = null;
//this.$nuxt.$loading.start() //this.$nuxt.$loading.start()
this.form.firstName = this.form.email; this.form.firstName = this.form.email;
@ -272,23 +301,25 @@ export default {
// await this.$recaptchaLoaded() // await this.$recaptchaLoaded()
// const recaptchaToken = await this.$recaptcha('login') // 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) { if (err) {
this.formUtil.formErr = true; this.formUtil.formErr = true;
this.formUtil.formErrMsg = err.data.msg; this.formUtil.formErrMsg = err.data.msg;
return return;
} }
//this.$nuxt.$loading.finish() //this.$nuxt.$loading.finish()
} }
} else if (this.type === 'masterKey') { } 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) { if (!valid) {
this.formUtil.formErr = true; this.formUtil.formErr = true;
this.formUtil.formErrMsg = 'Invalid admin secret'; 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) { if ('redirect_to' in this.$route.query) {
@ -303,68 +334,71 @@ export default {
this.$store.dispatch('users/ActAuthGoogle'); this.$store.dispatch('users/ActAuthGoogle');
}, },
MtdOnReset() { MtdOnReset() {
//console.log('in method reset'); //console.log('in method reset');
} },
}, },
computed: { computed: {
counter() { counter() {
return this.$store.getters['users/GtrCounter'] return this.$store.getters['users/GtrCounter'];
}, },
displayName() { displayName() {
return this.$store.getters['users/GtrUser'] return this.$store.getters['users/GtrUser'];
}, },
type() { 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() { 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() { githubAuthEnabled() {
return this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.githubAuthEnabled; return (
} this.$store.state.project.projectInfo &&
this.$store.state.project.projectInfo.githubAuthEnabled
);
}, },
beforeCreated() {
}, },
beforeCreated() {},
async created() { async created() {
// this.type = (await this.$store.dispatch('users/ActGetAuthType')).type; // this.type = (await this.$store.dispatch('users/ActGetAuthType')).type;
if (this.$route.query && this.$route.query.error) { if (this.$route.query && this.$route.query.error) {
this.$nextTick(() => this.$toast.error(this.$route.query.error).goAway(5000)); this.$nextTick(() =>
this.$router.replace({path: '/user/authentication/signin'}) this.$toast.error(this.$route.query.error).goAway(5000)
);
this.$router.replace({ path: '/user/authentication/signin' });
} }
}, },
mounted() { mounted() {},
}, beforeDestroy() {},
beforeDestroy() { destroy() {},
},
destroy() {
},
validate({ params }) { validate({ params }) {
return true return true;
}, },
head() { head() {
return { return {
title: this.$t('signin.head.title'), title: this.$t('signin.head.title'),
meta: [ meta: [
{hid: this.$t('signin.head.meta.hid'), name: this.$t('signin.head.meta.name'), content: this.$t('signin.head.meta.content')} {
] hid: this.$t('signin.head.meta.hid'),
} name: this.$t('signin.head.meta.name'),
content: this.$t('signin.head.meta.content'),
},
],
};
}, },
props: {}, props: {},
watch: {}, watch: {},
directives: {} directives: {},
} };
</script> </script>
<style scoped> <style scoped></style>
</style>
<!-- <!--
/** /**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd * @copyright Copyright (c) 2021, Xgene Cloud Ltd

Loading…
Cancel
Save