From 7ccd093597077186fcc95e806a59e23ff61e78e3 Mon Sep 17 00:00:00 2001
From: Abhijna Raghavendra <a_raghavendra@ma.iitr.ac.in>
Date: Mon, 26 Feb 2024 23:50:42 +0530
Subject: [PATCH 1/2] feat: make stuff look good

---
 src/frontend/src/components/Login.vue       | 182 ++++++++++++++--
 src/frontend/src/components/deletemodal.vue | 141 ++++++------
 src/frontend/src/components/modal.vue       | 226 +++++++++++---------
 src/frontend/src/style.css                  |   4 +-
 4 files changed, 368 insertions(+), 185 deletions(-)

diff --git a/src/frontend/src/components/Login.vue b/src/frontend/src/components/Login.vue
index a28fd32..11bc9b3 100644
--- a/src/frontend/src/components/Login.vue
+++ b/src/frontend/src/components/Login.vue
@@ -1,21 +1,171 @@
+<template>
+  <header>
+    <nav>
+      <div class="nav-wrapper">
+        <p class="brand">Domain Forge</p>
+        <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">
+            <a :href="githubUrl()"><button class="login-button">Login with Github</button></a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+  <div id="container">
+    <div class="grid-background"></div>
+    <main>
+      <h1 class="main-title">Empower your online presence with Domain Forge</h1>  
+      <h2><span class="highlight">Subdomain generation</span> integrated with robust <span class="highlight">hosting infrastructure</span> for seamless website management</h2>
+    </main>
+  </div>
+  <footer>
+    <p>Made with ❤️ by MDG Space</p>
+  </footer>
+</template>
+
 <script setup>
 import { githubUrl } from '../utils/github-url';
-import { authorize } from '../utils/authorize'
+import { authorize } from '../utils/authorize';
 import { useRouter } from "vue-router";
-const code = useRouter().currentRoute.value.query.code
-console.log(code);
+
+const code = useRouter().currentRoute.value.query.code;
 authorize(code);
 </script>
