217 lines
8.6 KiB
Vue
217 lines
8.6 KiB
Vue
<template>
|
|
<div>
|
|
<video-background
|
|
src="/video/bg-video.mp4"
|
|
poster="/images/poster.png"
|
|
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 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">
|
|
<img src="/images/logo.svg" height="35" class="img " alt="Mindboost Logo">
|
|
</div>
|
|
</div>
|
|
<div class="row mt-lg-0 mt-4" style="height: 90%">
|
|
<div class="col-12 my-auto">
|
|
<div class="text-center pt-4 pt-md-2 col-12 col-md-8 col-xl-8 mx-auto">
|
|
<h1 class="fw-bolder h3" style="color: #585C5E;">
|
|
{{ t('Sign up Header') }}
|
|
</h1>
|
|
<h2 class="text-muted h5 pt-2">
|
|
{{ t('Sign up') }}
|
|
</h2>
|
|
</div>
|
|
<div class="row pt-2">
|
|
<div class="col-12 col-xl-10 mx-auto">
|
|
<div v-if="registrationSuccess" class="alert alert-success text-center mx-0 mx-md-4">
|
|
{{ t('registersuccess') }}
|
|
</div>
|
|
<div
|
|
v-if="registrationError"
|
|
class="alert alert-danger text-center mx-0 mx-md-4"
|
|
>
|
|
{{ registrationErrorMessage }}
|
|
</div>
|
|
<form method="POST" @submit.prevent="submitRegister">
|
|
<!-- Hidden input for the token -->
|
|
<input type="hidden" name="token" :value="token">
|
|
<div class="row px-0 px-md-4 pt-3">
|
|
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
|
<label class="form-label">{{ t("First Name") }}</label>
|
|
<input v-model="form.first_name" autocomplete="given-name" type="text" :placeholder="t('Your first name')" class="form-control">
|
|
<div v-if="errors.first_name" class="invalid-feedback d-block">
|
|
{{ t(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 v-model="form.surname" autocomplete="family-name" type="text" :placeholder="t('Your surname')" class="form-control">
|
|
<div v-if="errors.surname" class="invalid-feedback d-block">
|
|
{{ t(errors.surname[0]) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row px-0 px-md-4 pt-3">
|
|
<div class="col-12 col-md-6 pt-2 col-lg-6 ">
|
|
<label class="form-label">{{ t("Email") }}</label>
|
|
<input v-model="form.email" autocomplete="email" type="email" placeholder="alex@mail.com" class="form-control">
|
|
<div v-if="errors.email" class="invalid-feedback d-block">
|
|
{{ t(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 v-model="form.password" type="password" autocomplete="new-password" :placeholder="t('Your password')" class="form-control">
|
|
<div v-if="errors.password" class="invalid-feedback d-block">
|
|
{{ t(errors.password[0]) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row px-md-4 pt-5 pb-2">
|
|
<div class="col-12 col-md-10">
|
|
<div class="form-check">
|
|
<input id="flexCheckIndeterminate" v-model="form.privacy" class="form-check-input" type="checkbox" value="">
|
|
<label class="form-check-label" for="flexCheckIndeterminate">
|
|
{{ t("I have read") }}
|
|
<NuxtLink class="signup-link" :to="localePath('/settings/termsandcondition')">
|
|
{{ t("Terms & Conditions") }}
|
|
</NuxtLink>
|
|
{{ t("and the") }}
|
|
<NuxtLink class="signup-link" :to="localePath('/settings/dataprotection')">
|
|
{{ t("Privacy Policy") }}
|
|
</NuxtLink>
|
|
{{ t("and accept") }}
|
|
</label>
|
|
<div v-if="errors.privacy" class="invalid-feedback d-block">
|
|
{{ t(errors.privacy[0]) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row px-0 px-md-4 pt-4">
|
|
<div class="col">
|
|
<button :disabled="loading" type="submit" style="min-width:fit-content" class="login-btn col-4">
|
|
{{ t("Sign up btn") }}
|
|
<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 now") }}
|
|
</NuxtLink>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</video-background>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { useRoute } from 'vue-router'
|
|
import { mapState, mapActions } from 'pinia'
|
|
import { ref, watch } from 'vue'
|
|
import backgroundImagePath from '~/assets/image/login4.png'
|
|
import { useUserStore } from '@/stores/user'
|
|
|
|
export default {
|
|
name: 'LoGin',
|
|
setup () {
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
|
|
const route = useRoute() // Get the current route
|
|
const token = ref(route.query.token) // Extract the token from the query parameters
|
|
|
|
// Update form token whenever route.query.token changes
|
|
watch(() => route.query.token, (newToken) => {
|
|
token.value = newToken
|
|
})
|
|
|
|
return {
|
|
t,
|
|
localePath,
|
|
token
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
backgroundImagePath,
|
|
loading: false,
|
|
errors: [],
|
|
registrationSuccess: false,
|
|
registrationError: false,
|
|
registrationErrorMessage: '',
|
|
form: {
|
|
first_name: '',
|
|
surname: '',
|
|
email: '',
|
|
password: '',
|
|
privacy: false,
|
|
token: '',
|
|
language: this.$i18n.locale
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(useUserStore, ['user'])
|
|
},
|
|
mounted () {
|
|
if (this.$route.query.error === 'invalid_or_expired_token') {
|
|
this.registrationError = true
|
|
this.registrationErrorMessage = 'Invalid or expired token. Please try again.'
|
|
}
|
|
if (this.$route.query.error === 'verification_failed') {
|
|
this.registrationError = true
|
|
this.registrationErrorMessage = 'Something went wrong. Please try again later.'
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(useUserStore, ['login', 'logout']),
|
|
|
|
submitRegister () {
|
|
this.loading = true
|
|
this.errors = []
|
|
// Update form with the token from setup
|
|
this.form.token = this.token
|
|
|
|
this.$axios.post('/api/register', this.form)
|
|
.then(({ data }) => {
|
|
// useNuxtApp().$logger.log(data)
|
|
|
|
this.loading = false
|
|
this.$toast.success('Signup successful!')
|
|
this.registrationSuccess = true
|
|
})
|
|
.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>
|