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.
341 lines
9.9 KiB
341 lines
9.9 KiB
<template>
|
|
<v-card
|
|
class="border-radius-20 elevation-0"
|
|
min-width="900px"
|
|
max-width="900px"
|
|
>
|
|
<v-spacer class="px-7 pt-7">
|
|
<v-spacer class="d-flex align-center">
|
|
<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
|
|
class="input-border"
|
|
solo
|
|
flat
|
|
hide-details
|
|
dense
|
|
></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-flex">
|
|
<div class="SSO-wrap d-flex align-center me-7 ps-7 py-8">
|
|
<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.prevent="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: 125px"
|
|
color="primary border-radius-10 text-capitalize"
|
|
><span>{{ $t("userProfile.SSOLink") }}</span></v-btn
|
|
>
|
|
</div>
|
|
</v-spacer>
|
|
<v-btn text color="#ef5a5a" class="px-0 mb-10">
|
|
<span
|
|
@click="deleteDialogActive = !deleteDialogActive"
|
|
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>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "Setting",
|
|
props: {
|
|
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.$props.userSocialRelation.filter(
|
|
(item) => item.social_schema === "facebook"
|
|
)[0] || {};
|
|
this.google =
|
|
this.$props.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");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.SSO-wrap {
|
|
width: 100%;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 10px;
|
|
}
|
|
.input-wrap {
|
|
@media screen and (max-width: 600px) {
|
|
width: 73%;
|
|
}
|
|
@media screen and (min-width: 600px) and (max-width: 960px) {
|
|
width: 33%;
|
|
}
|
|
@media screen and (min-width: 961px) {
|
|
width: 38%;
|
|
}
|
|
}
|
|
</style>
|