rfac: adjust navbar styling in home page

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=...
+SENTRY_DSN=...
+FRONTEND=...

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",

src/backend/dependencies.ts

@@ -17,9 +17,10 @@ export {
   create,
   exec,
   isHttpError,
+  oakCors,
   Router,
   Sentry,
   Session,
   Status,
-  verify, oakCors,
+  verify,
 };

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);

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))

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 = "";
 

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;
 }

src/frontend/src/components/404.vue

@@ -1,7 +1,10 @@
 <template>
-    <div id="container">
-      <h1>404</h1>
-      <h2>Page Not Found</h2>
-      <h4>The page you're looking for doesn't exist</h4>
-    </div>
+  <div id="container">
+    <h1>404</h1>
+    <h2>Page Not Found</h2>
+    <h4>The page you're looking for doesn't exist</h4>
+  </div>
 </template>
+<script>
+export default {};
+</script>

src/frontend/src/components/Home.vue

@@ -12,9 +12,15 @@ const maps = await getMaps(user);
   <header>
     <nav>
       <div class="nav-wrapper">
-        <p class="brand">Domain Forge</p>
+        <div class="brand-container">
+          <img src="/df-logo.png" class="brand-logo" alt="logo">
+          <p class="brand">Domain Forge</p>
+        </div>
         <ul class="nav-links">
           <li><a href="https://github.com/mdgspace/domain-forge/blob/master/docs/users/README.md">Docs</a></li>
+          <li class="login-provider">
+            <button @click="logoutAndRedirect" class="logout-button">Logout</button>
+          </li>
         </ul>
       </div>
     </nav>
@@ -68,19 +74,38 @@ export default {
       selectedItem : null,
     }
   },
+  methods: {
+    logoutAndRedirect() {
+      localStorage.clear();
+      this.$router.push({ path: '/login' });
+    }
+  }
 }
 </script>
 <style scoped>
+.brand-logo {
+  height: 30px;
+  margin-right: 10px; 
+}
+
+body {
+  overflow: hidden; 
+  margin: 0; 
+}
 
 nav {
   width: 100%; 
   position: fixed; 
   top: 0;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 header {
   margin-bottom: 20px;
 }
+
 .nav-wrapper {
   display: flex;
   justify-content: space-between;
@@ -92,7 +117,10 @@ header {
   margin: 0;
   font-size: 24px;
 }
-
+.brand-container {
+  display: flex;
+  align-items: center;
+}
 .nav-links {
   list-style: none;
   margin: 0;
@@ -115,16 +143,33 @@ header {
   font-weight: bold;
   padding: 10px; 
 }
+
+.logout-button {
+  width: 10rem;
+  padding: 8px 4px;
+  font-size: 14px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.logout-button:hover {
+  background-color: #0056b3;
+}
+
 footer {
-  position: fixed;
-  bottom: 0;
   width: 100%;
   background-color: #ffffff;
   padding: 20px 0;
+  bottom: 0;
 }
 
 footer p {
   margin: 0;
   text-align: center;
 }
-</style>
+
+</style>

src/frontend/src/components/Login.vue

@@ -54,10 +54,6 @@ export default {
 </script>
 
 <style scoped>
-button {
-  width: 10rem;
-}
-
 .brand-logo {
   height: 30px;
   margin-right: 10px; 
@@ -136,6 +132,7 @@ header {
 }
 
 .login-button {
+  width: 10rem;
   padding: 8px 4px;
   font-size: 14px;
   background-color: #007bff;
@@ -162,6 +159,8 @@ footer {
   width: 100%;
   background-color: #ffffff;
   padding: 20px 0;
+  align-items: center;
+  align-self: center;
 }
 
 footer p {