From d6ce6a1afdbfc538878852fa949fb6a836aa0d71 Mon Sep 17 00:00:00 2001
From: SleeplessOne1917 <28871516+SleeplessOne1917@users.noreply.github.com>
Date: Fri, 19 Jan 2024 15:06:54 +0000
Subject: [PATCH] Improve TOTP modal (#2327)

* Improve TOTP modal

* Add submit translation

* Update translations

---------

Co-authored-by: SleeplessOne1917 <insomnia-void@protonmail.com>
---
 lemmy-translations                          |  2 +-
 src/shared/components/common/totp-modal.tsx | 15 ++++++++++++++-
 src/shared/components/search.tsx            |  4 ++--
 src/shared/services/HttpService.ts          | 21 +++------------------
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/lemmy-translations b/lemmy-translations
index 21b8e8d9..6fe83fe9 160000
--- a/lemmy-translations
+++ b/lemmy-translations
@@ -1 +1 @@
-Subproject commit 21b8e8d9d380bef6c39b6b06fc9563d3fedf2ab6
+Subproject commit 6fe83fe9c0bfdf8bcee6e2528e4420fabd582b8b
diff --git a/src/shared/components/common/totp-modal.tsx b/src/shared/components/common/totp-modal.tsx
index b07b4b86..8a9eabc3 100644
--- a/src/shared/components/common/totp-modal.tsx
+++ b/src/shared/components/common/totp-modal.tsx
@@ -21,12 +21,15 @@ interface TotpModalProps {
 interface TotpModalState {
   totp: string;
   qrCode?: string;
+  pending: boolean;
 }
 
 const TOTP_LENGTH = 6;
 
 async function handleSubmit(i: TotpModal, totp: string) {
+  i.setState({ pending: true });
   const successful = await i.props.onSubmit(totp);
+  i.setState({ pending: false });
 
   if (!successful) {
     i.setState({ totp: "" });
@@ -74,6 +77,7 @@ export default class TotpModal extends Component<
   modal: Modal;
   state: TotpModalState = {
     totp: "",
+    pending: false,
   };
 
   constructor(props: TotpModalProps, context: any) {
@@ -131,7 +135,7 @@ export default class TotpModal extends Component<
 
   render() {
     const { type, secretUrl, onClose } = this.props;
-    const { totp } = this.state;
+    const { totp, pending } = this.state;
 
     return (
       <div
@@ -203,11 +207,20 @@ export default class TotpModal extends Component<
                     ref={this.inputRef}
                     enterKeyHint="done"
                     value={totp}
+                    disabled={pending}
                   />
                 </div>
               </form>
             </div>
             <footer className="modal-footer">
+              <button
+                type="submit"
+                className="btn btn-success"
+                form="totp-form"
+                disabled={totp.length !== TOTP_LENGTH || pending}
+              >
+                {I18NextService.i18n.t("submit")}
+              </button>
               <button
                 type="button"
                 className="btn btn-danger"
diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 4c099ca1..a6051b52 100644
--- a/src/shared/components/search.tsx
+++ b/src/shared/components/search.tsx
@@ -446,7 +446,7 @@ export class Search extends Component<any, SearchState> {
           q: query,
         };
         resolveObjectResponse =
-          await HttpService.silent_client.resolveObject(resolveObjectForm);
+          await HttpService.client.resolveObject(resolveObjectForm);
 
         // If we return this object with a state of failed, the catch-all-handler will redirect
         // to an error page, so we ignore it by covering up the error with the empty state.
@@ -981,7 +981,7 @@ export class Search extends Component<any, SearchState> {
       if (myAuth()) {
         this.setState({ resolveObjectRes: LOADING_REQUEST });
         this.setState({
-          resolveObjectRes: await HttpService.silent_client.resolveObject({
+          resolveObjectRes: await HttpService.client.resolveObject({
             q,
           }),
         });
diff --git a/src/shared/services/HttpService.ts b/src/shared/services/HttpService.ts
index 1aaeee14..7ff9121b 100644
--- a/src/shared/services/HttpService.ts
+++ b/src/shared/services/HttpService.ts
@@ -1,7 +1,5 @@
 import { getHttpBase } from "@utils/env";
 import { LemmyHttp } from "lemmy-js-client";
-import { toast } from "../toast";
-import { I18NextService } from "./I18NextService";
 
 export const EMPTY_REQUEST = {
   state: "empty",
@@ -49,7 +47,7 @@ export type WrappedLemmyHttp = WrappedLemmyHttpClient & {
 class WrappedLemmyHttpClient {
   rawClient: LemmyHttp;
 
-  constructor(client: LemmyHttp, silent = false) {
+  constructor(client: LemmyHttp) {
     this.rawClient = client;
 
     for (const key of Object.getOwnPropertyNames(
@@ -65,10 +63,6 @@ class WrappedLemmyHttpClient {
               state: !(res === undefined || res === null) ? "success" : "empty",
             };
           } catch (error) {
-            if (!silent) {
-              console.error(`API error: ${error}`);
-              toast(I18NextService.i18n.t(error), "danger");
-            }
             return {
               state: "failed",
               err: error,
@@ -80,23 +74,18 @@ class WrappedLemmyHttpClient {
   }
 }
 
-export function wrapClient(client: LemmyHttp, silent = false) {
+export function wrapClient(client: LemmyHttp) {
   // unfortunately, this verbose cast is necessary
-  return new WrappedLemmyHttpClient(
-    client,
-    silent,
-  ) as unknown as WrappedLemmyHttp;
+  return new WrappedLemmyHttpClient(client) as unknown as WrappedLemmyHttp;
 }
 
 export class HttpService {
   static #_instance: HttpService;
-  #silent_client: WrappedLemmyHttp;
   #client: WrappedLemmyHttp;
 
   private constructor() {
     const lemmyHttp = new LemmyHttp(getHttpBase());
     this.#client = wrapClient(lemmyHttp);
-    this.#silent_client = wrapClient(lemmyHttp, true);
   }
 
   static get #Instance() {
@@ -106,8 +95,4 @@ export class HttpService {
   public static get client() {
     return this.#Instance.#client;
   }
-
-  public static get silent_client() {
-    return this.#Instance.#silent_client;
-  }
 }