Page MenuHomePhorge
Files F32561754

D10232.1767324572.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D10232.1767324572.diff
View Options

diff --git a/web/settings/password-change-modal.css b/web/settings/password-change-modal.css
--- a/web/settings/password-change-modal.css
+++ b/web/settings/password-change-modal.css
@@ -1,26 +1,25 @@
-.modal-body {
- padding: 24px 40px 32px;
-}
-.form-footer {
- display: flex;
- flex-direction: row-reverse;
- justify-content: space-between;
- padding-top: 8px;
-}
.modal-form-error {
font-size: var(--xs-font-12);
color: var(--text-background-danger-default);
font-style: italic;
- padding-left: 6px;
- align-self: center;
+ height: 24px;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
}
+
+.errorPlaceholder {
+ height: 24px;
+}
+
.form-content {
display: flex;
flex-direction: column;
}
-.form-content input {
+.form-content input:not(:last-child) {
margin-bottom: 16px;
}
+
.form-content input[type='password'] {
width: auto;
}
diff --git a/web/settings/password-change-modal.js b/web/settings/password-change-modal.js
--- a/web/settings/password-change-modal.js
+++ b/web/settings/password-change-modal.js
@@ -59,71 +59,75 @@
}
render(): React.Node {
- let errorMsg;
+ const { inputDisabled } = this.props;
+
+ let errorMsg = <div className={css.errorPlaceholder} />;
if (this.state.errorMessage) {
errorMsg = (
<div className={css['modal-form-error']}>{this.state.errorMessage}</div>
);
}
- const { inputDisabled } = this.props;
+ const buttonIsDisabled =
+ inputDisabled ||
+ this.state.currentPassword.length === 0 ||
+ this.state.newPassword.length === 0 ||
+ this.state.confirmNewPassword.length === 0;
+
+ const changePasswordButton = (
+ <Button
+ type="submit"
+ variant="filled"
+ onClick={this.onSubmit}
+ disabled={buttonIsDisabled}
+ >
+ Change Password
+ </Button>
+ );
+
return (
- <Modal name="Change Password" onClose={this.props.popModal} size="large">
- <div className={css['modal-body']}>
- <form method="POST">
- <div className={css['form-content']}>
- <p className={css['username-container']}>
- <span className={css['username-label']}>{'Logged in as '}</span>
- <span className={css['username']}>
- {this.props.stringForUser}
- </span>
- </p>
- <div className={css['form-content']}>
- <Input
- type="password"
- placeholder="Current password"
- value={this.state.currentPassword}
- onChange={this.onChangeCurrentPassword}
- disabled={inputDisabled}
- ref={this.currentPasswordInputRef}
- label="Current password"
- />
- </div>
- <Input
- type="password"
- placeholder="New password"
- value={this.state.newPassword}
- onChange={this.onChangeNewPassword}
- ref={this.newPasswordInputRef}
- disabled={inputDisabled}
- label="New password"
- />
- <Input
- type="password"
- placeholder="Confirm new password"
- value={this.state.confirmNewPassword}
- onChange={this.onChangeConfirmNewPassword}
- disabled={inputDisabled}
- />
- </div>
- <div className={css['form-footer']}>
- <Button
- type="submit"
- variant="filled"
- onClick={this.onSubmit}
- disabled={
- inputDisabled ||
- this.state.currentPassword.length === 0 ||
- this.state.newPassword.length === 0 ||
- this.state.confirmNewPassword.length === 0
- }
- >
- Change Password
- </Button>
- {errorMsg}
- </div>
- </form>
- </div>
+ <Modal
+ name="Change Password"
+ onClose={this.props.popModal}
+ size="large"
+ primaryButton={changePasswordButton}
+ >
+ <form method="POST">
+ <div className={css['form-content']}>
+ <p className={css['username-container']}>
+ <span className={css['username-label']}>{'Logged in as '}</span>
+ <span className={css['username']}>
+ {this.props.stringForUser}
+ </span>
+ </p>
+ <Input
+ type="password"
+ placeholder="Current password"
+ value={this.state.currentPassword}
+ onChange={this.onChangeCurrentPassword}
+ disabled={inputDisabled}
+ ref={this.currentPasswordInputRef}
+ label="Current password"
+ />
+ <Input
+ type="password"
+ placeholder="New password"
+ value={this.state.newPassword}
+ onChange={this.onChangeNewPassword}
+ ref={this.newPasswordInputRef}
+ disabled={inputDisabled}
+ label="New password"
+ />
+ <Input
+ type="password"
+ placeholder="Confirm new password"
+ value={this.state.confirmNewPassword}
+ onChange={this.onChangeConfirmNewPassword}
+ disabled={inputDisabled}
+ />
+ </div>
+ {errorMsg}
+ </form>
</Modal>
);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 2, 3:29 AM (2 h, 58 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5878240
Default Alt Text
D10232.1767324572.diff (5 KB)

Event Timeline