consumocuidado/pages/registro/cooperativa.vue

<template>
  <div class="container-fluid">
    <FormHeader title="Registro de Cooperativa" subtitle="Crea el perfil de tu entidad y publica tus productos y servicios con valores." />
    <form v-if="!isAuthenticated" 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 v-if="isAuthenticated" class="help" align="center">
      Ya estás registrado y logueado. Ve al
      <NuxtLink to="/"><b>inicio</b></NuxtLink> y explora la plataforma.
    </p>
    <!-- <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 { useAuthStore } from '@/stores/auth'
import dataProcessing from '~/utils/dataProcessing'
export default {
  // setup() {
  //   definePageMeta({
  //     layout: 'main',
  //   })
  // },
  setup() {
    const auth = useAuthStore();
    return {
      auth,
    }
  },
  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,
    }
  },
  computed: {
    isAuthenticated() {
      return this.auth.isAuthenticated
    },
    isValidForm() {
      if (
        this.register.user.email &&
        this.register.user.password &&
        this.register.company.cif &&
        this.register.company.company_name &&
        this.register.company.short_name &&
        this.register.company.web_link
      ) {
        return true
      }
      return false
    },
    userIsLogged() {
      return this.auth.access
    },
  },
  methods: {
    isValidUrl: dataProcessing.isValidUrl,
    getPlace(value) {
      this.place = value
    },
    async userRegister() {
      const config = useRuntimeConfig()
      this.error = null
      if (this.isValidForm) {
        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-fluid {
  margin-bottom: 5rem;
  width: 100%;
  min-height: 60dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient($color-consumo-base-light, $color-bg-light);
  border-radius: 1rem;
  padding: 2rem;
  gap: 3rem;
  color: $color-primary;

  @include mobile {
    margin-top: 7rem;
  }
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 80px;
  width: 100%;
}

.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-primary;
  // margin-bottom: 80px;
  font-size: $m;
  @include mobile {
    font-size: $s;
  }
  a {
    text-decoration: none;
    color: $color-button;
    text-transform: uppercase;
    &:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
</style>