<template>
  <main id="main" style="margin-top:-20px; padding-bottom: 500px">
    <div class="container">
      <div>
        <div class="section-header">
          <h2 style="padding-top:40px">New Password</h2>
        </div>
      </div>
      <div class="row mb-4">
        <div class="col-md-12">
          <div v-if="boolSuccess">
            <alert :text="'Password Updated! You will be redirected shortly.'" :type="'SUCCESS'" />
          </div>
          <div v-if="passMissMatch">
            <alert :text="'The passwords do not match'" :type="'ERROR'" />
          </div>
        </div>
      </div>
      <div class="row mb-4">
        <div class="col-md-6">
          <float-label>
            <input
              name="password"
              placeholder="PASSWORD"
              class="form-control uniInput"
              type="password"
              v-model="password"
              @input="passMissMatch = false"
            />
          </float-label>
        </div>
        <div class="col-md-6">
          <float-label>
            <input
              name="confirmPassword"
              placeholder="CONFIRM PASSWORD"
              class="form-control uniInput"
              type="password"
              v-model="confirmPassword"
              @input="passMissMatch = false"
            />
          </float-label>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button class="btn-solid-blue" @click="updatePassword">Save</button>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapActions } from "vuex";
import Log from "../../assets/Log";
import alert from "../shared/alert";

export default {
  components: {
    alert
  },
  data() {
    return {
      password: "",
      confirmPassword: "",
      boolSuccess: false,
      passMissMatch: false
    };
  },
  methods: {
    ...mapActions("register", ["updateIndividual"]),
    updatePassword() {
      if (this.password === this.confirmPassword) {
        var userObj = Log.getUser();
        userObj.password = this.password;
        console.log(userObj);
        this.updateIndividual(userObj).then(() => {
          this.boolSuccess = true;
          setTimeout(() => {
            this.$router.push("/user/login");
          }, 2000);
        });
      } else {
        this.passMissMatch = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
