<template>
  <div>
    <div class="container">
      <div class="header">
        <img alt="logo" src="@/assets/logo_pigma.png"/>
      </div>
      <b-overlay
        id="overlay-background"
        :show="loading"
        :variant="'white'"
        :opacity="0.7"
        :blur="'2px'"
        rounded="sm"
        no-wrap
      >
      </b-overlay>
      <div class="form">
        <h5 class="title">Choississez un nouveau mot de passe</h5>
        <ValidationObserver v-slot="{ handleSubmit }">
          <form>
            <div class="form-row">
              <ValidationProvider
                ref="password"
                :rules="{ required: true, regex: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d$&+,:;=?@#|'<>.^*()%!-]{8,}$/ }"
                v-slot="{ classes, errors }"
                vid="confirmation"
              >
                <div class="control" :class="classes">
                  <label class="required">
                    Nouveau de mot de passe
                  </label>
                  <div class="input-group flex-nowrap">
                    <input
                      v-model="password1"
                      class="form-control"
                      :type="showPassword ? 'text' : 'password'"
                      placeholder="Mot de passe"
                    >
                    <span
                      v-if="!showPassword"
                      class="input-group-text"
                    >
                      <b-icon
                        icon="eye-fill"
                        @click="showPassword = !showPassword"
                      />
                    </span>
                    <span
                      v-else
                      class="input-group-text"
                    >
                      <b-icon
                        icon="eye-slash-fill"
                        @click="showPassword = !showPassword"
                      />
                    </span>
                  </div>
                  <span class="form-errors">{{ errors[0] }}</span>
                </div>
              </ValidationProvider>
            </div>
            <div class="form-row">
              <ValidationProvider ref="password" rules="required|confirmed:confirmation" v-slot="{ classes, errors }">
                <div class="control" :class="classes">
                  <label class="required">
                    Confirmez le mot de passe
                  </label>
                  <div class="input-group flex-nowrap">
                    <input
                      v-model="password2"
                      class="form-control"
                      :type="showPassword ? 'text' : 'password'"
                      placeholder="Mot de passe"
                    >
                    <span
                      v-if="!showPassword"
                      class="input-group-text"
                    >
                      <b-icon
                        icon="eye-fill"
                        @click="showPassword = !showPassword"
                      />
                    </span>
                    <span
                      v-else
                      class="input-group-text"
                    >
                      <b-icon
                        icon="eye-slash-fill"
                        @click="showPassword = !showPassword"
                      />
                    </span>
                  </div>
                  <span class="form-errors">{{ errors[0] }}</span>
                </div>
              </ValidationProvider>
            </div>
            <div class="infos">
              <ul>
                <li>Votre mot de passe ne peut pas trop ressembler à vos autres informations personnelles.</li>
                <li>Votre mot de passe doit contenir au minimum 8 caractères.</li>
                <li>Votre mot de passe ne peut pas être un mot de passe couramment utilisé.</li>
                <li>Votre mot de passe ne peut pas être entièrement numérique.</li>
              </ul>
            </div>
            <button
              type="button"
              class="btn btn-primary"
              @click.prevent="handleSubmit(sendNewPassword)"
            >
              Sauvegarder
            </button>
            <button
              type="button"
              class="btn btn-outline-secondary"
              @click="$router.push({ name: 'SignIn' })"
            >
              Annuler
            </button>
          </form>
        </ValidationObserver>
      </div>
      <div class="messages">
        <div v-if="error">
          <p class="form-errors">{{ error }}</p>
        </div>
        <div v-if="success">
          <p class="form-success">{{ success }}</p>
        </div>
      </div>
    </div>
    <small class="footer">
      <p>Propulsé par <a href="https://www.neogeo.fr/" target="_blank" rel="noopener">Neogeo-Technologies</a></p>
    </small>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import {
  ValidationObserver,
  ValidationProvider,
  extend,
  configure,
} from 'vee-validate';

import { required, confirmed, regex } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: 'Ce champ est requis',
});

extend('confirmed', {
  ...confirmed,
  message: 'Les mots de passe doivent être identiques',
});

configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid',
  },
});

extend('regex', {
  ...regex,
  message: 'Votre mot de passe doit comporter au moins 8 caractères, dont au moins une majuscule, une minuscule et 1 chiffre.',
});

export default {
  name: 'ReinitPassword',

  components: {
    ValidationObserver,
    ValidationProvider
  },

  data() {
    return {
      loading: false,
      password1: null,
      password2: null,
      showPassword: false
    }
  },

  computed: {
    ...mapState('forgotten-pwd', [
      'error',
      'success'
    ])
  },

  methods: {
    ...mapActions('forgotten-pwd', [
      'CONFIRM_NEW_PASSWORD'
    ]),

    sendNewPassword() {
      this.loading = true;
      this.CONFIRM_NEW_PASSWORD({
        token: this.$route.query.token,
        password: this.password1
      }).then(() => {
        this.loading = false;
      })
    }
  }
};
</script>

<style lang="less" scoped>

.container {
  margin: auto;
  width: 480px;
  height: fit-content;

  .header {
    margin: 0 0 5rem 0;
    img {
      width: 440px;
    }
  }

  .form {

    .form-row {
      margin: 0 0 40px 0;
      display: block;
    }

    button.btn {
      float: right;
      position: relative;
      margin-left: 7px;
      margin-right: 0;
      margin-top: 1rem;
    }

    button.btn-primary {
      border: 2px solid #9BD0FF;
      border-radius: 8px;
    }
    button.btn-outline-secondary {
      background-color: #F7F8FA;
      border: 2px solid #A9B2B9;
      border-radius: 8px;
      color: #2F3234;
    }
    button.btn-outline-secondary:hover {
      color: white;
      background-color: #4b4b4b;
    }

  }
  .infos {
    font-size: 0.75em;
    text-align: justify;
    ul {
      padding-left: 1rem;
    }
  }
  .messages {
    display: inline-block;
    position: relative;
    top: 1.5em;
  }
}

.form-errors {
  color: #EB0600 !important;
  max-width: 40em;
}

.form-success {
  color: #11ac45 !important;
}

.footer {
  position: absolute;
  bottom: 0;
  font-size: small;
}

.footer a {
  text-decoration: none;
}

</style>