github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor(gui-v2): replace v-form with a-form on signup page

pull/2744/head
braks 2 years ago
parent
23f74bb343
commit
0e7c1ae289
2 changed files with 81 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/nc-gui-v2/pages/signin.vue
  2. 135
      packages/nc-gui-v2/pages/signup.vue

2
packages/nc-gui-v2/pages/signin.vue
Unescape View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { definePageMeta, useHead } from '#imports'
import { definePageMeta } from '#imports'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import { navigateTo, useNuxtApp } from '#app'
import { isEmail } from '~/utils/validation'

135
packages/nc-gui-v2/pages/signup.vue
Unescape View File

@ -14,7 +14,7 @@ definePageMeta({
requiresAuth: false,
})
const valid = ref()
const valid = $ref()
let error = $ref<string | null>(null)
const form = reactive({
@ -26,22 +26,42 @@ const form = reactive({
const formRules = {
email: [
// E-mail is required
(v: string) => !!v || t('msg.error.signUpRules.emailReqd'),
{ required: true, message: t('msg.error.signUpRules.emailReqd') },
// E-mail must be valid format
(v: string) => isEmail(v) || t('msg.error.signUpRules.emailInvalid'),
{
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
(v: string) => !!v || t('msg.error.signUpRules.passwdRequired'),
(v: string) => v.length >= 8 || t('msg.error.signUpRules.passwdLength'),
{ required: true, message: t('msg.error.signUpRules.passwdRequired') },
{ min: 8, message: t('msg.error.signUpRules.passwdLength') },
],
passwordRepeat: [
// PasswordRepeat is required
{ required: true, message: t('msg.error.signUpRules.passwdRequired') },
// Passwords match
(v: string) => v === form.password || t('msg.error.signUpRules.passwdMismatch'),
{
validator: (_: unknown, v: string) => {
return new Promise((resolve, reject) => {
if (form.password === form.passwordRepeat) return resolve(true)
reject(new Error(t('msg.error.signUpRules.passwdMismatch')))
})
},
message: t('msg.error.signUpRules.passwdMismatch'),
},
],
}
const signUp = async () => {
if (!valid) return
error = null
try {
const { token } = await $api.auth.signup(form)
@ -61,10 +81,13 @@ const resetError = () => {
<template>
<NuxtLayout>
<v-form
<a-form
ref="formValidator"
v-model="valid"
class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
:model="form"
layout="vertical"
class="signup h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
@finish="valid = true"
@finish-failed="valid = false"
@submit.prevent="signUp"
>
<div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
@ -81,53 +104,32 @@ const resetError = () => {
</div>
</Transition>
<v-text-field
id="email"
v-model="form.email"
class="bg-white dark:!bg-gray-900"
:rules="formRules.email"
:label="$t('labels.email')"
:placeholder="$t('labels.email')"
:persistent-placeholder="true"
type="text"
@focus="resetError"
/>
<v-text-field
id="password"
v-model="form.password"
class="bg-white dark:!bg-gray-900"
:rules="formRules.password"
:label="$t('labels.password')"
:placeholder="$t('labels.password')"
:persistent-placeholder="true"
type="password"
@focus="resetError"
/>
<v-text-field
id="password_repeat"
v-model="form.passwordRepeat"
class="bg-white dark:!bg-gray-900"
:rules="formRules.passwordRepeat"
:label="`Repeat ${$t('labels.password')}`"
:placeholder="`Repeat ${$t('labels.password')}`"
:persistent-placeholder="true"
type="password"
@focus="resetError"
/>
<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>
<a-form-item :label="`Repeat ${$t('labels.password')}`" name="password" :rules="formRules.passwordRepeat">
<a-input-password
v-model:value="form.passwordRepeat"
size="large"
class="password"
:placeholder="`Repeat ${$t('labels.password')}`"
@focus="resetError"
/>
</a-form-item>
<div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
<button
:disabled="!valid"
:class="[
!valid
? '!opacity-50 !cursor-default'
: 'text-white bg-primary hover:(text-primary !bg-primary/75) dark:(!bg-secondary/75 hover:!bg-secondary/50)',
]"
class="ml-1 border-1 border-solid border-gray-300 rounded-lg p-4 bg-gray-100/50"
type="submit"
>
<button class="submit" type="submit">
<span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('general.signUp') }}</span>
</button>
<div class="text-end prose-sm">
@ -137,6 +139,29 @@ const resetError = () => {
</div>
</div>
</div>
</v-form>
</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 bordered 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>

Write Preview
Loading…
Cancel
Save