You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
211 lines
9.0 KiB
211 lines
9.0 KiB
<template>
|
|
<v-dialog fullscreen v-model="isSettingDialogActive" @click:outside="$emit('closeSettingDialog')">
|
|
<v-card class="border-radius-20">
|
|
<v-spacer class="px-7 pt-7 pt-15">
|
|
<v-spacer class="d-flex align-center pt-10">
|
|
<div class="circle-decoration me-2"></div>
|
|
<div class="circle-decoration me-2"></div>
|
|
<span class="font-weight-bold text-size-20 ms-7 text-height-26">{{ $t("userProfile.setting") }}</span>
|
|
</v-spacer>
|
|
<v-spacer class="mt-10 mb-5">
|
|
<span class="font-weight-bold text-size-18">{{ $t("userProfile.settingEmail") }}</span>
|
|
</v-spacer>
|
|
<v-spacer class="input-wrap mb-7">
|
|
<v-text-field v-model="userMail" disabled solo flat hide-details dense class="input-border"></v-text-field>
|
|
</v-spacer>
|
|
<v-spacer class="mb-5">
|
|
<span class="font-weight-bold text-size-18">{{ $t("Reset Password") }}</span>
|
|
</v-spacer>
|
|
<v-form v-model="valid">
|
|
<v-spacer class="input-wrap mb-2">
|
|
<div class="text-size-12 mb-1">
|
|
{{ $t('Old password') }}
|
|
</div>
|
|
<v-text-field v-model="userPass.user_old_pass" :rules="[rules.require]" outlined dense></v-text-field>
|
|
</v-spacer>
|
|
<v-spacer class="input-wrap mb-2">
|
|
<div class="text-size-12 mb-1">
|
|
{{ $t('New password') }}
|
|
</div>
|
|
<v-text-field
|
|
v-model="userPass.user_new_pass"
|
|
:append-icon=" showPass ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPass = !showPass"
|
|
dense outlined
|
|
:type=" showPass ? 'text' : 'password'"
|
|
:rules="[rules.checkPassword,rules.require]"
|
|
:hint="this.$t('Passwords must be 8-20 characters with at least 1 number, 1 lower case letter and 1 upper case letter')"
|
|
></v-text-field>
|
|
</v-spacer>
|
|
<v-spacer class="input-wrap mb-2">
|
|
<div class="text-size-12 mb-1">
|
|
{{ $t('Confirm password') }}
|
|
</div>
|
|
<v-text-field
|
|
v-model="confirmPass"
|
|
:append-icon=" showConfirmPass ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showConfirmPass = !showConfirmPass"
|
|
dense outlined
|
|
:type=" showConfirmPass ? 'text' : 'password'"
|
|
:rules="[rules.checkPassword,rules.require]"
|
|
:hint="this.$t('Passwords must be 8-20 characters with at least 1 number, 1 lower case letter and 1 upper case letter')"
|
|
></v-text-field>
|
|
</v-spacer>
|
|
</v-form>
|
|
<v-btn @click.stop="resetPassword" width="95px" class="border-radius-16 mb-7 text-capitalize" color="primary">
|
|
{{ $t('save') }}
|
|
</v-btn>
|
|
<v-spacer class="mb-5">
|
|
<span class="font-weight-bold text-size-18">{{ $t("userProfile.manageSSO") }}</span>
|
|
</v-spacer>
|
|
<v-spacer class="mb-10 d-sm-flex">
|
|
<div class="SSO-wrap d-flex align-center me-7 ps-7 py-8 mb-5">
|
|
<span>Facebook</span>
|
|
<v-btn v-if="facebook.social_schema" @click="removeSocialRelation(facebook)" style="margin-left:125px" text color="primary border-radius-10 text-capitalize"><span>{{ $t("userProfile.SSOUnLink") }}</span></v-btn>
|
|
<v-btn v-else @click="facebookLogin" style="margin-left:125px" color="primary border-radius-10 text-capitalize"><span>{{ $t("userProfile.SSOLink") }}</span></v-btn>
|
|
</div>
|
|
<div class="SSO-wrap d-flex align-center ps-7 py-8">
|
|
<span>Google</span>
|
|
<v-btn v-if="google.social_schema" @click="removeSocialRelation(google)" style="margin-left:125px" text color="primary border-radius-10 text-capitalize"><span>{{ $t("userProfile.SSOUnLink") }}</span></v-btn>
|
|
<v-btn v-else @click="googleLogin" style="margin-left:145px" color="primary border-radius-10 text-capitalize"><span>{{ $t("userProfile.SSOLink") }}</span></v-btn>
|
|
</div>
|
|
</v-spacer>
|
|
<v-btn @click="deleteDialogActive = !deleteDialogActive" text color="primary" class="px-0 mb-10">
|
|
<span class="text-size-18 text-capitalize" style="text-decoration-line:underline">{{ $t("userProfile.deleteAccount") }}</span>
|
|
</v-btn>
|
|
<v-dialog v-model="deleteDialogActive" width="294px" height="325px" @click:outside="deleteDialogActive = !deleteDialogActive">
|
|
<v-card class="pa-5">
|
|
<v-spacer class="d-flex align-center">
|
|
<v-spacer>
|
|
{{ $t('Delete account') }}
|
|
</v-spacer>
|
|
<v-btn icon @click="deleteDialogActive = !deleteDialogActive">
|
|
<v-icon>
|
|
mdi-close
|
|
</v-icon>
|
|
</v-btn>
|
|
</v-spacer>
|
|
<v-spacer class="d-flex justify-center mb-6 mt-4">
|
|
<v-img :src="deleteAccountImg" max-width="130px" max-height="95px"></v-img>
|
|
</v-spacer>
|
|
<v-spacer class="py-3 mb-3">
|
|
{{ $t("We’re sorry to see you go. If you want to permanently delete your account, click “Delete” button.") }}
|
|
</v-spacer>
|
|
<v-spacer class="d-flex justify-space-between">
|
|
<v-btn @click="deleteAccount" color="white" class="border-radius-16 primary--text text-capitalize" width="112px">
|
|
{{ $t('Delete') }}
|
|
</v-btn>
|
|
<v-btn color="primary" class="border-radius-16 text-capitalize" width="112px" @click="deleteDialogActive = !deleteDialogActive">
|
|
{{ $t('Keep') }}
|
|
</v-btn>
|
|
</v-spacer>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-spacer>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name:"settingDialog",
|
|
props: {
|
|
isSettingDialogActive: {
|
|
type: Boolean,
|
|
required: true,
|
|
default: false
|
|
},
|
|
userMail: {
|
|
type: String,
|
|
required: true,
|
|
default: ''
|
|
},
|
|
userSocialRelation: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
google:{},
|
|
facebook:{},
|
|
deleteDialogActive: false,
|
|
valid:false,
|
|
showPass: false,
|
|
showConfirmPass: false,
|
|
userPass: {
|
|
user_old_pass: '',
|
|
user_new_pass: '',
|
|
},
|
|
confirmPass: '',
|
|
deleteAccountImg:require('~/assets/img/deleteAccount.png'),
|
|
rules: {
|
|
require: value => !!value || this.$t('Required.'),
|
|
email: v => /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(v) || this.$t('Invalid email'),
|
|
checkPassword: v => /(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])/.test(v) && v.length >= 8 && v.length <= 20 || this.$t('Passwords must be 8-20 characters with at least 1 number, 1 lower case letter and 1 upper case letter'),
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
this.facebook = this.userSocialRelation.filter(item=>item.social_schema === 'facebook')[0] || {}
|
|
this.google = this.userSocialRelation.filter(item=>item.social_schema === 'google')[0] || {}
|
|
},
|
|
methods: {
|
|
resetPassword() {
|
|
if (this.valid && this.userPass.user_old_pass !== this.userPass.user_new_pass) {
|
|
this.$axios.post(`/member/users/pass?jwt=${this.$auth.$storage.getUniversal('jwt').token || ''}`,this.userPass)
|
|
.then((result) => {
|
|
this.$auth.$storage.removeUniversal('jwt')
|
|
this.$auth.$storage.removeUniversal('userPicture')
|
|
this.$auth.$storage.removeUniversal('userLastName')
|
|
this.$auth.logout()
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
});
|
|
}
|
|
},
|
|
removeSocialRelation(schema) {
|
|
delete schema.social_id
|
|
this.$axios.put(`/member/users/social?jwt=${this.$auth.$storage.getUniversal('jwt').token || ''}`,schema)
|
|
.then((result) => {
|
|
this.$emit('refetch-user')
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
});
|
|
this.$nextTick(()=>{
|
|
schema.social_schema === 'google' ? this.google = {} : this.facebook = {}
|
|
})
|
|
},
|
|
deleteAccount() {
|
|
this.$axios.delete(`/member/users?jwt=${this.$auth.$storage.getUniversal('jwt').token || ''}`)
|
|
.then((result) => {
|
|
this.$auth.$storage.removeUniversal('jwt')
|
|
this.$auth.$storage.removeUniversal('userPicture')
|
|
this.$auth.$storage.removeUniversal('userLastName')
|
|
this.$auth.logout()
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
});
|
|
},
|
|
facebookLogin() {
|
|
this.$auth.loginWith('facebook')
|
|
},
|
|
googleLogin() {
|
|
this.$auth.loginWith('google')
|
|
},
|
|
},
|
|
watch: {
|
|
isSettingDialogActive: {
|
|
handler:function() {
|
|
this.facebook = this.userSocialRelation.filter(item=>item.social_schema === 'facebook')[0] || {}
|
|
this.google = this.userSocialRelation.filter(item=>item.social_schema === 'google')[0] || {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.SSO-wrap {
|
|
width: 100%;
|
|
border: 1px solid #E5E5E5;
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|