Show toast once code is copied
This commit is contained in:
parent
f6c2865a75
commit
ef9a4b031f
|
@ -3,7 +3,7 @@ import { TOTP, HOTP } from 'otpauth';
|
|||
import { Code } from 'types/authenticator/code';
|
||||
import TimerProgress from './TimerProgress';
|
||||
import { t } from 'i18next';
|
||||
import { ButtonBase } from '@mui/material';
|
||||
import { ButtonBase, Snackbar } from '@mui/material';
|
||||
|
||||
const TOTPDisplay = ({ issuer, account, code, nextCode }) => {
|
||||
return (
|
||||
|
@ -115,6 +115,7 @@ const OTPDisplay = (props: OTPDisplayProps) => {
|
|||
const [code, setCode] = useState('');
|
||||
const [nextCode, setNextCode] = useState('');
|
||||
const [codeErr, setCodeErr] = useState('');
|
||||
const [hasCopied, setHasCopied] = useState(false);
|
||||
|
||||
const generateCodes = () => {
|
||||
try {
|
||||
|
@ -146,6 +147,14 @@ const OTPDisplay = (props: OTPDisplayProps) => {
|
|||
}
|
||||
};
|
||||
|
||||
const copyCode = () => {
|
||||
navigator.clipboard.writeText(code);
|
||||
setHasCopied(true);
|
||||
setTimeout(() => {
|
||||
setHasCopied(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// this is to set the initial code and nextCode on component mount
|
||||
generateCodes();
|
||||
|
@ -180,7 +189,7 @@ const OTPDisplay = (props: OTPDisplayProps) => {
|
|||
<ButtonBase
|
||||
component="div"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(code);
|
||||
copyCode();
|
||||
}}>
|
||||
<TOTPDisplay
|
||||
issuer={codeInfo.issuer}
|
||||
|
@ -188,6 +197,10 @@ const OTPDisplay = (props: OTPDisplayProps) => {
|
|||
code={code}
|
||||
nextCode={nextCode}
|
||||
/>
|
||||
<Snackbar
|
||||
open={hasCopied}
|
||||
message="Code copied to clipboard"
|
||||
/>
|
||||
</ButtonBase>
|
||||
) : (
|
||||
<BadCodeInfo codeInfo={codeInfo} codeErr={codeErr} />
|
||||
|
|
Loading…
Reference in a new issue