refactor: adjust all sample pages and use page components (#4118)

packages/effects/common-ui/src/ui/authentication/auth-title.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="mb-7 sm:mx-auto sm:w-full sm:max-w-md">
+    <h2
+      class="text-foreground mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl"
+    >
+      <slot></slot>
+    </h2>
+
+    <p class="text-muted-foreground lg:text-md text-sm">
+      <slot name="desc"></slot>
+    </p>
+  </div>
+</template>

packages/effects/common-ui/src/ui/authentication/code-login.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { LoginCodeEmits } from './typings';
+
+import { computed, onBeforeUnmount, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+import { VbenButton, VbenInput, VbenPinInput } from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登陆路径
+   */
+  loginPath?: string;
+}
+
+defineOptions({
+  name: 'AuthenticationCodeLogin',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loginPath: '/auth/login',
+});
+
+const emit = defineEmits<{
+  submit: LoginCodeEmits['submit'];
+}>();
+
+const router = useRouter();
+
+const formState = reactive({
+  code: '',
+  phoneNumber: '',
+  requirePhoneNumber: false,
+  submitted: false,
+});
+
+const countdown = ref(0);
+const timer = ref<ReturnType<typeof setTimeout>>();
+
+const isValidPhoneNumber = computed(() => {
+  return /^1[3-9]\d{9}$/.test(formState.phoneNumber);
+});
+
+const btnText = computed(() => {
+  return countdown.value > 0
+    ? $t('authentication.sendText', [countdown.value])
+    : $t('authentication.sendCode');
+});
+const btnLoading = computed(() => {
+  return countdown.value > 0;
+});
+
+const phoneNumberStatus = computed(() => {
+  return (formState.submitted || formState.requirePhoneNumber) &&
+    !isValidPhoneNumber.value
+    ? 'error'
+    : 'default';
+});
+
+const codeStatus = computed(() => {
+  return formState.submitted && !formState.code ? 'error' : 'default';
+});
+
+function handleSubmit() {
+  formState.submitted = true;
+  if (phoneNumberStatus.value !== 'default' || codeStatus.value !== 'default') {
+    return;
+  }
+
+  emit('submit', {
+    code: formState.code,
+    phoneNumber: formState.phoneNumber,
+  });
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+
+async function handleSendCode() {
+  if (btnLoading.value) {
+    return;
+  }
+  if (!isValidPhoneNumber.value) {
+    formState.requirePhoneNumber = true;
+    return;
+  }
+  countdown.value = 60;
+  // TODO: 调用发送验证码接口
+  startCountdown();
+}
+
+function startCountdown() {
+  if (countdown.value > 0) {
+    timer.value = setTimeout(() => {
+      countdown.value--;
+      startCountdown();
+    }, 1000);
+  }
+}
+
+onBeforeUnmount(() => {
+  countdown.value = 0;
+  clearTimeout(timer.value);
+});
+</script>
+
+<template>
+  <div>
+    <Title>
+      {{ $t('authentication.welcomeBack') }} 📲
+      <template #desc>
+        <span class="text-muted-foreground">
+          {{ $t('authentication.codeSubtitle') }}
+        </span>
+      </template>
+    </Title>
+    <VbenInput
+      v-model="formState.phoneNumber"
+      :autofocus="true"
+      :error-tip="$t('authentication.mobile-tip')"
+      :label="$t('authentication.mobile')"
+      :placeholder="$t('authentication.mobile')"
+      :status="phoneNumberStatus"
+      name="phoneNumber"
+      type="number"
+      @keyup.enter="handleSubmit"
+    />
+    <VbenPinInput
+      v-model="formState.code"
+      :btn-loading="btnLoading"
+      :btn-text="btnText"
+      :code-length="4"
+      :error-tip="$t('authentication.codeTip')"
+      :handle-send-code="handleSendCode"
+      :label="$t('authentication.code')"
+      :placeholder="$t('authentication.code')"
+      :status="codeStatus"
+      name="password"
+      @keyup.enter="handleSubmit"
+    />
+    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
+      {{ $t('common.login') }}
+    </VbenButton>
+    <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
+      {{ $t('common.back') }}
+    </VbenButton>
+  </div>
+</template>

packages/effects/common-ui/src/ui/authentication/forget-password.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+import { VbenButton, VbenInput } from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登陆路径
+   */
+  loginPath?: string;
+}
+
+defineOptions({
+  name: 'AuthenticationForgetPassword',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loginPath: '/auth/login',
+});
+
+const emit = defineEmits<{
+  submit: [string];
+}>();
+
+const router = useRouter();
+const formState = reactive({
+  email: '',
+  submitted: false,
+});
+
+const emailStatus = computed(() => {
+  return formState.submitted && !formState.email ? 'error' : 'default';
+});
+
+function handleSubmit() {
+  formState.submitted = true;
+  if (emailStatus.value !== 'default') {
+    return;
+  }
+  emit('submit', formState.email);
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+</script>
+
+<template>
+  <div>
+    <Title>
+      {{ $t('authentication.forgetPassword') }} 🤦🏻‍♂️
+      <template #desc>
+        {{ $t('authentication.forgetPasswordSubtitle') }}
+      </template>
+    </Title>
+    <div class="mb-6">
+      <VbenInput
+        v-model="formState.email"
+        :error-tip="$t('authentication.emailTip')"
+        :label="$t('authentication.email')"
+        :status="emailStatus"
+        autofocus
+        name="email"
+        placeholder="example@example.com"
+        type="text"
+      />
+    </div>
+    <div>
+      <VbenButton class="mt-2 w-full" @click="handleSubmit">
+        {{ $t('authentication.sendResetLink') }}
+      </VbenButton>
+      <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
+        {{ $t('common.back') }}
+      </VbenButton>
+    </div>
+  </div>
+</template>

packages/effects/common-ui/src/ui/authentication/index.ts

@@ -0,0 +1,11 @@
+export { default as AuthenticationCodeLogin } from './code-login.vue';
+export { default as AuthenticationForgetPassword } from './forget-password.vue';
+export { default as AuthenticationLogin } from './login.vue';
+export { default as AuthenticationLoginExpiredModal } from './login-expired-modal.vue';
+export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
+export { default as AuthenticationRegister } from './register.vue';
+export type {
+  AuthenticationProps,
+  LoginAndRegisterParams,
+  LoginCodeParams,
+} from './typings';

packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { AuthenticationProps, LoginAndRegisterParams } from './typings';
+
+import { useForwardPropsEmits } from '@vben/hooks';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  VbenAvatar,
+  VisuallyHidden,
+} from '@vben-core/shadcn-ui';
+
+import AuthenticationLogin from './login.vue';
+
+interface Props extends AuthenticationProps {
+  avatar?: string;
+}
+
+defineOptions({
+  name: 'LoginExpiredModal',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  avatar: '',
+});
+
+const emit = defineEmits<{
+  submit: [LoginAndRegisterParams];
+}>();
+
+const open = defineModel<boolean>('open');
+
+const forwarded = useForwardPropsEmits(props, emit);
+</script>
+
+<template>
+  <div>
+    <Dialog v-model:open="open">
+      <DialogContent
+        :show-close="false"
+        class="top-1/2 h-full w-full translate-y-[-50%] border-none p-4 py-12 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset] md:px-14 md:pt-12"
+        @escape-key-down="(e) => e.preventDefault()"
+        @interact-outside="(e) => e.preventDefault()"
+      >
+        <DialogTitle>
+          <VbenAvatar :src="avatar" class="mx-auto size-20" />
+        </DialogTitle>
+        <VisuallyHidden>
+          <DialogDescription />
+        </VisuallyHidden>
+        <AuthenticationLogin
+          v-bind="forwarded"
+          :show-forget-password="false"
+          :show-register="false"
+          :show-remember-me="false"
+          :sub-title="$t('authentication.loginAgainSubTitle')"
+          :title="$t('authentication.loginAgainTitle')"
+        />
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>

packages/effects/common-ui/src/ui/authentication/login.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import type { AuthenticationProps, LoginEmits } from './typings';
+
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+import {
+  VbenButton,
+  VbenCheckbox,
+  VbenInput,
+  VbenInputPassword,
+} from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+import ThirdPartyLogin from './third-party-login.vue';
+
+interface Props extends AuthenticationProps {}
+
+defineOptions({
+  name: 'AuthenticationLogin',
+});
+
+withDefaults(defineProps<Props>(), {
+  codeLoginPath: '/auth/code-login',
+  forgetPasswordPath: '/auth/forget-password',
+  loading: false,
+  passwordPlaceholder: '',
+  qrCodeLoginPath: '/auth/qrcode-login',
+  registerPath: '/auth/register',
+  showCodeLogin: true,
+  showForgetPassword: true,
+  showQrcodeLogin: true,
+  showRegister: true,
+  showRememberMe: true,
+  showThirdPartyLogin: true,
+  subTitle: '',
+  title: '',
+  usernamePlaceholder: '',
+});
+
+const emit = defineEmits<{
+  submit: LoginEmits['submit'];
+}>();
+
+const router = useRouter();
+
+const REMEMBER_ME_KEY = `REMEMBER_ME_USERNAME_${location.hostname}`;
+
+const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
+
+const formState = reactive({
+  password: '',
+  rememberMe: !!localUsername,
+  submitted: false,
+  username: localUsername,
+});
+
+const usernameStatus = computed(() => {
+  return formState.submitted && !formState.username ? 'error' : 'default';
+});
+
+const passwordStatus = computed(() => {
+  return formState.submitted && !formState.password ? 'error' : 'default';
+});
+
+function handleSubmit() {
+  formState.submitted = true;
+
+  if (
+    usernameStatus.value !== 'default' ||
+    passwordStatus.value !== 'default'
+  ) {
+    return;
+  }
+
+  localStorage.setItem(
+    REMEMBER_ME_KEY,
+    formState.rememberMe ? formState.username : '',
+  );
+
+  emit('submit', {
+    password: formState.password,
+    username: formState.username,
+  });
+}
+
+function handleGo(path: string) {
+  router.push(path);
+}
+</script>
+
+<template>
+  <div @keypress.enter.prevent="handleSubmit">
+    <Title>
+      {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
+      <template #desc>
+        <span class="text-muted-foreground">
+          {{ subTitle || $t('authentication.loginSubtitle') }}
+        </span>
+      </template>
+    </Title>
+
+    <VbenInput
+      v-model="formState.username"
+      :autofocus="false"
+      :error-tip="$t('authentication.usernameTip')"
+      :label="$t('authentication.username')"
+      :placeholder="usernamePlaceholder || $t('authentication.username')"
+      :status="usernameStatus"
+      name="username"
+      required
+      type="text"
+    />
+    <VbenInputPassword
+      v-model="formState.password"
+      :error-tip="$t('authentication.passwordTip')"
+      :label="$t('authentication.password')"
+      :placeholder="passwordPlaceholder || $t('authentication.password')"
+      :status="passwordStatus"
+      name="password"
+      required
+      type="password"
+    />
+
+    <div class="mb-6 mt-4 flex justify-between">
+      <div v-if="showRememberMe" class="flex-center">
+        <VbenCheckbox v-model:checked="formState.rememberMe" name="rememberMe">
+          {{ $t('authentication.rememberMe') }}
+        </VbenCheckbox>
+      </div>
+
+      <span
+        v-if="showForgetPassword"
+        class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
+        @click="handleGo(forgetPasswordPath)"
+      >
+        {{ $t('authentication.forgetPassword') }}
+      </span>
+    </div>
+    <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
+      {{ $t('common.login') }}
+    </VbenButton>
+
+    <div class="mb-2 mt-4 flex items-center justify-between">
+      <VbenButton
+        v-if="showCodeLogin"
+        class="w-1/2"
+        variant="outline"
+        @click="handleGo(codeLoginPath)"
+      >
+        {{ $t('authentication.mobileLogin') }}
+      </VbenButton>
+      <VbenButton
+        v-if="showQrcodeLogin"
+        class="ml-4 w-1/2"
+        variant="outline"
+        @click="handleGo(qrCodeLoginPath)"
+      >
+        {{ $t('authentication.qrcodeLogin') }}
+      </VbenButton>
+    </div>
+
+    <!-- 第三方登录 -->
+    <ThirdPartyLogin v-if="showThirdPartyLogin" />
+
+    <div v-if="showRegister" class="text-center text-sm">
+      {{ $t('authentication.accountTip') }}
+      <span
+        class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
+        @click="handleGo(registerPath)"
+      >
+        {{ $t('authentication.createAccount') }}
+      </span>
+    </div>
+  </div>
+</template>

packages/effects/common-ui/src/ui/authentication/qrcode-login.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+import { VbenButton } from '@vben-core/shadcn-ui';
+
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登陆路径
+   */
+  loginPath?: string;
+}
+
+defineOptions({
+  name: 'AuthenticationQrCodeLogin',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loginPath: '/auth/login',
+});
+
+const router = useRouter();
+
+const text = ref('https://vben.vvbin.cn');
+
+const qrcode = useQRCode(text, {
+  errorCorrectionLevel: 'H',
+  margin: 4,
+});
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+</script>
+
+<template>
+  <div>
+    <Title>
+      {{ $t('authentication.welcomeBack') }} 📱
+      <template #desc>
+        <span class="text-muted-foreground">
+          {{ $t('authentication.qrcodeSubtitle') }}
+        </span>
+      </template>
+    </Title>
+
+    <div class="flex-col-center mt-6">
+      <img :src="qrcode" alt="qrcode" class="w-1/2" />
+      <p class="text-muted-foreground mt-4 text-sm">
+        {{ $t('authentication.qrcodePrompt') }}
+      </p>
+    </div>
+
+    <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
+      {{ $t('common.back') }}
+    </VbenButton>
+  </div>
+</template>

packages/effects/common-ui/src/ui/authentication/register.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { RegisterEmits } from './typings';
+
+import { computed, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { $t } from '@vben/locales';
+import {
+  VbenButton,
+  VbenCheckbox,
+  VbenInput,
+  VbenInputPassword,
+} from '@vben-core/shadcn-ui';
+
+import Title from './auth-title.vue';
+
+interface Props {
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登陆路径
+   */
+  loginPath?: string;
+}
+
+defineOptions({
+  name: 'RegisterForm',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loginPath: '/auth/login',
+});
+
+const emit = defineEmits<{
+  submit: RegisterEmits['submit'];
+}>();
+
+const router = useRouter();
+
+const formState = reactive({
+  agreePolicy: false,
+  confirmPassword: '',
+  password: '',
+  submitted: false,
+  username: '',
+});
+
+const usernameStatus = computed(() => {
+  return formState.submitted && !formState.username ? 'error' : 'default';
+});
+
+const passwordStatus = computed(() => {
+  return formState.submitted && !formState.password ? 'error' : 'default';
+});
+
+const confirmPasswordStatus = computed(() => {
+  return formState.submitted && formState.password !== formState.confirmPassword
+    ? 'error'
+    : 'default';
+});
+
+function handleSubmit() {
+  formState.submitted = true;
+  if (
+    usernameStatus.value !== 'default' ||
+    passwordStatus.value !== 'default'
+  ) {
+    return;
+  }
+
+  emit('submit', {
+    password: formState.password,
+    username: formState.username,
+  });
+}
+
+function goToLogin() {
+  router.push(props.loginPath);
+}
+</script>
+
+<template>
+  <div>
+    <Title>
+      {{ $t('authentication.createAnAccount') }} 🚀
+      <template #desc> {{ $t('authentication.signUpSubtitle') }} </template>
+    </Title>
+    <VbenInput
+      v-model="formState.username"
+      :error-tip="$t('authentication.usernameTip')"
+      :label="$t('authentication.username')"
+      :placeholder="$t('authentication.username')"
+      :status="usernameStatus"
+      name="username"
+      type="text"
+    />
+    <!-- Use 8 or more characters with a mix of letters, numbers & symbols. -->
+    <VbenInputPassword
+      v-model="formState.password"
+      :error-tip="$t('authentication.passwordTip')"
+      :label="$t('authentication.password')"
+      :password-strength="true"
+      :placeholder="$t('authentication.password')"
+      :status="passwordStatus"
+      name="password"
+      required
+      type="password"
+    >
+      <template #strengthText>
+        {{ $t('authentication.passwordStrength') }}
+      </template>
+    </VbenInputPassword>
+
+    <VbenInputPassword
+      v-model="formState.confirmPassword"
+      :error-tip="$t('authentication.confirmPasswordTip')"
+      :label="$t('authentication.confirmPassword')"
+      :placeholder="$t('authentication.confirmPassword')"
+      :status="confirmPasswordStatus"
+      name="confirmPassword"
+      required
+      type="password"
+    />
+
+    <div class="relative mt-4 flex pb-6">
+      <div class="flex-center">
+        <VbenCheckbox
+          v-model:checked="formState.agreePolicy"
+          name="agreePolicy"
+        >
+          {{ $t('authentication.agree') }}
+          <span class="text-primary hover:text-primary-hover">{{
+            $t('authentication.privacyPolicy')
+          }}</span>
+          &
+          <span class="text-primary hover:text-primary-hover">
+            {{ $t('authentication.terms') }}
+          </span>
+        </VbenCheckbox>
+      </div>
+      <Transition name="slide-up">
+        <p
+          v-show="formState.submitted && !formState.agreePolicy"
+          class="text-destructive absolute bottom-1 left-0 text-xs"
+        >
+          {{ $t('authentication.agreeTip') }}
+        </p>
+      </Transition>
+    </div>
+    <div>
+      <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
+        {{ $t('authentication.signUp') }}
+      </VbenButton>
+    </div>
+    <div class="mt-4 text-center text-sm">
+      {{ $t('authentication.alreadyHaveAccount') }}
+      <span
+        class="text-primary hover:text-primary-hover cursor-pointer text-sm font-normal"
+        @click="goToLogin()"
+      >
+        {{ $t('authentication.goToLogin') }}
+      </span>
+    </div>
+  </div>
+</template>

packages/effects/common-ui/src/ui/authentication/third-party-login.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { MdiGithub, MdiGoogle, MdiQqchat, MdiWechat } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { VbenIconButton } from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'ThirdPartyLogin',
+});
+</script>
+
+<template>
+  <div class="w-full sm:mx-auto md:max-w-md">
+    <div class="mt-4 flex items-center justify-between">
+      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
+      <span class="text-muted-foreground text-center text-xs uppercase">
+        {{ $t('authentication.thirdPartyLogin') }}
+      </span>
+      <span class="border-input w-[35%] border-b dark:border-gray-600"></span>
+    </div>
+
+    <div class="mt-4 flex flex-wrap justify-center">
+      <VbenIconButton class="mb-3">
+        <MdiWechat />
+      </VbenIconButton>
+      <VbenIconButton class="mb-3">
+        <MdiQqchat />
+      </VbenIconButton>
+      <VbenIconButton class="mb-3">
+        <MdiGithub />
+      </VbenIconButton>
+      <VbenIconButton class="mb-3">
+        <MdiGoogle />
+      </VbenIconButton>
+    </div>
+  </div>
+</template>

