beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Show toast once code is copied

Browse source
This commit is contained in:
Vishnu 2023-04-14 14:01:34 +05:30
parent f6c2865a75
commit ef9a4b031f
1 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/Authenicator/OTPDisplay.tsx
View file

@ -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} />