120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
<template>
|
|
<div class=" bg-gray-50 flex flex-col justify-center sm:px-6 lg:px-8 py-10 flex-grow">
|
|
<div class="sm:mx-auto sm:w-full sm:max-w-md">
|
|
<h2 class="text-center text-3xl font-bold tracking-tight text-gray-900">
|
|
Welcome to OpnForm!
|
|
</h2>
|
|
<p class="mt-2 text-center text-sm text-gray-600">
|
|
You're using the self-hosted version of OpnForm and need to set up your account.
|
|
Please enter your email and create a password to continue.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
|
|
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
|
|
<form
|
|
@submit.prevent="updateCredentials"
|
|
@keydown="form.onKeydown($event)"
|
|
>
|
|
<!-- Email -->
|
|
<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"
|
|
/>
|
|
|
|
<!-- Password Confirmation-->
|
|
<text-input
|
|
native-type="password"
|
|
:form="form"
|
|
:required="true"
|
|
placeholder="Enter confirm password"
|
|
name="password_confirmation"
|
|
label="Confirm Password"
|
|
/>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="mt-6">
|
|
<v-button
|
|
class="w-full justify-center"
|
|
:loading="form.busy || loading"
|
|
>
|
|
Update Credentials
|
|
</v-button>
|
|
</div>
|
|
|
|
<!-- Cancel Link -->
|
|
<div class="mt-4 text-center">
|
|
<button
|
|
type="button"
|
|
class="text-sm text-gray-600 hover:text-gray-900"
|
|
@click="logout"
|
|
>
|
|
Cancel and return to login
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from "vue"
|
|
|
|
const authStore = useAuthStore()
|
|
const workspacesStore = useWorkspacesStore()
|
|
const formsStore = useFormsStore()
|
|
const user = computed(() => authStore.user)
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
const form = useForm({
|
|
name: "",
|
|
email: "",
|
|
password: "",
|
|
password_confirmation: "",
|
|
agree_terms: false,
|
|
appsumo_license: null,
|
|
})
|
|
|
|
onMounted(() => {
|
|
form.email = user?.value?.email
|
|
})
|
|
|
|
const updateCredentials = () => {
|
|
loading.value = true
|
|
form
|
|
.post("update-credentials")
|
|
.then(async (data) => {
|
|
authStore.setUser(data.user)
|
|
const workspaces = await fetchAllWorkspaces()
|
|
workspacesStore.set(workspaces.data.value)
|
|
formsStore.loadAll(workspacesStore.currentId)
|
|
router.push({ name: "home" })
|
|
})
|
|
.catch((error) => {
|
|
console.error(error)
|
|
useAlert().error(error.response._data.message)
|
|
})
|
|
.finally(() => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
|
|
const logout = () => {
|
|
authStore.logout()
|
|
router.push({ name: "login" })
|
|
}
|
|
</script> |