<template> <div> <div class="organisation-signup-container"> <div class="app-header"> <img :alt="$config.client.name" :src="logoPath"/> </div> <b-overlay id="overlay-background" :show="loading" :variant="'white'" :opacity="0.7" :blur="'2px'" rounded="sm" no-wrap /> <div class="organisation-signup-form"> <h4 class="title"> {{ $t('organisationsignup.title') }} <span class="sub-title">{{ $t('organisationsignup.subtitle') }}</span> </h4> <hr class="divider"> <ValidationObserver ref="form" v-slot="{ handleSubmit }"> <form> <div class="required-help">{{ $t('organisationsignup.requiredFields')}}</div> <div> <OrganisationSelector ref="organisationSelector" :displayName="organisationName" :registrationNumber="siret" :showCreationForm="showCreationForm" @select="handleOrganisationSelection" @update:showCreationForm="handleShowCreationChange"/> </div> <b-button :disabled="getButtonDisabledState()" :pressed="btnPressed" data-test="organisationSignUp-submit" @click.prevent="handleSubmit(submit)" variant="primary" > {{ $t('words.validate') }} </b-button> <b-button type="button" variant="outline-primary" data-test="organisationSignUp-signIn" @click.prevent="cancelOrganisationSignUp()"> {{ $t('words.cancel') }} </b-button> </form> </ValidationObserver> </div> </div> <small class="footer"> <p> {{ $t('footer') }} <a href="https://www.neogeo.fr/" target="_blank" rel="noopener">Neogeo-Technologies</a> </p> </small> </div> </template> <script> import OrganisationSelector from '@/components/OrganisationSelector'; import i18n from '@/i18n'; import { ValidationObserver, extend } from 'vee-validate'; import { required } from 'vee-validate/dist/rules'; import { mapState,mapActions, mapMutations } from 'vuex'; extend('required', { ...required, message: () => i18n.t('errors.required'), }); const organisationActions = [ 'POST_SIGNUP', ]; const signOutActions = [ 'GET_SIGNOUT', ]; export default { name: 'OrganisationSignUp', components: { ValidationObserver, OrganisationSelector, }, data() { return { loading: false, isOrganisationSelected: false, organisation: null, organisationThumbnail: null, organisationSpheres: [], btnPressed: false, siret: '', organisationName: '', showCreationForm: false, userId: null, nextUrl: null, }; }, computed: { ...mapState('sign-up', [ 'organisationSigned', ]), logoPath() { return require(process.env.VUE_APP_LOGO); }, }, watch: { organisationSigned() { if (this.nextUrl) { window.location.href = this.nextUrl; // No email confirmation } }, }, methods: { ...mapActions('sign-out', signOutActions), ...mapActions('sign-up', organisationActions), ...mapMutations('sign-up', [ 'SET_FORM' ]), handleOrganisationSelection(e) { this.isOrganisationSelected = e.selected; this.organisation = e.orga; this.organisationThumbnail = e.thumbnail; this.organisationSpheres = e.spheres; }, submit() { this.loading = true; this.btnPressed = true; this.organisationSignUp(); }, async organisationSignUp() { delete this.organisation.isValid; this.SET_FORM({ form: { user_id: this.userId, ...this.isOrganisationSelected && { usergroup_roles: [ { organisation: this.organisation, }, ], } }, thumbnail: this.organisationThumbnail, spheres: this.organisationSpheres, }); await this.POST_SIGNUP(); this.loading = false; }, parseURLParams() { const params = new URLSearchParams(window.location.search); this.siret = params.get('registration_number'); this.organisationName = params.get('organisation_name'); this.userId = params.get('user_id'); this.nextUrl = params.get('next'); if (this.siret || this.organisationName) { this.showCreationForm = true; } }, handleShowCreationChange(newValue) { this.showCreationForm = newValue; this.organisation = null; if (this.showCreationForm) { this.$refs.organisationSelector.clearOrganisation(); // Clear Selector this.parseURLParams(); } }, getButtonDisabledState() { if (this.organisation) { if (this.showCreationForm){ return !this.organisation.isValid; } return false; } return true; }, cancelOrganisationSignUp() { this.GET_SIGNOUT(); this.$router.push({ name: 'SignIn' }) } }, created() { this.parseURLParams(); if (this.organisationSigned) { this.SET_SIGNED(true); } }, }; </script> <style lang="less" scoped> .organisation-signup-container { position: relative; margin: 1rem auto auto; width: 800px; height: fit-content; .organisation-signup-form { margin: 5rem 1rem; h4.title { color: #373b3d; .sub-title { font-size: 75%; color: #6b7479; } } hr.solid { border-top: 2px solid #373b3d; } h5 { color: #6b7479; } form { margin-top: 32px; h5 { margin-bottom: 20px; margin-top: 40px; color: #373b3d; } .row { margin-bottom: 1.75rem; } .input-group { span { cursor: pointer; border-bottom-left-radius: 0; border-top-left-radius: 0; border-left: none; } } button { float: right; position: relative; margin-left: 7px; margin-top: 30px; } .infos { font-size: 0.8em; font-style: italic; margin-right: 1em; ul { padding-left: 1rem; } } } } } .form-errors { color: #eb0600 !important; margin-right: 2em; line-height: 1; } .form-success { color: #30c963 !important; } .footer { position: relative; bottom: 0; font-size: small; margin-top: 2rem; } .footer a { text-decoration: none; } </style>