From 04b5d1c4d7d8a34256faf26a2570f70d4d3b98fb Mon Sep 17 00:00:00 2001 From: Abhijna Raghavendra Date: Thu, 29 Feb 2024 15:12:13 +0530 Subject: [PATCH] rfac: adjust navbar styling in home page --- src/backend/.env.sample | 5 +- src/backend/auth/github.ts | 49 ++++++++++-------- src/backend/dependencies.ts | 3 +- src/backend/main.ts | 6 +-- src/backend/server.ts | 20 +++++--- src/backend/utils/get-user.ts | 5 +- src/backend/utils/jwt.ts | 2 +- src/frontend/src/components/404.vue | 13 +++-- src/frontend/src/components/Home.vue | 55 +++++++++++++++++++-- src/frontend/src/components/Login.vue | 7 ++- src/frontend/src/components/deletemodal.vue | 40 +++++++++------ src/frontend/src/components/modal.vue | 47 +++++++++--------- src/frontend/src/router/index.ts | 9 +++- src/frontend/src/utils/create.ts | 5 +- src/frontend/src/utils/delete.ts | 5 +- src/frontend/src/utils/oauth-urls.ts | 4 +- 16 files changed, 185 insertions(+), 90 deletions(-) diff --git a/src/backend/.env.sample b/src/backend/.env.sample index a446357..3070d10 100644 --- a/src/backend/.env.sample +++ b/src/backend/.env.sample @@ -1,5 +1,8 @@ GITHUB_OAUTH_CLIENT_ID=... GITHUB_OAUTH_CLIENT_SECRET=... +GITLAB_OAUTH_CLIENT_ID=... +GITLAB_OAUTH_CLIENT_SECRET=... MONGO_API_KEY=... MONGO_APP_ID=... -SENTRY_DSN=... \ No newline at end of file +SENTRY_DSN=... +FRONTEND=... \ No newline at end of file diff --git a/src/backend/auth/github.ts b/src/backend/auth/github.ts index 10f4f97..6044a97 100644 --- a/src/backend/auth/github.ts +++ b/src/backend/auth/github.ts @@ -6,26 +6,31 @@ async function githubAuth(ctx: Context, id: string, secret: string) { await authenticateAndCreateJWT(ctx, id, secret, "github"); } -async function gitlabAuth(ctx: Context, id: string, secret: string) { - await authenticateAndCreateJWT(ctx, id, secret, "gitlab"); +async function gitlabAuth( + ctx: Context, + id: string, + secret: string, + frontend: string, +) { + await authenticateAndCreateJWT(ctx, id, secret, "gitlab", frontend); } async function authenticateAndCreateJWT( ctx: Context, id: string, secret: string, - provider: string + provider: string, + frontend = "", ) { if (!ctx.request.hasBody) { ctx.throw(415); } const code = await ctx.request.body().value; - const oauthUrl = - provider === "github" - ? "https://github.com/login/oauth/access_token" - : provider === "gitlab" - ? "https://gitlab.com/oauth/token" - : null; + const oauthUrl = provider === "github" + ? "https://github.com/login/oauth/access_token" + : provider === "gitlab" + ? "https://gitlab.com/oauth/token" + : null; if (oauthUrl === null) { ctx.response.body = "Unsupported provider"; @@ -34,17 +39,21 @@ async function authenticateAndCreateJWT( if (code !== null) { const rootUrl = new URL(oauthUrl); - rootUrl.search = provider === "github"? new URLSearchParams({ - client_id: id, - client_secret: secret, - code, - }).toString() : provider === "gitlab"? new URLSearchParams({ - client_id: id, - client_secret: secret, - code, - grant_type: "authorization_code", - redirect_uri: "http://localhost:7777/login" - }).toString() : ""; + rootUrl.search = provider === "github" + ? new URLSearchParams({ + client_id: id, + client_secret: secret, + code, + }).toString() + : provider === "gitlab" + ? new URLSearchParams({ + client_id: id, + client_secret: secret, + code, + grant_type: "authorization_code", + redirect_uri: `${frontend}/login`, + }).toString() + : ""; const resp = await fetch(rootUrl.toString(), { method: "POST", diff --git a/src/backend/dependencies.ts b/src/backend/dependencies.ts index a8a02ea..3bf13fa 100644 --- a/src/backend/dependencies.ts +++ b/src/backend/dependencies.ts @@ -17,9 +17,10 @@ export { create, exec, isHttpError, + oakCors, Router, Sentry, Session, Status, - verify, oakCors, + verify, }; diff --git a/src/backend/main.ts b/src/backend/main.ts index 8d9bd31..5dfc1ea 100644 --- a/src/backend/main.ts +++ b/src/backend/main.ts @@ -7,7 +7,7 @@ async function getSubdomains(ctx: Context) { const author = ctx.request.url.searchParams.get("user"); const token = ctx.request.url.searchParams.get("token"); const provider = ctx.request.url.searchParams.get("provider"); - if (author != await checkJWT(provider!,token!)) { + if (author != await checkJWT(provider!, token!)) { ctx.throw(401); } const data = await getMaps(author); @@ -36,7 +36,7 @@ async function addSubdomain(ctx: Context) { delete document.stack; delete document.env_content; delete document.static_content; - if (document.author != await checkJWT(provider,token)) { + if (document.author != await checkJWT(provider, token)) { ctx.throw(401); } const success: boolean = await addMaps(document); @@ -77,7 +77,7 @@ async function deleteSubdomain(ctx: Context) { const provider = document.provider; delete document.token; delete document.provider; - if (author != await checkJWT(provider,token)) { + if (author != await checkJWT(provider, token)) { ctx.throw(401); } const data = await deleteMaps(document); diff --git a/src/backend/server.ts b/src/backend/server.ts index 89871bf..ccbd303 100644 --- a/src/backend/server.ts +++ b/src/backend/server.ts @@ -2,12 +2,17 @@ import { Application, Context, isHttpError, + oakCors, Router, Sentry, Session, - Status, oakCors + Status, } from "./dependencies.ts"; -import { githubAuth, gitlabAuth, handleJwtAuthentication } from "./auth/github.ts"; +import { + githubAuth, + gitlabAuth, + handleJwtAuthentication, +} from "./auth/github.ts"; import { addSubdomain, deleteSubdomain, getSubdomains } from "./main.ts"; const router = new Router(); @@ -19,6 +24,7 @@ const githubClientSecret: string = Deno.env.get("GITHUB_OAUTH_CLIENT_SECRET")!; const gitlabClientId: string = Deno.env.get("GITLAB_OAUTH_CLIENT_ID")!; const gitlabClientSecret: string = Deno.env.get("GITLAB_OAUTH_CLIENT_SECRET")!; const dsn: string = Deno.env.get("SENTRY_DSN")!; +const frontend: string = Deno.env.get("FRONTEND")!; Sentry.init({ dsn: dsn, @@ -46,11 +52,13 @@ app.use(async (ctx: Context, next) => { app.use(Session.initMiddleware()); router - .post("/auth/github", (ctx) => - githubAuth(ctx, githubClientId, githubClientSecret) + .post( + "/auth/github", + (ctx) => githubAuth(ctx, githubClientId, githubClientSecret), ) - .post("/auth/gitlab", (ctx) => - gitlabAuth(ctx, gitlabClientId, gitlabClientSecret) + .post( + "/auth/gitlab", + (ctx) => gitlabAuth(ctx, gitlabClientId, gitlabClientSecret, frontend), ) .post("/auth/jwt", (ctx) => handleJwtAuthentication(ctx)) .get("/map", (ctx) => getSubdomains(ctx)) diff --git a/src/backend/utils/get-user.ts b/src/backend/utils/get-user.ts index bdc3f02..b795d6a 100644 --- a/src/backend/utils/get-user.ts +++ b/src/backend/utils/get-user.ts @@ -1,4 +1,7 @@ -export default async function getProviderUser(accessToken: string, provider: string) { +export default async function getProviderUser( + accessToken: string, + provider: string, +) { let apiUrl = ""; let authorizationHeader = ""; diff --git a/src/backend/utils/jwt.ts b/src/backend/utils/jwt.ts index 3d099df..34e2779 100644 --- a/src/backend/utils/jwt.ts +++ b/src/backend/utils/jwt.ts @@ -8,7 +8,7 @@ const key = await crypto.subtle.generateKey( async function createJWT(provider: string, githubId: string) { const token = await create({ alg: "HS512", typ: "JWT" }, { - [`${provider}Id`] : githubId, + [`${provider}Id`]: githubId, }, key); return token; } diff --git a/src/frontend/src/components/404.vue b/src/frontend/src/components/404.vue index de44904..6cee6b0 100644 --- a/src/frontend/src/components/404.vue +++ b/src/frontend/src/components/404.vue @@ -1,7 +1,10 @@ + \ No newline at end of file diff --git a/src/frontend/src/components/Home.vue b/src/frontend/src/components/Home.vue index 1fc4268..b9ebffe 100644 --- a/src/frontend/src/components/Home.vue +++ b/src/frontend/src/components/Home.vue @@ -12,9 +12,15 @@ const maps = await getMaps(user);
@@ -68,19 +74,38 @@ export default { selectedItem : null, } }, + methods: { + logoutAndRedirect() { + localStorage.clear(); + this.$router.push({ path: '/login' }); + } + } } + + \ No newline at end of file diff --git a/src/frontend/src/components/Login.vue b/src/frontend/src/components/Login.vue index 6c5235b..5d53cdb 100644 --- a/src/frontend/src/components/Login.vue +++ b/src/frontend/src/components/Login.vue @@ -54,10 +54,6 @@ export default { diff --git a/src/frontend/src/components/modal.vue b/src/frontend/src/components/modal.vue index e624854..e329174 100644 --- a/src/frontend/src/components/modal.vue +++ b/src/frontend/src/components/modal.vue @@ -1,6 +1,9 @@ @@ -102,14 +102,30 @@ export default { padding: 20px; max-width: 600px; width: 90%; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); - overflow-y: auto; /* Enable vertical scroll if content exceeds height */ - max-height: 80vh; /* Limit height and enable scroll if content exceeds viewport height */ + overflow-y: auto; + max-height: 80vh; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); + position: relative; } -.modal h5 { - font-size: 18px; - margin-bottom: 15px; +.close { + position: absolute; + top: 10px; + right: 10px; +} + +.close-button { + border: none; + background-color: transparent; + color: #777; + font-size: 24px; + width: 30px; + height: 30px; + cursor: pointer; +} + +.close-button:hover { + color: #333; } .input-field, @@ -165,17 +181,4 @@ export default { background-color: #2080f6; color: #fff; } - -.close { - position: absolute; - top: 10px; - right: 10px; -} - -.close-button { - border: none; - background-color: transparent; - font-size: 20px; - cursor: pointer; -} diff --git a/src/frontend/src/router/index.ts b/src/frontend/src/router/index.ts index 5b8a3bc..9030be8 100644 --- a/src/frontend/src/router/index.ts +++ b/src/frontend/src/router/index.ts @@ -19,9 +19,14 @@ const routes = [ from: RouteLocationNormalized, next: NavigationGuardNext, ) { - if (!localStorage.getItem("JWTUser") || !localStorage.getItem("provider")) next({ name: "Login" }); + if ( + !localStorage.getItem("JWTUser") || !localStorage.getItem("provider") + ) next({ name: "Login" }); else { - const user = await check_jwt(localStorage.getItem("JWTUser")!,localStorage.getItem("provider")!); + const user = await check_jwt( + localStorage.getItem("JWTUser")!, + localStorage.getItem("provider")!, + ); console.log(user); if (user == "") next({ name: "Login" }); else next(); diff --git a/src/frontend/src/utils/create.ts b/src/frontend/src/utils/create.ts index 415f69d..018b9d6 100644 --- a/src/frontend/src/utils/create.ts +++ b/src/frontend/src/utils/create.ts @@ -73,7 +73,10 @@ export async function create( if (secure_input(resource) === false) { return "failed"; } - const user = await check_jwt(localStorage.getItem("JWTUser")!, localStorage.getItem("provider")!); + const user = await check_jwt( + localStorage.getItem("JWTUser")!, + localStorage.getItem("provider")!, + ); const backend = import.meta.env.VITE_APP_BACKEND; const rootUrl = new URL(`${backend}/map`); const body = { diff --git a/src/frontend/src/utils/delete.ts b/src/frontend/src/utils/delete.ts index 087e62d..5361bc4 100644 --- a/src/frontend/src/utils/delete.ts +++ b/src/frontend/src/utils/delete.ts @@ -1,6 +1,9 @@ import { check_jwt } from "./authorize.ts"; export async function deleteSubDomain(subdomain: string) { - const user = await check_jwt(localStorage.getItem("JWTUser")!,localStorage.getItem("provider")!); + const user = await check_jwt( + localStorage.getItem("JWTUser")!, + localStorage.getItem("provider")!, + ); const backend = import.meta.env.VITE_APP_BACKEND; const rootUrl = new URL(`${backend}/mapdel`); const body = { diff --git a/src/frontend/src/utils/oauth-urls.ts b/src/frontend/src/utils/oauth-urls.ts index 6714074..0b8d69f 100644 --- a/src/frontend/src/utils/oauth-urls.ts +++ b/src/frontend/src/utils/oauth-urls.ts @@ -1,6 +1,6 @@ function oauthUrl(provider: string) { let rootUrl: string, clientId: string, redirectUri: string, scope: string; - const responseType = "code"; + const responseType = "code"; console.log(provider); if (provider === "github") { rootUrl = "https://github.com/login/oauth/authorize"; @@ -21,7 +21,7 @@ function oauthUrl(provider: string) { client_id: clientId, redirect_uri: redirectUri, scope: scope, - response_type: responseType + response_type: responseType, }; const qs = new URLSearchParams(options); return `${rootUrl}?${qs.toString()}`;