Skip to content

Commit

Permalink
Update dependencies from garronej and add register link to the header
Browse files Browse the repository at this point in the history
  • Loading branch information
garronej committed Aug 12, 2024
1 parent bab6b1d commit e0153ed
Show file tree
Hide file tree
Showing 15 changed files with 326 additions and 300 deletions.
14 changes: 7 additions & 7 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@codegouvfr/react-dsfr": "^1.10.9",
"@codegouvfr/react-dsfr": "^1.11.2",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.14",
Expand All @@ -30,15 +30,15 @@
"@types/react-form": "^4.0.2",
"@uiw/react-md-editor": "^3.23.5",
"api": "*",
"evt": "^2.5.3",
"evt": "^2.5.7",
"flexsearch": "0.7.21",
"i18nifty": "^3.1.2",
"i18nifty": "^3.2.2",
"keycloakify": "^9.6.7",
"memoizee": "^0.4.14",
"moment": "^2.29.1",
"oidc-spa": "^4.9.1",
"oidc-spa": "^5.1.2",
"path": "^0.12.7",
"powerhooks": "^1.0.5",
"powerhooks": "^1.0.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.43.0",
Expand All @@ -48,8 +48,8 @@
"redux-clean-architecture": "^4.1.1",
"run-exclusive": "^2.2.19",
"superjson": "^1.12.2",
"tsafe": "^1.6.5",
"tss-react": "^4.9.3",
"tsafe": "^1.7.2",
"tss-react": "^4.9.12",
"type-route": "^1.0.1",
"zod": "^3.21.4"
},
Expand Down
2 changes: 1 addition & 1 deletion web/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<link rel="shortcut icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.ico?v=1.12.1" type="image/x-icon" />
<link rel="manifest" href="%PUBLIC_URL%/dsfr/favicon/manifest.webmanifest?v=1.12.1" crossorigin="use-credentials" />

<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/utility/icons/icons.min.css?hash=3375e412" />
<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/utility/icons/icons.min.css?hash=8994feca" />
<link rel="stylesheet" href="%PUBLIC_URL%/dsfr/dsfr.min.css?v=1.12.1" />

