matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Stuck at changing routes

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

26
resources/js/pages/auth/components/LoginForm.vue
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
}

36
resources/js/pages/auth/components/RegisterForm.vue
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' })
}
}

8
resources/js/pages/auth/password/email.vue
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',

12
resources/js/pages/auth/password/reset.vue
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',

10
resources/js/pages/auth/verification/resend.vue
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: '',

12
resources/js/pages/auth/verification/verify.vue
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: '',

4
resources/js/pages/errors/404.vue
View File

@@ -4,12 +4,12 @@
<img alt="Nice plant as we have nothing else to show!" :src="asset('img/icons/plant.png')" class="w-56 mb-5">
<h1 class="mb-4 font-semibold text-3xl text-gray-900">
{{ $t('page_not_found') }}
Page Not Found
</h1>
<div class="links">
<router-link :to="{ name: 'welcome' }" class="hover:underline text-gray-700">
{{ $t('go_home') }}
Go Home
</router-link>
</div>
</div>

61
resources/js/pages/forms/create-guest.vue
View File

@@ -2,34 +2,35 @@
<div class="flex flex-wrap flex-col">
<transition v-if="stateReady" name="fade" mode="out-in">
<div key="2">
<create-form-base-modal @form-generated="formGenerated" :show="showInitialFormModal"
@close="showInitialFormModal=false"/>
<create-form-base-modal :show="showInitialFormModal" @form-generated="formGenerated"
@close="showInitialFormModal=false"
/>
<form-editor v-if="!workspacesLoading" ref="editor"
class="w-full flex flex-grow"
:error="error"
:isGuest="isGuest"
:is-guest="isGuest"
@openRegister="openRegister"
/>
<div v-else class="text-center mt-4 py-6">
<loader class="h-6 w-6 text-nt-blue mx-auto"/>
<loader class="h-6 w-6 text-nt-blue mx-auto" />
</div>
</div>
</transition>
<quick-register :showRegisterModal="registerModal" @close="registerModal=false" @reopen="registerModal=true"
@afterLogin="afterLogin"/>
<quick-register :show-register-modal="registerModal" @close="registerModal=false" @reopen="registerModal=true"
@afterLogin="afterLogin"
/>
</div>
</template>
<script>
import store from '~/store'
import Form from 'vform'
import {mapState, mapActions} from 'vuex'
import { mapState, mapActions } from 'vuex'
import QuickRegister from '../auth/components/QuickRegister.vue'
import initForm from "../../mixins/form_editor/initForm.js"
import initForm from '../../mixins/form_editor/initForm.js'
import SeoMeta from '../../mixins/seo-meta.js'
import CreateFormBaseModal from "../../components/pages/forms/create/CreateFormBaseModal.vue"
import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'
const loadTemplates = function () {
store.commit('open/templates/startLoading')
@@ -40,19 +41,19 @@ const loadTemplates = function () {
export default {
name: 'CreateFormGuest',
mixins: [initForm, SeoMeta],
components: {
QuickRegister, CreateFormBaseModal
},
mixins: [initForm, SeoMeta],
middleware: 'guest',
beforeRouteEnter(to, from, next) {
beforeRouteEnter (to, from, next) {
loadTemplates()
next()
},
data() {
middleware: 'guest',
data () {
return {
metaTitle: 'Create a new Form as Guest',
stateReady: false,
@@ -67,35 +68,35 @@ export default {
computed: {
...mapState({
workspaces: state => state['open/workspaces'].content,
workspacesLoading: state => state['open/workspaces'].loading,
workspacesLoading: state => state['open/workspaces'].loading
}),
form: {
get() {
get () {
return this.$store.state['open/working_form'].content
},
/* We add a setter */
set(value) {
set (value) {
this.$store.commit('open/working_form/set', value)
}
},
workspace() {
workspace () {
return this.$store.getters['open/workspaces/getCurrent']()
},
}
},
watch: {
workspace() {
workspace () {
if (this.workspace) {
this.form.workspace_id = this.workspace.id
}
}
},
mounted() {
mounted () {
// Set as guest user
const guestWorkspace = {
id: null,
name: "Guest Workspace",
name: 'Guest Workspace',
is_enterprise: false,
is_pro: false
}
@@ -106,7 +107,7 @@ export default {
if (this.$route.query.template !== undefined && this.$route.query.template) {
const template = this.$store.getters['open/templates/getBySlug'](this.$route.query.template)
if (template && template.structure) {
this.form = new Form({...this.form.data(), ...template.structure})
this.form = new Form({ ...this.form.data(), ...template.structure })
}
} else {
// No template loaded, ask how to start
@@ -116,17 +117,17 @@ export default {
this.stateReady = true
},
created() {},
destroyed() {},
created () {},
unmounted () {},
methods: {
...mapActions({
loadWorkspaces: 'open/workspaces/load'
}),
openRegister() {
openRegister () {
this.registerModal = true
},
afterLogin() {
afterLogin () {
this.registerModal = false
this.isGuest = false
this.loadWorkspaces()
@@ -136,8 +137,8 @@ export default {
}
}, 500)
},
formGenerated(form) {
this.form = new Form({...this.form.data(), ...form})
formGenerated (form) {
this.form = new Form({ ...this.form.data(), ...form })
}
}
}

43
resources/js/pages/forms/create.vue
View File

@@ -2,15 +2,16 @@
<div class="flex flex-wrap flex-col">
<transition v-if="stateReady" name="fade" mode="out-in">
<div key="2">
<create-form-base-modal @form-generated="formGenerated" :show="showInitialFormModal"
@close="showInitialFormModal=false"/>
<create-form-base-modal :show="showInitialFormModal" @form-generated="formGenerated"
@close="showInitialFormModal=false"
/>
<form-editor v-if="!workspacesLoading" ref="editor"
class="w-full flex flex-grow"
:error="error"
@on-save="formInitialHash=null"
/>
<div v-else class="text-center mt-4 py-6">
<loader class="h-6 w-6 text-nt-blue mx-auto"/>
<loader class="h-6 w-6 text-nt-blue mx-auto" />
</div>
</div>
</transition>
@@ -20,10 +21,10 @@
<script>
import store from '~/store'
import Form from 'vform'
import {mapState, mapActions} from 'vuex'
import initForm from "../../mixins/form_editor/initForm.js";
import { mapState, mapActions } from 'vuex'
import initForm from '../../mixins/form_editor/initForm.js'
import SeoMeta from '../../mixins/seo-meta.js'
import CreateFormBaseModal from "../../components/pages/forms/create/CreateFormBaseModal.vue"
import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'
const loadTemplates = function () {
store.commit('open/templates/startLoading')
@@ -34,11 +35,11 @@ const loadTemplates = function () {
export default {
name: 'CreateForm',
components: { CreateFormBaseModal },
mixins: [initForm, SeoMeta],
components: {CreateFormBaseModal},
beforeRouteEnter(to, from, next) {
beforeRouteEnter (to, from, next) {
loadTemplates()
next()
},
@@ -55,7 +56,7 @@ export default {
middleware: 'auth',
data() {
data () {
return {
metaTitle: 'Create a new Form',
stateReady: false,
@@ -73,31 +74,31 @@ export default {
user: state => state.auth.user
}),
form: {
get() {
get () {
return this.$store.state['open/working_form'].content
},
/* We add a setter */
set(value) {
set (value) {
this.$store.commit('open/working_form/set', value)
}
},
workspace() {
workspace () {
return this.$store.getters['open/workspaces/getCurrent']()
},
}
},
watch: {
workspace() {
workspace () {
if (this.workspace) {
this.form.workspace_id = this.workspace.id
}
},
user() {
user () {
this.stateReady = true
}
},
mounted() {
mounted () {
window.onbeforeunload = () => {
if (this.isDirty()) {
return false
@@ -109,7 +110,7 @@ export default {
if (this.$route.query.template !== undefined && this.$route.query.template) {
const template = this.$store.getters['open/templates/getBySlug'](this.$route.query.template)
if (template && template.structure) {
this.form = new Form({...this.form.data(), ...template.structure})
this.form = new Form({ ...this.form.data(), ...template.structure })
}
} else {
// No template loaded, ask how to start
@@ -121,15 +122,15 @@ export default {
this.stateReady = this.user !== null
},
created() {},
destroyed() {},
created () {},
unmounted () {},
methods: {
...mapActions({
loadWorkspaces: 'open/workspaces/loadIfEmpty'
}),
formGenerated(form) {
this.form = new Form({...this.form.data(), ...form})
formGenerated (form) {
this.form = new Form({ ...this.form.data(), ...form })
},
isDirty () {
return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.form.data()))

12
resources/js/pages/forms/edit.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="w-full flex flex-col">
<form-editor v-if="pageLoaded" ref="editor"
:isEdit="true"
:is-edit="true"
@on-save="formInitialHash=null"
/>
<div v-else-if="!loading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
@@ -31,6 +31,7 @@ const loadForms = function () {
export default {
name: 'EditForm',
components: { Breadcrumb },
mixins: [SeoMeta],
beforeRouteEnter (to, from, next) {
if (!store.getters['open/forms/getBySlug'](to.params.slug)) {
@@ -51,7 +52,6 @@ export default {
},
middleware: 'auth',
mixins: [SeoMeta],
data () {
return {
@@ -82,7 +82,7 @@ export default {
},
metaTitle () {
return 'Edit ' + (this.form ? this.form.title : 'Your Form')
},
}
},
watch: {
@@ -92,7 +92,7 @@ export default {
},
created () {},
destroyed () {},
unmounted () {},
mounted () {
window.onbeforeunload = () => {
@@ -109,11 +109,11 @@ export default {
this.formInitialHash = this.hashString(JSON.stringify(this.updatedForm.data()))
}
if(!this.updatedForm.notification_settings || Array.isArray(this.updatedForm.notification_settings)){
if (!this.updatedForm.notification_settings || Array.isArray(this.updatedForm.notification_settings)) {
this.updatedForm.notification_settings = {}
}
},
methods: {
isDirty () {
return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.updatedForm.data()))

18
resources/js/pages/settings/password.vue
View File

@@ -1,23 +1,27 @@
<template>
<div>
<h3 class="font-semibold text-2xl text-gray-900">Password</h3>
<h3 class="font-semibold text-2xl text-gray-900">
Password
</h3>
<small class="text-gray-600">Manage your password.</small>
<form @submit.prevent="update" @keydown="form.onKeydown($event)" class="mt-3">
<alert-success class="mb-5" :form="form" :message="$t('password_updated')" />
<form class="mt-3" @submit.prevent="update" @keydown="form.onKeydown($event)">
<alert-success class="mb-5" :form="form" message="Password updated." />
<!-- Password -->
<text-input native-type="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"
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 :loading="form.busy" class="mt-4">Update password</v-button>
<v-button :loading="form.busy" class="mt-4">
Update password
</v-button>
</form>
</div>
</template>
@@ -27,8 +31,8 @@ import Form from 'vform'
import SeoMeta from '../../mixins/seo-meta.js'
export default {
scrollToTop: false,
mixins: [SeoMeta],
scrollToTop: false,
data: () => ({
metaTitle: 'Password',

18
resources/js/pages/settings/profile.vue
View File

@@ -1,19 +1,23 @@
<template>
<div>
<h3 class="font-semibold text-2xl text-gray-900">Profile details</h3>
<h3 class="font-semibold text-2xl text-gray-900">
Profile details
</h3>
<small class="text-gray-600">Update your username and manage your account details.</small>
<form @submit.prevent="update" @keydown="form.onKeydown($event)" class="mt-3">
<alert-success class="mb-5" :form="form" :message="$t('info_updated')" />
<form class="mt-3" @submit.prevent="update" @keydown="form.onKeydown($event)">
<alert-success class="mb-5" :form="form" message="Your info has been updated!" />
<!-- Name -->
<text-input name="name" :form="form" :label="$t('name')" :required="true" />
<text-input name="name" :form="form" label="Name" :required="true" />
<!-- 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 :loading="form.busy" class="mt-4">Save changes</v-button>
<v-button :loading="form.busy" class="mt-4">
Save changes
</v-button>
</form>
</div>
</template>
@@ -24,8 +28,8 @@ import { mapGetters } from 'vuex'
import SeoMeta from '../../mixins/seo-meta.js'
export default {
scrollToTop: false,
mixins: [SeoMeta],
scrollToTop: false,
data: () => ({
metaTitle: 'Profile',

4
resources/js/pages/subscriptions/success.vue
View File

@@ -22,9 +22,9 @@ import SeoMeta from '../../mixins/seo-meta.js'
export default {
components: { OpenFormFooter },
mixins: [SeoMeta],
layout: 'default',
middleware: 'auth',
mixins: [SeoMeta],
data: () => ({
metaTitle: 'Subscription Success',
@@ -36,7 +36,7 @@ export default {
this.interval = setInterval(() => this.checkSubscription(), 5000)
},
beforeDestroy () {
beforeUnmount () {
clearInterval(this.interval)
},