LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-28 23:31:14 +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) {
super(props, context);
this.clearTotp = this.clearTotp.bind(this);
}
componentDidMount() {
document
.getElementById("totpModal")
?.addEventListener("shown.bs.modal", focusInput);
document
.getElementById("totpModal")
?.addEventListener("hidden.bs.modal", this.clearTotp);
}
componentWillUnmount() {
document
.getElementById("totpModal")
?.removeEventListener("shown.bs.modal", focusInput);
document
.getElementById("totpModal")
?.removeEventListener("hidden.bs.modal", this.clearTotp);
}
render() {
@ -96,8 +106,8 @@ export default class TotpModal extends Component<
>
Enter TOTP
</label>
<div className="d-flex justify-content-between align-items-center">
{Array(6).map((_, i) => (
<div className="d-flex justify-content-between align-items-center p-4">
{Array.from(Array(TOTP_LENGTH).keys()).map(i => (
<input
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.*/
@ -110,7 +120,7 @@ export default class TotpModal extends Component<
disabled={totp.length !== i}
aria-labelledby="totp-input-label"
id={`totp-input-${i}`}
className="form-control form-control-lg"
className="form-control form-control-lg mx-2"
onInput={linkEvent({ modal: this, i }, handleInput)}
/>
))}
@ -130,4 +140,9 @@ export default class TotpModal extends Component<
</div>
);
}
clearTotp() {
console.log("clearing");
this.setState({ totp: "" });
}
}