update actions tab to include new way to surface password change

This commit is contained in:
Cam 2024-02-15 14:47:38 -06:00
parent 338b5a0936
commit 2daed61849
No known key found for this signature in database
GPG Key ID: 367B7C7EBD84A8BD
3 changed files with 57 additions and 38 deletions

View File

@ -52,7 +52,7 @@ func (handler *changePasswordHandler) Handle(params account.ChangePasswordParams
return account.NewChangePasswordUnprocessableEntity().WithPayload(rest_model_zrok.ErrorMessage(err.Error()))
}
nhpwd, err := hashPassword(params.Body.NewPassword)
nhpwd, err := HashPassword(params.Body.NewPassword)
if err != nil {
logrus.Errorf("error hashing password for '%v': %v", a.Email, err)
return account.NewChangePasswordInternalServerError()

View File

@ -8,6 +8,10 @@ const ActionsTab = (props) => {
const openResetTokenModal = () => setShowResetTokenModal(true);
const closeResetTokenModal = () => setShowResetTokenModal(false);
const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
const openChangePasswordModal = () => setShowChangePasswordModal(true);
const closeChangePasswordModal = () => setShowChangePasswordModal(false);
return (
<div className={"actions-tab"}>
<div id={"token-regeneration"}>
@ -30,6 +34,15 @@ const ActionsTab = (props) => {
<Button variant={"danger"} onClick={openResetTokenModal}>Regenerate Account Token</Button>
<ResetToken show={showResetTokenModal} onHide={closeResetTokenModal} user={props.user}/>
</div>
<div id={"change-password"} style={{"padding-top": "10px"}}>
<h3>Change Password</h3>
<p>
You can change your password to a new one here!
</p>
<p>Note that this will <strong>not</strong> log out of any already logged in sessions.</p>
<Button onClick={openChangePasswordModal}>Change Password</Button>
<ChangePassword show={showChangePasswordModal} onHide={closeChangePasswordModal} user={props.user}/>
</div>
</div>
)
}

View File

@ -3,6 +3,7 @@ import * as account from "../../../../api/account";
import * as metadata from "../../../../api/metadata";
import { Button, Container, Form, Row } from "react-bootstrap";
import PasswordForm from "../../../../components/password";
import Modal from "react-bootstrap/Modal";
const ChangePassword = (props) => {
const [oldPassword, setOldPassword] = useState('');
@ -50,49 +51,52 @@ const ChangePassword = (props) => {
}
}
let hide = () => {
props.onHide();
setMessage();
setComplete(false);
setOldPassword("");
setNewPassword("");
}
if (!complete) {
return (
<Container fluid>
<Row style={{ marginBottom: "1em" }}>
<h1>Change Password</h1>
</Row>
<Row>
<Container>
<Row>
<Form onSubmit={handleSubmit}>
<div className="container" style={{ marginBottom: "1em" }}>
<Form.Group controlId={"oldPassword"}>
<Form.Control
type={"password"}
placeholder={"Old Password"}
onChange={t => { setOldPassword(t.target.value); }}
value={oldPassword}
/>
</Form.Group>
</div>
<PasswordForm
setMessage={setMessage}
passwordLength={passwordLength}
passwordRequireCapital={passwordRequireCapital}
passwordRequireNumeric={passwordRequireNumeric}
passwordRequireSpecial={passwordRequireSpecial}
passwordValidSpecialCharacters={passwordValidSpecialCharacters}
setParentPassword={setNewPassword} />
<Row style={{ justifyContent: "center", marginTop: "1em" }}>
<Button variant={"light"} type={"submit"}>Reset Password</Button>
</Row>
</Form>
<Modal show={props.show} onHide={hide} centered>
<Modal.Header closeButton>Change Password</Modal.Header>
<Modal.Body>
<Form onSubmit={handleSubmit}>
<div className="container" style={{ marginBottom: "1em" }}>
<Form.Group controlId={"oldPassword"}>
<Form.Control
type={"password"}
placeholder={"Old Password"}
onChange={t => { setOldPassword(t.target.value); }}
value={oldPassword}
/>
</Form.Group>
</div>
<PasswordForm
setMessage={setMessage}
passwordLength={passwordLength}
passwordRequireCapital={passwordRequireCapital}
passwordRequireNumeric={passwordRequireNumeric}
passwordRequireSpecial={passwordRequireSpecial}
passwordValidSpecialCharacters={passwordValidSpecialCharacters}
setParentPassword={setNewPassword} />
<Row style={{ justifyContent: "center", marginTop: "1em" }}>
<Button variant={"light"} type={"submit"}>Reset Password</Button>
</Row>
<Row>
{message}
</Row>
</Container>
</Row>
</Container>
</Form>
{message}
</Modal.Body>
</Modal>
)
}
else {
return (
<Modal show={props.show} onHide={hide} centered>
<Modal.Header closeButton>Change Password</Modal.Header>
<Modal.Body>
<Container fluid>
<Row>
<h1>Change Password</h1>
@ -101,9 +105,11 @@ const ChangePassword = (props) => {
Password reset successful! You can now return to the actions page.
</Row>
<Row>
<Button variant={"light"} onClick={() => props.returnToActions()}>Back</Button>
<Button variant={"light"} onClick={hide}>Back</Button>
</Row>
</Container>
</Modal.Body>
</Modal>
)
}
}