Don't advance the bar for HOTPs
This commit is contained in:
parent
698ac9f29e
commit
c9de6d7a82
2 changed files with 16 additions and 9 deletions
|
@ -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";
|
||||
|
||||
|
|
|
@ -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 => {
|
||||
|
|
Loading…
Reference in a new issue