useLogin.ts 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import type { ValidationRule, FormInstance } from 'ant-design-vue/lib/form/Form';
  2. import type { RuleObject, NamePath } from 'ant-design-vue/lib/form/interface';
  3. import { ref, computed, unref, Ref } from 'vue';
  4. import { useI18n } from '/@/hooks/web/useI18n';
  5. export enum LoginStateEnum {
  6. LOGIN,
  7. REGISTER,
  8. RESET_PASSWORD,
  9. MOBILE,
  10. QR_CODE,
  11. }
  12. const currentState = ref(LoginStateEnum.LOGIN);
  13. export function useLoginState() {
  14. function setLoginState(state: LoginStateEnum) {
  15. currentState.value = state;
  16. }
  17. const getLoginState = computed(() => currentState.value);
  18. function handleBackLogin() {
  19. setLoginState(LoginStateEnum.LOGIN);
  20. }
  21. return { setLoginState, getLoginState, handleBackLogin };
  22. }
  23. export function useFormValid<T extends Object = any>(formRef: Ref<FormInstance>) {
  24. const validate = computed(() => {
  25. const form = unref(formRef);
  26. return form?.validate ?? ((_nameList?: NamePath) => Promise.resolve());
  27. });
  28. async function validForm() {
  29. const form = unref(formRef);
  30. if (!form) return;
  31. const data = await form.validate();
  32. return data as T;
  33. }
  34. return { validate, validForm };
  35. }
  36. export function useFormRules(formData?: Recordable) {
  37. const { t } = useI18n();
  38. const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')));
  39. const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')));
  40. const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
  41. const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')));
  42. const validatePolicy = async (_: RuleObject, value: boolean) => {
  43. return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve();
  44. };
  45. const validateConfirmPassword = (password: string) => {
  46. return async (_: RuleObject, value: string) => {
  47. if (!value) {
  48. return Promise.reject(t('sys.login.passwordPlaceholder'));
  49. }
  50. if (value !== password) {
  51. return Promise.reject(t('sys.login.diffPwd'));
  52. }
  53. return Promise.resolve();
  54. };
  55. };
  56. const getFormRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => {
  57. const accountFormRule = unref(getAccountFormRule);
  58. const passwordFormRule = unref(getPasswordFormRule);
  59. const smsFormRule = unref(getSmsFormRule);
  60. const mobileFormRule = unref(getMobileFormRule);
  61. const mobileRule = {
  62. sms: smsFormRule,
  63. mobile: mobileFormRule,
  64. };
  65. switch (unref(currentState)) {
  66. // register form rules
  67. case LoginStateEnum.REGISTER:
  68. return {
  69. account: accountFormRule,
  70. password: passwordFormRule,
  71. confirmPassword: [
  72. { validator: validateConfirmPassword(formData?.password), trigger: 'change' },
  73. ],
  74. policy: [{ validator: validatePolicy, trigger: 'change' }],
  75. ...mobileRule,
  76. };
  77. // reset password form rules
  78. case LoginStateEnum.RESET_PASSWORD:
  79. return {
  80. account: accountFormRule,
  81. ...mobileRule,
  82. };
  83. // mobile form rules
  84. case LoginStateEnum.MOBILE:
  85. return mobileRule;
  86. // login form rules
  87. default:
  88. return {
  89. account: accountFormRule,
  90. password: passwordFormRule,
  91. };
  92. }
  93. });
  94. return { getFormRules };
  95. }
  96. function createRule(message: string) {
  97. return [
  98. {
  99. required: true,
  100. message,
  101. trigger: 'change',
  102. },
  103. ];
  104. }