OJ2/apps/web/src/shared/components/Signup.vue

<script setup lang="ts">
import { signup } from "../api"
import { storeToRefs } from "pinia"
import { useAuthModalStore } from "../store/authModal"

const authStore = useAuthModalStore()

const {
  signupModalOpen,
  signupForm: form,
  signupLoading: isLoading,
  signupError: msg,
} = storeToRefs(authStore)
const signupRef = useTemplateRef("signupRef")

const rules: FormRules = {
  username: [{ required: true, message: "用户名必填", trigger: "blur" }],
  email: [{ required: true, message: "邮箱必填", trigger: "blur" }],
  password: [
    { required: true, message: "密码必填", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 位之间", trigger: "input" },
  ],
  passwordAgain: [
    { required: true, message: "密码必填", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 位之间", trigger: "input" },
    {
      validator: (_: FormItemRule, value: string) =>
        value === form.value.password,
      message: "两次密码输入不一致",
      trigger: "blur",
    },
  ],
}

function goLogin() {
  authStore.switchToLogin()
}

function submit() {
  signupRef.value!.validate(async (errors?: unknown) => {
    if (!errors) {
      try {
        authStore.clearSignupError()
        authStore.setSignupLoading(true)
        await signup({
          username: form.value.username,
          email: form.value.email,
          password: form.value.password,
        })
      } catch (err: any) {
        if (err.error === "username-exists") {
          authStore.setSignupError("用户名已存在")
        } else if (err.error === "email-exists") {
          authStore.setSignupError("邮箱已存在")
        } else {
          authStore.setSignupError("无法注册")
        }
      } finally {
        authStore.setSignupLoading(false)
      }
      if (!msg.value) {
        authStore.closeSignupModal()
      }
    }
  })
}
</script>

<template>
  <n-modal
    :mask-closable="false"
    v-model:show="signupModalOpen"
    preset="card"
    title="注册"
    style="width: 400px"
    :auto-focus="false"
  >
    <n-form ref="signupRef" :model="form" :rules="rules" show-require-mark>
      <n-form-item label="用户名" path="username">
        <n-input
          v-model:value="form.username"
          autofocus
          clearable
          name="username"
          id="signup-username"
          autocomplete="username"
        />
      </n-form-item>
      <n-form-item label="邮箱" path="email">
        <n-input
          v-model:value="form.email"
          clearable
          name="email"
          id="signup-email"
          autocomplete="email"
          @change="submit"
        />
      </n-form-item>
      <n-form-item label="密码" path="password">
        <n-input
          v-model:value="form.password"
          clearable
          type="password"
          name="password"
          id="signup-password"
          autocomplete="new-password"
        />
      </n-form-item>
      <n-form-item label="确认密码" path="passwordAgain">
        <n-input
          v-model:value="form.passwordAgain"
          clearable
          type="password"
          name="passwordAgain"
          id="signup-password-again"
          autocomplete="new-password"
        />
      </n-form-item>
      <n-alert v-if="msg" type="error" :show-icon="false"> {{ msg }}</n-alert>
      <n-form-item>
        <n-space>
          <n-button type="primary" :loading="isLoading" @click="submit">
            注册
          </n-button>
          <n-button @click="goLogin">已经注册？现在登录</n-button>
        </n-space>
      </n-form-item>
    </n-form>
  </n-modal>
</template>