OrganisationSignUp.vue

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