<%
Expand Down
File renamed without changes.
5 changes: 4 additions & 1 deletion web/src/core/ports/Oidc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@ export declare type Oidc = Oidc.LoggedIn | Oidc.NotLoggedIn;
export declare namespace Oidc {
export type NotLoggedIn = {
isUserLoggedIn: false;
login: (params: { doesCurrentHrefRequiresAuth: boolean }) => Promise<never>;
login: (params: {
doesCurrentHrefRequiresAuth: boolean;
transformUrlBeforeRedirect?: (url: string) => string;
}) => Promise<never>;
};

export type LoggedIn = {
Expand Down
2 changes: 1 addition & 1 deletion web/src/core/tools/jwt.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { decodeJwt as decodeJwt_vanilla } from "oidc-spa";
import { decodeJwt as decodeJwt_vanilla } from "oidc-spa/tools/decodeJwt";

export function encodeJwt(obj: Record<string, unknown>) {
return `mock_${JSON.stringify(obj)}`;
Expand Down
21 changes: 21 additions & 0 deletions web/src/core/usecases/userAuthentication/thunks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,27 @@ export const thunks = {

return oidc.login({ doesCurrentHrefRequiresAuth });
},
"register":
() =>
(...args): Promise<never> => {
const [, , { oidc }] = args;

assert(!oidc.isUserLoggedIn);

return oidc.login({
"doesCurrentHrefRequiresAuth": false,
"transformUrlBeforeRedirect": url => {
const urlObj = new URL(url);

urlObj.pathname = urlObj.pathname.replace(
/\/auth$/,
"/registrations"
);

return urlObj.href;
}
});
},
"logout":
(params: { redirectTo: "home" | "current page" }) =>
(...args): Promise<never> => {
Expand Down
10 changes: 4 additions & 6 deletions web/src/stories/shared/Header.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,10 @@ export const VueDefault = getStory({
"login": () => {
console.log("Logging in");
return new Promise<never>(() => {});
}
},
"i18nApi": {
"lang": "fr",
"setLang": lang => {
alert(`Changing language to ${lang}`);
},
"register": () => {
console.log("Registering");
return new Promise<never>(() => {});
}
},
"routeName": "home"
Expand Down
7 changes: 2 additions & 5 deletions web/src/ui/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { createCoreProvider } from "core";
import { pages } from "ui/pages";
import { useConst } from "powerhooks/useConst";
import { objectKeys } from "tsafe/objectKeys";
import { useLang } from "ui/i18n";
import { assert } from "tsafe/assert";
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
import { keyframes } from "tss-react";
Expand Down Expand Up @@ -90,7 +89,8 @@ function ContextualizedApp() {
: {
"isUserLoggedIn": false as const,
"login": () =>
userAuthentication.login({ "doesCurrentHrefRequiresAuth": false })
userAuthentication.login({ "doesCurrentHrefRequiresAuth": false }),
"register": () => userAuthentication.register()
}
);

Expand All @@ -101,15 +101,12 @@ function ContextualizedApp() {

const { classes } = useStyles({ headerHeight });

const i18nApi = useLang();

return (
<div className={classes.root}>
<Header
ref={headerRef}
routeName={route.name}
userAuthenticationApi={headerUserAuthenticationApi}
i18nApi={i18nApi}
/>
<main className={classes.main}>
<Suspense fallback={<LoadingFallback />}>
Expand Down
29 changes: 16 additions & 13 deletions web/src/ui/i18n/i18n.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,8 @@ const {
| typeof import("ui/pages/account/Account").i18n
| typeof import("ui/pages/userProfile/UserProfile").i18n
| typeof import("ui/shared/DetailUsersAndReferents").i18n
| typeof import("ui/shared/Header").i18n
| typeof import("ui/shared/Header/Header").i18n
| typeof import("ui/shared/Header/AuthButtons").i18n
| typeof import("ui/shared/Footer").i18n
| typeof import("ui/shared/DeclarationRemovalModal").i18n
| typeof import("ui/shared/SmartLogo").i18n
Expand Down Expand Up @@ -688,12 +689,13 @@ const {
"navigation add software": "Add software or instance",
"navigation update software": "Update software or instance",
"navigation support request": "Support request",
"navigation about": "About the site",
"quick access test": "Immediate test",
"quick access login": "Sign in",
"quick access logout": "Sign out",
"quick access account": "My account",
"select language": "Select language"
"navigation about": "About the site"
},
"AuthButtons": {
"login": "Login",
"register": "Register",
"logout": "Logout",
"account": "My account"
},
"Footer": {
"contribute": "Contribute"
Expand Down Expand Up @@ -1374,12 +1376,13 @@ const {
"navigation add software": "Ajouter un logiciel ou une instance ",
"navigation update software": "Mettre à jour un logiciel ou une instance",
"navigation support request": "Demande d'accompagnement",
"navigation about": "À propos du site",
"quick access test": "Test immédiat",
"quick access login": "Se connecter",
"quick access logout": "Se déconnecter",
"quick access account": "Mon compte",
"select language": "Sélectionner une langue"
"navigation about": "À propos du site"
},
"AuthButtons": {
"login": "Se connecter",
"register": "Créer un compte",
"logout": "Se déconnecter",
"account": "Mon compte"
},
"Footer": {
"contribute": "Contribuez"
Expand Down
103 changes: 103 additions & 0 deletions web/src/ui/shared/Header/AuthButtons.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import { HeaderQuickAccessItem } from "@codegouvfr/react-dsfr/Header";
import { declareComponentKeys, useTranslation } from "ui/i18n";
import { fr } from "@codegouvfr/react-dsfr";
import { tss } from "tss-react";
import { routes } from "ui/routes";

type Props = {
id?: string;
isOnPageMyAccount: boolean;
userAuthenticationApi:
| {
isUserLoggedIn: true;
logout: () => void;
}
| {
isUserLoggedIn: false;
login: () => Promise<never>;
register: () => Promise<never>;
};
};

export function AuthButtons(props: Props) {
const { id, isOnPageMyAccount, userAuthenticationApi } = props;

const { t } = useTranslation({ AuthButtons });

const { classes, cx } = useStyles({ isOnPageMyAccount });

if (!userAuthenticationApi.isUserLoggedIn) {
return (
<>
<HeaderQuickAccessItem
id={`login-${id}`}
quickAccessItem={{
iconId: "fr-icon-lock-line",
buttonProps: {
onClick: () => userAuthenticationApi.login()
},
text: t("login")
}}
/>
<HeaderQuickAccessItem
id={`register-${id}`}
quickAccessItem={{
iconId: "ri-id-card-line",
buttonProps: {
onClick: () => userAuthenticationApi.register()
},
text: t("register")
}}
/>
</>
);
}

return (
<>
<HeaderQuickAccessItem
id={`account-${id}`}
quickAccessItem={
{
"iconId": "fr-icon-account-fill",
"linkProps": {
"className": cx(
fr.cx("fr-btn--tertiary"),
classes.myAccountButton
),
...routes.account().link
},
"text": t("account")
} as const
}
/>
<HeaderQuickAccessItem
id={`logout-${id}`}
quickAccessItem={{
iconId: "ri-logout-box-line",
buttonProps: {
onClick: () => userAuthenticationApi.logout()
},
text: t("logout")
}}
/>
</>
);
}

export const { i18n } = declareComponentKeys<
"login" | "register" | "logout" | "account"
>()({ AuthButtons });

const useStyles = tss
.withName({ AuthButtons })
.withParams<{ isOnPageMyAccount: boolean }>()
.create(({ isOnPageMyAccount }) => ({
"myAccountButton": {
"&&": {
"backgroundColor": !isOnPageMyAccount
? undefined
: fr.colors.decisions.background.default.grey.hover
}
}
}));
Loading

0 comments on commit e0153ed

Please sign in to comment.