final v1

sushil-kamble · Oct 17, 2021 · 16e06be · 16e06be
commit 16e06be
Show file tree

Hide file tree

Showing 28 changed files with 2,874 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vue3-fire9.iml b/.idea/vue3-fire9.iml
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "module": "esnext",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["components/*"]
+    }
+  },
+  "include": ["src/**/*.vue", "src/**/*.js"]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vue3-fire9",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "firebase": "^9.1.2",
+    "vue": "^3.2.16",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.9.3",
+    "autoprefixer": "^10.3.7",
+    "postcss": "^8.3.9",
+    "tailwindcss": "^2.2.17",
+    "vite": "^2.6.4"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="bg-gray-200">
+    <Navbar class="mb-4 py-4 px-2 md:px-0 w-full md:w-10/12 mx-auto" />
+  </div>
+
+  <div class="container mx-auto px-2 md:px-0">
+    <router-view v-slot="{ Component, route }">
+      <transition name="slide" mode="out-in">
+        <component :is="Component" :key="route.path" />
+      </transition>
+    </router-view>
+  </div>
+</template>
+
+<script>
+import Navbar from "./components/Navbar.vue";
+export default {
+  name: "App",
+  components: {
+    Navbar,
+  },
+};
+</script>
+
+<style scoped>
+.slide-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-leave-active {
+  transition: all 0.2s ease-out;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateX(-30%);
+  opacity: 0;
+}
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <button
+      class="t-btn bg-blue-500 hover:bg-blue-700 text-white"
+      type="button"
+      v-on:click="toggleModal()"
+      @focusout="showModal = false"
+      tabindex="0"
+    >
+      {{ buttonName }}
+    </button>
+    <transition name="bounce">
+      <div
+        v-if="showModal"
+        class="
+          w-11/12
+          mx-auto
+          md:w-1/2
+          overflow-x-hidden overflow-y-auto
+          fixed
+          inset-0
+          z-50
+          items-center
+          flex
+        "
+      >
+        <div class="relative w-auto my-6 mx-auto max-w-3xl">
+          <!--content-->
+          <div
+            class="
+              border-0
+              rounded-lg
+              shadow-lg
+              relative
+              flex flex-col
+              w-full
+              bg-white
+              outline-none
+              focus:outline-none
+            "
+          >
+            <!--header-->
+            <div
+              class="
+                flex
+                items-start
+                justify-between
+                p-5
+                border-b border-solid border-blueGray-200
+                rounded-t
+              "
+            >
+              <h3 class="text-3xl font-semibold">{{ title }}</h3>
+            </div>
+            <!--body-->
+            <div class="relative p-6 flex-auto">
+              <p class="my-4 text-blueGray-500 text-lg leading-relaxed">
+                {{ description }}
+              </p>
+            </div>
+            <!--footer-->
+            <div
+              class="
+                flex
+                items-center
+                justify-end
+                p-6
+                border-t border-solid border-blueGray-200
+                rounded-b
+              "
+            >
+              <button
+                class="t-btn bg-red-500 hover:bg-red-700 text-white mr-3"
+                type="button"
+                v-on:click="showModal = false"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    <div v-if="showModal" class="opacity-50 fixed inset-0 z-40 bg-black"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { buttonName: String, title: String, description: String },
+  name: "Dailog",
+  data() {
+    return {
+      showModal: false,
+    };
+  },
+  methods: {
+    toggleModal: function () {
+      this.showModal = !this.showModal;
+    },
+  },
+  setup() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.bounce-enter-active {
+  animation: bounce-in 0.3s;
+}
+.bounce-leave-active {
+  animation: bounce-in 0.3s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    class="animate-spin -ml-1 mr-3"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div v-if="user" class="flex justify-between">
+      <ul class="flex">
+        <li class="mr-6">
+          <router-link
+            class="text-gray-700 hover:text-gray-800"
+            :to="{ name: 'Home' }"
+            >Home
+          </router-link>
+        </li>
+        <li class="mr-6">
+          <router-link
+            class="text-gray-700 hover:text-gray-800"
+            :to="{ name: 'Database' }"
+            >Database
+          </router-link>
+        </li>
+      </ul>
+      <ul>
+        <li
+          class="text-red-500 hover:text-red-800 cursor-pointer px-2"
+          @click="signOutUser"
+        >
+          Logout
+        </li>
+      </ul>
+    </div>
+    <ul class="flex" v-else>
+      <li class="mr-6">
+        <router-link
+          class="text-gray-700 hover:text-gray-800"
+          :to="{ name: 'Login' }"
+          >Login
+        </router-link>
+      </li>
+      <li class="mr-6">
+        <router-link
+          class="text-gray-700 hover:text-gray-800"
+          :to="{ name: 'SignUp' }"
+          >Sign Up
+        </router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { useAuthState, useSignOut } from "../firebase";
+import { useRouter } from "vue-router";
+export default {
+  setup() {
+    const { user } = useAuthState();
+    const router = useRouter();
+    const signOutUser = async () => {
+      await useSignOut();
+      await router.replace("/login");
+    };
+    return { user, signOutUser };
+  },
+};
+</script>