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 | 356x 68x 68x 137x 137x 137x 137x 68x 1x 1x 1x | import { ReactElement } from "react";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router";
import { ChangeUserSettingsForm } from "client/views/helper/components/ChangeUserSettingsForm";
import { EmailSettingsForm } from "client/views/profile/components/EmailSettingsForm";
import { useAppSelector } from "client/utils/hooks";
import { Button, ButtonStyle } from "client/components/Button";
import { AppRoute } from "client/app/AppRoutes";
export const ProfileView = (): ReactElement => {
const { t } = useTranslation();
const navigate = useNavigate();
const username = useAppSelector((state) => state.login.username);
const serial = useAppSelector((state) => state.login.serial);
const email = useAppSelector((state) => state.login.email);
const kompassiId = useAppSelector((state) => state.login.kompassiId);
const isLocalLogin = !kompassiId;
return (
<Container>
<UserInfoContainer>
<span>
<b>{t("user")}:</b> {username}
</span>
{isLocalLogin && (
<span>
<b>{t("code")}:</b> {serial}
</span>
)}
<StyledButton
buttonStyle={ButtonStyle.SECONDARY}
onClick={() => navigate(AppRoute.LOGOUT)}
>
{t("button.logout")}
</StyledButton>
</UserInfoContainer>
<EmailSettingsForm email={email} />
<ChangeUserSettingsForm
isLocalLogin={isLocalLogin}
usernameToUpdate={username}
/>
</Container>
);
};
const UserInfoContainer = styled.div`
display: grid;
row-gap: 12px;
margin-bottom: 24px;
`;
const Container = styled.div`
margin: 16px 0 16px 0;
padding: 16px 8px 16px 8px;
`;
const StyledButton = styled(Button)`
width: fit-content;
`;
|