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