Commit 123b186e authored by Eric Rosenbaum's avatar Eric Rosenbaum

display password error tooltip inside modal

parent 7df59213
...@@ -100,6 +100,7 @@ ...@@ -100,6 +100,7 @@
"studio.transfer.confirmWithPassword": "To confirm changing the studio host, please enter your password.", "studio.transfer.confirmWithPassword": "To confirm changing the studio host, please enter your password.",
"studio.transfer.forgotPassword": "Forgot password?", "studio.transfer.forgotPassword": "Forgot password?",
"studio.transfer.alert.somethingWentWrong": "Something went wrong transferring this studio to a new host.", "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.remove": "Remove",
"studio.promote": "Promote", "studio.promote": "Promote",
......
...@@ -7,6 +7,7 @@ import ModalInnerContent from '../../../components/modal/base/modal-inner-conten ...@@ -7,6 +7,7 @@ import ModalInnerContent from '../../../components/modal/base/modal-inner-conten
import TransferHostTile from './transfer-host-tile.jsx'; import TransferHostTile from './transfer-host-tile.jsx';
import Form from '../../../components/forms/form.jsx'; import Form from '../../../components/forms/form.jsx';
import ValidationMessage from '../../../components/forms/validation-message.jsx';
import {managers} from '../lib/redux-modules'; import {managers} from '../lib/redux-modules';
...@@ -73,6 +74,7 @@ const TransferHostConfirmation = ({ ...@@ -73,6 +74,7 @@ const TransferHostConfirmation = ({
className="transfer-form" className="transfer-form"
onSubmit={handleSubmit} // eslint-disable-line react/jsx-no-bind onSubmit={handleSubmit} // eslint-disable-line react/jsx-no-bind
> >
<div className="transfer-password-row">
<input <input
className="transfer-password-input" className="transfer-password-input"
required required
...@@ -82,6 +84,12 @@ const TransferHostConfirmation = ({ ...@@ -82,6 +84,12 @@ const TransferHostConfirmation = ({
value={passwordInputValue} value={passwordInputValue}
onChange={handleChangePasswordInput} // eslint-disable-line react/jsx-no-bind 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"> <div className="transfer-forgot-link">
<a <a
href="/accounts/password_reset/" href="/accounts/password_reset/"
......
...@@ -140,9 +140,19 @@ ...@@ -140,9 +140,19 @@
border-radius: .5rem; border-radius: .5rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 1.5rem; font-size: 1.5rem;
}
.transfer-password-row {
display: flex;
align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.transfer-password-validation {
position: relative;
transform: translate(1rem, 0);
}
.col-sm-9 .input { .col-sm-9 .input {
font-size: 1.5rem; font-size: 1.5rem;
width: 50%; width: 50%;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment