update actions tab to include new way to surface password change

controller/changePassword.go

@@ -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()

ui/src/console/detail/account/ActionsTab.js

@@ -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>
     )
 }

ui/src/console/detail/account/actions/ChangePassword.js

@@ -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>
+            <Modal show={props.show} onHide={hide} centered>
-                <Row style={{ marginBottom: "1em" }}>
+                <Modal.Header closeButton>Change Password</Modal.Header>
-                    <h1>Change Password</h1>
+                <Modal.Body>
-                </Row>
+                    <Form onSubmit={handleSubmit}>
-                <Row>
+                        <div className="container" style={{ marginBottom: "1em" }}>
-                    <Container>
+                            <Form.Group controlId={"oldPassword"}>
-                        <Row>
+                                <Form.Control
-                            <Form onSubmit={handleSubmit}>
+                                    type={"password"}
-                                <div className="container" style={{ marginBottom: "1em" }}>
+                                    placeholder={"Old Password"}
-                                    <Form.Group controlId={"oldPassword"}>
+                                    onChange={t => { setOldPassword(t.target.value); }}
-                                        <Form.Control
+                                    value={oldPassword}
-                                            type={"password"}
+                                />
-                                            placeholder={"Old Password"}
+                            </Form.Group>
-                                            onChange={t => { setOldPassword(t.target.value); }}
+                        </div>
-                                            value={oldPassword}
+                        <PasswordForm
-                                        />
+                            setMessage={setMessage}
-                                    </Form.Group>
+                            passwordLength={passwordLength}
-                                </div>
+                            passwordRequireCapital={passwordRequireCapital}
-                                <PasswordForm
+                            passwordRequireNumeric={passwordRequireNumeric}
-                                    setMessage={setMessage}
+                            passwordRequireSpecial={passwordRequireSpecial}
-                                    passwordLength={passwordLength}
+                            passwordValidSpecialCharacters={passwordValidSpecialCharacters}
-                                    passwordRequireCapital={passwordRequireCapital}
+                            setParentPassword={setNewPassword} />
-                                    passwordRequireNumeric={passwordRequireNumeric}
+                        <Row style={{ justifyContent: "center", marginTop: "1em" }}>
-                                    passwordRequireSpecial={passwordRequireSpecial}
+                            <Button variant={"light"} type={"submit"}>Reset Password</Button>
-                                    passwordValidSpecialCharacters={passwordValidSpecialCharacters}
-                                    setParentPassword={setNewPassword} />
-                                <Row style={{ justifyContent: "center", marginTop: "1em" }}>
-                                    <Button variant={"light"} type={"submit"}>Reset Password</Button>
-                                </Row>
-                            </Form>
                         </Row>
-                        <Row>
+                    </Form>
-                            {message}
+                    {message}
-                        </Row>
+            </Modal.Body>
-                    </Container>
+            </Modal>
-                </Row>
-            </Container>
         )
     }
     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>
         )
     }
 }