dev-audioprocessing/pages/auth/signup.vue

<template>
  <div>
    <video-background
        src="/video/bg-video.mp4"
        style=" height: 100vh;"
    >
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 col-lg-4 bg-img d-none d-lg-block" style="background-image: url('/images/login.svg');background-size: cover;height: 100vh;"  >
        </div>
        <div class="col-12  col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5" >
          <div class="row">
            <div class="col-12 py-3 text-center">

                <svg width="225" height="32" viewBox="0 0 225 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <rect width="225" height="32" fill="url(#pattern0)"/>
                  <defs>
                    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                      <use xlink:href="#image0_129_1673" transform="matrix(0.000429185 0 0 0.0030177 0 -0.000938841)"/>
                    </pattern>
                    <image id="image0_129_1673" width="2330" height="332" xlink:href="data:image/png;base64,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
                  </defs>
                </svg>

            </div>
          </div>
          <div class="row" style="height: 90vh">
            <div class="col-12 my-auto">
              <div class="col-md-12 align-self-center ">

                <div class="row pt-3 pb-5">
                  <div class="row" style="margin-bottom: 24px;">
                    <div class="text-center pt-1 ">
                      <h2 class="fw-bolder display-6 text-center" >{{t('Sign Up')}}</h2>
                      <span class="fs-5 pt-2 text-muted">{{t("Hello,")}} <span class="fw-bolder text-dark">{{t("Beautiful!")}}</span></span>
                      <p class="text-muted  pt-2 text-center fs-5 singn-up-text  pb-0 mb-0"></p>
                    </div>
                  </div>
                  <div class="col-12">
                    <form @submit.prevent="submitRegister" method="POST">
                      <div class="row  px-0 px-md-4 pb-2">
                        <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                          <label class="form-label">{{t("First Name")}}</label>
                          <input type="text" v-model="form.first_name" placeholder="First Name" class="form-control">
                          <div class="invalid-feedback d-block" v-if="errors.first_name">{{errors.first_name[0]}}</div>
                        </div>
                        <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                          <label class="form-label">{{t("Surname")}}</label>
                          <input type="text" placeholder="Surname" v-model="form.surname" class="form-control">
                          <div class="invalid-feedback d-block" v-if="errors.surname">{{errors.surname[0]}}</div>
                        </div>
                      </div>
                      <div class="row  px-0 px-md-4  pb-2">
                        <div class="col-12 col-md-6 pt-2 col-lg-6 ">
                          <label class="form-label">{{t("Email")}}</label>
                          <input type="text" placeholder="Email" v-model="form.email" class="form-control">
                          <div class="invalid-feedback d-block" v-if="errors.email">{{errors.email[0]}}</div>
                        </div>
                        <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                          <label class="form-label">{{t("Password")}}</label>
                          <input type="password" v-model="form.password" placeholder="Password" class="form-control">
                          <div class="invalid-feedback d-block" v-if="errors.password">{{errors.password[0]}}</div>
                        </div>
                      </div>
                      <div class="row px-md-4 pt-3 pb-2">
                        <div class="col-12 col-md-10">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
                            <label class="form-check-label" for="flexCheckIndeterminate">
                              {{t("I agree to Mindboost's terms and conditions. You can read about how we use and protect your information in our Privacy Policy.")}}
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="row px-4 pt-3">
                        <div class="col-12">
                          <button :disabled="loading" type="submit" class="login-btn fw-bold col-4">{{t("Signup")}}
                            <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
                              <span class="sr-only">{{t("Loading...")}}</span>
                            </div>
                          </button>
                          <p class="pt-3">{{t("Already have an Account?")}} <NuxtLink class="signup-link" :to="localePath('/auth/login')">{{t("Log In")}}</NuxtLink></p>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </video-background>
  </div>
</template>
<script>
import backgroundImagePath from '~/assets/image/login4.png'
import {useUserStore} from '@/stores/user';
import {mapState,mapActions} from "pinia";
export default {
  setup() {
    const { t } = useI18n()
    const localePath = useLocalePath()

    return {
      t,
      localePath,
    }
  },
  computed:{
    ...mapState(useUserStore,['user'])
  },
  name:'LoGin',
  data(){
    return{
      backgroundImagePath:backgroundImagePath,
      loading:false,
      errors:[],
      form:{
        first_name:'',
        surname:"",
        email:"",
        password:"",

      }
    }
  },
  methods:{
    ...mapActions(useUserStore,['login','logout']),

    submitRegister(){
      this.loading=true;
      this.$axios.post('/api/register',this.form).then(({data})=>{
        console.log(data);

        this.loading=false;
        this.$toast.success("Signup successfully....");
        this.login(data.user,data.authorisation.token)
        this.$router.push(this.localePath('/onboarding'));

      }).catch((error)=>{
        this.loading=false;
        if(error.response.status==422){
          this.errors = error.response.data.errors;
          this.$toast.error(error.response.data.message);
        }

      })
    }
  }
}
</script>

<style scoped>
@media only screen and (max-width: 587px) {
  p{
    font-size: 16px !important;
  }
}
</style>