mirror of https://github.com/nocodb/nocodb
Raju Udava
2 years ago
committed by
GitHub
12 changed files with 555 additions and 340 deletions
@ -1,143 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
import { useI18n } from 'vue-i18n' |
||||
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' |
||||
import { navigateTo } from '#app' |
||||
import { isEmail } from '~/utils/validation' |
||||
import MaterialSymbolsWarning from '~icons/material-symbols/warning' |
||||
import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline' |
||||
|
||||
const { $api, $state } = useNuxtApp() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
definePageMeta({ |
||||
requiresAuth: false, |
||||
}) |
||||
|
||||
const formValidator = ref() |
||||
let error = $ref<string | null>(null) |
||||
|
||||
const form = reactive({ |
||||
email: '', |
||||
password: '', |
||||
}) |
||||
|
||||
const formRules = { |
||||
email: [ |
||||
// E-mail is required |
||||
{ required: true, message: t('msg.error.signUpRules.emailReqd') }, |
||||
// E-mail must be valid format |
||||
{ |
||||
validator: (_: unknown, v: string) => { |
||||
return new Promise((resolve, reject) => { |
||||
if (isEmail(v)) return resolve(true) |
||||
reject(new Error(t('msg.error.signUpRules.emailInvalid'))) |
||||
}) |
||||
}, |
||||
message: t('msg.error.signUpRules.emailInvalid'), |
||||
}, |
||||
], |
||||
password: [ |
||||
// Password is required |
||||
{ required: true, message: t('msg.error.signUpRules.passwdRequired') }, |
||||
{ min: 8, message: t('msg.error.signUpRules.passwdLength') }, |
||||
], |
||||
} |
||||
|
||||
const signUp = async () => { |
||||
const valid = formValidator.value.validate() |
||||
if (!valid) return |
||||
|
||||
error = null |
||||
try { |
||||
const { token } = await $api.auth.signup(form) |
||||
$state.signIn(token!) |
||||
await navigateTo('/') |
||||
} catch (e: any) { |
||||
error = await extractSdkResponseErrorMsg(e) |
||||
} |
||||
} |
||||
|
||||
const resetError = () => { |
||||
if (error) { |
||||
error = null |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NuxtLayout> |
||||
<a-form |
||||
ref="formValidator" |
||||
:model="form" |
||||
layout="vertical" |
||||
class="signup h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center nc-form-signup" |
||||
@finish="signUp" |
||||
> |
||||
<div class="h-full w-full flex flex-col flex-wrap pt-[100px]"> |
||||
<div |
||||
class="bg-white dark:(!bg-gray-900 !text-white) relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)" |
||||
> |
||||
<general-noco-icon /> |
||||
|
||||
<h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signUp') }}</h1> |
||||
|
||||
<Transition name="layout"> |
||||
<div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1"> |
||||
<div class="flex items-center gap-2 justify-center"><MaterialSymbolsWarning /> {{ error }}</div> |
||||
</div> |
||||
</Transition> |
||||
|
||||
<a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email"> |
||||
<a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" /> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password"> |
||||
<a-input-password |
||||
v-model:value="form.password" |
||||
size="large" |
||||
class="password" |
||||
:placeholder="$t('labels.password')" |
||||
@focus="resetError" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<div |
||||
class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full" |
||||
> |
||||
<button class="submit" type="submit"> |
||||
<span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span> |
||||
</button> |
||||
<div class="text-end prose-sm"> |
||||
{{ $t('msg.info.signUp.alreadyHaveAccount') }} |
||||
<nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-form> |
||||
</NuxtLayout> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.signup { |
||||
.ant-input-affix-wrapper, |
||||
.ant-input { |
||||
@apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded; |
||||
} |
||||
|
||||
.password { |
||||
input { |
||||
@apply !border-none; |
||||
} |
||||
|
||||
.ant-input-password-icon { |
||||
@apply dark:!text-white; |
||||
} |
||||
} |
||||
|
||||
.submit { |
||||
@apply ml-1 border border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50); |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,206 @@
|
||||
<script setup lang="ts"> |
||||
import { |
||||
definePageMeta, |
||||
extractSdkResponseErrorMsg, |
||||
isEmail, |
||||
navigateTo, |
||||
reactive, |
||||
ref, |
||||
useApi, |
||||
useGlobal, |
||||
useI18n, |
||||
useRoute, |
||||
} from '#imports' |
||||
|
||||
definePageMeta({ |
||||
requiresAuth: false, |
||||
}) |
||||
|
||||
const route = useRoute() |
||||
|
||||
const { appInfo, signIn } = useGlobal() |
||||
|
||||
const { api, isLoading } = useApi() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const formValidator = ref() |
||||
|
||||
let error = $ref<string | null>(null) |
||||
|
||||
const subscribe = ref(false) |
||||
|
||||
const form = reactive({ |
||||
email: '', |
||||
password: '', |
||||
}) |
||||
|
||||
const formRules = { |
||||
email: [ |
||||
// E-mail is required |
||||
{ required: true, message: t('msg.error.signUpRules.emailReqd') }, |
||||
// E-mail must be valid format |
||||
{ |
||||
validator: (_: unknown, v: string) => { |
||||
return new Promise((resolve, reject) => { |
||||
if (isEmail(v)) return resolve(true) |
||||
reject(new Error(t('msg.error.signUpRules.emailInvalid'))) |
||||
}) |
||||
}, |
||||
message: t('msg.error.signUpRules.emailInvalid'), |
||||
}, |
||||
], |
||||
password: [ |
||||
// Password is required |
||||
{ required: true, message: t('msg.error.signUpRules.passwdRequired') }, |
||||
{ min: 8, message: t('msg.error.signUpRules.passwdLength') }, |
||||
], |
||||
} |
||||
|
||||
async function signUp() { |
||||
if (!formValidator.value.validate()) return |
||||
|
||||
resetError() |
||||
|
||||
const data: any = { |
||||
...form, |
||||
token: route.params.token, |
||||
} |
||||
|
||||
if (subscribe.value) { |
||||
data.ignore_subscribe = !subscribe.value |
||||
} |
||||
|
||||
api.auth |
||||
.signup(data) |
||||
.then(async ({ token }) => { |
||||
signIn(token!) |
||||
|
||||
await navigateTo('/') |
||||
}) |
||||
.catch(async (err) => { |
||||
error = await extractSdkResponseErrorMsg(err) |
||||
}) |
||||
} |
||||
|
||||
function resetError() { |
||||
if (error) error = null |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NuxtLayout> |
||||
<div class="bg-primary/5 signup h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signup"> |
||||
<div |
||||
class="bg-white dark:(!bg-gray-900 !text-white) mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)" |
||||
> |
||||
<general-noco-icon |
||||
class="color-transition hover:(ring ring-pink-500)" |
||||
:class="[isLoading ? 'animated-bg-gradient' : '']" |
||||
/> |
||||
|
||||
<h1 class="prose-2xl font-bold self-center my-4"> |
||||
{{ $t('general.signUp') }} |
||||
{{ $route.query.redirect_to === '/referral' ? '& REFER' : '' }} |
||||
{{ $route.query.redirect_to === '/pricing' ? '& BUY' : '' }} |
||||
</h1> |
||||
|
||||
<h2 v-if="appInfo.firstUser" class="prose !text-primary font-semibold self-center my-4"> |
||||
{{ $t('msg.info.signUp.superAdmin') }} |
||||
</h2> |
||||
|
||||
<a-form ref="formValidator" :model="form" layout="vertical" no-style @finish="signUp"> |
||||
<Transition name="layout"> |
||||
<div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1"> |
||||
<div class="flex items-center gap-2 justify-center"> |
||||
<MaterialSymbolsWarning /> |
||||
<div style="flex: 0 0 auto" class="break-words">{{ error }}</div> |
||||
</div> |
||||
</div> |
||||
</Transition> |
||||
|
||||
<a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email"> |
||||
<a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" /> |
||||
</a-form-item> |
||||
|
||||
<a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password"> |
||||
<a-input-password |
||||
v-model:value="form.password" |
||||
size="large" |
||||
class="password" |
||||
:placeholder="$t('labels.password')" |
||||
@focus="resetError" |
||||
/> |
||||
</a-form-item> |
||||
|
||||
<div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4"> |
||||
<button class="submit" type="submit"> |
||||
<span class="flex items-center gap-2"> |
||||
<MaterialSymbolsRocketLaunchOutline /> |
||||
|
||||
{{ $t('general.signUp') }} |
||||
</span> |
||||
</button> |
||||
|
||||
<div class="flex items-center gap-2"> |
||||
<a-switch |
||||
v-model:checked="subscribe" |
||||
size="small" |
||||
class="my-1 hover:(ring ring-pink-500) focus:(!ring !ring-pink-500)" |
||||
/> |
||||
<div class="prose-xs text-gray-500">Subscribe to our weekly newsletter</div> |
||||
</div> |
||||
|
||||
<div class="text-end prose-sm"> |
||||
{{ $t('msg.info.signUp.alreadyHaveAccount') }} |
||||
|
||||
<nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link> |
||||
</div> |
||||
</div> |
||||
</a-form> |
||||
</div> |
||||
|
||||
<div class="prose-sm mt-4 text-gray-500"> |
||||
By signing up, you agree to the |
||||
<a class="prose-sm text-pink-500 underline" target="_blank" href="https://nocodb.com/policy-nocodb">Terms of Service</a> |
||||
</div> |
||||
</div> |
||||
</NuxtLayout> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.signup { |
||||
.ant-input-affix-wrapper, |
||||
.ant-input { |
||||
@apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded; |
||||
} |
||||
|
||||
.password { |
||||
input { |
||||
@apply !border-none; |
||||
} |
||||
|
||||
.ant-input-password-icon { |
||||
@apply dark:!text-white; |
||||
} |
||||
} |
||||
|
||||
.submit { |
||||
@apply z-1 relative color-transition border border-gray-300 rounded-md p-3 bg-gray-100/50 text-white bg-primary; |
||||
|
||||
&::after { |
||||
@apply rounded-md absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary; |
||||
content: ''; |
||||
z-index: -1; |
||||
} |
||||
|
||||
&:hover::after { |
||||
@apply transform scale-110 ring ring-pink-500; |
||||
} |
||||
|
||||
&:active::after { |
||||
@apply ring ring-pink-500; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue