Implement basic app logic

package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@otplib/core": "^12.0.1",
+    "@otplib/plugin-crypto-js": "^12.0.1",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
+    "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -27,6 +30,7 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "sass": "^1.74.1",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vite-plugin-node-polyfills": "^0.21.0"
   }
 }

src/App.tsx

@@ -1,17 +1,56 @@
-import {useState} from 'react';
+import React from 'react';
-import Input from './Input.tsx';
+import {NumberInput, TextInput} from './Input';
+import OTPOutput, {HashAlgorithm} from './OTPOutput';
+import Select from './Select';
 
 function App() {
-  const [secret, setSecret] = useState('');
+  const [secret, setSecret] = React.useState('');
+  const [step, setStep] = React.useState(30);
+  const [offset, setOffset] = React.useState(0);
+  const [digits, setDigits] = React.useState(6);
+  const [algorithm, setAlgorithm] = React.useState<HashAlgorithm>('sha1');
+
+  const validStep = step > 0;
+  const validDigits = digits > 0 && digits < 10;
+  const valid = validStep && validDigits;
+
+  React.useEffect(() => {
+    if (!validStep) return;
+    const now = Date.now();
+    setOffset(Math.floor(now / (1000 * step)));
+  }, [validStep, step]);
+
+  React.useEffect(() => {
+    if (!validStep) return;
+    const now = Date.now();
+    const nextOffset = Math.floor(now / (1000 * step)) + 1;
+    const nextUpdate = nextOffset * step * 1000;
+    const timer = setTimeout(() => setOffset(nextOffset), nextUpdate - now);
+    return () => clearTimeout(timer);
+  }, [validStep, offset, step]);
+
+  const onReset = React.useCallback(() => {
+    setStep(30);
+    setDigits(6);
+    setAlgorithm('sha1');
+  }, []);
 
   return (
     <div className="totp-app">
       <div className="totp-settings">
-        <Input label="Secret key" value={secret} onChange={setSecret} />
+        <TextInput label="Secret key" value={secret} onChange={setSecret}/>
-      </div>
+        <NumberInput label="Time step" value={step} onChange={setStep} min={1}
-      <div className="totp-output">
+                     error={!validStep && 'You must enter an integer time step ≥ 1 second'}/>
-
+        <NumberInput label="Code digits" value={digits} onChange={setDigits} min={1} max={10}
+                     error={!validDigits && 'You must enter an integer digit count between 1 and 10'}/>
+        <Select label="Algorithm" value={algorithm} onChange={setAlgorithm} options={{
+          sha1: 'SHA-1',
+          sha256: 'SHA-256',
+          sha512: 'SHA-512',
+        }}/>
+        <button type="button" className="btn btn-secondary" onClick={onReset}>Reset</button>
       </div>
+      {valid && <OTPOutput secret={secret} offset={offset} algorithm={algorithm} digits={digits}/>}
     </div>
   );
 }

src/Input.tsx

@@ -1,19 +1,43 @@
 import React from 'react';
+import classNames from 'classnames';
 
-export default function Input({type, label, value, onChange}: {
+type CommonProps = {
-  type?: string;
   label: React.ReactNode;
+  error?: React.ReactNode;
+};
+
+type TextInputProps = {
   value: string;
   onChange: (value: string) => void;
-}) {
+}
+
+type HTMLInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'label'>;
+
+function BaseInput({label, value, onChange, error, ...props}: CommonProps & HTMLInputProps & TextInputProps) {
   const id = React.useId();
   const handleChange = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),
     [onChange],
   );
 
-  return <div className="totp-input">
+  return <div className={classNames('totp-input', {'has-validation': !!error})}>
     <label htmlFor={id} className="form-label">{label}</label>
-    <input id={id} className="form-control" type={type || 'text'} value={value} onChange={handleChange}/>
+    <input id={id} className={classNames('form-control', {'is-invalid': !!error})}
+           value={value} onChange={handleChange} {...props}/>
+    {error && <div className="invalid-feedback">{error}</div>}
   </div>;
 }
+
+export function TextInput(props: CommonProps & TextInputProps) {
+  return <BaseInput {...props} />;
+}
+
+export function NumberInput({value, onChange, ...props}: CommonProps & {
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+}) {
+  const handleChange = React.useCallback((value: string) => onChange(+value), [onChange]);
+  return <BaseInput type="number" value={`${value}`} onChange={handleChange} {...props}/>;
+}

src/OTPOutput.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {HashAlgorithms, HOTP, HOTPOptions} from '@otplib/core';
+import {createDigest} from '@otplib/plugin-crypto-js';
+
+const ALGORITHMS = {
+  sha1: HashAlgorithms.SHA1,
+  sha256: HashAlgorithms.SHA256,
+  sha512: HashAlgorithms.SHA512,
+};
+
+export type HashAlgorithm = keyof typeof ALGORITHMS;
+
+function OTPCode({code}: { code: string }) {
+  return <div className="totp-code">
+    {code}
+  </div>;
+}
+
+export default function OTPOutput({secret, offset, algorithm, digits}: {
+  secret: string;
+  offset: number;
+  algorithm: HashAlgorithm;
+  digits: number;
+}) {
+  const hotp = React.useMemo(() => new HOTP<HOTPOptions>({
+    createDigest,
+    digits,
+    algorithm: ALGORITHMS[algorithm],
+  }), [digits, algorithm]);
+
+  return <div className="totp-output">
+    {[...Array(21).keys()].map((i) => {
+      const current = offset + i - 10;
+      return <OTPCode key={current} code={hotp.generate(secret, current)}/>;
+    })}
+  </div>;
+}

src/Select.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default function Select<T extends string>({label, options, value, onChange}: {
+  label: React.ReactNode;
+  options: Record<T, string>;
+  value: T;
+  onChange: (value: T) => void;
+}) {
+  const id = React.useId();
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => onChange(e.target.value as T),
+    [onChange],
+  );
+
+  return <div className="totp-select">
+    <label htmlFor={id} className="form-label">{label}</label>
+    <select id={id} className="form-select" value={value} onChange={handleChange}>
+      {Object.entries(options).map(([key, value]) =>
+        <option key={key} value={key}>{value as string}</option>)}
+    </select>
+  </div>;
+}

src/index.scss

@@ -4,9 +4,10 @@
 @import 'bootstrap/scss/_mixins.scss';
 @import 'bootstrap/scss/_root.scss';
 @import 'bootstrap/scss/_grid.scss';
+@import 'bootstrap/scss/_buttons.scss';
 @import 'bootstrap/scss/_forms.scss';
 
-.totp-input {
+.totp-input, .totp-select {
   label {
     font-weight: $font-weight-bold;
   }

vite.config.ts

@@ -1,7 +1,14 @@
 import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
+import {nodePolyfills} from 'vite-plugin-node-polyfills';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    nodePolyfills({
+      include: ['buffer'],
+      globals: {Buffer: true},
+    }),
+  ],
 });