<template>
  <div class="profile">
    <div class="row"><span>Lietotājvārds</span><span>{{ $store.state.user.username }}</span></div>
    <div class="row"><span>ID</span><span>{{ $store.state.user.attributes.sub }}</span></div>
    <div class="row"><span>E-pasts</span><span>{{ $store.state.user.attributes.email }}</span></div>
    <div class="row">
      <button
      class="btn border"
      :class="changingPass ? 'btn-yellow' : 'btn-green'"
      style="margin-left: auto;"
      @click="changingPass = !changingPass">
        {{ changingPass ? 'Aizvērt' : 'Mainīt paroli' }}
      </button>
    </div>
    <template v-if="changingPass">
      <div class="row"><span><label for="oldpass">Pašreizējā parole</label></span><span><input type="password" id="oldpass" v-model="oldpass"></span></div>
      <div class="row"><span><label for="pass">Jaunā parole</label></span><span><input type="password" id="pass" v-model="password"></span></div>
      <div class="row"><span><label for="pass2">Atkārtot paroli</label></span><span><input type="password" id="pass2" v-model="password2"></span></div>
      <div class="row">
        <div :class="notice.error ? 'error-block' : 'success-block'" v-if="notice.display" @click="notice.display = false">
          <span>{{ notice.text }}</span>
        </div>
        <button class="btn btn-green border" style="margin-left: auto;" @click="changePassword">Saglabāt</button>
      </div>
    </template>
  </div>
</template>

<script>
import { Auth } from 'aws-amplify';

export default {
  data() {
    return {
      changingPass: false,
      oldpass: '',
      password: '',
      password2: '',
      errors: {
        NotAuthorizedException: 'Nepareiza pašreizējā parole',
        InvalidParameterException: 'Nepareiza pašreizējā parole'
      },
      notice: {
        error: false,
        text: '',
        display: false
      }
    }
  },
  methods: {
    changePassword() {
      const { oldpass, password, password2, displayError, displaySuccess } = this;
      const passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[ !"#$%&'()*+,-./:;<=>?@[\]\\^_`{|}~])[A-Za-z\d !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]{8,}$/;

      if (oldpass === '' || password === '' || password2 === '') {
        displayError('Pārliecinieties, lai visi lauki būtu aizpildīti!');
      } else if (!passRegex.test(password)) {
        displayError('Parolei jābūt vismaz 8 rakstzīmju garai. Tai jāsastāv no vismaz viena mazā burta, lielā burta, cipara un simbola');
      } else if (password !== password2) {
        displayError('Ievadītās paroles nesakrīt');
      } else {
        Auth.currentAuthenticatedUser().then(user => {
          Auth.changePassword(user, oldpass, password).then(() => {
            this.oldpass = this.password = this.password2 = '';
            displaySuccess('Parole veiksmīgi nomainīta');
          }).catch(error => {
            displayError(this.errors[error.code] || 'Radās kļūda!');
          });
        });
      }
    },
    displayError(text) {
      this.notice.error = true;
      this.notice.text = text;
      this.notice.display = true;
    },
    displaySuccess(text) {
      this.notice.error = false;
      this.notice.text = text;
      this.notice.display = true;
    }
  }
}
</script>

<style scoped>
input, label {
  padding: 4px;
  margin: 4px;
}

.row {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  padding: 20px;
  word-break: break-word;
  align-items: center;
}

.row span {
  flex: 1;
}

.row:nth-child(n+2)::before {
  content: '';
  color: white;
  display: block;
  width: 100%;
  height: 1px;
  background: #c5c5c5;
  position: absolute;
  top: 0;
  left: 0;
}

.row span:first-child:not(.error-block span):not(.success-block span):after {
  content: ':';
  float: right;
}

.error-block, .success-block {
  flex: 1;
}

@media screen and (max-width: 400px) {
  .row {
    flex-direction: column;
  }
}
</style>