wip migration

pages/registro/cooperativa.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="container">
+    <FormHeader title="Registro de Cooperativa" />
+    <form class="form" @submit.prevent="userRegister">
+      <FormInput
+        v-model="register.user.email"
+        required
+        type="text"
+        label-text="Email"
+        @input="register.user.email = $event"
+      />
+
+      <FormInput
+        v-model="register.user.password"
+        required
+        type="password"
+        label-text="Contraseña"
+        @input="register.user.password = $event"
+      />
+
+      <FormInput
+        v-model="register.company.cif"
+        required
+        type="text"
+        label-text="CIF"
+        @input="register.company.cif = $event"
+      />
+
+      <FormInput
+        v-model="register.company.company_name"
+        required
+        type="text"
+        label-text="Nombre de la cooperativa"
+        @input="register.company.company_name = $event"
+      />
+
+      <FormInput
+        v-model="register.company.short_name"
+        required
+        type="text"
+        label-text="Nombre corto"
+        @input="register.company.short_name = $event"
+      />
+
+      <FormInput
+        v-model="register.company.web_link"
+        type="text"
+        label-text="URL"
+        @input="register.company.web_link = $event"
+      />
+
+      <small v-if="!isValidUrl(register.company.web_link)" class="error">La url no es válida</small>
+      
+      <div class="checkbox-container">
+        <v-checkbox v-model="register.company.shop" label="¿Tiene tienda online?" />
+      </div>
+      <div class="googleaddress-container">
+        <!-- TODO: Arreglar este compoenente: -->
+        <!-- <GoogleAddress @added-data="getPlace" /> -->
+        <p v-if="error" class="error">
+          {{ error }}
+        </p>
+      </div>
+      <!-- {{ register }} -->
+      <SubmitButton text="registrar" image-url="" />
+    </form>
+    <p class="help" align="center">
+      *Para más información sobre este proyecto, visita la siguiente
+      <NuxtLink to="/page/info"><b>página</b></NuxtLink
+        >.
+      </p>
+  </div>
+</template>
+
+<script>
+import dataProcessing from '~/utils/dataProcessing'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'main',
+    })
+  },
+  data() {
+    return {
+      register: {
+        company: {
+          cif: '',
+          company_name: '',
+          short_name: '',
+          web_link: '',
+          shop: false,
+        },
+        user: {
+          full_name: '',
+          email: '',
+          password: '',
+        },
+      },
+      place: {
+        city: null,
+        geo: null,
+        address: null,
+      },
+      error: null,
+    }
+  },
+
+  methods: {
+    isValidUrl: dataProcessing.isValidUrl,
+    getPlace(value) {
+      this.place = value
+    },
+    async userRegister() {
+      const config = useRuntimeConfig()
+      this.error = null
+      if (this.place.address && this.place.city) {
+        this.register.company = { ...this.register.company, ...this.place }
+        this.register.user.full_name = this.register.company.short_name
+        try {
+          const response = await $fetch('/create_company_user/', {
+            baseURL: config.public.baseURL,
+            method: 'POST',
+            body: JSON.stringify(this.register),
+          })
+          if (response.status === 201) {
+            this.$router.push('bienvenida')
+          }
+        } catch (err) {
+          if (err.response.status === 409) {
+            this.error = 'Ya existe un usuario con esa cuenta de correo'
+          } else {
+            this.error = 'Ha habido un error'
+          }
+        }
+      } else {
+        this.error = 'Debe añadir una dirección válida'
+      }
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 80px;
+}
+
+.checkbox-container {
+  font-size: $s;
+  width: 45%;
+  @include mobile {
+    width: 80%;
+  }
+}
+
+.googleaddress-container {
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  width: 45%;
+  @include mobile {
+    width: 80%;
+    font-size: $s;
+  }
+}
+
+.error {
+  color: $color-error;
+}
+
+.help {
+  color: $color-navy;
+  margin-bottom: 80px;
+  font-size: $m;
+  @include mobile {
+    font-size: $s;
+  }
+}
+</style>