From 123b186e758bac7d1e80cec3ada9a85c9e3c5d8c Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Thu, 19 Aug 2021 10:50:50 -0400
Subject: [PATCH] display password error tooltip inside modal

---
 src/views/studio/l10n.json                    |  1 +
 .../modals/transfer-host-confirmation.jsx     | 26 ++++++++++++-------
 .../studio/modals/transfer-host-modal.scss    | 10 +++++++
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/views/studio/l10n.json b/src/views/studio/l10n.json
index 446947704..870d2b8c8 100644
--- a/src/views/studio/l10n.json
+++ b/src/views/studio/l10n.json
@@ -100,6 +100,7 @@
     "studio.transfer.confirmWithPassword": "To confirm changing the studio host, please enter your password.",
     "studio.transfer.forgotPassword": "Forgot password?",
     "studio.transfer.alert.somethingWentWrong": "Something went wrong transferring this studio to a new host.",
+    "studio.transfer.alert.wasntTheRightPassword": "Hmm, that wasn’t the right password.",
 
     "studio.remove": "Remove",
     "studio.promote": "Promote",
diff --git a/src/views/studio/modals/transfer-host-confirmation.jsx b/src/views/studio/modals/transfer-host-confirmation.jsx
index e459b04e9..619326e2a 100644
--- a/src/views/studio/modals/transfer-host-confirmation.jsx
+++ b/src/views/studio/modals/transfer-host-confirmation.jsx
@@ -7,6 +7,7 @@ import ModalInnerContent from '../../../components/modal/base/modal-inner-conten
 
 import TransferHostTile from './transfer-host-tile.jsx';
 import Form from '../../../components/forms/form.jsx';
+import ValidationMessage from '../../../components/forms/validation-message.jsx';
 
 import {managers} from '../lib/redux-modules';
 
@@ -73,15 +74,22 @@ const TransferHostConfirmation = ({
                 className="transfer-form"
                 onSubmit={handleSubmit} // eslint-disable-line react/jsx-no-bind
             >
-                <input
-                    className="transfer-password-input"
-                    required
-                    key="passwordInput"
-                    name="password"
-                    type="password"
-                    value={passwordInputValue}
-                    onChange={handleChangePasswordInput} // eslint-disable-line react/jsx-no-bind
-                />
+                <div className="transfer-password-row">
+                    <input
+                        className="transfer-password-input"
+                        required
+                        key="passwordInput"
+                        name="password"
+                        type="password"
+                        value={passwordInputValue}
+                        onChange={handleChangePasswordInput} // eslint-disable-line react/jsx-no-bind
+                    />
+                    <ValidationMessage
+                        className="transfer-password-validation"
+                        message={<FormattedMessage id="studio.transfer.alert.wasntTheRightPassword" />}
+                        mode="error"
+                    />
+                </div>
                 <div className="transfer-forgot-link">
                     <a
                         href="/accounts/password_reset/"
diff --git a/src/views/studio/modals/transfer-host-modal.scss b/src/views/studio/modals/transfer-host-modal.scss
index 80989d22f..71c2bfbbd 100644
--- a/src/views/studio/modals/transfer-host-modal.scss
+++ b/src/views/studio/modals/transfer-host-modal.scss
@@ -140,9 +140,19 @@
         border-radius: .5rem;
         padding: 0.5rem 1rem;
         font-size: 1.5rem;
+    }
+
+    .transfer-password-row {
+        display: flex;
+        align-items: center;
         margin-bottom: 1rem;
     }
 
+    .transfer-password-validation {
+        position: relative;
+        transform: translate(1rem, 0); 
+    }
+
     .col-sm-9 .input {
         font-size: 1.5rem;
         width: 50%;