0351d front end linting (#377)
* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
GitHub
@@ -1,76 +1,162 @@
|
||||
<template>
|
||||
<!-- Forgot password modal -->
|
||||
<modal :show="show" @close="close" max-width="lg">
|
||||
<template #icon>
|
||||
<template v-if="isMailSent">
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="text-blue-50" width="56" height="56" rx="28" fill="currentColor"/>
|
||||
<path d="M16.3333 22.1666L25.859 28.8346C26.6304 29.3746 27.016 29.6446 27.4356 29.7492C27.8061 29.8415 28.1937 29.8415 28.5643 29.7492C28.9838 29.6446 29.3695 29.3746 30.1408 28.8346L39.6666 22.1666M21.9333 37.3333H34.0666C36.0268 37.3333 37.0069 37.3333 37.7556 36.9518C38.4141 36.6163 38.9496 36.0808 39.2851 35.4223C39.6666 34.6736 39.6666 33.6935 39.6666 31.7333V24.2666C39.6666 22.3064 39.6666 21.3264 39.2851 20.5777C38.9496 19.9191 38.4141 19.3837 37.7556 19.0481C37.0069 18.6666 36.0268 18.6666 34.0666 18.6666H21.9333C19.9731 18.6666 18.993 18.6666 18.2443 19.0481C17.5857 19.3837 17.0503 19.9191 16.7147 20.5777C16.3333 21.3264 16.3333 22.3064 16.3333 24.2666V31.7333C16.3333 33.6935 16.3333 34.6736 16.7147 35.4223C17.0503 36.0808 17.5857 36.6163 18.2443 36.9518C18.993 37.3333 19.9731 37.3333 21.9333 37.3333Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</template>
|
||||
<template v-else>
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect class="text-blue-50" width="56" height="56" rx="28" fill="currentColor"/>
|
||||
<path d="M33.8333 24.4999C33.8333 23.9028 33.6055 23.3057 33.1499 22.8501C32.6943 22.3945 32.0972 22.1667 31.5 22.1667M31.5 31.5C35.366 31.5 38.5 28.366 38.5 24.5C38.5 20.634 35.366 17.5 31.5 17.5C27.634 17.5 24.5 20.634 24.5 24.5C24.5 24.8193 24.5214 25.1336 24.5628 25.4415C24.6309 25.948 24.6649 26.2013 24.642 26.3615C24.6181 26.5284 24.5877 26.6184 24.5055 26.7655C24.4265 26.9068 24.2873 27.046 24.009 27.3243L18.0467 33.2866C17.845 33.4884 17.7441 33.5893 17.6719 33.707C17.608 33.8114 17.5608 33.9252 17.5322 34.0442C17.5 34.1785 17.5 34.3212 17.5 34.6065V36.6333C17.5 37.2867 17.5 37.6134 17.6272 37.863C17.739 38.0825 17.9175 38.261 18.137 38.3728C18.3866 38.5 18.7133 38.5 19.3667 38.5H22.1667V36.1667H24.5V33.8333H26.8333L28.6757 31.991C28.954 31.7127 29.0932 31.5735 29.2345 31.4945C29.3816 31.4123 29.4716 31.3819 29.6385 31.358C29.7987 31.3351 30.052 31.3691 30.5585 31.4372C30.8664 31.4786 31.1807 31.5 31.5 31.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</template>
|
||||
</template>
|
||||
<template #title>
|
||||
<template v-if="isMailSent">Check your email</template>
|
||||
<template v-else>Forgot password?</template>
|
||||
</template>
|
||||
<!-- Forgot password modal -->
|
||||
<modal
|
||||
:show="show"
|
||||
max-width="lg"
|
||||
@close="close"
|
||||
>
|
||||
<template #icon>
|
||||
<template v-if="isMailSent">
|
||||
<div class="text-center">We sent a password reset link to <br/><span>{{form.email}}</span></div>
|
||||
<div class="w-full p-4 text-center">
|
||||
<span class="mt-4">Didn't receive the email? <a href="#" class="ml-1" @click.prevent="send">Click to resend</a></span>
|
||||
</div>
|
||||
<svg
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 56 56"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
class="text-blue-50"
|
||||
width="56"
|
||||
height="56"
|
||||
rx="28"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M16.3333 22.1666L25.859 28.8346C26.6304 29.3746 27.016 29.6446 27.4356 29.7492C27.8061 29.8415 28.1937 29.8415 28.5643 29.7492C28.9838 29.6446 29.3695 29.3746 30.1408 28.8346L39.6666 22.1666M21.9333 37.3333H34.0666C36.0268 37.3333 37.0069 37.3333 37.7556 36.9518C38.4141 36.6163 38.9496 36.0808 39.2851 35.4223C39.6666 34.6736 39.6666 33.6935 39.6666 31.7333V24.2666C39.6666 22.3064 39.6666 21.3264 39.2851 20.5777C38.9496 19.9191 38.4141 19.3837 37.7556 19.0481C37.0069 18.6666 36.0268 18.6666 34.0666 18.6666H21.9333C19.9731 18.6666 18.993 18.6666 18.2443 19.0481C17.5857 19.3837 17.0503 19.9191 16.7147 20.5777C16.3333 21.3264 16.3333 22.3064 16.3333 24.2666V31.7333C16.3333 33.6935 16.3333 34.6736 16.7147 35.4223C17.0503 36.0808 17.5857 36.6163 18.2443 36.9518C18.993 37.3333 19.9731 37.3333 21.9333 37.3333Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="text-center">No worries, we'll send you reset instructions.</div>
|
||||
<form @submit.prevent="send" @keydown="form.onKeydown($event)" class="p-4">
|
||||
<text-input name="email" :form="form" label="Email" placeholder="Your email address" :required="true" />
|
||||
|
||||
<div class="w-full mt-6">
|
||||
<v-button :loading="form.busy" class="w-full my-3">Reset password</v-button>
|
||||
</div>
|
||||
</form>
|
||||
<svg
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 56 56"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
class="text-blue-50"
|
||||
width="56"
|
||||
height="56"
|
||||
rx="28"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M33.8333 24.4999C33.8333 23.9028 33.6055 23.3057 33.1499 22.8501C32.6943 22.3945 32.0972 22.1667 31.5 22.1667M31.5 31.5C35.366 31.5 38.5 28.366 38.5 24.5C38.5 20.634 35.366 17.5 31.5 17.5C27.634 17.5 24.5 20.634 24.5 24.5C24.5 24.8193 24.5214 25.1336 24.5628 25.4415C24.6309 25.948 24.6649 26.2013 24.642 26.3615C24.6181 26.5284 24.5877 26.6184 24.5055 26.7655C24.4265 26.9068 24.2873 27.046 24.009 27.3243L18.0467 33.2866C17.845 33.4884 17.7441 33.5893 17.6719 33.707C17.608 33.8114 17.5608 33.9252 17.5322 34.0442C17.5 34.1785 17.5 34.3212 17.5 34.6065V36.6333C17.5 37.2867 17.5 37.6134 17.6272 37.863C17.739 38.0825 17.9175 38.261 18.137 38.3728C18.3866 38.5 18.7133 38.5 19.3667 38.5H22.1667V36.1667H24.5V33.8333H26.8333L28.6757 31.991C28.954 31.7127 29.0932 31.5735 29.2345 31.4945C29.3816 31.4123 29.4716 31.3819 29.6385 31.358C29.7987 31.3351 30.052 31.3691 30.5585 31.4372C30.8664 31.4786 31.1807 31.5 31.5 31.5Z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
<div class="w-full text-center">
|
||||
<a href="#" @click.prevent="close" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700">
|
||||
<svg class="inline mr-1" width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3334 6.99996H1.66669M1.66669 6.99996L7.50002 12.8333M1.66669 6.99996L7.50002 1.16663" stroke="#475467" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Back to log in
|
||||
</a>
|
||||
</template>
|
||||
<template #title>
|
||||
<template v-if="isMailSent">
|
||||
Check your email
|
||||
</template>
|
||||
<template v-else>
|
||||
Forgot password?
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="isMailSent">
|
||||
<div class="text-center">
|
||||
We sent a password reset link to <br><span>{{ form.email }}</span>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
<div class="w-full p-4 text-center">
|
||||
<span class="mt-4">Didn't receive the email?
|
||||
<a
|
||||
href="#"
|
||||
class="ml-1"
|
||||
@click.prevent="send"
|
||||
>Click to resend</a></span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="text-center">
|
||||
No worries, we'll send you reset instructions.
|
||||
</div>
|
||||
<form
|
||||
class="p-4"
|
||||
@submit.prevent="send"
|
||||
@keydown="form.onKeydown($event)"
|
||||
>
|
||||
<text-input
|
||||
name="email"
|
||||
:form="form"
|
||||
label="Email"
|
||||
placeholder="Your email address"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ForgotPasswordModal',
|
||||
components: { },
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
<div class="w-full mt-6">
|
||||
<v-button
|
||||
:loading="form.busy"
|
||||
class="w-full my-3"
|
||||
>
|
||||
Reset password
|
||||
</v-button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
<div class="w-full text-center">
|
||||
<a
|
||||
href="#"
|
||||
class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
|
||||
@click.prevent="close"
|
||||
>
|
||||
<svg
|
||||
class="inline mr-1"
|
||||
width="15"
|
||||
height="14"
|
||||
viewBox="0 0 15 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M13.3334 6.99996H1.66669M1.66669 6.99996L7.50002 12.8333M1.66669 6.99996L7.50002 1.16663"
|
||||
stroke="#475467"
|
||||
stroke-width="1.66667"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
Back to log in
|
||||
</a>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ForgotPasswordModal",
|
||||
components: {},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
data: () => ({
|
||||
isMailSent: false,
|
||||
form: useForm({
|
||||
email: ''
|
||||
})
|
||||
},
|
||||
emits: ['close'],
|
||||
data: () => ({
|
||||
isMailSent: false,
|
||||
form: useForm({
|
||||
email: "",
|
||||
}),
|
||||
methods: {
|
||||
async send () {
|
||||
const { data } = await this.form.post('/password/email')
|
||||
this.isMailSent = true
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.isMailSent = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}),
|
||||
methods: {
|
||||
async send() {
|
||||
await this.form.post("/password/email")
|
||||
this.isMailSent = true
|
||||
},
|
||||
close() {
|
||||
this.$emit("close")
|
||||
this.isMailSent = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,39 +1,77 @@
|
||||
<template>
|
||||
<div>
|
||||
<forgot-password-modal :show="showForgotModal" @close="showForgotModal=false"/>
|
||||
<forgot-password-modal
|
||||
:show="showForgotModal"
|
||||
@close="showForgotModal = false"
|
||||
/>
|
||||
|
||||
<form class="mt-4" @submit.prevent="login" @keydown="form.onKeydown($event)">
|
||||
<form
|
||||
class="mt-4"
|
||||
@submit.prevent="login"
|
||||
@keydown="form.onKeydown($event)"
|
||||
>
|
||||
<!-- Email -->
|
||||
<text-input name="email" :form="form" label="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="Password" :required="true"
|
||||
<text-input
|
||||
native-type="password"
|
||||
placeholder="Your password"
|
||||
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">
|
||||
<v-checkbox
|
||||
v-model="remember"
|
||||
class="w-full md:w-1/2"
|
||||
name="remember"
|
||||
size="small"
|
||||
>
|
||||
Remember me
|
||||
</v-checkbox>
|
||||
|
||||
<div class="w-full md:w-1/2 text-right">
|
||||
<a href="#" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
|
||||
@click.prevent="showForgotModal=true">
|
||||
<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 || loading">
|
||||
<v-button
|
||||
dusk="btn_login"
|
||||
:loading="form.busy || loading"
|
||||
>
|
||||
Log in to continue
|
||||
</v-button>
|
||||
|
||||
<p class="text-gray-500 mt-4">
|
||||
Don't have an account?
|
||||
<a v-if="isQuick" href="#" class="font-semibold ml-1" @click.prevent="$emit('openRegister')">Sign Up</a>
|
||||
<NuxtLink v-else :to="{name:'register'}" class="font-semibold ml-1">
|
||||
<a
|
||||
v-if="isQuick"
|
||||
href="#"
|
||||
class="font-semibold ml-1"
|
||||
@click.prevent="$emit('openRegister')"
|
||||
>Sign Up</a>
|
||||
<NuxtLink
|
||||
v-else
|
||||
:to="{ name: 'register' }"
|
||||
class="font-semibold ml-1"
|
||||
>
|
||||
Sign Up
|
||||
</NuxtLink>
|
||||
</p>
|
||||
@@ -42,81 +80,89 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ForgotPasswordModal from '../ForgotPasswordModal.vue'
|
||||
import {opnFetch} from "~/composables/useOpnApi.js"
|
||||
import {fetchAllWorkspaces} from "~/stores/workspaces.js"
|
||||
import ForgotPasswordModal from "../ForgotPasswordModal.vue"
|
||||
import { opnFetch } from "~/composables/useOpnApi.js"
|
||||
import { fetchAllWorkspaces } from "~/stores/workspaces.js"
|
||||
|
||||
export default {
|
||||
name: 'LoginForm',
|
||||
name: "LoginForm",
|
||||
components: {
|
||||
ForgotPasswordModal
|
||||
ForgotPasswordModal,
|
||||
},
|
||||
props: {
|
||||
isQuick: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
emits: ['afterQuickLogin', 'openRegister'],
|
||||
setup() {
|
||||
return {
|
||||
authStore: useAuthStore(),
|
||||
formsStore: useFormsStore(),
|
||||
workspaceStore: useWorkspacesStore()
|
||||
workspaceStore: useWorkspacesStore(),
|
||||
}
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
form: useForm({
|
||||
email: '',
|
||||
password: ''
|
||||
email: "",
|
||||
password: "",
|
||||
}),
|
||||
loading: false,
|
||||
remember: false,
|
||||
showForgotModal: false
|
||||
showForgotModal: false,
|
||||
}),
|
||||
|
||||
methods: {
|
||||
login() {
|
||||
// Submit the form.
|
||||
this.loading = true
|
||||
this.form.post('login').then(async (data) => {
|
||||
// Save the token.
|
||||
this.authStore.setToken(data.token)
|
||||
this.form
|
||||
.post("login")
|
||||
.then(async (data) => {
|
||||
// Save the token.
|
||||
this.authStore.setToken(data.token)
|
||||
|
||||
const [userDataResponse, workspacesResponse] = await Promise.all([opnFetch('user'), fetchAllWorkspaces()]);
|
||||
this.authStore.setUser(userDataResponse)
|
||||
this.workspaceStore.set(workspacesResponse.data.value)
|
||||
const [userDataResponse, workspacesResponse] = await Promise.all([
|
||||
opnFetch("user"),
|
||||
fetchAllWorkspaces(),
|
||||
])
|
||||
this.authStore.setUser(userDataResponse)
|
||||
this.workspaceStore.set(workspacesResponse.data.value)
|
||||
|
||||
// Load forms
|
||||
this.formsStore.loadAll(this.workspaceStore.currentId)
|
||||
// Load forms
|
||||
this.formsStore.loadAll(this.workspaceStore.currentId)
|
||||
|
||||
// Redirect home.
|
||||
this.redirect()
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
// Redirect home.
|
||||
this.redirect()
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
redirect() {
|
||||
if (this.isQuick) {
|
||||
this.$emit('afterQuickLogin')
|
||||
this.$emit("afterQuickLogin")
|
||||
return
|
||||
}
|
||||
|
||||
const intendedUrlCookie = useCookie('intended_url')
|
||||
const intendedUrlCookie = useCookie("intended_url")
|
||||
const router = useRouter()
|
||||
|
||||
if (intendedUrlCookie.value) {
|
||||
router.push({path: intendedUrlCookie.value})
|
||||
useCookie('intended_url').value = null
|
||||
router.push({ path: intendedUrlCookie.value })
|
||||
useCookie("intended_url").value = null
|
||||
} else {
|
||||
router.push({name: 'home'})
|
||||
router.push({ name: "home" })
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,76 +1,112 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Login modal -->
|
||||
<modal :show="showLoginModal" @close="showLoginModal=false" max-width="lg">
|
||||
<modal
|
||||
:show="showLoginModal"
|
||||
max-width="lg"
|
||||
@close="showLoginModal = false"
|
||||
>
|
||||
<template #icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-8 h-8"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
<template #title>
|
||||
Login to OpnForm
|
||||
</template>
|
||||
<div class="px-4">
|
||||
<login-form :isQuick="true" @openRegister="openRegister" @afterQuickLogin="afterQuickLogin" />
|
||||
<login-form
|
||||
:is-quick="true"
|
||||
@open-register="openRegister"
|
||||
@after-quick-login="afterQuickLogin"
|
||||
/>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
|
||||
<!-- Register modal -->
|
||||
<modal :show="showRegisterModal" @close="$emit('close')" max-width="lg">
|
||||
<modal
|
||||
:show="showRegisterModal"
|
||||
max-width="lg"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<template #icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-8 h-8"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
<template #title>
|
||||
Create an account
|
||||
</template>
|
||||
<div class="px-4">
|
||||
<register-form :isQuick="true" @openLogin="openLogin" @afterQuickLogin="afterQuickLogin" />
|
||||
<register-form
|
||||
:is-quick="true"
|
||||
@open-login="openLogin"
|
||||
@after-quick-login="afterQuickLogin"
|
||||
/>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoginForm from './LoginForm.vue'
|
||||
import RegisterForm from './RegisterForm.vue'
|
||||
import LoginForm from "./LoginForm.vue"
|
||||
import RegisterForm from "./RegisterForm.vue"
|
||||
|
||||
export default {
|
||||
name: 'QuickRegister',
|
||||
name: "QuickRegister",
|
||||
components: {
|
||||
LoginForm,
|
||||
RegisterForm
|
||||
RegisterForm,
|
||||
},
|
||||
props: {
|
||||
showRegisterModal: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['afterLogin', 'close', 'reopen'],
|
||||
|
||||
data: () => ({
|
||||
showLoginModal: false,
|
||||
}),
|
||||
|
||||
mounted() {
|
||||
},
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
openLogin(){
|
||||
openLogin() {
|
||||
this.showLoginModal = true
|
||||
this.$emit('close')
|
||||
this.$emit("close")
|
||||
},
|
||||
openRegister(){
|
||||
openRegister() {
|
||||
this.showLoginModal = false
|
||||
this.$emit('reopen')
|
||||
this.$emit("reopen")
|
||||
},
|
||||
afterQuickLogin(){
|
||||
afterQuickLogin() {
|
||||
this.showLoginModal = false
|
||||
this.$emit('afterLogin')
|
||||
}
|
||||
}
|
||||
this.$emit("afterLogin")
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,34 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<form class="mt-4" @submit.prevent="register" @keydown="form.onKeydown($event)">
|
||||
<form
|
||||
class="mt-4"
|
||||
@submit.prevent="register"
|
||||
@keydown="form.onKeydown($event)"
|
||||
>
|
||||
<!-- Name -->
|
||||
<text-input name="name" :form="form" label="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="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"
|
||||
<select-input
|
||||
name="hear_about_us"
|
||||
:options="hearAboutUsOptions"
|
||||
:form="form"
|
||||
placeholder="Select option"
|
||||
label="How did you hear about us?"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<text-input native-type="password" placeholder="Enter password"
|
||||
name="password" :form="form" label="Password" :required="true"
|
||||
<text-input
|
||||
native-type="password"
|
||||
placeholder="Enter password"
|
||||
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="Confirm Password"
|
||||
<text-input
|
||||
native-type="password"
|
||||
:form="form"
|
||||
:required="true"
|
||||
placeholder="Enter confirm password"
|
||||
name="password_confirmation"
|
||||
label="Confirm Password"
|
||||
/>
|
||||
|
||||
<checkbox-input :form="form" name="agree_terms" :required="true">
|
||||
<checkbox-input
|
||||
:form="form"
|
||||
name="agree_terms"
|
||||
:required="true"
|
||||
>
|
||||
<template #label>
|
||||
I agree with the
|
||||
<NuxtLink :to="{name:'terms-conditions'}" target="_blank">
|
||||
<NuxtLink
|
||||
:to="{ name: 'terms-conditions' }"
|
||||
target="_blank"
|
||||
>
|
||||
Terms and conditions
|
||||
</NuxtLink>
|
||||
and
|
||||
<NuxtLink :to="{name:'privacy-policy'}" target="_blank">
|
||||
<NuxtLink
|
||||
:to="{ name: 'privacy-policy' }"
|
||||
target="_blank"
|
||||
>
|
||||
Privacy policy
|
||||
</NuxtLink>
|
||||
of the website and I accept them.
|
||||
@@ -42,8 +83,17 @@
|
||||
|
||||
<p class="text-gray-500 mt-4">
|
||||
Already have an account?
|
||||
<a v-if="isQuick" href="#" class="font-semibold ml-1" @click.prevent="$emit('openLogin')">Log In</a>
|
||||
<NuxtLink v-else :to="{name:'login'}" class="font-semibold ml-1">
|
||||
<a
|
||||
v-if="isQuick"
|
||||
href="#"
|
||||
class="font-semibold ml-1"
|
||||
@click.prevent="$emit('openLogin')"
|
||||
>Log In</a>
|
||||
<NuxtLink
|
||||
v-else
|
||||
:to="{ name: 'login' }"
|
||||
class="font-semibold ml-1"
|
||||
>
|
||||
Log In
|
||||
</NuxtLink>
|
||||
</p>
|
||||
@@ -52,61 +102,69 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {opnFetch} from "~/composables/useOpnApi.js";
|
||||
import {fetchAllWorkspaces} from "~/stores/workspaces.js";
|
||||
import { opnFetch } from "~/composables/useOpnApi.js"
|
||||
import { fetchAllWorkspaces } from "~/stores/workspaces.js"
|
||||
|
||||
export default {
|
||||
name: 'RegisterForm',
|
||||
name: "RegisterForm",
|
||||
components: {},
|
||||
props: {
|
||||
isQuick: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['afterQuickLogin', 'openLogin'],
|
||||
|
||||
setup() {
|
||||
return {
|
||||
authStore: useAuthStore(),
|
||||
formsStore: useFormsStore(),
|
||||
workspaceStore: useWorkspacesStore(),
|
||||
logEvent: useAmplitude().logEvent
|
||||
logEvent: useAmplitude().logEvent,
|
||||
}
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
form: useForm({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
password_confirmation: "",
|
||||
agree_terms: false,
|
||||
appsumo_license: null
|
||||
appsumo_license: null,
|
||||
}),
|
||||
}),
|
||||
|
||||
computed: {
|
||||
hearAboutUsOptions() {
|
||||
const options = [
|
||||
{name: 'Facebook', value: 'facebook'},
|
||||
{name: 'Twitter', value: 'twitter'},
|
||||
{name: 'Reddit', value: 'reddit'},
|
||||
{name: 'Github', value: 'github'},
|
||||
{name: 'Search Engine (Google, DuckDuckGo...)', value: 'search_engine'},
|
||||
{name: 'Friend or Colleague', value: 'friend_colleague'},
|
||||
{name: 'Blog/Article', value: 'blog_article'}
|
||||
].map((value) => ({value, sort: Math.random()}))
|
||||
{ name: "Facebook", value: "facebook" },
|
||||
{ name: "Twitter", value: "twitter" },
|
||||
{ name: "Reddit", value: "reddit" },
|
||||
{ name: "Github", value: "github" },
|
||||
{
|
||||
name: "Search Engine (Google, DuckDuckGo...)",
|
||||
value: "search_engine",
|
||||
},
|
||||
{ name: "Friend or Colleague", value: "friend_colleague" },
|
||||
{ name: "Blog/Article", value: "blog_article" },
|
||||
]
|
||||
.map((value) => ({ value, sort: Math.random() }))
|
||||
.sort((a, b) => a.sort - b.sort)
|
||||
.map(({value}) => value)
|
||||
options.push({name: 'Other', value: 'other'})
|
||||
.map(({ value }) => value)
|
||||
options.push({ name: "Other", value: "other" })
|
||||
return options
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// Set appsumo license
|
||||
if (this.$route.query.appsumo_license !== undefined && this.$route.query.appsumo_license) {
|
||||
if (
|
||||
this.$route.query.appsumo_license !== undefined &&
|
||||
this.$route.query.appsumo_license
|
||||
) {
|
||||
this.form.appsumo_license = this.$route.query.appsumo_license
|
||||
}
|
||||
},
|
||||
@@ -114,15 +172,15 @@ export default {
|
||||
methods: {
|
||||
async register() {
|
||||
// Register the user.
|
||||
const data = await this.form.post('/register')
|
||||
const data = await this.form.post("/register")
|
||||
|
||||
// Log in the user.
|
||||
const tokenData = await this.form.post('/login')
|
||||
const tokenData = await this.form.post("/login")
|
||||
|
||||
// Save the token.
|
||||
this.authStore.setToken(tokenData.token)
|
||||
|
||||
const userData = await opnFetch('user')
|
||||
const userData = await opnFetch("user")
|
||||
this.authStore.setUser(userData)
|
||||
|
||||
const workspaces = await fetchAllWorkspaces()
|
||||
@@ -131,24 +189,28 @@ export default {
|
||||
// Load forms
|
||||
this.formsStore.loadAll(this.workspaceStore.currentId)
|
||||
|
||||
this.logEvent('register', {source: this.form.hear_about_us})
|
||||
this.logEvent("register", { source: this.form.hear_about_us })
|
||||
|
||||
// AppSumo License
|
||||
if (data.appsumo_license === false) {
|
||||
useAlert().error('Invalid AppSumo license. This probably happened because this license was already' +
|
||||
' attached to another OpnForm account. Please contact support.')
|
||||
useAlert().error(
|
||||
"Invalid AppSumo license. This probably happened because this license was already" +
|
||||
" attached to another OpnForm account. Please contact support.",
|
||||
)
|
||||
} else if (data.appsumo_license === true) {
|
||||
useAlert().success('Your AppSumo license was successfully activated! You now have access to all the' +
|
||||
' features of the AppSumo deal.')
|
||||
useAlert().success(
|
||||
"Your AppSumo license was successfully activated! You now have access to all the" +
|
||||
" features of the AppSumo deal.",
|
||||
)
|
||||
}
|
||||
|
||||
// Redirect
|
||||
if (this.isQuick) {
|
||||
this.$emit('afterQuickLogin')
|
||||
this.$emit("afterQuickLogin")
|
||||
} else {
|
||||
this.$router.push({name: 'forms-create'})
|
||||
this.$router.push({ name: "forms-create" })
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user