From f7ad75af894e9ec273774f2ed9309c355a3cee09 Mon Sep 17 00:00:00 2001 From: kayra1 Date: Thu, 1 Aug 2024 19:31:39 +0300 Subject: [PATCH] use modals for pw change --- ui/src/app/change_password/page.tsx | 101 --------------------------- ui/src/app/login.tsx | 9 ++- ui/src/app/nav.tsx | 28 ++++---- ui/src/app/users/components.tsx | 103 +++++++++++++++++++++++++++- ui/src/app/users/row.tsx | 9 ++- 5 files changed, 130 insertions(+), 120 deletions(-) delete mode 100644 ui/src/app/change_password/page.tsx diff --git a/ui/src/app/change_password/page.tsx b/ui/src/app/change_password/page.tsx deleted file mode 100644 index daae0a7..0000000 --- a/ui/src/app/change_password/page.tsx +++ /dev/null @@ -1,101 +0,0 @@ -"use client" - -import { changeSelfPassword } from "../queries" -import { useMutation } from "react-query" -import { useState, ChangeEvent, useContext } from "react" -import { useRouter } from "next/navigation" -import { useAuth } from "../auth/authContext" -import { passwordIsValid } from "../utils" -import { AsideContext } from "../aside" - -export default function ChangePasswordPage() { - const router = useRouter() - const auth = useAuth() - if (!auth.user) { - router.push('/login') - } - - const mutation = useMutation(changeSelfPassword, { - onSuccess: (e) => { - setErrorText("") - router.push('/certificate_requests') - }, - onError: (e: Error) => { - setErrorText(e.message) - } - }) - - const [password1, setPassword1] = useState("") - const [password2, setPassword2] = useState("") - const [showPassword1, setShowPassword1] = useState(false) - const passwordsMatch = password1 === password2 - const [errorText, setErrorText] = useState("") - const handlePassword1Change = (event: ChangeEvent) => { setPassword1(event.target.value) } - const handlePassword2Change = (event: ChangeEvent) => { setPassword2(event.target.value) } - return ( -
-
-
-
-
-
-

Change Password

- - - -

- Password must have 8 or more characters, must include at least one capital letter, one lowercase letter, and either a number or a symbol. -

- - - {!passwordIsValid(password1) && password1 != "" &&

Password is not valid

} - {passwordIsValid(password1) && !passwordsMatch && password2 != "" &&

Passwords do not match

} - {errorText && -
-
-
Error
-

{errorText.split("error: ")}

-
-
- } - {!passwordsMatch || !passwordIsValid(password1) ? ( - <> - - - ) : ( - - )} -
-
-
-
-
-
- ) -} \ No newline at end of file diff --git a/ui/src/app/login.tsx b/ui/src/app/login.tsx index a1cfe17..08b5ddd 100644 --- a/ui/src/app/login.tsx +++ b/ui/src/app/login.tsx @@ -1,12 +1,15 @@ -import { useState } from "react"; +import { useContext, useState } from "react"; import { useAuth } from "./auth/authContext"; import { useCookies } from "react-cookie"; import { useRouter } from "next/navigation"; +import { ChangePasswordModal, ChangePasswordModalContext, ChangePasswordModalData } from "./users/components"; + + export function AccountTab() { - const router = useRouter() const [cookies, setCookie, removeCookie] = useCookies(['user_token']); const [menuOpen, setMenuOpen] = useState(false) + const changePasswordModalContext = useContext(ChangePasswordModalContext) const authDetails = useAuth() return ( <> @@ -21,7 +24,7 @@ export function AccountTab() { - + diff --git a/ui/src/app/nav.tsx b/ui/src/app/nav.tsx index c5fbb80..dccc630 100644 --- a/ui/src/app/nav.tsx +++ b/ui/src/app/nav.tsx @@ -1,6 +1,6 @@ "use client" -import { SetStateAction, Dispatch, useState } from "react" +import { SetStateAction, Dispatch, useState, useContext } from "react" import { QueryClient, QueryClientProvider } from "react-query"; import Image from "next/image"; import { Aside, AsideContext } from "./aside"; @@ -9,6 +9,7 @@ import { usePathname } from "next/navigation"; import { useAuth } from "./auth/authContext"; import UploadCSRAsidePanel from "./certificate_requests/asideForm"; import UploadUserAsidePanel from "./users/asideForm"; +import { ChangePasswordModalData, ChangePasswordModal, ChangePasswordModalContext } from "./users/components"; export function SideBar({ activePath, sidebarVisible, setSidebarVisible }: { activePath: string, sidebarVisible: boolean, setSidebarVisible: Dispatch> }) { const auth = useAuth() @@ -56,7 +57,6 @@ export function SideBar({ activePath, sidebarVisible, setSidebarVisible }: { act - ) } @@ -106,6 +106,7 @@ export default function Navigation({ const [sidebarVisible, setSidebarVisible] = useState(true) const [asideOpen, setAsideOpen] = useState(false) const [asideData, setAsideData] = useState(null) + const [changePasswordModalData, setChangePasswordModalData] = useState(null) let asideForm = UploadCSRAsidePanel if (activePath == "/users") { asideForm = UploadUserAsidePanel @@ -114,18 +115,21 @@ export default function Navigation({
- { - shouldRenderNavigation ? ( - <> - - - - ) : ( - <> - ) - } + + { + shouldRenderNavigation ? ( + <> + + + + ) : ( + <> + ) + } +
{children} + {changePasswordModalData != null && }
) +} + +export function ChangePasswordModal({ modalData, setModalData }: ChangePasswordModalProps) { + const auth = useAuth() + const queryClient = useQueryClient() + const mutation = useMutation(changePassword, { + onSuccess: () => { + queryClient.invalidateQueries('users') + setErrorText("") + setModalData(null) + }, + onError: (e: Error) => { + setErrorText(e.message) + } + }) + const [showPassword1, setShowPassword1] = useState(false) + const [password1, setPassword1] = useState("") + const [password2, setPassword2] = useState("") + const passwordsMatch = password1 === password2 + const [errorText, setErrorText] = useState("") + const handlePassword1Change = (event: ChangeEvent) => { setPassword1(event.target.value) } + const handlePassword2Change = (event: ChangeEvent) => { setPassword2(event.target.value) } + return ( + + ) } \ No newline at end of file diff --git a/ui/src/app/users/row.tsx b/ui/src/app/users/row.tsx index 66e783a..6c26879 100644 --- a/ui/src/app/users/row.tsx +++ b/ui/src/app/users/row.tsx @@ -1,7 +1,7 @@ import { useState, Dispatch, SetStateAction, useEffect, useRef, useContext } from "react" import { UseMutationResult, useMutation, useQueryClient } from "react-query" import { RequiredCSRParams, deleteUser } from "../queries" -import { ConfirmationModalData, ConfirmationModal } from "./components" +import { ConfirmationModalData, ConfirmationModal, ChangePasswordModalData, ChangePasswordModal } from "./components" import "./../globals.scss" import { useAuth } from "../auth/authContext" import { AsideContext } from "../aside" @@ -18,6 +18,7 @@ export default function Row({ id, username, ActionMenuExpanded, setActionMenuExp const auth = useAuth() const asideContext = useContext(AsideContext) const [confirmationModalData, setConfirmationModalData] = useState(null) + const [changePasswordModalData, setChangePasswordModalData] = useState(null) const queryClient = useQueryClient() const deleteMutation = useMutation(deleteUser, { onSuccess: () => queryClient.invalidateQueries('users') @@ -32,8 +33,9 @@ export default function Row({ id, username, ActionMenuExpanded, setActionMenuExp }) } const handleChangePassword = () => { - asideContext.setExtraData({ "user": { "id": id, "username": username } }) - asideContext.setIsOpen(true) + // asideContext.setExtraData({ "user": { "id": id, "username": username } }) + // asideContext.setIsOpen(true) + setChangePasswordModalData({ "id": id.toString(), "username": username }) } return ( @@ -66,6 +68,7 @@ export default function Row({ id, username, ActionMenuExpanded, setActionMenuExp {confirmationModalData != null && } + {changePasswordModalData != null && } )