diff --git a/packages/header-component/src/components/dc-header/header.tsx b/packages/header-component/src/components/dc-header/header.tsx index 2af13ccf..bbaac496 100644 --- a/packages/header-component/src/components/dc-header/header.tsx +++ b/packages/header-component/src/components/dc-header/header.tsx @@ -14,6 +14,7 @@ import { } from "@stencil/core"; import { syncCurrentUser } from "../../services/session"; import { getGuestActions } from "../../utils/config"; +import { addSlash } from "../../utils/normalise"; type User = { id: number; @@ -109,8 +110,13 @@ export class Header { // A return promise here will force to wait before first render componentWillLoad() { + // Make sure to get the logo from prop or use default this._logo = this.logo || this._defaultLogo; this._logoSmall = this.logosmall || this._defaultLogoSmall; + // normalise the links to make sure they match the expected format + this.homepage = addSlash(this.homepage); + this.community = addSlash(this.community); + // Allow to fetch users session this.syncCurrentUser(); } diff --git a/packages/header-component/src/services/session.ts b/packages/header-component/src/services/session.ts index ddd0b4e8..8e5aaa4c 100644 --- a/packages/header-component/src/services/session.ts +++ b/packages/header-component/src/services/session.ts @@ -1,4 +1,4 @@ -import { sanitiseSSOUrl } from "../utils/sanitise"; +import { trimSlash } from "../utils/normalise"; // https://stackoverflow.com/a/33829607/1422380 const getCSRFToken = async (discourseEndpoint) => { @@ -42,7 +42,7 @@ const getCurrentUser = async (discourseEndpoint, { csrfToken }) => { export const syncCurrentUser = async (community) => { let currentUser; - let discourseEndpoint = sanitiseSSOUrl(community); + let discourseEndpoint = trimSlash(community); try { const csrfToken = await getCSRFToken(discourseEndpoint); @@ -55,7 +55,7 @@ export const syncCurrentUser = async (community) => { }; export const logout = async (community, username) => { - let discourseEndpoint = sanitiseSSOUrl(community); + let discourseEndpoint = trimSlash(community); const url = `${discourseEndpoint}/session/${username}`; const csrfToken = await getCSRFToken(discourseEndpoint); diff --git a/packages/header-component/src/utils/community.ts b/packages/header-component/src/utils/community.ts index 4c00a209..66884d5f 100644 --- a/packages/header-component/src/utils/community.ts +++ b/packages/header-component/src/utils/community.ts @@ -1,4 +1,4 @@ -import { sanitiseSSOUrl } from "./sanitise"; +import { trimSlash } from "./normalise"; /** * preffix a given string with the base community URL. @@ -6,7 +6,7 @@ import { sanitiseSSOUrl } from "./sanitise"; * @param str typically a url that needs to be preffixed with community base url */ export const preffixCommunityURL = (community, str) => - `${sanitiseSSOUrl(community)}/${str}`; + `${trimSlash(community)}/${str}`; /** * Takes an object with avatar_template (typically user) and return a full diff --git a/packages/header-component/src/utils/normalise.ts b/packages/header-component/src/utils/normalise.ts new file mode 100644 index 00000000..88305892 --- /dev/null +++ b/packages/header-component/src/utils/normalise.ts @@ -0,0 +1,19 @@ +export const trimSlash = (url: string) => { + if (url === "/") { + return window.location.origin; + } + + if (url.charAt(url.length - 1) === "/") { + return url.slice(0, -1); + } + + return url; +}; + +export const addSlash = (url: string) => { + if (url.charAt(url.length - 1) !== "/") { + return `${url}/`; + } + + return url; +}; diff --git a/packages/header-component/src/utils/sanitise.ts b/packages/header-component/src/utils/sanitise.ts deleted file mode 100644 index 7f877686..00000000 --- a/packages/header-component/src/utils/sanitise.ts +++ /dev/null @@ -1,11 +0,0 @@ -export const sanitiseSSOUrl = (ssoUrl: string) => { - if (ssoUrl === "/") { - return window.location.origin; - } - - if (ssoUrl.charAt(ssoUrl.length - 1) === "/") { - return ssoUrl.slice(0, -1); - } - - return ssoUrl; -};