santiagoaloi · santiagoaloi · Aug 4, 2022 · Aug 11, 2022 · Aug 11, 2022 · Aug 11, 2022
diff --git a/functions/index.js b/functions/index.js
@@ -4,7 +4,7 @@ const functions = require('firebase-functions');
 admin.initializeApp();
 
 // Appcheck protected / reCAPTCHA authorices only skriptag.com domain.
-exports.listAllUsers = functions.region('us-central1').https.onCall(async (data, context) => {
+exports.listAllUsers = functions.https.onCall(async (data, context) => {
   // If appCheck fails, terminate the funciton.
   if (!context.app) {
     throw new functions.https.HttpsError('failed-precondition', 'The function must be called from an App Check verified app.');
@@ -18,6 +18,8 @@ exports.listAllUsers = functions.region('us-central1').https.onCall(async (data,
   try {
     const all = await admin.auth().listUsers();
 
+    functions.logger.log('All users listed, requested by user uid: ', context.auth.uid);
+
     return {
       ...all.users,
     };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,11 @@
   "name": "skriptag",
   "version": "0.1.0",
   "private": true,
-  "author": "Santiago Aloi",
+  "author": {
+    "name": "Santiago Aloi",
+    "email": "santiago.aloi@skriptag.com"
+  },
+  "homepage": "https://skriptag.com",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -15,7 +19,7 @@
     "firebase": "^9.8.2",
     "localforage": "^1.10.0",
     "vee-validate": "3.4.5",
-    "vue": "^2.6.11",
+    "vue": "^2.7.8",
     "vue-burger": "^1.1.0",
     "vue-router": "^3.5.4",
     "vuesax": "^4.0.1-alpha.25",

diff --git a/public/favt.png → public/favicon.png b/public/favt.png → public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,7 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta property="twitter:domain" content="skriptag.com" />
     <meta property="twitter:url" content="https://skriptag.com/" />
-    <meta name="twitter:title" content="Skriptag — Web development, resources and training." />
+    <meta name="twitter:title" content="Skriptag: Web development, resources and training." />
     <meta
       name="twitter:description"
       content="I&#x27;m  Santiago Aloi, a full-stack developer from Stockholm,Sweden. I design and develop websites, apps, and much more. I also teach others to code!"
@@ -37,6 +37,6 @@
     <title>Skriptag — Web development, resources and training.</title>
   </head>
   <body>
-    <b id="app" />
+    <div id="app" />
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,33 +1,25 @@
 <template>
-  <router-view />
+  <keep-alive>
+    <router-view />
+  </keep-alive>
 </template>
 
 <script>
   import { get, call } from 'vuex-pathify';
-  import { isEmpty } from 'lodash';
 
   export default {
-    name: 'BaseApp',
-
+    name: 'App',
     computed: {
-      ...get('authentication', ['isAccountDisabled', 'profile']),
+      ...get('authentication', ['isAccountDisabled']),
     },
+
     // The authenticated account profile gets real-time updates.
     // If the disabled flag shows up, that means that auth is revoked.
     // We are reacting to isAccountDisabled Vuex getter and forcing a logout.
     watch: {
       isAccountDisabled(disabled) {
         if (disabled) {
           this.logout();
-          this.snackbarError('You have been logged out, contact support.');
-        }
-      },
-
-      // If the authenticated account profile is missing
-      // force a logout.
-      profile(profile) {
-        if (isEmpty(profile)) {
-          this.logout();
         }
       },
     },

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -81,7 +81,7 @@
   font-weight: normal;
   src: local('Product Sans Black Italic'), url('ProductSans-BlackItalic.woff') format('woff');
 }
-
+.v-application,
 h1:not(.ignore-font),
 h2:not(.ignore-font),
 h3,
@@ -135,7 +135,6 @@ a {
 }
 .v-application--wrap {
   background: #22272e !important;
-  height: 0vh !important;
 }
 
 .bgs {
@@ -181,6 +180,10 @@ a {
   color: rgb(var(--vs-primary));
 }
 
+.logo-icon-color {
+  color: #7366ff;
+}
+
 html {
   background: #22272e !important;
   overflow: overlay !important;
@@ -249,6 +252,27 @@ html {
   box-shadow: inset 0 0 0 20px transparent;
 }
 
+/* .testing:focus {
+  background-color: red;
+}
+.v-input__slot {
+  transition: unset !important;
+} */
+
+/* .v-input.v-text-field {
+  transition: all 0.65s ease !important;
+} */
+
+/* 
+.v-input.v-text-field > .v-input__control > .v-input__slot {
+  transition: all 0.65s ease !important;
+}
+
+.v-input.v-text-field:focus-within > .v-input__control > .v-input__slot {
+  outline: 2px solid #5c77a5 !important;
+  background: #1e2227 !important;
+} */
+
 .vs-input__icon {
   background: rgb(24, 31, 38);
   margin-left: 3px;

diff --git a/src/assets/scss/vuetify/variables/_global.scss b/src/assets/scss/vuetify/variables/_global.scss
@@ -3,3 +3,17 @@ $border-radius-root: 6px;
 // $btn-font-weight: 700;
 $btn-text-transform: none;
 $btn-letter-spacing: normal;
+
+
+
+
+// // Transitions
+// $transition: (
+// //  "fast-out-linear-in": cubic-bezier(0.4, 0, 1, 1),
+// //  "fast-in-fast-out": cubic-bezier(0.25, 0.8, 0.25, 1),
+//  "fast-out-slow-in": unset,
+// //  "ease-in-out": cubic-bezier(0.4, 0, 0.6, 1),
+// //  "swing": cubic-bezier(0.25, 0.8, 0.5, 1),
+//  /* Sidebars */ "linear-out-slow-in": unset,
+//  /* Component card flicker problem "fast-out-slow-in": cubic-bezier(0.69, 0.39, 0.51, 0.49) */
+// );
diff --git a/src/components/base/BaseBackToTop.vue b/src/components/base/BaseBackToTop.vue
@@ -0,0 +1,90 @@
+<template>
+  <transition name="fade">
+    <svg v-if="show" class="go-to-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.484 28.284" @click="scrollToTop">
+      <g transform="translate(-229 -126.358)">
+        <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(229 151.107) rotate(-45)" />
+        <rect fill="currentColor" width="35" height="5" rx="2" transform="translate(274.949 154.642) rotate(-135)" />
+      </g>
+    </svg>
+  </transition>
+</template>
+
+<script>
+  import debounce from 'lodash.debounce';
+
+  export default {
+    name: 'BaseBackToTop',
+
+    props: {
+      threshold: {
+        type: Number,
+        default: 50,
+      },
+    },
+
+    data() {
+      return {
+        scrollTop: null,
+      };
+    },
+
+    computed: {
+      show() {
+        return this.scrollTop > this.threshold;
+      },
+    },
+
+    mounted() {
+      this.scrollTop = this.getScrollTop();
+      window.addEventListener(
+        'scroll',
+        debounce(() => {
+          this.scrollTop = this.getScrollTop();
+        }, 100),
+      );
+    },
+
+    methods: {
+      getScrollTop() {
+        return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+      },
+
+      scrollToTop() {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+        this.scrollTop = 0;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .go-to-top {
+    cursor: pointer;
+    position: fixed;
+    bottom: 2rem;
+    right: 2.5rem;
+    width: 2rem;
+    color: red;
+    z-index: 1;
+  }
+
+  .go-to-top:hover {
+    color: lighten(red, 30%);
+  }
+
+  @media (max-width: 959px) {
+    .go-to-top {
+      display: none;
+    }
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s;
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+</style>