logixode · logixode · May 20, 2021 · May 22, 2021 · May 26, 2021 · May 26, 2021
diff --git a/package.json b/package.json
@@ -9,17 +9,21 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "firebase": "^8.6.3",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
+    "vue-offline": "^2.0.8",
     "vue-router": "^3.2.0",
     "vue-tailwind": "^2.2.1",
+    "vue2-transitions": "^0.3.0",
+    "vuelidate": "^0.7.6",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss7-compat": "^2.1.2",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin- ": "~4.5.0",
+    "@vue/cli-plugin-pwa": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
@@ -34,4 +38,4 @@
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "vue-template-compiler": "^2.6.11"
   }
-}
+}
diff --git a/public/img/1.png b/public/img/1.png
diff --git a/public/img/2.png b/public/img/2.png
diff --git a/public/img/3.png b/public/img/3.png
diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,21 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+
+    <script src="https://use.fontawesome.com/3fead7a888.js"></script>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/src/App.vue b/src/App.vue
@@ -1,13 +1,90 @@
 <template>
-  <div id="app" class="h-screen">
-    <!-- <div id="nav" class="py-24">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div> -->
-    <router-view />
+  <div
+    id="app"
+    class="h-screen"
+    style="overflow-x: hidden; position: relative; width: 100vw"
+  >
+    <transition name="fade">
+      <modal :action="false" v-show="!isVerified">
+        <verifikasi type="gagal">Akun belum terverifikasi</verifikasi>
+        <p class="text-lg">
+          Silahkan cek email anda untuk melakukan verifikasi.
+        </p>
+        <div class="flex">
+          <div class="w-1/2 pr-2">
+            <button
+              @click="isVerified = true"
+              class="btn bg-gray-400 text-white mt-3 -mb-3 w-full"
+            >
+              Tutup
+            </button>
+          </div>
+          <div class="w-1/2 pl-2">
+            <button
+              @click="$router.go()"
+              class="btn btn-primary mt-3 w-full -mb-3"
+            >
+              Refresh
+            </button>
+          </div>
+        </div>
+      </modal>
+    </transition>
+
+    <transition name="fade">
+      <loading v-show="loading"></loading>
+    </transition>
+
+    <transition name="fade" v-if="isOffline">
+      <offline />
+    </transition>
+
+    <transition name="fade" v-else>
+      <router-view />
+    </transition>
   </div>
 </template>
 
+<script>
+import Offline from "@/components/Offline";
+import Verifikasi from "@/components/Verifikasi";
+import Modal from "@/components/Modal";
+import Loading from "@/components/Loading";
+
+export default {
+  components: {
+    Offline,
+    Verifikasi,
+    Modal,
+    Loading,
+  },
+  data: () => ({}),
+  mounted() {},
+
+  computed: {
+    loading() {
+      return this.$store.state.loading;
+    },
+    isVerified: {
+      get() {
+        return this.$store.state.verified;
+      },
+      set(val) {
+        this.$store.commit("isVerified", val);
+      },
+    },
+  },
+  watch: {
+    $route() {
+      this.changeTitleName();
+    },
+  },
+  created() {
+    this.changeTitleName();
+  },
+};
+</script>
+
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -29,4 +106,13 @@
 #nav a.router-link-exact-active {
   color: #42b983;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
diff --git a/src/assets/icon/Helmet.png b/src/assets/icon/Helmet.png
diff --git a/src/assets/icon/Pakaian.png b/src/assets/icon/Pakaian.png
diff --git a/src/assets/icon/Sepatu.png b/src/assets/icon/Sepatu.png
diff --git a/src/assets/icon/pembayaran.png b/src/assets/icon/pembayaran.png
diff --git a/src/assets/icon/transaksi.png b/src/assets/icon/transaksi.png
diff --git a/src/assets/img/google-icon.svg b/src/assets/img/google-icon.svg
diff --git a/src/assets/img/profile.jpg b/src/assets/img/profile.jpg
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
@@ -1,5 +1,18 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
 @tailwind base;
 @layer base {
+  body,
+  html {
+    @apply overflow-x-hidden;
+  }
+  button,
+  button:focus {
+    @apply outline-none;
+  }
   h1 {
     @apply text-2xl font-bold;
   }
@@ -13,10 +26,160 @@
     @apply text-blue-600 underline;
   }
 }
-@tailwind components;
-@tailwind utilities;
 
