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.
412 lines
15 KiB
412 lines
15 KiB
<template>
|
|
<div class="setting xl:tw-max-w-[1246px] xl:tw-mx-auto">
|
|
<div class="xl:tw-flex xl:tw-justify-between xl:tw-items-start">
|
|
<userSidebar :userData="userData" :firstName="firstName" :lastName="lastName" class="tw-hidden xl:tw-block">
|
|
</userSidebar>
|
|
<!-- <div class="xl:tw-hidden"></div> -->
|
|
<div class="tw-bg-white xl:tw-p-[30px] xl:tw-rounded-[20px] xl:tw-min-w-[900px] xl:tw-max-w-[900px]">
|
|
<div class="tw-text-[20px] tw-font-bold tw-text-base-primary tw-mb-[20px] md:t24 md:tw-mb-[30px]">
|
|
<two-dots class="tw-mr-[30px]"></two-dots>{{ $t("userProfile.setting") }}
|
|
</div>
|
|
<div class="tw-mb-[30px] md:tw-max-w-[392px]">
|
|
<div class="tw-body-2 tw-font-bold tw-text-base-primary tw-mb-[15px] md:t16">
|
|
{{ $t('userProfile.account') }}
|
|
</div>
|
|
<input type="text"
|
|
class="tw-h-[40px] tw-w-full tw-border tw-bg-white tw-border-neutral-200 tw-border-solid tw-px-[20px] tw-py-[10px] tw-rounded-[5px] disabled:tw-text-base-disable"
|
|
:value="userData.account" disabled />
|
|
</div>
|
|
<Transition name="bounce">
|
|
<div v-show="SSOShow == 2" :class="['tw-mb-[50px] md:tw-mb-[30px]',SSOShow == 2 ? '':'tw-hidden']">
|
|
<div class="tw-body-2 tw-font-medium tw-text-base-primary tw-mb-[15px] md:t16">
|
|
{{ $t('userProfile.manageSSO')}}
|
|
</div>
|
|
<div class="md:tw-flex md:tw-flex-row">
|
|
<div
|
|
class="tw-w-full tw-border tw-border-solid tw-border-neutral-200 tw-rounded-[10px] tw-grid tw-grid-cols-[auto_71px] tw-items-center tw-gap-[50px] tw-px-[30px] tw-py-[14px] tw-mb-[20px] md:tw-mb-0 md:tw-mr-[20px] md:tw-py-[30px]">
|
|
<div class="tw-text-[16px] tw-text-base-primary md:tw-text-[14px]">
|
|
Facebook
|
|
</div>
|
|
<button v-if="facebook.social_schema" @click="openModal('facebook')"
|
|
class="tw-bg-warning-background tw-text-warning-default tw-rounded-[12px] tw-px-[16px] tw-py-[9px] tw-whitespace-nowrap">
|
|
{{$t('userProfile.SSOUnLink')}}
|
|
</button>
|
|
<button v-else @click="facebookLogin"
|
|
class="tw-bg-warning-default tw-text-white tw-rounded-[12px] tw-px-[16px] tw-py-[9px]">
|
|
{{$t('userProfile.SSOLink')}}
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="tw-w-full tw-border tw-border-solid tw-border-neutral-200 tw-rounded-[10px] tw-grid tw-grid-cols-[auto_90px] tw-items-center tw-gap-[50px] tw-px-[30px] tw-py-[14px] md:tw-py-[30px]">
|
|
<div class="tw-text-[16px] tw-text-base-primary md:tw-text-[14px]">
|
|
Google
|
|
</div>
|
|
<button v-if="google.social_schema" @click.prevent="openModal('google')"
|
|
class="tw-bg-warning-background tw-text-warning-default tw-rounded-[12px] tw-px-[16px] tw-py-[9px]">
|
|
{{$t('userProfile.SSOUnLink')}}
|
|
</button>
|
|
<button v-else @click="googleLogin"
|
|
class="tw-bg-warning-default tw-text-white tw-rounded-[12px] tw-px-[16px] tw-py-[9px]">
|
|
{{$t('userProfile.SSOLink')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
<Transition name="bounce">
|
|
<div v-show="SSOShow == 1">
|
|
<div class="tw-body-2 tw-font-bold tw-text-base-primary tw-mb-[20px] md:t16 md:tw-mb-[15px]">
|
|
{{$t('userProfile.resetPassword')}}
|
|
</div>
|
|
<div class="tw-mb-[20px] md:tw-max-w-[392px] md:tw-mb-[15px]">
|
|
<div class="tw-text-[16px] tw-text-base-primary tw-mb-[6px] md:tw-text-[14px]">
|
|
{{$t('userProfile.oldPassword')}}
|
|
</div>
|
|
<input v-model="userPass.user_old_pass" type="password"
|
|
class="tw-h-[40px] tw-w-full tw-border tw-border-neutral-200 tw-border-solid tw-px-[20px] tw-py-[10px] tw-rounded-[5px]" />
|
|
</div>
|
|
<div class="tw-mb-[20px] md:tw-max-w-[392px] md:tw-mb-[15px]">
|
|
<!-- <div
|
|
class="tw-text-[16px] tw-text-base-primary tw-mb-[6px] md:tw-text-[14px]"
|
|
>
|
|
New password
|
|
</div>
|
|
<input
|
|
type="text"
|
|
class="tw-h-[40px] tw-w-full tw-border tw-border-neutral-200 tw-border-solid tw-px-[20px] tw-py-[10px] tw-rounded-[5px] tw-mb-[6px]"
|
|
/> -->
|
|
<div>
|
|
<div class="tw-text-[16px] tw-text-base-primary tw-mb-[6px] md:tw-text-[14px]">
|
|
{{$t('userProfile.newPassword')}}
|
|
</div>
|
|
<v-text-field v-model="userPass.user_new_pass" :append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
|
|
@click:append="showPass = !showPass" @blur="checkPassword($event)"
|
|
:type="showPass ? 'text' : 'password'" :rules="[rules.checkPassword, rules.require]" hide-details
|
|
dense outlined validate-on-blur></v-text-field>
|
|
</div>
|
|
<div v-show="!isNewPassValid" class="tw-footer-body tw-w-full tw-leading-none tw-pt-1" :class="
|
|
isNewPassValid
|
|
? 'tw-text-neutrals-400'
|
|
: 'tw-text-error-default'
|
|
">
|
|
{{ $t('userProfile.passwordsHint') }}
|
|
</div>
|
|
</div>
|
|
<div class="tw-mb-[20px] md:tw-max-w-[392px] md:tw-mb-[15px]">
|
|
<div>
|
|
<div class="tw-text-[16px] tw-text-base-primary tw-mb-[6px] md:tw-text-[14px]">
|
|
{{$t('userProfile.confirmPassword')}}
|
|
</div>
|
|
<v-text-field v-model="confirmPass" :append-icon="showConfirmPass ? 'mdi-eye' : 'mdi-eye-off'"
|
|
@click:append="showConfirmPass = !showConfirmPass" :type="showConfirmPass ? 'text' : 'password'"
|
|
:rules="[rules.checkConfirmPassword, rules.require]" dense outlined validate-on-blur></v-text-field>
|
|
</div>
|
|
<!-- <div
|
|
class="tw-text-[16px] tw-text-base-primary tw-mb-[6px] md:tw-text-[14px]"
|
|
>
|
|
Confirm password
|
|
</div>
|
|
<input
|
|
type="text"
|
|
class="tw-h-[40px] tw-w-full tw-border tw-border-neutral-200 tw-border-solid tw-px-[20px] tw-py-[10px] tw-rounded-[5px] tw-mb-[6px]"
|
|
/>
|
|
<img
|
|
src="~/assets/svg/hidepassword.svg"
|
|
class="tw-absolute tw-top-[717px] tw-right-[20px] md:tw-top-[621px] md:tw-left-[359px] xl:tw-left-[777px] xl:tw-top-[650px]"
|
|
alt=""
|
|
/> -->
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
<Transition name="bounce">
|
|
<div v-show="SSOShow == 1"
|
|
:lass="['tw-mb-[64px] md:tw-flex md:tw-flex-row md:tw-items-center md:tw-mb-[40px]']">
|
|
<button @click="resetPassword"
|
|
class="tw-text-white tw-bg-primary-1 tw-text-[18px] tw-rounded-[16px] tw-w-full tw-py-[13px] tw-mb-[15px] md:tw-text-[16px] md:tw-w-fit md:tw-px-[16px] md:tw-py-[10px] md:tw-mr-[20px] md:tw-mb-0">
|
|
{{$t('userProfile.resetPassword')}}
|
|
</button>
|
|
<button
|
|
class="tw-text-primary-1 tw-bg-white tw-text-[18px] tw-rounded-[16px] tw-w-full tw-py-[13px] md:tw-text-[16px] md:tw-w-fit md:tw-px-[16px] md:tw-py-[10px]">
|
|
{{$t('userProfile.cancel')}}
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
<button @click="openDeleteModal()"
|
|
class="tw-text-error-default tw-text-[16px] tw-underline tw-mt-[44px] md:tw-mt-[99px] xl:tw-mt-[39px]">
|
|
{{$t('userProfile.deleteAccount')}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<Transition name="bounce">
|
|
<unLinkModal></unLinkModal>
|
|
</Transition>
|
|
<Transition name="bounce">
|
|
<deleteAccountModal></deleteAccountModal>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import SavedExhibitions from "../../components/user/savedExhibitions.vue";
|
|
import SavedExhibitionsDialog from "../../components/user/savedExhibitionsDialog.vue";
|
|
import Setting from "../../components/user/Setting.vue";
|
|
import SettingDialog from "../../components/user/settingDialog.vue";
|
|
import CropImageDialog from "../../components/user/cropImageDialog.vue";
|
|
import CompanyInfo from "../../components/user/companyInfo.vue";
|
|
import CompanyInfoDialog from "../../components/user/companyInfoDialog.vue";
|
|
import ContactInfo from "../../components/user/contactInfo.vue";
|
|
import vClickOutside from "v-click-outside";
|
|
import BookingList from "../../components/user/bookingList.vue";
|
|
import TwoDots from "@/components/TwoDots";
|
|
import userSidebar from "@/components/user/userSidebar.vue";
|
|
import unLinkModal from "@/components/newComponent/modal/unLinkModal.vue";
|
|
import deleteAccountModal from "@/components/newComponent/modal/deleteAccountModal.vue";
|
|
|
|
export default {
|
|
name: "setting",
|
|
layout: "profile",
|
|
directives: {
|
|
clickOutside: vClickOutside.directive,
|
|
},
|
|
components: {
|
|
SavedExhibitions,
|
|
SavedExhibitionsDialog,
|
|
Setting,
|
|
SettingDialog,
|
|
CropImageDialog,
|
|
CompanyInfo,
|
|
CompanyInfoDialog,
|
|
ContactInfo,
|
|
BookingList,
|
|
TwoDots,
|
|
userSidebar,
|
|
unLinkModal,
|
|
deleteAccountModal,
|
|
},
|
|
data() {
|
|
return {
|
|
google: {},
|
|
facebook: {},
|
|
deleteDialogActive: false,
|
|
valid: false,
|
|
showPass: false,
|
|
showConfirmPass: false,
|
|
userPass: {
|
|
user_old_pass: "",
|
|
user_new_pass: "",
|
|
},
|
|
isNewPassValid: true,
|
|
firstName: "",
|
|
lastName: "",
|
|
userData: {},
|
|
SSOShow: 0,
|
|
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"
|
|
),
|
|
checkConfirmPassword: (v) =>
|
|
this.confirmPass === this.userPass.user_new_pass ||
|
|
this.$t("Your password and confirmation password do not match"),
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
//this.fetchUserData();
|
|
if (process.browser) {
|
|
window.addEventListener("resize", this.handleResize);
|
|
}
|
|
//this.handleResize();
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
window.addEventListener("resize", this.onResize);
|
|
});
|
|
},
|
|
destroyed() {
|
|
if (process.browser) {
|
|
window.removeEventListener("resize", this.handleResize);
|
|
}
|
|
},
|
|
computed: {
|
|
windowWidth() {
|
|
if (process.client) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
return this.width;
|
|
},
|
|
},
|
|
methods: {
|
|
handleResize() {
|
|
if (process.browser) {
|
|
this.width = window.innerWidth;
|
|
}
|
|
},
|
|
fetchUserData() {
|
|
this.$axios
|
|
.get(
|
|
`/member/users/${this.$auth.$storage.getUniversal("jwt").user_id
|
|
}?jwt=${this.$auth.$storage.getUniversal("jwt").token}`
|
|
)
|
|
.then((res) => {
|
|
this.userData = res.data;
|
|
this.firstName = res.data.first_name;
|
|
this.lastName = res.data.last_name;
|
|
this.facebook =
|
|
res.data.UserSocialRelation.filter(
|
|
(item) => item.social_schema === "facebook"
|
|
)[0] || {};
|
|
this.google =
|
|
res.data.UserSocialRelation.filter(
|
|
(item) => item.social_schema === "google"
|
|
)[0] || {};
|
|
this.checkSSO();
|
|
})
|
|
.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 = {});
|
|
});
|
|
},
|
|
facebookLogin() {
|
|
this.$auth.loginWith("facebook");
|
|
},
|
|
googleLogin() {
|
|
this.$auth.loginWith("google");
|
|
},
|
|
resetPassword() {
|
|
if (
|
|
this.isNewPassValid &&
|
|
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.$notify({
|
|
type: "success",
|
|
title: "Awesome!",
|
|
text: "Your password has been updated successfully.",
|
|
});
|
|
setTimeout(() => {
|
|
this.$auth.logout();
|
|
this.$router.push(this.localePath("/user"));
|
|
}, 4000)
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
},
|
|
checkPassword(v) {
|
|
const pass = v.target.value;
|
|
this.isNewPassValid =
|
|
/(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])/.test(pass) &&
|
|
pass.length >= 8 &&
|
|
pass.length <= 20;
|
|
},
|
|
checkSSO() {
|
|
if (Object.keys(this.facebook).length == 0 && Object.keys(this.google).length == 0) {
|
|
this.SSOShow = 1;
|
|
} else {
|
|
this.SSOShow = 2;
|
|
}
|
|
},
|
|
openModal(type) {
|
|
if (type == 'google') {
|
|
if (Object.keys(this.facebook).length == 0) {
|
|
this.$modal.show('unLinkModal');
|
|
} else {
|
|
this.removeSocialRelation(this.google);
|
|
}
|
|
}
|
|
|
|
if (type == 'facebook') {
|
|
if (Object.keys(this.google).length == 0) {
|
|
this.$modal.show('unLinkModal');
|
|
} else {
|
|
this.removeSocialRelation(this.facebook);
|
|
}
|
|
}
|
|
},
|
|
openDeleteModal() {
|
|
this.$modal.show('deleteAccountModal');
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
:deep(.v-messages__message) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.v-text-field--outlined::v-deep {
|
|
fieldset {
|
|
border-color: #e5e5e5;
|
|
}
|
|
}
|
|
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.3s ease-out;
|
|
}
|
|
|
|
.bounce-leave-active {
|
|
animation: bounce-in 0.3s cubic-bezier(1, 0.5, 0.8, 1) reverse;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|