hosting, icons, signin with google

sushil-kamble · Nov 20, 2021 · dc0878a · dc0878a
1 parent 16e06be
commit dc0878a
Show file tree

Hide file tree

Showing 25 changed files with 730 additions and 291 deletions.
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "vueauthfire"
+  }
+}
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link href="https://fonts.googleapis.com/css2?family=Goldman&family=Ubuntu:wght@400&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>

diff --git a/package.json b/package.json
@@ -8,6 +8,10 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "firebase": "^9.1.2",
     "vue": "^3.2.16",
     "vue-router": "4"

diff --git a/src/App.vue b/src/App.vue
@@ -1,25 +1,43 @@
 <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
+    v-if="isLoading"
+    class="flex items-center justify-center"
+    style="height: 80vh"
+  >
+    <Loading class="h-16 w-16" />
   </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 v-else>
+    <Navbar />
+    <div class="main-set">
+      <router-view v-slot="{ Component, route }">
+        <transition name="slide" mode="out-in">
+          <component :is="Component" :key="route.path" />
+        </transition>
+      </router-view>
+    </div>
   </div>
 </template>
 
 <script>
+import { defineComponent, ref } from "@vue/runtime-core";
 import Navbar from "./components/Navbar.vue";
-export default {
+import Loading from "./components/Loading.vue";
+export default defineComponent({
   name: "App",
   components: {
     Navbar,
+    Loading,
+  },
+  setup(props) {
+    const isLoading = ref(true);
+    setTimeout(() => {
+      isLoading.value = false;
+    }, 1000);
+    return {
+      isLoading,
+    };
   },
-};
+});
 </script>
 
 <style scoped>

diff --git a/src/assets/index.css b/src/assets/index.css
@@ -0,0 +1,77 @@
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  background-color: #22272e;
+  color: white;
+  font-family: Ubuntu, sans-serif;
+}
+
+.main-set {
+  @apply lg:container lg:mx-auto md:px-20 2xl:px-40;
+}
+
+@layer base {
+  h1 {
+    @apply text-xl font-heading font-bold md:text-3xl;
+  }
+  h2 {
+    @apply font-heading text-xl md:text-2xl;
+  }
+  h3 {
+    @apply font-text text-base md:text-lg;
+  }
+  h4 {
+    @apply font-heading text-xs md:text-lg;
+  }
+  h5 {
+    @apply font-text text-xs md:text-base;
+  }
+}
+
+hr {
+  @apply border-primary mt-1 my-4;
+}
+
+/* AUTH */
+.section {
+  @apply my-4 md:my-20 w-11/12 md:w-2/3 lg:w-3/5 mx-auto;
+}
+.auth-form {
+  @apply bg-secondary shadow-md rounded p-6;
+}
+/* AUTH */
+
+/* Pages */
+.page-pos {
+  @apply my-4 md:my-20;
+}
+/* Pages */
+
+.router-link-active {
+  @apply bg-primary;
+}
+
+.t-input {
+  @apply shadow
+    appearance-none
+    border
+    rounded
+    w-full
+    p-3
+    text-black
+    leading-tight
+    focus:outline-none;
+}
+
+.t-btn {
+  @apply font-bold py-2 px-4 rounded focus:outline-none ease-linear
+  transition-all
+  duration-150;
+}
+
+.transition-effect {
+  @apply transition duration-500 ease-in-out;
+}
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
@@ -1,12 +1,13 @@
 <template>
   <div>
     <button
-      class="t-btn bg-blue-500 hover:bg-blue-700 text-white"
+      class="t-btn bg-primary hover:bg-opacity-80"
       type="button"
       v-on:click="toggleModal()"
       @focusout="showModal = false"
       tabindex="0"
     >
+      <font-awesome-icon :icon="['fas', 'info-circle']" class="mr-1" />
       {{ buttonName }}
     </button>
     <transition name="bounce">
@@ -34,7 +35,7 @@
               relative
               flex flex-col
               w-full
-              bg-white
+              bg-secondary
               outline-none
               focus:outline-none
             "
@@ -50,7 +51,7 @@
                 rounded-t
               "
             >
-              <h3 class="text-3xl font-semibold">{{ title }}</h3>
+              <h1>{{ title }}</h1>
             </div>
             <!--body-->
             <div class="relative p-6 flex-auto">

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
@@ -0,0 +1,107 @@
+<template>
+  <!-- Profile dropdown -->
+  <div class="ml-3 relative">
+    <div>
+      <button
+        type="button"
+        class="text-lg h-8 w-8 rounded-full hover:bg-primary"
+        aria-expanded="false"
+        aria-haspopup="true"
+        @click="toggle"
+      >
+        <font-awesome-icon :icon="['fas', 'bars']" class="" />
+      </button>
+    </div>
+    <transition name="fade">
+      <div
+        v-if="show"
+        class="
+          origin-top-right
+          absolute
+          right-0
+          mt-2
+          w-32
+          rounded-md
+          shadow-lg
+          py-1
+          bg-gray-800
+          text-white
+          font-heading
+        "
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="user-menu-button"
+        tabindex="-1"
+      >
+        <router-link
+          v-for="(item, n) in user ? menuAuth : menuNoAuth"
+          :key="n"
+          :to="item.link"
+          class="block px-4 py-2 text-sm"
+          @click="toggle"
+        >
+          {{ item.name }}
+        </router-link>
+        <p
+          v-if="user"
+          class="px-4 py-2 text-sm cursor-pointer text-red-500"
+          @click="signOutUser"
+        >
+          Logout
+        </p>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { useAuthState, useSignOut } from "@/firebase";
+import { defineComponent, ref } from "vue";
+import { useRouter } from "vue-router";
+export default defineComponent({
+  name: "Menu",
+  setup() {
+    const { user } = useAuthState();
+    const menuAuth = [
+      { name: "Home", link: { name: "Home" } },
+      { name: "Profile", link: { name: "Profile" } },
+      { name: "Database", link: { name: "Database" } },
+    ];
+    const menuNoAuth = [
+      { name: "Home", link: { name: "Home" } },
+      { name: "Login", link: { name: "Login" } },
+      { name: "Signup", link: { name: "SignUp" } },
+    ];
+
+    const show = ref(false);
+    const toggle = () => {
+      show.value = !show.value;
+    };
+
+    const router = useRouter();
+
+    const signOutUser = async () => {
+      toggle();
+      await useSignOut();
+      await router.replace({ name: "Login" });
+    };
+
+    return { show, toggle, user, signOutUser, menuAuth, menuNoAuth };
+  },
+});
+</script>
+
+<style lang="postcss" scoped>
+.menu-button {
+  @apply py-2 px-4 ml-2 font-heading rounded bg-primary
+  hover:bg-opacity-75;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>