LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-29 07:41:13 +00:00
Code Issues Projects Releases Wiki Activity

Make inputs show up on totp modal

Browse source
This commit is contained in:
SleeplessOne1917 2023-10-02 22:47:07 -04:00
parent b5fee58892
commit bf7b75e070
1 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/shared/components/common/totp-modal.tsx
View file

@ -42,18 +42,28 @@ export default class TotpModal extends Component<
constructor(props: TotpModalProps, context: any) { constructor(props: TotpModalProps, context: any) {
super(props, context); super(props, context);
this.clearTotp = this.clearTotp.bind(this);
} }
componentDidMount() { componentDidMount() {
document document
.getElementById("totpModal") .getElementById("totpModal")
?.addEventListener("shown.bs.modal", focusInput); ?.addEventListener("shown.bs.modal", focusInput);
document
.getElementById("totpModal")
?.addEventListener("hidden.bs.modal", this.clearTotp);
} }
componentWillUnmount() { componentWillUnmount() {
document document
.getElementById("totpModal") .getElementById("totpModal")
?.removeEventListener("shown.bs.modal", focusInput); ?.removeEventListener("shown.bs.modal", focusInput);
document
.getElementById("totpModal")
?.removeEventListener("hidden.bs.modal", this.clearTotp);
} }
render() { render() {
@ -96,8 +106,8 @@ export default class TotpModal extends Component<
> >
Enter TOTP Enter TOTP
</label> </label>
<div className="d-flex justify-content-between align-items-center"> <div className="d-flex justify-content-between align-items-center p-4">
{Array(6).map((_, i) => ( {Array.from(Array(TOTP_LENGTH).keys()).map(i => (
<input <input
key={ key={
i /*While using indices as keys is usually bad practice, in this case we don't have to worry about the order of the list items changing.*/ i /*While using indices as keys is usually bad practice, in this case we don't have to worry about the order of the list items changing.*/
@ -110,7 +120,7 @@ export default class TotpModal extends Component<
disabled={totp.length !== i} disabled={totp.length !== i}
aria-labelledby="totp-input-label" aria-labelledby="totp-input-label"
id={`totp-input-${i}`} id={`totp-input-${i}`}
className="form-control form-control-lg" className="form-control form-control-lg mx-2"
onInput={linkEvent({ modal: this, i }, handleInput)} onInput={linkEvent({ modal: this, i }, handleInput)}
/> />
))} ))}
@ -130,4 +140,9 @@ export default class TotpModal extends Component<
</div> </div>
); );
} }
clearTotp() {
console.log("clearing");
this.setState({ totp: "" });
}
} }