Improve TOTP modal (#2327)

* Improve TOTP modal

* Add submit translation

* Update translations

---------

Co-authored-by: SleeplessOne1917 <insomnia-void@protonmail.com>

lemmy-translations

@@ -1 +1 @@
-Subproject commit 21b8e8d9d380bef6c39b6b06fc9563d3fedf2ab6
+Subproject commit 6fe83fe9c0bfdf8bcee6e2528e4420fabd582b8b

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"

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,
           }),
         });

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;
-  }
 }