Add PasswordChange dialog

client/src/pages/Settings/pages/Account/dialogs/PasswordChange/PasswordChange.jsx

@@ -0,0 +1,51 @@
+import { DialogProvider } from "@/common/components/Dialog";
+import IconInput from "@/common/components/IconInput";
+import { mdiAccountCircleOutline } from "@mdi/js";
+import Button from "@/common/components/Button";
+import "./styles.sass";
+import { patchRequest } from "@/common/utils/RequestUtil.js";
+import { useState } from "react";
+
+export const PasswordChange = ({ open, onClose }) => {
+
+    const [passwordError, setPasswordError] = useState(false);
+
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+
+    const changePassword = () => {
+        if (password.length < 5) return;
+        if (password !== confirmPassword) return;
+
+        patchRequest("accounts/password", { password }).then(() => onClose()).catch(err => {
+            setPasswordError(true);
+
+            setTimeout(() => {
+                setPasswordError(false);
+            }, 1500);
+        });
+    };
+
+    return (
+        <DialogProvider open={open} onClose={onClose}>
+            <div className="password-change">
+                <h2>Change password</h2>
+                <p>
+                    Enter your new password below. Make sure it is at least 5 characters long and
+                    contains at least one number and one special character.
+                </p>
+                <div className="form-group">
+                    <IconInput icon={mdiAccountCircleOutline} type="password" placeholder="New password"
+                               autoComplete="new-password" customClass={passwordError ? "error" : ""}
+                               value={password} setValue={setPassword} />
+                </div>
+                <div className="form-group">
+                    <IconInput icon={mdiAccountCircleOutline} type="password" placeholder="Confirm new password"
+                               autoComplete="new-password" customClass={passwordError ? "error" : ""}
+                               value={confirmPassword} setValue={setConfirmPassword} />
+                </div>
+                <Button text="Change password" onClick={changePassword} />
+            </div>
+        </DialogProvider>
+    );
+};

client/src/pages/Settings/pages/Account/dialogs/PasswordChange/index.js

@@ -0,0 +1 @@
+export {PasswordChange as default} from "./PasswordChange.jsx";

client/src/pages/Settings/pages/Account/dialogs/PasswordChange/styles.sass

@@ -0,0 +1,17 @@
+@import "@/common/styles/colors"
+
+.password-change
+  display: flex
+  flex-direction: column
+  gap: 1rem
+  width: 20rem
+
+  h2, p
+    margin: 0
+
+  p
+    font-weight: 600
+    font-size: 0.9rem
+
+  .error
+    border: 1px solid $error