Reformat code

- Use prettier - Use @ for import path where appropriate
martinussuherman · Mar 1, 2021 · 5cd172e · 5cd172e
1 parent e543a96
commit 5cd172e
Show file tree

Hide file tree

Showing 17 changed files with 276 additions and 294 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,10 +1,6 @@
 <template>
   <v-app>
-    <v-app-bar
-      app
-      color="primary"
-      dark
-    >
+    <v-app-bar app color="primary" dark>
       <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>
 
       <div class="d-flex align-center">
@@ -40,15 +36,8 @@
     </v-app-bar>
 
     <v-main>
-      <v-navigation-drawer
-        v-model="drawer"
-        absolute
-        temporary
-      >
-        <v-list
-          nav
-          dense
-        >
+      <v-navigation-drawer v-model="drawer" absolute temporary>
+        <v-list nav dense>
           <v-list-item-group>
             <v-list-item to="/">
               <v-list-item-icon>
@@ -72,28 +61,41 @@
             </v-list-item>
 
             <v-list-item>
-              <v-switch
-                v-model="$vuetify.theme.dark"
-                label="Light/Dark"
-              >
+              <v-switch v-model="$vuetify.theme.dark" label="Light/Dark">
               </v-switch>
             </v-list-item>
           </v-list-item-group>
         </v-list>
       </v-navigation-drawer>
 
-      <router-view/>
-   </v-main>
+      <router-view />
+    </v-main>
   </v-app>
 </template>
 
 <script lang="ts">
-import { mapActions, mapGetters } from 'vuex'
-import { Component, Vue } from 'vue-property-decorator'
-import { VuexOidcStoreActions } from 'vuex-oidc'
-import { User } from 'oidc-client'
-import { OidcCustomEventInit } from '@/helper/oidc'
-import { VApp, VAppBar, VAppBarNavIcon, VMain, VIcon, VImg, VSpacer, VBtn, VNavigationDrawer, VList, VListItemGroup, VListItem, VListItemTitle, VListItemIcon, VSwitch } from 'vuetify/lib'
+import { mapActions, mapGetters } from "vuex";
+import { Component, Vue } from "vue-property-decorator";
+import { VuexOidcStoreActions } from "vuex-oidc";
+import { User } from "oidc-client";
+import { OidcCustomEventInit } from "@/helper/oidc";
+import {
+  VApp,
+  VAppBar,
+  VAppBarNavIcon,
+  VMain,
+  VIcon,
+  VImg,
+  VSpacer,
+  VBtn,
+  VNavigationDrawer,
+  VList,
+  VListItemGroup,
+  VListItem,
+  VListItemTitle,
+  VListItemIcon,
+  VSwitch,
+} from "vuetify/lib";
 
 /** https://stackoverflow.com/questions/60099323/how-to-use-mapactions-with-vue-typescript-class-component */
 @Component({
@@ -112,32 +114,25 @@ import { VApp, VAppBar, VAppBarNavIcon, VMain, VIcon, VImg, VSpacer, VBtn, VNavi
     VListItem,
     VListItemTitle,
     VListItemIcon,
-    VSwitch
+    VSwitch,
   },
   computed: {
-    ...mapGetters(
-      'oidcStore',
-      {}
-    )
+    ...mapGetters("oidcStore", {}),
   },
   methods: {
-    ...mapActions(
-      'oidcStore',
-      {
-        authenticateOidcPopup: 'authenticateOidcPopup',
-        removeOidcUser: 'removeOidcUser',
-        signOutOidc: 'signOutOidc'
-      }
-    )
-  }
+    ...mapActions("oidcStore", {
+      authenticateOidcPopup: "authenticateOidcPopup",
+      removeOidcUser: "removeOidcUser",
+      signOutOidc: "signOutOidc",
+    }),
+  },
 })
