From 8132de764d518c8c4bd667d192814d5cda81ce7b Mon Sep 17 00:00:00 2001
From: ChaotiCryptidz <chaoticryptidz@owo.monster>
Date: Sat, 22 Jan 2022 11:56:00 +0000
Subject: [PATCH] make TOTPNew page hide input boxes in QR mode

---
 src/ui/pages/Secrets/TOTP/TOTPNew.tsx | 54 +++++++++++++++------------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/ui/pages/Secrets/TOTP/TOTPNew.tsx b/src/ui/pages/Secrets/TOTP/TOTPNew.tsx
index 724032c..f80baf6 100644
--- a/src/ui/pages/Secrets/TOTP/TOTPNew.tsx
+++ b/src/ui/pages/Secrets/TOTP/TOTPNew.tsx
@@ -32,7 +32,7 @@ export class TOTPNewForm extends Component<
   }
 
   errorMessageRef = createRef<ErrorMessage>();
-  uriInputRef = createRef<HTMLInputElement>();
+  nameInputRef = createRef<HTMLInputElement>();
 
   async onSubmit(data: FormData): Promise<void> {
     const parms = {
@@ -56,6 +56,7 @@ export class TOTPNewForm extends Component<
       <Form onSubmit={(data) => this.onSubmit(data)}>
         <Margin>
           <input
+            ref={this.nameInputRef}
             class="uk-input uk-form-width-medium"
             name="name"
             type="text"
@@ -64,35 +65,40 @@ export class TOTPNewForm extends Component<
           />
         </Margin>
 
-        <p hidden={this.state.qrMode}>{i18next.t("totp_new_info")}</p>
+        {!this.state.qrMode && <p>{i18next.t("totp_new_info")}</p>}
 
-        <Margin>
-          <input
-            class="uk-input uk-form-width-medium"
-            name="key"
-            type="text"
-            hidden={this.state.qrMode}
-            placeholder={i18next.t("totp_new_key_input")}
-          />
-        </Margin>
+        {!this.state.qrMode && (
+          <>
+            <Margin>
+              <input
+                class="uk-input uk-form-width-medium"
+                name="key"
+                type="text"
+                hidden={this.state.qrMode}
+                placeholder={i18next.t("totp_new_key_input")}
+              />
+            </Margin>
 
-        <Margin>
-          <input
-            class="uk-input uk-form-width-medium"
-            ref={this.uriInputRef}
-            name="uri"
-            type="text"
-            hidden={this.state.qrMode}
-            placeholder={i18next.t("totp_new_uri_input")}
-          />
-        </Margin>
-
-        {/* TODO: please redo this to be more like Unseal page qr mode */}
+            <Margin>
+              <input
+                class="uk-input uk-form-width-medium"
+                name="uri"
+                type="text"
+                hidden={this.state.qrMode}
+                placeholder={i18next.t("totp_new_uri_input")}
+              />
+            </Margin>
+          </>
+        )}
 
         {this.state.qrMode && (
           <QRScanner
             onScan={(uri) => {
-              this.uriInputRef.current.value = uri;
+              let formData = new FormData();
+              formData.set("key", "");
+              formData.set("name", this.nameInputRef.current.value)
+              formData.set("uri", uri);
+              this.onSubmit(formData);
               this.setState({ qrMode: !this.state.qrMode });
             }}
           />