libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

Simplify date formatting for the Account Console (v3) (#21703)

Browse source
This commit is contained in:
Jon Koops 2023-07-19 11:51:39 +02:00 committed by GitHub
parent 597c5f061c
commit 4885d349dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 25 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
js/apps/account-ui/src/account-security/DeviceActivity.tsx
View file

@ -31,16 +31,15 @@ import {
DeviceRepresentation,
SessionRepresentation,
} from "../api/representations";
import useFormatter from "../components/formatter/format-date";
import { Page } from "../components/page/Page";
import { TFuncKey } from "../i18n";
import { keycloak } from "../keycloak";
import { formatDate } from "../utils/formatDate";
import { usePromise } from "../utils/usePromise";
const DeviceActivity = () => {
const { t } = useTranslation();
const { addAlert, addError } = useAlerts();
const { formatTime } = useFormatter();
const [devices, setDevices] = useState<DeviceRepresentation[]>();
const [key, setKey] = useState(0);
@ -201,7 +200,7 @@ const DeviceActivity = () => {
{t("lastAccessedOn")}
</DescriptionListTerm>
<DescriptionListDescription>
{formatTime(session.lastAccess)}
{formatDate(new Date(session.lastAccess * 1000))}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
@ -217,7 +216,7 @@ const DeviceActivity = () => {
{t("started")}
</DescriptionListTerm>
<DescriptionListDescription>
{formatTime(session.started)}
{formatDate(new Date(session.started * 1000))}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
@ -225,7 +224,7 @@ const DeviceActivity = () => {
{t("expires")}
</DescriptionListTerm>
<DescriptionListDescription>
{formatTime(session.expires)}
{formatDate(new Date(session.expires * 1000))}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>

3
js/apps/account-ui/src/account-security/SigningIn.tsx
View file

@ -25,10 +25,10 @@ import {
CredentialRepresentation,
} from "../api/representations";
import { EmptyRow } from "../components/datalist/EmptyRow";
import useFormatter from "../components/format/format-date";
import { Page } from "../components/page/Page";
import { TFuncKey } from "../i18n";
import { keycloak } from "../keycloak";
import { formatDate } from "../utils/formatDate";
import { usePromise } from "../utils/usePromise";
type MobileLinkProps = {
@ -65,7 +65,6 @@ const MobileLink = ({ title, onClick }: MobileLinkProps) => {
const SigningIn = () => {
const { t } = useTranslation();
const { formatDate } = useFormatter();
const { addAlert, addError } = useAlerts();
const { login } = keycloak;

10
js/apps/account-ui/src/applications/Applications.tsx
View file

@ -27,6 +27,7 @@ import { deleteConsent, getApplications } from "../api/methods";
import { ClientRepresentation } from "../api/representations";
import { Page } from "../components/page/Page";
import { TFuncKey } from "../i18n";
import { formatDate } from "../utils/formatDate";
import { usePromise } from "../utils/usePromise";
type Application = ClientRepresentation & {
@ -227,14 +228,7 @@ const Applications = () => {
{t("accessGrantedOn")}
</DescriptionListTerm>
<DescriptionListDescription>
{new Intl.DateTimeFormat("en", {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
}).format(application.consent.createdDate)}
{formatDate(new Date(application.consent.createdDate))}
</DescriptionListDescription>
</DescriptionListGroup>
</>

30
js/apps/account-ui/src/components/format/format-date.ts
View file

@ -1,30 +0,0 @@
const DATE_AND_TIME_FORMAT: Intl.DateTimeFormatOptions = {
dateStyle: "long",
timeStyle: "short",
};
const TIME_FORMAT: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
};
//todo use user local
export default function useFormatter() {
return {
formatDate: function (
date: Date,
options: Intl.DateTimeFormatOptions | undefined = DATE_AND_TIME_FORMAT,
) {
return date.toLocaleString("en", options);
},
formatTime: function (
time: number,
options: Intl.DateTimeFormatOptions | undefined = TIME_FORMAT,
) {
return new Intl.DateTimeFormat("en", options).format(time);
},
};
}

29
js/apps/account-ui/src/components/formatter/format-date.ts
View file

@ -1,29 +0,0 @@
const DATE_AND_TIME_FORMAT: Intl.DateTimeFormatOptions = {
dateStyle: "long",
timeStyle: "short",
};
const TIME_FORMAT: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
};
export default function useFormatter() {
return {
formatDate: function (
date: Date,
options: Intl.DateTimeFormatOptions | undefined = DATE_AND_TIME_FORMAT,
) {
return date.toLocaleString("en", options);
},
formatTime: function (
time: number,
options: Intl.DateTimeFormatOptions | undefined = TIME_FORMAT,
) {
return new Intl.DateTimeFormat("en", options).format(time);
},
};
}

18
js/apps/account-ui/src/utils/formatDate.ts Normal file
View file

@ -0,0 +1,18 @@
import { i18n } from "../i18n";
export const FORMAT_DATE_ONLY: Intl.DateTimeFormatOptions = {
dateStyle: "long",
};
export const FORMAT_TIME_ONLY: Intl.DateTimeFormatOptions = {
timeStyle: "short",
};
export const FORMAT_DATE_AND_TIME: Intl.DateTimeFormatOptions = {
...FORMAT_DATE_ONLY,
...FORMAT_TIME_ONLY,
};
export function formatDate(date: Date, options = FORMAT_DATE_AND_TIME) {
return date.toLocaleString(i18n.languages, options);
}