ShowEasyFrontEnd/FrontEnd/components/user/settingDialog.vue

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