From 4c9b9f2a325c98c3a434240dbf5b337bd3c892d2 Mon Sep 17 00:00:00 2001
From: Noelle Daley <noelledaley@users.noreply.github.com>
Date: Mon, 30 Mar 2020 17:36:49 -0700
Subject: [PATCH] ui/provide otp (#8630)

* show OTP if there is one, otherwise show placeholder

* show OTP during first step of token generation process

* use let instead of with
---
 ui/app/templates/components/shamir-flow.hbs | 27 ++++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/ui/app/templates/components/shamir-flow.hbs b/ui/app/templates/components/shamir-flow.hbs
index d5d9065ab56f..edc58ea02e8a 100644
--- a/ui/app/templates/components/shamir-flow.hbs
+++ b/ui/app/templates/components/shamir-flow.hbs
@@ -4,11 +4,7 @@
       <HoverCopyButton @copyValue={{encoded_token}} />
       <div class="message-body">
         <h4 class="title is-7 is-marginless">
-          {{#if otp}}
-            Encoded Operation Token
-          {{else}}
-            Encrypted Operation Token
-          {{/if}}
+          Encoded Operation Token
         </h4>
         <code class="is-word-break">{{encoded_token}}</code>
       </div>
@@ -23,10 +19,10 @@
           <code class="is-word-break">{{otp}}</code>
         </div>
       </div>
+    {{/if}}
       <div class="message is-list has-copy-button" tabindex="-1">
-        {{#let
-            (concat 'vault operator generate-root -dr-token -otp="' otp '" -decode="' encoded_token '"')
-        as |cmd|}}
+        {{#let (if otp
+          (concat 'vault operator generate-root -otp="' otp '" -decode="' encoded_token '"') (concat 'vault operator generate-root -otp="<enter your otp here>" -decode="' encoded_token '"') ) as |cmd|}}
           <HoverCopyButton @copyValue={{cmd}} />
           <div class="message-body">
             <h4 class="title is-7 is-marginless">
@@ -36,7 +32,6 @@
           </div>
         {{/let}}
       </div>
-    {{/if}}
   </div>
   <div class="box is-marginless is-shadowless">
     <button type="button" class="button" {{action 'reset'}}>
@@ -131,6 +126,20 @@
         </div>
       {{/if}}
       <div class="box is-shadowless is-marginless no-padding-top is-fullwidth" data-test-form-text>
+        {{#if otp}}
+          <p>
+            <AlertBanner @type="info" @message="Below is the generated OTP. This will be used to encode the generated Operation Token. Make sure to save this, as you will need it later to decode the Operation Token." />
+          </p>
+          <div class="message is-list has-copy-button" tabindex="-1">
+            <HoverCopyButton @copyValue={{otp}} />
+            <div class="message-body">
+              <h4 class="title is-7 is-marginless">
+                One Time Password (otp)
+              </h4>
+              <code class="is-word-break">{{otp}}</code>
+            </div>
+          </div>
+        {{/if}}
         {{#if (has-block)}}
           {{yield}}
         {{else if formText}}