consumocuidado/pages/registro/cooperativa.vue

<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>