Don't advance the bar for HOTPs

This commit is contained in:
Manav Rathi 2024-05-24 14:35:59 +05:30
parent 698ac9f29e
commit c9de6d7a82
No known key found for this signature in database
2 changed files with 16 additions and 9 deletions

View file

@ -233,7 +233,7 @@ const OTPDisplay: React.FC<OTPDisplayProps> = ({ code, otp, nextOTP }) => {
overflow: "hidden",
}}
>
<TimerProgress period={code.period} />
<CodeValidityBar code={code} />
<div
style={{
padding: "12px 20px 0px 20px",
@ -329,24 +329,25 @@ const OTPDisplay: React.FC<OTPDisplayProps> = ({ code, otp, nextOTP }) => {
);
};
interface TimerProgressProps {
period: number;
interface CodeValidityBarProps {
code: Code;
}
const TimerProgress: React.FC<TimerProgressProps> = ({ period }) => {
const [progress, setProgress] = useState(0);
const us = period * 1e6;
const CodeValidityBar: React.FC<CodeValidityBarProps> = ({ code }) => {
const [progress, setProgress] = useState(code.type == "hotp" ? 1 : 0);
useEffect(() => {
const advance = () => {
const us = code.period * 1e6;
const timeRemaining = us - ((Date.now() * 1000) % us);
setProgress(timeRemaining / us);
};
const ticker = setInterval(advance, 10);
const ticker =
code.type == "hotp" ? undefined : setInterval(advance, 10);
return () => clearInterval(ticker);
}, []);
return () => ticker && clearInterval(ticker);
}, [code]);
const color = progress > 0.4 ? "green" : "orange";

View file

@ -60,6 +60,12 @@ export interface Code {
* - (TOTP)
* otpauth://totp/ACME:user@example.org?algorithm=SHA1&digits=6&issuer=acme&period=30&secret=ALPHANUM
*
* - (HOTP)
* otpauth://hotp/Test?secret=AAABBBCCCDDDEEEFFF&issuer=Test&counter=0
*
* - (Steam)
* otpauth://steam/Steam:SteamAccount?algorithm=SHA1&digits=5&issuer=Steam&period=30&secret=AAABBBCCCDDDEEEFFF
*
* See also `auth/test/models/code_test.dart`.
*/
export const codeFromURIString = (id: string, uriString: string): Code => {