packages/effects/common-ui/src/ui/authentication/typings.ts

@@ -0,0 +1,105 @@
+interface AuthenticationProps {
+  /**
+   * @zh_CN 验证码登录路径
+   */
+  codeLoginPath?: string;
+  /**
+   * @zh_CN 忘记密码路径
+   */
+  forgetPasswordPath?: string;
+
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+
+  /**
+   * @zh_CN 密码占位符
+   */
+  passwordPlaceholder?: string;
+
+  /**
+   * @zh_CN 二维码登录路径
+   */
+  qrCodeLoginPath?: string;
+
+  /**
+   * @zh_CN 注册路径
+   */
+  registerPath?: string;
+
+  /**
+   * @zh_CN 是否显示验证码登录
+   */
+  showCodeLogin?: boolean;
+  /**
+   * @zh_CN 是否显示忘记密码
+   */
+  showForgetPassword?: boolean;
+
+  /**
+   * @zh_CN 是否显示二维码登录
+   */
+  showQrcodeLogin?: boolean;
+
+  /**
+   * @zh_CN 是否显示注册按钮
+   */
+  showRegister?: boolean;
+
+  /**
+   * @zh_CN 是否显示记住账号
+   */
+  showRememberMe?: boolean;
+
+  /**
+   * @zh_CN 是否显示第三方登录
+   */
+  showThirdPartyLogin?: boolean;
+
+  /**
+   * @zh_CN 登录框子标题
+   */
+  subTitle?: string;
+
+  /**
+   * @zh_CN 登录框标题
+   */
+  title?: string;
+
+  /**
+   * @zh_CN 用户名占位符
+   */
+  usernamePlaceholder?: string;
+}
+
+interface LoginAndRegisterParams {
+  password: string;
+  username: string;
+}
+
+interface LoginCodeParams {
+  code: string;
+  phoneNumber: string;
+}
+
+interface LoginEmits {
+  submit: [LoginAndRegisterParams];
+}
+
+interface LoginCodeEmits {
+  submit: [LoginCodeParams];
+}
+
+interface RegisterEmits {
+  submit: [LoginAndRegisterParams];
+}
+
+export type {
+  AuthenticationProps,
+  LoginAndRegisterParams,
+  LoginCodeEmits,
+  LoginCodeParams,
+  LoginEmits,
+  RegisterEmits,
+};