Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 51x 31x 31x 31x 31x 31x 31x 31x 10x 10x 10x 4x 4x 4x 4x 6x 6x 6x 31x 11x 1x 20x 4x 1x | import { ChangeEvent, ReactElement, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import styled, { css } from "styled-components";
import { exhaustiveSwitchGuard } from "shared/utils/exhaustiveSwitchGuard";
import { formatSerial } from "shared/utils/formatSerial";
import { Button } from "client/components/Button";
import { ControlledInput } from "client/components/ControlledInput";
import { PasswordChangeForm } from "client/components/PasswordChangeForm";
import { ButtonStyle } from "client/components/componentStyles";
import { getUserBySerialOrUsername } from "client/services/userServices";
import { useTimeFormatters } from "client/utils/useTimeFormatters";
export const PasswordManagement = (): ReactElement => {
const { t } = useTranslation();
const { getDateAndTime } = useTimeFormatters();
const [usernameToUpdate, setUsernameToUpdate] = useState<string>("");
const [userSerialInput, setUserSerialInput] = useState<string>("");
const [changePasswordInputVisible, setChangePasswordInputVisible] =
useState<boolean>(false);
const [userFoundMessage, setUserFoundMessage] = useState<ReactElement>(
<Message />,
);
const submitGetUser = async (): Promise<void> => {
Iif (userSerialInput.length === 0) {
return;
}
const response = await getUserBySerialOrUsername(userSerialInput);
if (response.status === "error") {
switch (response.errorId) {
case "kompassiLogin":
setUserFoundMessage(
<Message error={true}>
{t("passwordManagement.kompassiUserError")}
</Message>,
);
setChangePasswordInputVisible(false);
return;
case "unknown":
setUserFoundMessage(
<Message error={true}>
{t("passwordManagement.userNotFound")}
</Message>,
);
setChangePasswordInputVisible(false);
return;
default:
return exhaustiveSwitchGuard(response.errorId);
}
}
setUserFoundMessage(
<Message>
{t("passwordManagement.foundUser")}: {response.username} (
{formatSerial(response.serial)}) -{" "}
{t("passwordManagement.userCreatedAt")}{" "}
{getDateAndTime(response.createdAt)}
</Message>,
);
setUsernameToUpdate(response.username);
setChangePasswordInputVisible(true);
};
const handleSerialChange = (event: ChangeEvent<HTMLInputElement>): void => {
setUserSerialInput(event.target.value);
};
return (
<div>
<h3>{t("passwordManagement.helperPasswordManagement")}</h3>
<p>
{t("passwordManagement.kompassiLocalInfo")}{" "}
<Link to={"https://kompassi.eu/profile/password/reset"} target="_blank">
{t("passwordManagement.kompassiPasswordReset")}
</Link>
.
</p>
<p>{t("passwordManagement.registrationCodeOrUsername")}</p>
<ControlledInput
key="user-serial"
placeholder={t("passwordManagement.registrationCodeOrUsername")}
value={userSerialInput}
onChange={handleSerialChange}
/>
<ButtonWithMargin
onClick={submitGetUser}
buttonStyle={ButtonStyle.PRIMARY}
>
{t("button.find")}
</ButtonWithMargin>
{userFoundMessage}
{changePasswordInputVisible && (
<PasswordChangeForm
usernameToUpdate={usernameToUpdate}
isLocalLogin={true}
/>
)}
</div>
);
};
interface MessageProps {
error?: boolean;
}
const Message = styled.p<MessageProps>`
${(messageProps) =>
messageProps.error &&
css`
color: ${(props) => props.theme.textError};
`};
`;
const ButtonWithMargin = styled(Button)`
margin-top: 8px;
`;
|