ShowEasyFrontEnd/FrontEnd/components/user/Setting.vue

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