scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 23:57:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

display password error tooltip inside modal

Browse source
This commit is contained in:
Eric Rosenbaum 2021-08-19 10:50:50 -04:00
parent 7df5921381
commit 123b186e75
3 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/views/studio/l10n.json
View file

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

8
src/views/studio/modals/transfer-host-confirmation.jsx
View file

@ -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 = ({
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 = ({
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/"

10
src/views/studio/modals/transfer-host-modal.scss
View file

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