diff --git a/src/app/[language]/layout.tsx b/src/app/[language]/layout.tsx index 84ecb941..6335b3ca 100644 --- a/src/app/[language]/layout.tsx +++ b/src/app/[language]/layout.tsx @@ -4,7 +4,6 @@ import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.conf import { cookies } from "next/headers"; import { PREFERRED_THEME_COOKIE_KEY } from "@/features/themes/theme.config"; import { PageLayoutComponent } from "@/features/common/components/layout/page-layout/page-layout.component"; -import { UseHashWarningComponent } from "@/features/decoder/components/use-hash-warning/use-hash-warning.component"; import { PageMetadataProps } from "@/features/common/models/page-metadata.props"; import { getHomeDictionary } from "@/features/localization/services/language-dictionary.service"; import { generatePageMetadata } from "@/libs/metadata/metadata.service"; @@ -54,7 +53,6 @@ export default function RootLayout({ themeCode={initialThemeCookieValue} > {children} - ); } diff --git a/src/features/decoder/components/token-decoder.component.tsx b/src/features/decoder/components/token-decoder.component.tsx index 27faea8e..381450ca 100644 --- a/src/features/decoder/components/token-decoder.component.tsx +++ b/src/features/decoder/components/token-decoder.component.tsx @@ -8,9 +8,7 @@ import { SecretKeyInputComponent } from "@/features/decoder/components/secret-ke import { useDecoderStore } from "@/features/decoder/services/decoder.store"; import { useRouter } from "next/navigation"; import { - SupportedTokenHashParamValues, - WARNING_PARAM_KEY, - WARNING_PARAM_VALUE, + SupportedTokenHashParamValues } from "@/libs/config/project.constants"; import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model"; import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values"; @@ -50,9 +48,6 @@ export const TokenDecoderComponent: React.FC = ({ const loadDecoderInputs = useDecoderStore((state) => state.loadDecoderInputs); const handleJwtChange$ = useDecoderStore((state) => state.handleJwtChange); - const showUseHashWarning$ = useDecoderStore( - (state) => state.showUseHashWarning - ); useEffect(() => { const handleHashChange = () => { @@ -93,42 +88,14 @@ export const TokenDecoderComponent: React.FC = ({ }); }; - const handleWarning = () => { - const search = window.location.search; - - const searchParams = new URLSearchParams(search); - const warning = searchParams.get(WARNING_PARAM_KEY); - - if (warning === WARNING_PARAM_VALUE) { - showUseHashWarning$(); - - searchParams.delete(WARNING_PARAM_KEY); - - const currentUrl = window.location.href.split("?")[0]; - - let newUrl = `${currentUrl}`; - - if (searchParams.size > 0) { - newUrl += `?${searchParams.toString()}`; - } - - if (window.location.hash) { - newUrl += window.location.hash; - } - - router.push(newUrl); - } - }; - window.addEventListener("hashchange", handleHashChange); - + handleHashChange(); - handleWarning(); return () => { window.removeEventListener("hashchange", handleHashChange); }; - }, [handleJwtChange$, router, showUseHashWarning$]); + }, [handleJwtChange$, router]); useEffect(() => { if (isMounted.current) { diff --git a/src/features/decoder/components/use-hash-warning/use-hash-warning.component.tsx b/src/features/decoder/components/use-hash-warning/use-hash-warning.component.tsx deleted file mode 100644 index 4e632ad8..00000000 --- a/src/features/decoder/components/use-hash-warning/use-hash-warning.component.tsx +++ /dev/null @@ -1,41 +0,0 @@ -"use client"; - -import React from "react"; -import styles from "./use-hash-warning.module.scss"; -import { - HashWarningVisibilityValues, - useDecoderStore, -} from "@/features/decoder/services/decoder.store"; -import { getWarningsUiDictionary } from "@/features/localization/services/ui-language-dictionary.service"; - -interface UseHashWarningComponentProps { - languageCode: string; -} - -export const UseHashWarningComponent: React.FC< - UseHashWarningComponentProps -> = ({ languageCode }) => { - const useHashWarningVisibility = useDecoderStore( - (state) => state.useHashWarningVisibility, - ); - const hideUseHashWarning = useDecoderStore( - (state) => state.hideUseHashWarning, - ); - - const dictionary = getWarningsUiDictionary(languageCode); - - if (useHashWarningVisibility === HashWarningVisibilityValues.VISIBLE) { - return ( -
-
- - -
-
- ); - } - - return null; -}; diff --git a/src/features/decoder/components/use-hash-warning/use-hash-warning.module.scss b/src/features/decoder/components/use-hash-warning/use-hash-warning.module.scss deleted file mode 100644 index 0a26fabd..00000000 --- a/src/features/decoder/components/use-hash-warning/use-hash-warning.module.scss +++ /dev/null @@ -1,60 +0,0 @@ -@use "@/libs/theme/styles/variables" as *; -@use "@/libs/theme/styles/mixins" as *; - -.backdrop { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; - - z-index: 9999; - - backdrop-filter: blur(0.5rem); - - cursor: pointer; - - &[aria-hidden="false"] { - visibility: visible; - animation: fadeIn 0.2s linear; - } - - &[aria-hidden="true"] { - visibility: hidden; - } - - @media #{$breakpoint-dimension-xs} { - min-width: auto; - } -} - -.container { - position: fixed; - bottom: 2rem; - right: 2rem; - left: 2rem; - padding: 1.5rem 2rem; - background-color: var(--color_bg_state_danger_subtle); - color: var(--color_fg_on_state_danger_subtle); - border: 1px solid var(--color_border_state_danger); - z-index: 999; - font-size: 0.865rem; - border-radius: 0.5rem; -} - -.button { - background-color: transparent; - color: var(--color_fg_on_state_danger_subtle); - border: none; - position: absolute; - top: 0.25rem; - right: 0.75rem; - font-size: 1.5rem; - transform: rotate(45deg); - cursor: pointer; -} diff --git a/src/features/decoder/services/decoder.store.ts b/src/features/decoder/services/decoder.store.ts index 9eb5da52..d90303b9 100644 --- a/src/features/decoder/services/decoder.store.ts +++ b/src/features/decoder/services/decoder.store.ts @@ -10,11 +10,6 @@ import { AsymmetricKeyFormatValues } from "@/features/common/values/asymmetric-k import { JwtSignatureStatusValues } from "@/features/common/values/jwt-signature-status.values"; import { DecoderInputsModel } from "@/features/debugger/models/decoder-inputs.model"; -export enum HashWarningVisibilityValues { - VISIBLE = "VISIBLE", - HIDDEN = "HIDDEN", -} - export const DEFAULT_ALG_TYPE = "HS"; export const DEFAULT_ALG_SIZE = 256; export const DEFAULT_ALG = `${DEFAULT_ALG_TYPE}${DEFAULT_ALG_SIZE}`; @@ -63,7 +58,6 @@ export type DecoderStoreState = { decodingErrors: string[] | null; signatureWarnings: string[] | null; verificationInputErrors: string[] | null; - useHashWarningVisibility: HashWarningVisibilityValues; }; type DecoderStoreActions = { @@ -79,8 +73,6 @@ type DecoderStoreActions = { ) => void; resetControlledSymmetricSecretKey: () => void; resetControlledAsymmetricPublicKey: () => void; - showUseHashWarning: () => void; - hideUseHashWarning: () => void; loadDecoderInputs: (params: DecoderInputsModel) => void; }; @@ -100,7 +92,6 @@ export const initialState: DecoderStoreState = { controlledSymmetricSecretKey: null, controlledAsymmetricPublicKey: null, verificationInputErrors: null, - useHashWarningVisibility: HashWarningVisibilityValues.HIDDEN, }; export type DecoderStore = DecoderStoreState & DecoderStoreActions; @@ -204,16 +195,6 @@ export const useDecoderStore = create()( format: state.asymmetricPublicKeyFormat, }, })), - showUseHashWarning: () => { - set({ - useHashWarningVisibility: HashWarningVisibilityValues.VISIBLE, - }); - }, - hideUseHashWarning: () => { - set({ - useHashWarningVisibility: HashWarningVisibilityValues.HIDDEN, - }); - }, loadDecoderInputs: async (params) => { const update = await TokenDecoderService.loadDecoderInputs(params); diff --git a/src/libs/config/project.constants.ts b/src/libs/config/project.constants.ts index 3303d5a8..a056e52b 100644 --- a/src/libs/config/project.constants.ts +++ b/src/libs/config/project.constants.ts @@ -10,8 +10,6 @@ export enum SupportedTokenHashParamValues { ID_TOKEN = "id_token", VALUE = "value", } -export const WARNING_PARAM_KEY = "warning"; -export const WARNING_PARAM_VALUE = "use_hash"; export const EBOOK_URL = "https://auth0.com/resources/ebooks/jwt-handbook/?utm_source=jwtio&utm_medium=banner&utm_campaign=jwt-handbook"; diff --git a/src/middleware.ts b/src/middleware.ts index 5d321396..59a65306 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -48,8 +48,6 @@ export function middleware(request: NextRequest) { request.nextUrl.searchParams.delete("access_token"); request.nextUrl.searchParams.delete("value"); - request.nextUrl.searchParams.append("warning", "use_hash"); - request.nextUrl.hash = `token=${tokenParam}`; return NextResponse.redirect(request.nextUrl);