Whatsapp send and Zammad autologin fixes
This commit is contained in:
Darren Clarke
parent
a3d6b786e1
commit
9e68be7225
15 changed files with 153 additions and 100 deletions
|
|
@ -146,7 +146,7 @@ export const Login: FC<LoginProps> = ({ session }) => {
|
|||
sx={buttonStyles}
|
||||
onClick={() =>
|
||||
signIn("google", {
|
||||
callbackUrl: `${origin}/setup`,
|
||||
callbackUrl: `${origin}`,
|
||||
})
|
||||
}
|
||||
>
|
||||
|
|
@ -160,7 +160,7 @@ export const Login: FC<LoginProps> = ({ session }) => {
|
|||
sx={buttonStyles}
|
||||
onClick={() =>
|
||||
signIn("apple", {
|
||||
callbackUrl: `${window.location.origin}/setup`,
|
||||
callbackUrl: `${window.location.origin}`,
|
||||
})
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
import { FC } from "react";
|
||||
import { ZammadWrapper } from "./ZammadWrapper";
|
||||
|
||||
export const Home: FC = () => <ZammadWrapper path="/#dashboard" hideSidebar />;
|
||||
export const Home: FC = () => <ZammadWrapper path="#dashboard" hideSidebar />;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
"use client";
|
||||
|
||||
import { FC, useState } from "react";
|
||||
import { FC, useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Iframe from "react-iframe";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { Box, Grid, CircularProgress } from "@mui/material";
|
||||
|
||||
type ZammadWrapperProps = {
|
||||
path: string;
|
||||
|
|
@ -14,69 +16,117 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
|
|||
hideSidebar = true,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession();
|
||||
const [authenticated, setAuthenticated] = useState(false);
|
||||
const [display, setDisplay] = useState("none");
|
||||
const url = `/zammad${path}`;
|
||||
const id = url.replace(/[^a-zA-Z0-9]/g, "");
|
||||
|
||||
return (
|
||||
// @ts-ignore
|
||||
<Iframe
|
||||
id="zammad"
|
||||
url={url}
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameBorder={0}
|
||||
styles={{ display }}
|
||||
onLoad={() => {
|
||||
const linkElement = document.querySelector("iframe");
|
||||
if (
|
||||
linkElement.contentDocument &&
|
||||
linkElement.contentDocument?.querySelector &&
|
||||
linkElement.contentDocument.querySelector("#navigation") &&
|
||||
linkElement.contentDocument.querySelector("body")
|
||||
) {
|
||||
// @ts-ignore
|
||||
linkElement.contentDocument.querySelector("#navigation").style =
|
||||
"display: none";
|
||||
// @ts-ignore
|
||||
linkElement.contentDocument.querySelector("body").style =
|
||||
"font-family: Arial";
|
||||
useEffect(() => {
|
||||
const checkAuthenticated = async () => {
|
||||
const res = await fetch("/zammad/auth/sso", {
|
||||
method: "GET",
|
||||
redirect: "manual",
|
||||
});
|
||||
|
||||
if (res.type === "opaqueredirect") {
|
||||
setAuthenticated(true);
|
||||
} else {
|
||||
setAuthenticated(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkAuthenticated();
|
||||
}, [path]);
|
||||
|
||||
if (!session) {
|
||||
console.log("No session");
|
||||
return (
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
sx={{ height: 500 }}
|
||||
justifyContent="center"
|
||||
alignContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<CircularProgress size={80} color="success" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (session && authenticated) {
|
||||
console.log("Session and authenticated");
|
||||
return (
|
||||
<Iframe
|
||||
id={id}
|
||||
url={url}
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameBorder={0}
|
||||
styles={{ display }}
|
||||
onLoad={() => {
|
||||
const linkElement = document.querySelector(
|
||||
`#${id}`,
|
||||
) as HTMLIFrameElement;
|
||||
|
||||
console.log({ path });
|
||||
console.log({ id });
|
||||
console.log({ linkElement });
|
||||
if (
|
||||
hideSidebar &&
|
||||
linkElement.contentDocument.querySelector(".sidebar")
|
||||
linkElement.contentDocument &&
|
||||
linkElement.contentDocument?.querySelector &&
|
||||
linkElement.contentDocument.querySelector("#navigation") &&
|
||||
linkElement.contentDocument.querySelector("body")
|
||||
) {
|
||||
// @ts-ignore
|
||||
linkElement.contentDocument.querySelector(".sidebar").style =
|
||||
linkElement.contentDocument.querySelector("#navigation").style =
|
||||
"display: none";
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
if (linkElement.contentDocument.querySelector(".overview-header")) {
|
||||
// @ts-ignore
|
||||
(
|
||||
linkElement.contentDocument.querySelector(
|
||||
".overview-header",
|
||||
) as any
|
||||
).style = "display: none";
|
||||
}
|
||||
linkElement.contentDocument.querySelector("body").style =
|
||||
"font-family: Arial";
|
||||
|
||||
setDisplay("inherit");
|
||||
if (
|
||||
hideSidebar &&
|
||||
linkElement.contentDocument.querySelector(".sidebar")
|
||||
) {
|
||||
// @ts-ignore
|
||||
linkElement.contentDocument.querySelector(".sidebar").style =
|
||||
"display: none";
|
||||
}
|
||||
|
||||
if (linkElement.contentWindow) {
|
||||
linkElement.contentWindow.addEventListener("hashchange", () => {
|
||||
const hash = linkElement.contentWindow?.location?.hash ?? "";
|
||||
if (hash.startsWith("#ticket/zoom/")) {
|
||||
setDisplay("none");
|
||||
const ticketID = hash.split("/").pop();
|
||||
router.push(`/tickets/${ticketID}`);
|
||||
setTimeout(() => {
|
||||
setDisplay("inherit");
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
// @ts-ignore
|
||||
if (linkElement.contentDocument.querySelector(".overview-header")) {
|
||||
// @ts-ignore
|
||||
(
|
||||
linkElement.contentDocument.querySelector(
|
||||
".overview-header",
|
||||
) as any
|
||||
).style = "display: none";
|
||||
}
|
||||
|
||||
setDisplay("inherit");
|
||||
|
||||
if (linkElement.contentWindow) {
|
||||
linkElement.contentWindow.addEventListener("hashchange", () => {
|
||||
const hash = linkElement.contentWindow?.location?.hash ?? "";
|
||||
if (hash.startsWith("#ticket/zoom/")) {
|
||||
setDisplay("none");
|
||||
const ticketID = hash.split("/").pop();
|
||||
router.push(`/tickets/${ticketID}`);
|
||||
setTimeout(() => {
|
||||
setDisplay("inherit");
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,20 +22,21 @@ const checkRewrites = async (request: NextRequestWithAuth) => {
|
|||
const metamigoURL = process.env.METAMIGO_URL ?? "http://metamigo-api:3000";
|
||||
const labelStudioURL = process.env.LABEL_STUDIO_URL ?? "http://label-studio:8080";
|
||||
const { token } = request.nextauth;
|
||||
const headers = { 'X-Forwarded-User': token?.email?.toLowerCase() };
|
||||
|
||||
console.log(request.nextUrl);
|
||||
if (request.nextUrl.pathname.startsWith('/metamigo')) {
|
||||
return rewriteURL(request, `${linkBaseURL}/metamigo`, metamigoURL);
|
||||
} else if (request.nextUrl.pathname.startsWith('/label-studio')) {
|
||||
return rewriteURL(request, `${linkBaseURL}/label-studio`, labelStudioURL);
|
||||
} else if (request.nextUrl.pathname.startsWith('/zammad')) {
|
||||
return rewriteURL(request, `${linkBaseURL}/zammad`, zammadURL);
|
||||
return rewriteURL(request, `${linkBaseURL}/zammad`, zammadURL, headers);
|
||||
} else if (request.nextUrl.pathname.startsWith('/auth/sso') || request.nextUrl.pathname.startsWith('/assets')) {
|
||||
const headers = { 'X-Forwarded-User': token.email.toLowerCase() };
|
||||
return rewriteURL(request, linkBaseURL, zammadURL, headers);
|
||||
} else if (request.nextUrl.pathname.startsWith('/proxy/api') || request.nextUrl.pathname.startsWith('/proxy/assets')) {
|
||||
return rewriteURL(request, `${linkBaseURL}/proxy`, zammadURL);
|
||||
} else if (request.nextUrl.pathname.startsWith('/api/v1') || request.nextUrl.pathname.startsWith('/auth/sso')) {
|
||||
return rewriteURL(request, linkBaseURL, zammadURL);
|
||||
return rewriteURL(request, linkBaseURL, zammadURL, headers);
|
||||
}
|
||||
|
||||
return NextResponse.next();
|
||||
|
|
@ -75,7 +76,7 @@ export default withAuth(
|
|||
|
||||
export const config = {
|
||||
matcher: [
|
||||
'/((?!ws|_next/static|_next/image|favicon.ico).*)',
|
||||
'/((?!ws|wss|_next/static|_next/image|favicon.ico).*)',
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue