Skip to content

Commit

Permalink
update(dashboard): make SyncPage responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@EliotAmn
EliotAmn committed Jan 17, 2025
1 parent beb65e5 commit 067f59a
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 72 deletions.
4 changes: 2 additions & 2 deletions web/src/comps/WindowElem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";

export default function WindowElem(props: { title: React.ReactNode, children: React.ReactNode }) {
return <div className={"flex flex-col h-full border-gray-100 border shadow rounded-t-2xl"}>
export default function WindowElem(props: { title: React.ReactNode, className?: string, children: React.ReactNode }) {
return <div className={"flex flex-col h-full border-gray-100 border shadow rounded-t-2xl " + (props.className ? props.className : "")}>
<div className={"p-2 border-b border-gray-100 bg-gray-50 rounded-t-2xl"}>
<h2 className={"font-bold text-gray-800"}>{props.title}</h2>
</div>
Expand Down
163 changes: 93 additions & 70 deletions web/src/pages/SyncPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,121 +11,144 @@ export default function SyncPage(): React.ReactElement {
useEffect(() => {
getCalendarToken().then((token: string) => {
setToken(token);
}).catch(() => {});
}).catch(() => {
});
}, []);

if (token === null)
return <div>Loading...</div>

return (
<div className={"flex flex-row gap-4"}>
<WindowElem title={<h1 className={"text-2xl"}>Use an internal scraper</h1>}>
<div className={"p-3"}>
<h2 className={"font-bold"}>How it's works ?</h2>
<p className={"text-gray-500"}>You provide a Microsoft session cookie below. It will stored on a
private and secured database with encryptation methods. There are multiple scrapers services,
and your Intra & MyEpitech data will be scraper by one of they. Recommanded if you can't host
your own scraper.</p>
<div className="flex flex-row flex-wrap gap-4">
<WindowElem
className={"sm:w-[48%] min-w-60 "}
title={<h1 className="text-2xl">Use an internal scraper</h1>}
>
<div className="p-3">
<h2 className="font-bold">How it's works ?</h2>
<p className="text-gray-500">
You provide a Microsoft session cookie below. It will be stored on a
private and secured database with encryption methods. There are multiple
scraper services, and your Intra & MyEpitech data will be scraped by one
of them. Recommended if you can't host your own scraper.
</p>

<p>
<span className={"font-bold text-red-500"}>Warning:</span> This service is not affiliated with
Epitech, and
the
data is stored on a private server. Use it at your own risk.
<span className="font-bold text-red-500">Warning:</span> This service is
not affiliated with Epitech, and the data is stored on a private server.
Use it at your own risk.
</p>
<p>
<span className={"font-bold text-blue-500"}>How can i get my Microsoft cookie ?</span>
<span className="font-bold text-blue-500">How can I get my Microsoft cookie?</span>
You can follow
<a
href={"https://github.com/EliotAmn/tekbetter-server/blob/main/HOW_TO_GET_COOKIES.md"}
className={"text-blue-500 mx-1"}
target={"_blank"}
href="https://github.com/EliotAmn/tekbetter-server/blob/main/HOW_TO_GET_COOKIES.md"
className="text-blue-500 mx-1"
target="_blank"
>
this guide</a> to get
your Microsoft session cookie.
this guide
</a>{" "}
to get your Microsoft session cookie.
</p>


<BasicBox className={"p-4 flex flex-row items-center gap-2"}>
<div>
<h3 className={"font-bold text-gray-700"}>Update your microsoft cookie</h3>
<p>If you have changed your Microsoft password, or the token is expired, you need to re
enter it
below.</p>
<input value={microToken || ""} type={"text"}
className={"w-full p-2 border-gray-300 border rounded"}
placeholder={"Paste your Microsoft session cookie here"}
onChange={(e) => setMicroToken(e.target.value)}
<BasicBox className="p-4 flex flex-wrap items-start gap-2">
<div className="flex-1 min-w-[calc(50%-0.5rem)] sm:min-w-[50%]">
<h3 className="font-bold text-gray-700">Update your Microsoft cookie</h3>
<p>
If you have changed your Microsoft password, or the token is
expired, you need to re-enter it below.
</p>
<input
value={microToken || ""}
type="text"
className="w-full p-2 border-gray-300 border rounded"
placeholder="Paste your Microsoft session cookie here"
onChange={(e) => setMicroToken(e.target.value)}
/>
<button
className={"mt-2 h-8 bg-blue-500 text-white px-2 rounded"}
className="mt-2 h-8 bg-blue-500 text-white px-2 rounded"
onClick={() => {
putMicrosoftToken(microToken!).then(() => setMicroToken(""));
}}
>
Update
</button>
</div>
<div>
<h3 className={"font-bold text-gray-700"}>Disable the internal scraper mode</h3>
<p>If you want to stop the scraper, you can disable it here. Your token will be deleted from
the
database.</p>
<button className={"mt-2 h-8 bg-red-500 text-white px-2 rounded"}
onClick={() => {
if (window.confirm("Are you sure ? Your token will be deleted.")) deleteMicrosoftToken().then(null).catch(() => {});
}}
<div className="flex-1 min-w-[calc(50%-0.5rem)] sm:min-w-[50%]">
<h3 className="font-bold text-gray-700">Disable the internal scraper mode</h3>
<p>
If you want to stop the scraper, you can disable it here. Your
token will be deleted from the database.
</p>
<button
className="mt-2 h-8 bg-red-500 text-white px-2 rounded"
onClick={() => {
if (window.confirm("Are you sure ? Your token will be deleted.")) {
deleteMicrosoftToken().then(null).catch(() => {
});
}
}}
>
Delete my token
</button>
</div>

</BasicBox>


</div>

</WindowElem>


<WindowElem title={<h1 className={"text-2xl"}>Host your own scraper</h1>}>
<div className={"p-3 flex flex-col"}>
<h2 className={"font-bold"}>How it works ?</h2>
<p className={"text-gray-500 text-justify"}>
The tekbetter data scraper is open-source. You can install on your own
server, and use it to get your data.
For authentication, you need to provide a token on the scraper configuration, to authorize it to
push your data to your account.
<WindowElem
className="w-full sm:w-[48%] lg:w-1/2"
title={<h1 className="text-2xl">Host your own scraper</h1>}
>
<div className="p-3 flex flex-col">
<h2 className="font-bold">How it works ?</h2>
<p className="text-gray-500 text-justify">
The tekbetter data scraper is open-source. You can install it on your own
server, and use it to get your data. For authentication, you need to
provide a token on the scraper configuration, to authorize it to push
your data to your account.
</p>

<h3 className="font-bold text-gray-700">Install the scraper: </h3>
<a
href="https://github.com/EliotAmn/tekbetter-scraper"
target="_blank"
className="text-blue-500"
>
Github repository
</a>

<h3 className={"font-bold text-gray-700"}>Install the scraper: </h3>
<a href={"https://github.com/EliotAmn/tekbetter-scraper"} target={"_blank"}
className={"text-blue-500"}>Github repository</a>
<h3 className="font-bold text-gray-700">Your upload token: </h3>
<code className="bg-gray-100 p-2 rounded">{token}</code>

<h3 className={"font-bold text-gray-700"}>Your upload token: </h3>
<code className={"bg-gray-100 p-2 rounded"}>{token}</code>

<h3 className={"font-bold text-gray-700"}>This is the api url you need to use on the scraper config: </h3>
<code className={"bg-gray-100 p-2 rounded"}>{document.location.origin}</code>
<h3 className="font-bold text-gray-700">
This is the API URL you need to use in the scraper config:
</h3>
<code className="bg-gray-100 p-2 rounded">{document.location.origin}</code>

<button
className={"mt-2 h-8 bg-red-500 text-white px-2 rounded"}
className="mt-2 h-8 bg-red-500 text-white px-2 rounded"
onClick={() => {
if (window.confirm("Are you sure ? Your token will be regenerated. This token is used for scrapers and the calendar export urls.")) {
regenCalendarToken().then((token) => {
setToken(token);
}).catch(() => {});
if (
window.confirm(
"Are you sure ? Your token will be regenerated. This token is used for scrapers and the calendar export urls."
)
) {
regenCalendarToken()
.then((token) => {
setToken(token);
})
.catch(() => {
});
}
}}
>Reload my token
>
Reload my token
</button>


</div>

</WindowElem>
</div>


);
}

0 comments on commit 067f59a

Please sign in to comment.