<template>
  <BContainer class="container">
    <BRow align-h="center">
      <BCol class="change-password">
        <form class="form"  autocomplete="off" @submit.prevent="submitUser">
          <h1 class="title">Cambiar contraseña</h1>
          <FormInput
            v-model="form.old_password"
            type="text"
            label-text="Contraseña actual"
            required
          />
          <FormInput
            v-model="form.password"
            type="password"
            label-text="Nueva contraseña"
            required
          />
          <FormInput
            v-model="form.password2"
            type="password"
            label-text="Nueva contraseña"
            required
          />
          <small v-if="error" class="error">{{ error }}</small>
          <small v-if="success" class="success">{{ success }}</small>
          <div class="submit-btn">
            <SubmitButton text="Actualizar" image-url="" />
          </div>
        </form>
      </BCol>
    </BRow>
  </BContainer>
</template>

<script>
export default {
  setup() {
    definePageMeta({
      layout: 'editar',
      middleware: 'auth',
      auth: { authority: 'SHOP_USER' },
    })
  },
  data() {
    return {
      form: {
        old_password: null,
        password: null,
        password2: null,
      },
      error: null,
      success: null,
    }
  },
  methods: {
    async submitUser() {
      this.error = null
      this.success = null
      if (this.form.password === this.form.password2) {
        try {
          await this.$api.put(
            `/user/change_password/${this.$store.state.auth.id}/`,
            this.form
          )
          this.success = 'Contraseña cambiada correctamente'
        } catch {
          this.error = 'La contraseña actual no es correcta'
        }
      } else {
        this.error = 'La nueva contraseña no coincide'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 40px;
  margin-bottom: 40px;
}

.change-password {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  color: $color-navy;
  font-size: $xxl;
  margin-bottom: 40px;
  text-align: left;
  width: 45%;
  @include mobile {
    width: 80%;
    margin-top: 70px;
  }
  @include desktop {
    width: 25%;
  }
}
.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  label {
    text-align: left;
    color: $color-navy;
    font-weight: $bold;
    font-size: $xs;
  }
}
.error {
  color: crimson;
}
.success {
  color: green;
}
</style>
