github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Login/components/RegisterForm.vue (about)

     1  <script setup lang="ts">
     2  import { Form } from '@/components/Form'
     3  import { reactive, ref, unref } from 'vue'
     4  import { useI18n } from '@/hooks/web/useI18n'
     5  import { useForm } from '@/hooks/web/useForm'
     6  import { ElButton, ElInput, FormRules } from 'element-plus'
     7  import { useValidator } from '@/hooks/web/useValidator'
     8  import { FormSchema } from '@/types/form'
     9  
    10  const emit = defineEmits(['to-login'])
    11  const { register, elFormRef } = useForm()
    12  const { t } = useI18n()
    13  const { required } = useValidator()
    14  
    15  const schema = reactive<FormSchema[]>([
    16    {
    17      field: 'title',
    18      colProps: {
    19        span: 24
    20      }
    21    },
    22    {
    23      field: 'username',
    24      label: t('login.username'),
    25      value: '',
    26      component: 'Input',
    27      colProps: {
    28        span: 24
    29      },
    30      componentProps: {
    31        placeholder: t('login.usernamePlaceholder')
    32      }
    33    },
    34    {
    35      field: 'password',
    36      label: t('login.password'),
    37      value: '',
    38      component: 'InputPassword',
    39      colProps: {
    40        span: 24
    41      },
    42      componentProps: {
    43        style: {
    44          width: '100%'
    45        },
    46        strength: true,
    47        placeholder: t('login.passwordPlaceholder')
    48      }
    49    },
    50    {
    51      field: 'check_password',
    52      label: t('login.checkPassword'),
    53      value: '',
    54      component: 'InputPassword',
    55      colProps: {
    56        span: 24
    57      },
    58      componentProps: {
    59        style: {
    60          width: '100%'
    61        },
    62        strength: true,
    63        placeholder: t('login.passwordPlaceholder')
    64      }
    65    },
    66    {
    67      feld: 'code',
    68      label: t('login.code'),
    69      colProps: {
    70        span: 24
    71      }
    72    },
    73    {
    74      field: 'register',
    75      colProps: {
    76        span: 24
    77      }
    78    }
    79  ])
    80  
    81  const rules: FormRules = {
    82    username: [required()],
    83    password: [required()],
    84    check_password: [required()],
    85    code: [required()]
    86  }
    87  
    88  const toLogin = () => {
    89    emit('to-login')
    90  }
    91  
    92  const loading = ref(false)
    93  
    94  const loginRegister = async () => {
    95    const formRef = unref(elFormRef)
    96    formRef?.validate(async (valid) => {
    97      if (valid) {
    98        try {
    99          loading.value = true
   100          toLogin()
   101        } finally {
   102          loading.value = false
   103        }
   104      }
   105    })
   106  }
   107  </script>
   108  
   109  <template>
   110    <Form
   111      :schema="schema"
   112      :rules="rules"
   113      label-position="top"
   114      hide-required-asterisk
   115      size="large"
   116      class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
   117      @register="register"
   118    >
   119      <template #title>
   120        <h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.register') }}</h2>
   121      </template>
   122  
   123      <template #code="form">
   124        <div class="w-[100%] flex">
   125          <ElInput v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
   126        </div>
   127      </template>
   128  
   129      <template #register>
   130        <div class="w-[100%]">
   131          <ElButton type="primary" class="w-[100%]" :loading="loading" @click="loginRegister">
   132            {{ t('login.register') }}
   133          </ElButton>
   134        </div>
   135        <div class="w-[100%] mt-15px">
   136          <ElButton class="w-[100%]" @click="toLogin">
   137            {{ t('login.hasUser') }}
   138          </ElButton>
   139        </div>
   140      </template>
   141    </Form>
   142  </template>