-* {
-  margin: 0;
-  padding: 0;
+@tailwind components;
+@layer components {
+  .login-form-input {
+    @apply h-14 relative z-0 bg-gray-50 appearance-none border border-gray-100 rounded-md w-full py-2 px-3 text-gray-800 text-lg leading-tight;
+    transition: 0.3s ease;
+  }
+  .login-form-input:focus {
+    @apply outline-none border-teal-500;
+    transition: 0.3s ease;
+  }
+  .login-form-error {
+    @apply h-14 relative z-0 bg-gray-50 appearance-none border border-red-500 rounded-md w-full py-2 px-3 text-gray-800 text-lg leading-tight;
+    transition: 0.3s ease;
+  }
+  .login-form-error:focus {
+    @apply outline-none;
+    transition: 0.3s ease;
+  }
+  .login-form-icon {
+    @apply text-xl w-12 h-10 my-auto -mr-12 pl-5 relative z-10;
+  }
+  .text-gray {
+    @apply text-lg text-gray-500 font-bold;
+    text-decoration: none;
+  }
+  .text-link {
+    @apply text-lg text-teal-500 font-bold;
+    text-decoration: none;
+  }
+  .btn {
+    @apply py-3 rounded-lg border-2 border-transparent text-lg mx-auto font-bold;
+    transition: 0.2s ease-out;
+  }
+  .btn-icon {
+    @apply h-12 w-12;
+  }
+  .btn-menu {
+    @apply px-3 text-teal-600 bg-teal-50 rounded-2xl flex items-center;
+  }
+  .btn-icon:focus,
+  .btn-menu:focus,
+  .btn-icontext:focus {
+    @apply bg-black rounded-lg bg-opacity-5;
+    transition: 0.2s ease-out;
+  }
+  .btn-primary {
+    @apply bg-teal-500 text-white;
+  }
+  .btn-info {
+    @apply bg-blue-500 text-white;
+  }
+  .btn-black {
+    @apply bg-black text-white;
+  }
+  .btn-primary:focus,
+  .btn-black:focus {
+    @apply bg-opacity-75;
+    transition: 0.2s ease-out;
+  }
+  .btn-outline-primary {
+    @apply border-teal-500 text-teal-500;
+  }
+  .btn-outline-black {
+    @apply border-black text-black;
+  }
+  .btn-icontext {
+    @apply h-24 w-24 rounded-lg;
+  }
+  .btn-transparent {
+    @apply px-3 py-2 rounded-lg text-teal-500;
+  }
+  .btn-transparent:hover {
+    @apply text-teal-500 bg-teal-100;
+  }
+  .btn-tabbar {
+    @apply w-full pt-4 pb-3;
+  }
+  .btn-tabbar:disabled {
+    @apply font-bold text-teal-500 border-b-4 border-teal-500 border-solid;
+  }
+  .badge-primary {
+    @apply p-1 rounded-md text-teal-500 bg-teal-100;
+  }
+  .badge-danger {
+    @apply p-1 rounded-md text-red-500 bg-red-100;
+  }
+  .badge-warning {
+    @apply p-1 rounded-md text-yellow-500 bg-yellow-100;
+  }
+  .badge-info {
+    @apply p-1 rounded-md text-blue-500 bg-blue-100;
+  }
+  .item-list:hover {
+    @apply bg-gray-50 cursor-pointer;
+  }
+  .appbar {
+    @apply flex items-center;
+    height: 4rem;
+  }
+  .body {
+    @apply pb-5;
+    /* height: calc(~"100vh-40px"); */
+    height: calc(100vh - 4rem);
+    overflow: scroll;
+  }
+  .header-app {
+    @apply h-14;
+  }
+  .home-body {
+    @apply pb-5;
+    height: calc(100vh - 6.5rem);
+    overflow: scroll;
+  }
+  .header-app::before {
+    @apply bg-teal-500 absolute w-screen h-36 top-0 left-0;
+    content: "";
+    border-radius: 0 0 50% 50%;
+    transform: scale(1.5);
+    z-index: -1;
+  }
+  .profile-image {
+    @apply rounded-full;
+  }
+  .clamp-1 {
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+  .card {
+    @apply bg-white rounded-xl shadow-lg p-6;
+  }
+  .card-border {
+    @apply border-2 bg-white border-gray-100 rounded-lg;
+  }
+  .horizontal-scroll {
+    @apply overflow-x-scroll inline-flex w-full;
+    /* width: calc(100vw - 1.5rem); */
+  }
+  .horizontal-scroll::-webkit-scrollbar,
+  .overflow-y-scroll::-webkit-scrollbar,
+  .body::-webkit-scrollbar {
+    @apply hidden;
+  }
+  .tips-item h2 {
+    @apply break-words;
+    width: 12rem;
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+  .tips-item {
+    @apply text-white h-48;
+  }
 }
+
+@tailwind utilities;