-<template>
-  <div id="container">
-    <div id="login-heading">
-      <h1>Domain Forge</h1>
-    </div>
-    <div id="login-link">
-      <a :href="githubUrl()"><button>Login with Github</button></a>
-    </div>
-    <div id="login-link">
-      <a :href="githubUrl()"><button>Login with Gitlab</button></a>
-    </div>
-  </div>
-</template>
+
+<style scoped>
+body {
+  overflow: hidden; 
+  margin: 0; 
+}
+
+nav {
+  width: 100%; 
+  position: fixed; 
+  top: 0;
+}
+
+#container {
+  position: relative;
+  text-align: center;
+  height: 63.5vh;
+}
+
+.grid-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+  background-size: 50px 50px;
+}
+
+header {
+  margin-bottom: 20px;
+}
+
+.nav-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px; 
+}
+
+.brand {
+  margin: 0;
+  font-size: 24px;
+}
+
+.nav-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.nav-links li {
+  margin-right: 20px;
+}
+
+.nav-links li:last-child {
+  margin-right: 0;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+  padding: 10px; 
+}
+
+.login-button {
+  padding: 8px 4px;
+  font-size: 14px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.login-button:hover {
+  background-color: #0056b3;
+}
+
+main {
+  height: 100%; 
+}
+
+h1.main-title {
+  margin-top: 100px; 
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 20px 0;
+}
+
+footer p {
+  margin: 0;
+  text-align: center;
+}
+
+
+.highlight {
+  position: relative;
+  color: #007bff;
+  font-weight: bold;
+}
+
+.highlight::before,
+.highlight::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 2px;
+  background-color: #007bff; 
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.highlight::before {
+  transform-origin: left;
+}
+
+.highlight::after {
+  transform-origin: right;
+}
+
+.highlight:hover::before,
+.highlight:hover::after {
+  transform: scaleX(1);
+}
+</style>
diff --git a/src/frontend/src/components/deletemodal.vue b/src/frontend/src/components/deletemodal.vue
index e8076a9..cc4f6d8 100644
--- a/src/frontend/src/components/deletemodal.vue
+++ b/src/frontend/src/components/deletemodal.vue
@@ -1,60 +1,49 @@
-  <template>
-    <div class="modal-overlay" v-if="selectedItem != null">
-      <div class="modal">
-        <h5>Delete Item</h5>
-        <p>Are you sure you want to delete this item?</p>
-        <p>Subdomain: {{ selectedItem.subdomain }}</p>
-        <p>Resource Type: {{ selectedItem.resource_type }}</p>
-        <p>Resource: {{ selectedItem.resource }}</p>
-      <table style="width: 100%;">
-        <tr>
-          <td style="text-align: center;"><button style="background-color: #ffffff; color: #2080F6;" @click="$emit('close-modal')">Cancel</button></td>
-          <td style="text-align: center;"><button @click="deleteItem">Delete</button></td>
-        </tr>
-      </table>
-      </div>
-      <div class="close">
-        <button style="width: 20px;background-color: #ffffff; color: #121212; " @click="$emit('close-modal')">X</button>
+<template>
+  <div class="modal-overlay" v-if="selectedItem">
+    <div class="modal">
+      <h5>Delete Item</h5>
+      <p>Are you sure you want to delete this item?</p>
+      <p>Subdomain: {{ selectedItem.subdomain }}</p>
+      <p>Resource Type: {{ selectedItem.resource_type }}</p>
+      <p>Resource: {{ selectedItem.resource }}</p>
+      <div class="button-container">
+        <button class="cancel-button" @click="closeModal">Cancel</button>
+        <button class="delete-button" @click="deleteItem">Delete</button>
       </div>
     </div>
-  </template>
-  
-  <script>
-import { deleteSubDomain } from '../utils/delete.ts'
+    <div class="close">
+      <button class="close-button" @click="closeModal">X</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { deleteSubDomain } from '../utils/delete.ts';
 
-  export default {
-    props: {
-      selectedItem: {
-        type: Object,
-        required: true
-      }
+export default {
+  props: {
+    selectedItem: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    deleteItem() {
+      console.log(`Deleting item: ${JSON.stringify(this.selectedItem)}`);
+      deleteSubDomain(this.selectedItem.subdomain).then((response) => {
+        console.log(response);
+        window.location.reload();
+      });
+      this.closeModal();
     },
-    methods: {
-      deleteItem() {
-        console.log(`Deleting item: ${JSON.stringify(this.selectedItem)}`);
-        deleteSubDomain(this.selectedItem.subdomain).then((response) => {
-        console.log(response)
-        window.location.reload()
-      })
-        this.$emit('close-modal');
-      }
+    closeModal() {
+      this.$emit('close-modal');
     }
-  };
-  </script>
+  }
+};
+</script>
 
 <style scoped>
-.subdomain {
-  width: 75%;
-}
-
-.dropdown {
-  width: 100%;
-}
-
-.resource-link {
-  width: 100%;
-}
-
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -63,7 +52,8 @@ import { deleteSubDomain } from '../utils/delete.ts'
   right: 0;
   display: flex;
   justify-content: center;
-  background-color: #00000050;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .modal {
@@ -72,35 +62,44 @@ import { deleteSubDomain } from '../utils/delete.ts'
   height: 60%;
   width: 600px;
   margin-top: 8%;
-  padding: 10px 0;
+  padding: 20px;
   border-radius: 20px;
 }
 
 .close {
-  margin: 9% 0 0 15px;
-  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  right: 10px;
 }
 
-p {
-  font-size: 16px;
-  color: #121212;
-  margin: 30px 25px;
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
 }
 
-.modal h5 {
-  font-size: 20px;
-  margin: 20px 20px;
+.cancel-button,
+.delete-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
 }
 
-label {
-  margin: 5px 5px;
+.cancel-button {
+  background-color: #ccc;
+  color: #000;
 }
 
-button {
-  text-align: center;
-  padding: 2%;
-  margin: 1%;
-  font-size: 14px;
-  margin-top: 30px;
-  width: 250px;
-}</style>
+.delete-button {
+  background-color: #2080f6;
+  color: #fff;
+}
+
+.close-button {
+  border: none;
+  background-color: transparent;
+  font-size: 20px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/frontend/src/components/modal.vue b/src/frontend/src/components/modal.vue
index 7449056..e624854 100644
--- a/src/frontend/src/components/modal.vue
+++ b/src/frontend/src/components/modal.vue
@@ -1,99 +1,89 @@
-
 <template>
   <div class="modal-overlay">
     <div class="modal">
       <h5>Enter the details for creating your subdomain:</h5>
-      <p>Subdomain:<br><input class="subdomain" v-model="subdomain" />.df.mdgspace.org</p>
+      <p>Subdomain:<br><input class="input-field" v-model="subdomain" />.df.mdgspace.org</p>
       <p>Resource Type:<br>
         <select class="dropdown" v-model="resource_type">
-          <option>URL</option>
-          <option>PORT</option>
-          <option>GITHUB</option>
+          <option v-for="option in resourceTypes" :key="option">{{ option }}</option>
         </select>
       </p>
-      <p>Resource:<br><input class="resource-link" v-model="resource" /></p>
-      <p v-show="resource_type =='GITHUB'">Your env contents in format<br>key1=value1<br>key2=value2<br>
-        <label for="static">Do you have static content on your repo?</label>
-        <br>
-<label for="radio">Yes/No</label>
-        <input name="radio" type="radio" value="Yes" v-model="static_content">
-        <input name="radio" type="radio" value="No" v-model="static_content">
-        <textarea name="env" id="" cols="50" rows="10" v-model="env_content" value="key1=value1"></textarea>
-        </p>
-        <p v-show="static_content=='No'">
-          Stack:<br>
+      <p>Resource:<br><input class="input-field" v-model="resource" /></p>
+      <div v-if="resource_type === 'GITHUB'" class="github-section">
+        <p>Your env contents:</p>
+        <textarea class="code-textarea" cols="50" rows="10" v-model="env_content"></textarea>
+        <div class="static-content">
+          <label for="static">Do you have static content on your repo?</label><br>
+          <input name="radio" type="radio" value="Yes" v-model="static_content"> Yes
+          <input name="radio" type="radio" value="No" v-model="static_content"> No
+        </div>
+        <div v-if="static_content === 'No'" class="stack-section">
+        <p>Stack:</p>
         <select class="dropdown" v-model="stack">
-          <option>Python</option>
-          <option>NodeJS</option>
+          <option v-for="option in stacks" :key="option">{{ option }}</option>
         </select>
-        <br>
-          Port:<br><input v-model="port" />
-          <textarea name="build_cmds" id="" cols="50" rows="10" v-model="build_cmds" value="Enter each build command on a new line  assuming you are inside the project directory"></textarea>
-      </p>
-      <table style="width: 100%;">
-        <tr>
-          <td style="text-align: center;"><button style="background-color: #ffffff; color: #2080F6;" @click="$emit('close-modal')">Cancel</button></td>
-          <td style="text-align: center;"><button @click="subimitForm()">Submit</button></td>
-        </tr>
-      </table>
+        <p>Port:<br><input class="input-field" v-model="port" /></p>
+        <p>Build Commands:<br><textarea class="textarea-field" cols="50" rows="10" v-model="build_cmds"></textarea></p>
+      </div>
+      </div>
+      <div class="button-container">
+        <button class="cancel-button" @click="closeModal">Cancel</button>
+        <button class="submit-button" @click="submitForm">Submit</button>
+      </div>
     </div>
     <div class="close">
-      <button style="width: 20px;background-color: #ffffff; color: #121212; " @click="$emit('close-modal')">X</button>
+      <button class="close-button" @click="closeModal">X</button>
     </div>
   </div>
 </template>
+
 <script>
 import { create } from '../utils/create.ts';
+
 export default {
   data() {
     return {
-      subdomain: "",
-      resource_type: "",
-      resource: "",
-      env_content: "",
-      static_content:"False",
-      port:"",
-      stack:"",
-      build_cmds:"",
-
-
+      subdomain: '',
+      resource_type: '',
+      resource: '',
+      env_content: 'key1 = value1', // Default prompt text
+      static_content: 'No',
+      port: '',
+      stack: '',
+      build_cmds: '',
+      resourceTypes: ['URL', 'PORT', 'GITHUB'],
+      stacks: ['Python', 'NodeJS']
     };
   },
   methods: {
-    subimitForm() {
-      console.log(this.subdomain, this.resource_type, this.resource)
-      create(this.subdomain, this.resource_type, this.resource,this.env_content,this.static_content,this.port,this.stack,this.build_cmds).then((res) => {
-        console.log(res);
-        if(res=="Submitted"){
-        this.$emit('close-modal');
-        window.location.reload();
-        }else{
-          this.$emit('close-modal');
-          alert("failed to create subdomain")
-        setTimeout(() => {
-          window.location.reload();
-        }, 1000);
-
-        }
-      })
-
+    submitForm() {
+      console.log(this.subdomain, this.resource_type, this.resource);
+      create(this.subdomain, this.resource_type, this.resource, this.env_content, this.static_content, this.port, this.stack, this.build_cmds)
+        .then((res) => {
+          console.log(res);
+          if (res === 'Submitted') {
+            this.closeModalAndReload();
+          } else {
+            this.closeModal();
+            alert('Failed to create subdomain');
+            setTimeout(() => {
+              window.location.reload();
+            }, 1000);
+          }
+        });
+    },
+    closeModal() {
+      this.$emit('close-modal');
+    },
+    closeModalAndReload() {
+      this.closeModal();
+      window.location.reload();
     }
   }
 };
 </script>
-<style scoped>
-.subdomain {
-  width: 75%;
-}
-
-.dropdown {
-  width: 100%;
-}
-
-.resource-link {
-  width: 100%;
-}
 
+<style scoped>
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -102,46 +92,90 @@ export default {
   right: 0;
   display: flex;
   justify-content: center;
-  background-color: #000000da;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .modal {
-  text-align: center;
   background-color: #ffffff;
-  height: 75%;
-  width: 600px;
-  margin-top: 8%;
-  padding: 10px 0;
-  border-radius: 20px;
-  overflow-y: scroll;
+  border-radius: 10px;
+  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 */
 }
 
-.close {
-  margin: 9% 0 0 15px;
-  cursor: pointer;
+.modal h5 {
+  font-size: 18px;
+  margin-bottom: 15px;
 }
 
-p {
-  font-size: 16px;
-  color: #121212;
-  margin: 30px 25px;
+.input-field,
+.dropdown,
+.textarea-field,
+.code-textarea {
+  width: 100%;
+  margin-bottom: 15px;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 14px;
 }
 
-.modal h5 {
-  font-size: 20px;
-  margin: 20px 20px;
+.code-textarea {
+  font-family: 'Courier New', Courier, monospace;
+  background-color: #f7f7f7;
 }
 
-label {
-  margin: 5px 5px;
+.github-section {
+  margin-top: 15px;
 }
 
-button {
-  text-align: center;
-  padding: 2%;
-  margin: 1%;
-  font-size: 14px;
+.stack-section {
+  margin-top: 15px;
+}
+
+.static-content {
   margin-top: 10px;
-  width: 250px;
-}</style>
-  
\ No newline at end of file
+  margin-bottom: 15px;
+}
+
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+
+.cancel-button,
+.submit-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.cancel-button {
+  background-color: #ccc;
+  color: #000;
+}
+
+.submit-button {
+  background-color: #2080f6;
+  color: #fff;
+}
+
+.close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.close-button {
+  border: none;
+  background-color: transparent;
+  font-size: 20px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/frontend/src/style.css b/src/frontend/src/style.css
index 1b316bc..3382902 100644
--- a/src/frontend/src/style.css
+++ b/src/frontend/src/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');
 * {
   text-align: left;
   padding: 0;
@@ -13,7 +13,7 @@
   background-color: #ffffff;
   overflow-y: scroll;
   font-synthesis: none;
-  font-family: 'Chakra Petch', sans-serif;
+  font-family: 'Space Grotesk', sans-serif;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

From 3e76d4d9fd0a8078aa2b1c0f744f28683130ee51 Mon Sep 17 00:00:00 2001
From: Abhijna Raghavendra <a_raghavendra@ma.iitr.ac.in>
Date: Tue, 27 Feb 2024 00:41:07 +0530
Subject: [PATCH 2/2] feat: add styles to home page

---
 src/frontend/src/components/Home.vue | 79 +++++++++++++++++++++++++---
 src/frontend/src/style.css           |  3 ++
 2 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/Home.vue b/src/frontend/src/components/Home.vue
index b6a5a98..f789864 100644
--- a/src/frontend/src/components/Home.vue
+++ b/src/frontend/src/components/Home.vue
@@ -8,15 +8,22 @@ const maps = await getMaps(user);
 </script>
 
 <template>
-  <div id="navbar">
-    <h5>Hey {{ user }} !</h5>
-  </div>
+  <header>
+    <nav>
+      <div class="nav-wrapper">
+        <p class="brand">Domain Forge</p>
+        <ul class="nav-links">
+          <li><a href="https://github.com/mdgspace/domain-forge/blob/master/docs/users/README.md">Docs</a></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
   <div id="home-container">
     <div id="home-heading">
-      <h3>Your subdomains: </h3>
+      <h3>{{ user }}'s subdomains: </h3>
     </div>
     <br>
-    <table id="tableComponent" style="display:table; width:100%;">
+    <table id="tableComponent" style="display:table; width:100%; padding: 0px 30px">
       <thead>
         <tr>
           <th v-for="field in fields" style="padding:5px;background-color: #ffffff; color: #121212;border-bottom: 1px solid #121212; border-top:1px solid #121212;font-weight: 900;">
@@ -44,11 +51,13 @@ const maps = await getMaps(user);
     <modal v-show="showModal" @close-modal="showModal = false" />
     <div style="text-align: center;"><button @click="showModal = true">+ Add</button></div>
   </div>
+  <footer>
+    <p>Made with ❤️ by MDG Space</p>
+  </footer>
 </template>
 <script>
 import modal from './modal.vue'
 import deletemodal from './deletemodal.vue'
-import { deleteSubDomain } from '../utils/delete.ts'
 export default {
   components: { modal,deletemodal },
   data() {
@@ -60,3 +69,61 @@ export default {
   },
 }
 </script>
+<style scoped>
+
+nav {
+  width: 100%; 
+  position: fixed; 
+  top: 0;
+}
+
+header {
+  margin-bottom: 20px;
+}
+.nav-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px; 
+}
+
+.brand {
+  margin: 0;
+  font-size: 24px;
+}
+
+.nav-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.nav-links li {
+  margin-right: 20px;
+}
+
+.nav-links li:last-child {
+  margin-right: 0;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+  padding: 10px; 
+}
+footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  background-color: #ffffff;
+  padding: 20px 0;
+}
+
+footer p {
+  margin: 0;
+  text-align: center;
+}
+</style>
diff --git a/src/frontend/src/style.css b/src/frontend/src/style.css
index 3382902..3454b6d 100644
--- a/src/frontend/src/style.css
+++ b/src/frontend/src/style.css
@@ -22,6 +22,8 @@
 
 body {
   display: inline;
+  overflow: hidden; 
+  margin: 0; 
 }
 
 #app {
@@ -51,6 +53,7 @@ body {
   display:flex;
   flex-direction: column;
   width:40rem;
+  margin-top: 30px;
 }
 #home-container{
   display:flex;