wip migration

pages/editar/perfil/contrasena.vue

@@ -0,0 +1,123 @@
+<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>