Stuck at changing routes

This commit is contained in:
Julien Nahum
2023-10-14 18:24:44 +02:00
parent 358bf0e4d0
commit 3d3759c58c
29 changed files with 316 additions and 540 deletions

View File

@@ -2,35 +2,39 @@
<div>
<forgot-password-modal :show="showForgotModal" @close="showForgotModal=false" />
<form @submit.prevent="login" @keydown="form.onKeydown($event)" class="mt-4">
<form class="mt-4" @submit.prevent="login" @keydown="form.onKeydown($event)">
<!-- Email -->
<text-input name="email" :form="form" :label="$t('email')" :required="true" placeholder="Your email address" />
<text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address" />
<!-- Password -->
<text-input native-type="password" placeholder="Your password"
name="password" :form="form" :label="$t('password')" :required="true"
name="password" :form="form" label="Password" :required="true"
/>
<!-- Remember Me -->
<div class="relative flex items-center my-5">
<v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember" size="small">
{{ $t('remember_me') }}
Remember me
</v-checkbox>
<div class="w-full md:w-1/2 text-right">
<a href="#" @click.prevent="showForgotModal=true" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700">
<a href="#" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700" @click.prevent="showForgotModal=true">
Forgot your password?
</a>
</div>
</div>
<!-- Submit Button -->
<v-button dusk="btn_login" :loading="form.busy">Log in to continue</v-button>
<v-button dusk="btn_login" :loading="form.busy">
Log in to continue
</v-button>
<p class="text-gray-500 mt-4">
Don't have an account?
<a href="#" v-if="isQuick" @click.prevent="$emit('openRegister')" class="font-semibold ml-1">Sign Up</a>
<router-link v-else :to="{name:'register'}" class="font-semibold ml-1">Sign Up</router-link>
Don't have an account?
<a v-if="isQuick" href="#" class="font-semibold ml-1" @click.prevent="$emit('openRegister')">Sign Up</a>
<router-link v-else :to="{name:'register'}" class="font-semibold ml-1">
Sign Up
</router-link>
</p>
</form>
</div>
@@ -56,7 +60,7 @@ export default {
required: false,
default: false
}
},
},
data: () => ({
form: new Form({
@@ -86,7 +90,7 @@ export default {
},
redirect () {
if(this.isQuick){
if (this.isQuick) {
this.$emit('afterQuickLogin')
return
}

View File

@@ -1,11 +1,11 @@
<template>
<div>
<form @submit.prevent="register" @keydown="form.onKeydown($event)" class="mt-4">
<form class="mt-4" @submit.prevent="register" @keydown="form.onKeydown($event)">
<!-- Name -->
<text-input name="name" :form="form" :label="$t('name')" placeholder="Your name" :required="true" />
<text-input name="name" :form="form" label="Name" placeholder="Your name" :required="true" />
<!-- Email -->
<text-input name="email" :form="form" :label="$t('email')" :required="true" placeholder="Your email address" />
<text-input name="email" :form="form" label="Email" :required="true" placeholder="Your email address" />
<select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" placeholder="Select option"
label="How did you hear about us?" :required="true"
@@ -13,27 +13,35 @@
<!-- Password -->
<text-input native-type="password" placeholder="Enter password"
name="password" :form="form" :label="$t('password')" :required="true"
name="password" :form="form" label="Password" :required="true"
/>
<!-- Password Confirmation-->
<text-input native-type="password" :form="form" :required="true" placeholder="Enter confirm password"
name="password_confirmation" :label="$t('confirm_password')"
name="password_confirmation" label="Confirm Password"
/>
<checkbox-input :form="form" name="agree_terms" :required="true">
<template #label>
I agree with the <router-link :to="{name:'terms-conditions'}" target="_blank">Terms and conditions</router-link> and <router-link :to="{name:'privacy-policy'}" target="_blank">Privacy policy</router-link> of the website and I accept them.
I agree with the <router-link :to="{name:'terms-conditions'}" target="_blank">
Terms and conditions
</router-link> and <router-link :to="{name:'privacy-policy'}" target="_blank">
Privacy policy
</router-link> of the website and I accept them.
</template>
</checkbox-input>
<!-- Submit Button -->
<v-button :loading="form.busy">Create an account</v-button>
<v-button :loading="form.busy">
Create an account
</v-button>
<p class="text-gray-500 mt-4">
Already have an account?
<a href="#" v-if="isQuick" @click.prevent="$emit('openLogin')" class="font-semibold ml-1">Log In</a>
<router-link v-else :to="{name:'login'}" class="font-semibold ml-1">Log In</router-link>
Already have an account?
<a v-if="isQuick" href="#" class="font-semibold ml-1" @click.prevent="$emit('openLogin')">Log In</a>
<router-link v-else :to="{name:'login'}" class="font-semibold ml-1">
Log In
</router-link>
</p>
<!-- GitHub Register Button -->
@@ -52,7 +60,7 @@ export default {
name: 'RegisterForm',
components: {
SelectInput,
LoginWithGithub,
LoginWithGithub
},
props: {
isQuick: {
@@ -111,14 +119,14 @@ export default {
// Track event
this.$logEvent('register', { source: this.form.hear_about_us })
initCrisp(data)
this.$crisp.push(['set', 'session:event', [[['register', {}, 'blue']]]])
// Redirect
if(this.isQuick){
if (this.isQuick) {
this.$emit('afterQuickLogin')
}else{
} else {
this.$router.push({ name: 'forms.create' })
}
}

View File

@@ -3,17 +3,17 @@
<div class="flex mt-6 mb-10">
<div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
<h1 class="my-6">
{{ $t('reset_password') }}
Reset password
</h1>
<form @submit.prevent="send" @keydown="form.onKeydown($event)">
<alert-success :form="form" :message="status" class="mb-4" />
<!-- Email -->
<text-input name="email" :form="form" :label="$t('email')" :required="true" />
<text-input name="email" :form="form" label="Email" :required="true" />
<!-- Submit Button -->
<v-button class="w-full" :loading="form.busy">
{{ $t('send_password_reset_link') }}
Send Password Reset Link
</v-button>
</form>
</div>
@@ -28,12 +28,12 @@ import OpenFormFooter from '../../../components/pages/OpenFormFooter.vue'
import SeoMeta from '../../../mixins/seo-meta.js'
export default {
middleware: 'guest',
components: {
OpenFormFooter
},
mixins: [SeoMeta],
middleware: 'guest',
data: () => ({
metaTitle: 'Reset Password',

View File

@@ -3,27 +3,27 @@
<div class="flex mt-6 mb-10">
<div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
<h1 class="my-6">
{{ $t('reset_password') }}
Reset Password
</h1>
<form @submit.prevent="reset" @keydown="form.onKeydown($event)">
<alert-success class="mb-4" :form="form" :message="status" />
<!-- Email -->
<text-input name="email" :form="form" :label="$t('email')" :required="true" />
<text-input name="email" :form="form" label="Email" :required="true" />
<!-- Password -->
<text-input class="mt-8" native-type="password"
name="password" :form="form" :label="$t('password')" :required="true"
name="password" :form="form" label="Password" :required="true"
/>
<!-- Password Confirmation-->
<text-input class="mt-8" native-type="password"
name="password_confirmation" :form="form" :label="$t('confirm_password')" :required="true"
name="password_confirmation" :form="form" label="Confirm Password" :required="true"
/>
<!-- Submit Button -->
<v-button class="w-full" :loading="form.busy">
{{ $t('reset_password') }}
Reset Password
</v-button>
</form>
</div>
@@ -38,12 +38,12 @@ import OpenFormFooter from '../../../components/pages/OpenFormFooter.vue'
import SeoMeta from '../../../mixins/seo-meta.js'
export default {
middleware: 'guest',
components: {
OpenFormFooter
},
mixins: [SeoMeta],
middleware: 'guest',
data: () => ({
metaTitle: 'Reset Password',

View File

@@ -2,19 +2,19 @@
<div class="row">
<div class="col-lg-8 m-auto px-4">
<h1 class="my-6">
{{ $t('verify_email') }}
Verify Email
</h1>
<form @submit.prevent="send" @keydown="form.onKeydown($event)">
<alert-success :form="form" :message="status" />
<!-- Email -->
<text-input name="email" :form="form" :label="$t('email')" :required="true" />
<text-input name="email" :form="form" label="Email" :required="true" />
<!-- Submit Button -->
<div class="form-group row">
<div class="col-md-9 ml-md-auto">
<v-button :loading="form.busy">
{{ $t('send_verification_link') }}
Send Verification Link
</v-button>
</div>
</div>
@@ -28,9 +28,9 @@ import Form from 'vform'
import SeoMeta from '../../../mixins/seo-meta.js'
export default {
middleware: 'guest',
mixins: [SeoMeta],
middleware: 'guest',
data: () => ({
metaTitle: 'Verify Email',
status: '',

View File

@@ -2,7 +2,7 @@
<div class="row">
<div class="col-lg-8 m-auto px-4">
<h1 class="my-6">
{{ $t('verify_email') }}
Verify Email
</h1>
<template v-if="success">
<div class="alert alert-success" role="alert">
@@ -10,16 +10,16 @@
</div>
<router-link :to="{ name: 'login' }" class="btn btn-primary">
{{ $t('login') }}
Login
</router-link>
</template>
<template v-else>
<div class="alert alert-danger" role="alert">
{{ error || $t('failed_to_verify_email') }}
{{ error || 'Failed to verify email.' }}
</div>
<router-link :to="{ name: 'verification.resend' }" class="small float-right">
{{ $t('resend_verification_link') }}
Resend Verification Link?
</router-link>
</template>
</div>
@@ -33,6 +33,7 @@ import SeoMeta from '../../../mixins/seo-meta.js'
const qs = (params) => Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
export default {
mixins: [SeoMeta],
async beforeRouteEnter (to, from, next) {
try {
const { data } = await axios.post(`/api/email/verify/${to.params.id}?${qs(to.query)}`)
@@ -48,8 +49,7 @@ export default {
},
middleware: 'guest',
mixins: [SeoMeta],
data: () => ({
metaTitle: 'Verify Email',
error: '',