-
 export default class App extends Vue {
-  drawer = false
-  isAuthenticated = false
-  userEmail = ''
+  drawer = false;
+  isAuthenticated = false;
+  userEmail = "";
 
-  authenticateOidcPopup!: VuexOidcStoreActions['authenticateOidcPopup'];
+  authenticateOidcPopup!: VuexOidcStoreActions["authenticateOidcPopup"];
 
   /** removeOidcUser in vuex-oidc returns void  */
   // signOutOidc!: VuexOidcStoreActions['signOutOidc'];
@@ -147,24 +142,27 @@ export default class App extends Vue {
   //  removeOidcUser!: VuexOidcStoreActions['removeOidcUser'];
   removeOidcUser!: () => Promise<void>;
 
-  signOut () {
+  signOut() {
     this.signOutOidc().then(() => {
-      this.$router.push('/')
-    })
+      this.$router.push("/");
+    });
   }
 
-  toggleDrawer () {
-    this.drawer = !this.drawer
+  toggleDrawer() {
+    this.drawer = !this.drawer;
   }
 
-  userLoaded (data: OidcCustomEventInit<User>) {
-    this.isAuthenticated = (data.detail !== null && !data.detail?.expired)
-    this.userEmail = data.detail?.profile.email ?? ''
-    window.console.log(`Authenticated: ${this.isAuthenticated} - email: ${this.userEmail}`)
+  userLoaded(data: OidcCustomEventInit<User>) {
+    this.isAuthenticated = data.detail !== null && !data.detail?.expired;
+    this.userEmail = data.detail?.profile.email ?? "";
+    const dateTime = new Date();
+    window.console.log(
+      `Authenticated: ${this.isAuthenticated} - email: ${this.userEmail} at ${dateTime}`
+    );
   }
 
-  mounted () {
-    window.addEventListener('vuexoidc:userLoaded', this.userLoaded)
+  mounted() {
+    window.addEventListener("vuexoidc:userLoaded", this.userLoaded);
   }
 }
 </script>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -17,21 +17,15 @@
 
         <p class="subheading font-weight-regular">
           For help and collaboration with other Vuetify developers,
-          <br>please join our online
-          <a
-            href="https://community.vuetifyjs.com"
-            target="_blank"
-          >Discord Community</a>
+          <br />please join our online
+          <a href="https://community.vuetifyjs.com" target="_blank">
+            Discord Community
+          </a>
         </p>
       </v-col>
 
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          What's next?
-        </h2>
+      <v-col class="mb-5" cols="12">
+        <h2 class="headline font-weight-bold mb-3">What's next?</h2>
 
         <v-row justify="center">
           <a
@@ -46,13 +40,8 @@
         </v-row>
       </v-col>
 
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Important Links
-        </h2>
+      <v-col class="mb-5" cols="12">
+        <h2 class="headline font-weight-bold mb-3">Important Links</h2>
 
         <v-row justify="center">
           <a
@@ -67,13 +56,8 @@
         </v-row>
       </v-col>
 
-      <v-col
-        class="mb-5"
-        cols="12"
-      >
-        <h2 class="headline font-weight-bold mb-3">
-          Ecosystem
-        </h2>
+      <v-col class="mb-5" cols="12">
+        <h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
 
         <v-row justify="center">
           <a
@@ -92,72 +76,71 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-import { VContainer, VRow, VCol, VImg } from 'vuetify/lib'
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { VContainer, VRow, VCol, VImg } from "vuetify/lib";
 
 @Component({
   components: {
     VContainer,
     VRow,
     VCol,
-    VImg
-  }
+    VImg,
+  },
 })
-
 export default class HelloWorld extends Vue {
   @Prop() private msg!: string;
 
   ecosystem = [
     {
-      text: 'vuetify-loader',
-      href: 'https://github.com/vuetifyjs/vuetify-loader'
+      text: "vuetify-loader",
+      href: "https://github.com/vuetifyjs/vuetify-loader",
     },
     {
-      text: 'github',
-      href: 'https://github.com/vuetifyjs/vuetify'
+      text: "github",
+      href: "https://github.com/vuetifyjs/vuetify",
     },
     {
-      text: 'awesome-vuetify',
-      href: 'https://github.com/vuetifyjs/awesome-vuetify'
-    }
-  ]
+      text: "awesome-vuetify",
+      href: "https://github.com/vuetifyjs/awesome-vuetify",
+    },
+  ];
 
   importantLinks = [
     {
-      text: 'Documentation',
-      href: 'https://vuetifyjs.com'
+      text: "Documentation",
+      href: "https://vuetifyjs.com",
     },
     {
-      text: 'Chat',
-      href: 'https://community.vuetifyjs.com'
+      text: "Chat",
+      href: "https://community.vuetifyjs.com",
     },
     {
-      text: 'Made with Vuetify',
-      href: 'https://madewithvuejs.com/vuetify'
+      text: "Made with Vuetify",
+      href: "https://madewithvuejs.com/vuetify",
     },
     {
-      text: 'Twitter',
-      href: 'https://twitter.com/vuetifyjs'
+      text: "Twitter",
+      href: "https://twitter.com/vuetifyjs",
     },
     {
-      text: 'Articles',
-      href: 'https://medium.com/vuetify'
-    }
-  ]
+      text: "Articles",
+      href: "https://medium.com/vuetify",
+    },
+  ];
 
   whatsNext = [
     {
-      text: 'Explore components',
-      href: 'https://vuetifyjs.com/components/api-explorer'
+      text: "Explore components",
+      href: "https://vuetifyjs.com/components/api-explorer",
     },
     {
-      text: 'Select a layout',
-      href: 'https://vuetifyjs.com/getting-started/pre-made-layouts'
+      text: "Select a layout",
+      href: "https://vuetifyjs.com/getting-started/pre-made-layouts",
     },
     {
-      text: 'Frequently Asked Questions',
-      href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
-    }
-  ]
+      text: "Frequently Asked Questions",
+      href: "https://vuetifyjs.com/getting-started/frequently-asked-questions",
+    },
+  ];
 }
 </script>
diff --git a/src/config/oidc.ts b/src/config/oidc.ts
@@ -1,8 +1,8 @@
-import { VuexOidcClientSettings } from 'vuex-oidc'
+import { VuexOidcClientSettings } from "vuex-oidc";
 
-export async function getRuntimeOidcConfig () {
-  const runtimeConfig = await fetch('./oidc.json')
-  const config = await runtimeConfig.json()
+export async function getRuntimeOidcConfig() {
+  const runtimeConfig = await fetch("./oidc.json");
+  const config = await runtimeConfig.json();
 
   const clientSetting: VuexOidcClientSettings = {
     authority: config.authority,
@@ -14,9 +14,9 @@ export async function getRuntimeOidcConfig () {
     automaticSilentRenew: config.automaticSilentRenew,
     automaticSilentSignin: config.automaticSilentSignin,
     silentRedirectUri: config.silentRedirectUri,
-    postLogoutRedirectUri: config.postLogoutRedirectUri
-  }
+    postLogoutRedirectUri: config.postLogoutRedirectUri,
+  };
 
-  window.console.log(clientSetting)
-  return clientSetting
+  window.console.log(clientSetting);
+  return clientSetting;
 }