codescalers · samaradel · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024 · Dec 4, 2024
@@ -1,8 +1,4 @@
 PWD := $(shell pwd)
 
-swagger: 
-	swagger validate swagger.yml
-	docker run -i yousan/swagger-yaml-to-html < swagger.yml > docs/swagger.html
-
 run: 
 	docker compose up
@@ -13,6 +13,7 @@ cloud4students aims to help students deploy their projects on Threefold Grid.
 - First create `config.json` check [configuration](#configuration)
 
 - Change `VITE_API_ENDPOINT` in docker-compose.yml to server api url for example `http://localhost:3000/v1`
+- Change `STRIPE_PUBLISHER_KEY` in docker-compose.yml to your stripe publisher key (can get it from stripe dashboard)
 
 To build backend and frontend images
 

@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <script src="./config.js"></script>
-
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Cloud for Students</title>
-  </head>
-
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8">
+        <link rel="icon" href="/favicon.ico">
+        <script src="./config.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Cloud for All</title>
+        <script src="https://js.stripe.com/v3/"></script>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.js"></script>
+    </body>
 </html>
@@ -9,16 +9,15 @@
     "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/vue-fontawesome": "^3.0.8",
     "@mdi/font": "7.4.47",
+    "@stripe/stripe-js": "^5.4.0",
+    "@vue-stripe/vue-stripe": "^4.5.0",
     "axios": "^1.7.2",
     "core-js": "^3.33.2",
-    "mitt": "^3.0.1",
+    "file-saver": "^2.0.5",
+    "jszip": "^3.10.1",
     "mosha-vue-toastify": "^1.0.23",
+    "pinia": "^2.3.1",
     "roboto-fontface": "*",
     "vite-plugin-eslint": "^1.8.1",
     "vue": "^3.5.10",

@@ -13,10 +13,17 @@ then
     exit 64
 fi
 
+if [ -z ${STRIPE_PUBLISHER_KEY+x} ]
+then
+    echo 'Error! $STRIPE_PUBLISHER_KEY is required.'
+    exit 64
+fi
+
 
 configs="
 window.configs = window.configs || {};
 window.configs.vite_app_endpoint = '$VITE_API_ENDPOINT';
+window.configs.stripe_publisher_key = '$STRIPE_PUBLISHER_KEY';
 "
 
 if [ -e $file ]

@@ -12,10 +12,16 @@ then
     exit 64
 fi
 
+if [ -z ${STRIPE_PUBLISHER_KEY+x} ]
+then
+    echo 'Error! $STRIPE_PUBLISHER_KEY is required.'
+    exit 64
+fi
 
 configs="
 window.configs = window.configs || {};
 window.configs.vite_app_endpoint = '$VITE_API_ENDPOINT';
+window.configs.stripe_publisher_key = '$STRIPE_PUBLISHER_KEY';
 "
 
 if [ -e $file ]

@@ -4,18 +4,22 @@
   </component>
 </template>
 
-<script>
+<script setup>
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 
-export default {
-  setup() {
-    const route = useRoute();
-    const layout = computed(() => {
-      const NoNavbar_layout = "No-Navbar";
-      return (route.meta.layout || NoNavbar_layout) + "-Layout";
-    });
-    return { layout };
-  },
-};
+const route = useRoute();
+
+const layout = computed(() => {
+  const routeLayout = route.meta.layout;
+  return routeLayout === "Default" ? "Default-Layout" : "No-Navbar-Layout";
+});
 </script>
+<style>
+body {
+  background-color: #212121;
+}
+.v-container--fluid {
+  max-width: 100% !important;
+}
+</style>
@@ -0,0 +1,27 @@
+<template>
+  <v-dialog v-model="dialog" max-width="800">
+    <template v-slot:activator="{ props: activatorProps }">
+      <BaseButton
+        v-bind="activatorProps"
+        class="my-5"
+        text="+ Add Card"
+        variant="outlined"
+      />
+    </template>
+
+    <PaymentCard @updateData="updateCards" @onClose="dialog = false" />
+  </v-dialog>
+</template>
+<script setup>
+import { ref } from "vue";
+import BaseButton from "@/components/Form/BaseButton.vue";
+import PaymentCard from "./PaymentCard.vue";
+
+const emit = defineEmits("updateData");
+const dialog = ref(false);
+
+function updateCards(data) {
+  if (!data) return;
+  emit("updateData", data);
+}
+</script>
@@ -0,0 +1,34 @@
+<template>
+  <v-alert
+    :density="density"
+    :text="text"
+    :title="title"
+    :type="type"
+    class="my-5 font-weight-bold"
+    :variant="variant"
+    v-bind="$attrs"
+  ></v-alert>
+</template>
+
+<script setup>
+defineProps({
+  density: {
+    type: String,
+    default: "compact",
+  },
+  text: {
+    type: String,
+    default: "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+  },
+  title: {
+    type: String,
+  },
+  type: {
+    type: String,
+  },
+  variant: {
+    type: String,
+    default: "flat",
+  },
+});
+</script>
@@ -0,0 +1,93 @@
+<template>
+  <v-row justify="center">
+    <v-col cols="12" md="4">
+      <v-card class="mx-auto" flat>
+        <div class="d-flex flex-no-wrap align-center">
+          <v-card-actions class="d-flex align-center justify-center">
+            <p>
+              Looking for a voucher? Simply let us know
+              <BaseButton
+                variant="outlined"
+                text="Apply for voucher"
+                class="text-capitalize ml-5"
+                icon="mdi-ticket-percent"
+                @click="dialog = true"
+              />
+            </p>
+          </v-card-actions>
+        </div>
+      </v-card>
+    </v-col>
+    <v-dialog v-model="dialog" max-width="550">
+      <v-card class="pa-3">
+        <v-card-title class="text-capitalize">Request new voucher</v-card-title>
+        <v-divider />
+        <v-card-text class="pa-3">
+          To help us process your request, please explain why you're applying
+          for the voucher
+        </v-card-text>
+        <v-form v-model="verify" @submit.prevent="getVoucher">
+          <BaseInput
+            class="my-2"
+            placeholder="Reason"
+            v-model="reason"
+            :rules="[required]"
+          />
+          <div class="d-flex justify-end">
+            <BaseButton
+              variant="outlined"
+              text="Cancel"
+              class="mr-2"
+              @click="dialog = false"
+            />
+            <BaseButton
+              type="submit"
+              color="secondary"
+              text="Request"
+              :rules="voucherRules"
+              :disabled="!verify"
+            />
+          </div>
+        </v-form>
+      </v-card>
+    </v-dialog>
+  </v-row>
+  <Toast ref="toast" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import BaseButton from "./Form/BaseButton.vue";
+import BaseInput from "./Form/BaseInput.vue";
+import userService from "@/services/userService";
+import Toast from "./Toast.vue";
+import { storeToRefs } from "pinia";
+import { useUserStore } from "@/store/UserStore";
+
+const dialog = ref(false);
+const reason = ref();
+const { user } = storeToRefs(useUserStore());
+const toast = ref();
+const verify = ref(false);
+
+function required(v) {
+  return !!v || "Field is required";
+}
+
+function getVoucher() {
+  if (!verify.value) return;
+  userService
+    .applyVoucher(user.value.balance, reason.value)
+    .then((response) => {
+      toast.value.toast(response.data.msg, "#4caf50");
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    })
+    .finally(() => {
+      reason.value = "";
+      dialog.value = false
+    });
+}
+</script>
@@ -1,57 +1,44 @@
 <template>
-  <v-dialog
-    v-model="dialog"
-    :max-width="options.width"
-    :style="{ zIndex: options.zIndex }"
-    @keydown.esc="cancel"
-  >
-    <v-card>
-      <v-toolbar dark :color="options.color" dense flat>
-        <v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
-      </v-toolbar>
-      <v-card-text v-show="!!message" class="pa-4">{{ message }}</v-card-text>
-      <v-card-actions class="pt-0">
-        <v-spacer></v-spacer>
-        <v-btn color="danger darken-1" text @click="agree">Yes</v-btn>
-        <v-btn color="grey" text @click="cancel">Cancel</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+  <v-card class="pa-2">
+    <v-card-title>{{ title }}</v-card-title>
+    <v-divider />
+    <v-card-text> {{ text }} </v-card-text>
+
+    <v-card-actions>
+      <v-spacer></v-spacer>
+
+      <BaseButton text="Cancel" @click="$emit('onClose')" variant="outlined" />
+
+      <BaseButton
+        :text="confirmText"
+        :color="color"
+        @click="$emit('confirm')"
+        :loading="loading"
+      />
+    </v-card-actions>
+  </v-card>
 </template>
 
-<script>
-export default {
-  data: () => ({
-    dialog: false,
-    resolve: null,
-    reject: null,
-    message: null,
-    title: null,
-    options: {
-      color: "primary",
-      width: 290,
-      zIndex: 999,
-    },
-  }),
-  methods: {
-    open(title, message, options) {
-      this.dialog = true;
-      this.title = title;
-      this.message = message;
-      this.options = Object.assign(this.options, options);
-      return new Promise((resolve, reject) => {
-        this.resolve = resolve;
-        this.reject = reject;
-      });
-    },
-    agree() {
-      this.resolve(true);
-      this.dialog = false;
-    },
-    cancel() {
-      this.resolve(false);
-      this.dialog = false;
-    },
+<script setup>
+import BaseButton from "@/components/Form/BaseButton.vue";
+
+defineProps({
+  title: { type: String, default: "Title here.." },
+  text: {
+    type: String,
+    default: "Text here..",
+  },
+  confirmText: {
+    type: String,
+    default: "Confirm",
+  },
+  color: {
+    type: String,
+    default: "secondary",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
   },
-};
+});
 </script>