tachybase_todo/packages/plugins/sms-auth/src/client/VerificationCode.tsx

64 lines
1.7 KiB
TypeScript
Raw Normal View History

feat(auth): support custom authentication (#2007) * feat(auth): init auth package & collection * feat(auth): register * feat(auth): use authenticator * feat(auth): mapRoles * feat(auth): refactor * feat(auth): base auth class * feat(auth): add plugin * chore(auth): test * chore(auth): add test cases * feat(auth): authenticators pane * chore(auth): custom hook useAuthTypes * feat(auth): authenticator pane * chore(auth): store options schema using context * feat(auth): signInPage provider * feat(auth): signUpPage provider * chore(auth): solve build errors * chore(auth): add dependency * chore(auth): remove dependency cycles * chore(auth): add plugin-auth to preset * chore(auth): fix test * feat(auth): authenticator enable status * fix(test): fix test using new authentication * feat(auth): migration, set up basic auth * chore(auth): can set options ui by component * fix(test): workflow manunal.test * fix(test): typo * feat(auth): support multi-language * chore(auth): imporve code * chore(auth): hide button if no configuration * chore(auth): readme * chore(auth): remove allowSignup prop * chore(auth): move configure pane to edit form * fix(auth): jwt options bug * feat(auth): init sms-auth * chore(auth): at least authenticator required * chore(auth): add test * feat(auth): support sms auth * fix(auth): fix test * chore(auth): move findOrCreateUser to AuthModel * chore(auth): history compatible processing * feat(auth): support SAML auth * chore(auth): saml auth list * chore(saml-auth): improve ui * Merge branch 'main' into feat/authentication * chore(auth): improve code * fix(saml-auth): fix bug * fix(saml-auth): fix saml options * chore(saml-auth): compatible processing && ut * fix(auth): signin page bug * chore(auth): saml compatible processing * feat(auth): oidc-auth * fix(oidc-auth): bug * fix(oidc-auth): bug * fix(auth): fix test * chore(auth): filter enabled authenticator * chore(oidc): add field map * chore(auth): update readme * docs(auth): create sms-auth readme * feat(auth): allow signup config * test(auth): fix test * feat(auth): allow saml and oidc use http * chore(oidc-auth): extends timeout * docs(auth): update readme * feat(auth): support sort * docs(saml): update readme * feat(auth): support sort all authenticator * Merge branch 'main' into feat/authentication * Merge branch 'main' into feat/authentication * feat: improve code * docs(auth): add doc * Merge branch 'main' into feat/authentication * chore: update yarn.lock * feat: improve code * chore(acl): write role to acl if it exists in database and not found … (#2001) * chore(acl): write role to acl if it exists in database and not found in acl * fix: test * fix: eager load with nested association (#2002) * chore: upgrade vitest * chore: edit * refactor: auth class * fix: set options * chore(acl): write role to acl if it exists in database and not found … (#2001) * chore(acl): write role to acl if it exists in database and not found in acl * fix: test * fix: eager load with nested association (#2002) * chore: upgrade vitest * chore: add migrations * test: fix api-client test * chore: add sms-auth * feat: avoid no permission after auth type disabled * fix: translation --------- Co-authored-by: chenos <chenlinxh@gmail.com>
2023-06-07 23:46:42 +08:00
import { useTranslation } from 'react-i18next';
import { css } from '@emotion/css';
import { useForm } from '@formily/react';
import { useEffect, useRef, useState } from 'react';
import { Button, Input, message } from 'antd';
import React from 'react';
import { useAPIClient } from '@nocobase/client';
export default function VerificationCode({ targetFieldName = 'phone', actionType, value, onChange }) {
const { t } = useTranslation();
const api = useAPIClient();
const form = useForm();
const [count, setCountdown] = useState<number>(0);
const timer = useRef(null);
useEffect(() => {
if (count <= 0 && timer.current) {
clearInterval(timer.current);
}
}, [count]);
async function onGetCode() {
if (count > 0) {
return;
}
try {
const {
data: { data },
} = await api.resource('verifications').create({
values: {
type: actionType,
phone: form.values[targetFieldName],
},
});
message.success(t('Operation succeeded'));
if (value) {
onChange('');
}
const expiresIn = data.expiresAt ? Math.ceil((Date.parse(data.expiresAt) - Date.now()) / 1000) : 60;
setCountdown(expiresIn);
timer.current = setInterval(() => {
setCountdown((count) => count - 1);
}, 1000);
} catch (err) {
console.error(err);
}
}
return (
<fieldset
className={css`
display: flex;
gap: 0.5em;
`}
>
<Input value={value} onChange={onChange} placeholder={t('Verification code')} />
<Button onClick={onGetCode} disabled={count > 0}>
{count > 0 ? t('Retry after {{count}} seconds', { count }) : t('Send code')}
</Button>
</fieldset>
);
}