display password error tooltip inside modal

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",

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/"

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