Merge branch 'develop'

Author: markhilton

package-lock.json

@@ -24,7 +24,7 @@
     "build:script": "vue-cli-service build --mode production --dest dist --inline-vue --name insights"
   },
   "dependencies": {
-    "@mdi/font": "^6.7.96",
+    "@mdi/font": "^7.1.96",
     "firebase": "^9.8.4",
     "v-mask": "^2.3.0",
     "vue": "^2.6.14",

package.json

@@ -7,6 +7,7 @@
 
           {{ config.title }}
         </v-list-item-title>
+
         <v-list-item-subtitle>
           <div class="ml-1">
             {{ config.subtitle }}

src/components/Branding.vue

@@ -28,7 +28,7 @@
             </v-tab>
             <v-tab v-if="isLoginWithPhoneShown"> Sign In </v-tab>
             <v-tab v-if="!isResetPasswordScreenShown && isUserRegistrationAllowed"> Register </v-tab>
-            <v-tab v-if="isResetPasswordScreenShown || !isUserRegistrationAllowed"> Reset Password </v-tab>
+            <v-tab v-if="(isResetPasswordScreenShown || !isUserRegistrationAllowed) && config.email"> Reset Password </v-tab>
           </v-tabs>
 
           <v-tabs-items :value="tab" @change="SET_TAB($event)">
@@ -44,7 +44,7 @@
               <Register />
             </v-tab-item>
 
-            <v-tab-item v-if="isResetPasswordScreenShown || !isUserRegistrationAllowed" class="pt-5">
+            <v-tab-item v-if="(isResetPasswordScreenShown || !isUserRegistrationAllowed) && !config.email" class="pt-5">
               <PasswordReset />
             </v-tab-item>
           </v-tabs-items>

src/components/Guard.vue

@@ -8,7 +8,9 @@
 
       <!-- application branding -->
       <branding v-else class="text-center" />
+    </v-card>
 
+    <v-card v-if="config.email" flat>
       <!-- login form -->
       <v-card-text class="mb-0 pb-0">
         <v-text-field v-model="email" required class="mr-2" label="Email" prepend-icon="mdi-account" />
@@ -56,7 +58,7 @@
 
 <script>
 import Branding from "./Branding.vue"
-import { mapGetters, mapMutations, mapActions } from "vuex"
+import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
 
 export default {
   components: { Branding },
@@ -68,6 +70,7 @@ export default {
   }),
 
   computed: {
+    ...mapState("auth", ["config"]),
     ...mapGetters("auth", ["getSessionPersistence", "isLoading", "getError"]),
   },
 

src/components/Login.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-container v-if="config.google || config.facebook || config.phone" class="text-center ma-0 pa-0">
-    <div class="caption">or login with</div>
+  <v-container v-if="isLoginWithProvidersActive" class="text-center ma-0 pa-0">
+    <div class="caption"><span v-if="config.email">or </span>login with</div>
 
     <v-container>
       <v-tooltip v-if="config.google" top>
         <template #activator="{ on, attrs }">
-          <v-btn color="#db3236" class="mr-2" v-bind="attrs" fab dark small v-on="on" @click="loginWithGoogle()">
+          <v-btn color="#db3236" class="mr-2" v-bind="attrs" :fab="!isOnlySingleProvider" dark small v-on="on" @click="loginWithGoogle()">
             <v-icon>mdi-google</v-icon>
           </v-btn>
         </template>
@@ -15,7 +15,7 @@
 
       <v-tooltip v-if="config.facebook" top>
         <template #activator="{ on, attrs }">
-          <v-btn color="#3b5998" class="mr-2" v-bind="attrs" fab dark small v-on="on" @click="loginWithFacebook()">
+          <v-btn color="#3b5998" class="mr-2" v-bind="attrs" :fab="!isOnlySingleProvider" dark small v-on="on" @click="loginWithFacebook()">
             <v-icon>mdi-facebook</v-icon>
           </v-btn>
         </template>
@@ -25,13 +25,24 @@
 
       <v-tooltip v-if="config.phone" top>
         <template #activator="{ on, attrs }">
-          <v-btn color="primary" v-bind="attrs" fab dark small v-on="on" @click="SET_SHOW_LOGIN_WITH_PHONE(true)">
+          <v-btn color="primary" class="mr-2" v-bind="attrs" :fab="!isOnlySingleProvider" dark small v-on="on" @click="SET_SHOW_LOGIN_WITH_PHONE(true)">
             <v-icon>mdi-cellphone</v-icon>
           </v-btn>
         </template>
 
         <span>Authenticate with Text Message To Your Phone</span>
       </v-tooltip>
+
+      <v-tooltip v-if="config.saml" top>
+        <template #activator="{ on, attrs }">
+          <v-btn color="secondary" v-bind="attrs" :fab="!isOnlySingleProvider" dark :small="!isOnlySingleProvider" v-on="on" @click="loginWithSaml()">
+            <v-icon>mdi-onepassword</v-icon>
+            <span v-if="isOnlySingleProvider" class="ml-2">{{ config.saml_text }}</span>
+          </v-btn>
+        </template>
+
+        <span>Authenticate with SAML provider</span>
+      </v-tooltip>
     </v-container>
   </v-container>
 </template>
@@ -42,11 +53,11 @@ import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
 export default {
   computed: {
     ...mapState("auth", ["config"]),
-    ...mapGetters("auth", ["isLoading"]),
+    ...mapGetters("auth", ["isLoading", "isLoginWithProvidersActive", "isOnlySingleProvider"]),
   },
 
   methods: {
-    ...mapActions("auth", ["loginWithGoogle", "loginWithFacebook", "loginWithPhone"]),
+    ...mapActions("auth", ["loginWithGoogle", "loginWithFacebook", "loginWithPhone", "loginWithSaml"]),
     ...mapMutations("auth", ["SET_SHOW_LOGIN_WITH_PHONE"]),
   },
 }

src/components/LoginWithProvider.vue

@@ -4,23 +4,26 @@ import router from "@/router"
 import firebase from "@/middleware/firebase"
 import AuthGuard from "../wrapper"
 
-const debug = true
-const session = "local" // or "browser" see: https://firebase.google.com/docs/auth/web/auth-state-persistence
-const phone = true
-const google = true
-const facebook = true
-const verification = true
-
 const authGuardSettings = {
-  debug,
+  debug: true,
+  session: "local", // or "browser" see: https://firebase.google.com/docs/auth/web/auth-state-persistence
   store,
   router,
-  session,
   firebase,
-  phone,
-  google,
-  facebook,
-  verification,
+  saml: true,
+  saml_text: "Login with OKTA",
+  saml_provider_id: "saml.okta",
+  email: false,
+  phone: false,
+  google: false,
+  facebook: false,
+  registration: false,
+  verification: true,
+
+  title: "AUTH DEMO",
+  subtitle: "Firebase Auth Demo for Veutify",
+  icon: "mdi-test-tube",
+  iconColor: "#FF6D00",
 }
 
 Vue.use(AuthGuard, authGuardSettings)

src/plugins/auth.js

@@ -127,6 +127,13 @@ export default {
   //
   loginWithPhone({ state }) {},
 
+  loginWithSaml({ state }) {
+    const provider = new SAMLAuthProvider(state.config.saml_provider_id)
+    const auth = getAuth(Vue.prototype.$authGuardFirebaseApp)
+
+    signInWithRedirect(auth, provider)
+  },
+
   //
   async textPhoneVerificationCode({ state, commit }, { phoneNumber, recaptchaVerifier }) {
     try {

src/store/auth/auth-actions.js

@@ -83,4 +83,18 @@ export default {
   isLoginWithPhoneShown(state) {
     return state.is_login_with_phone_shown
   },
+  isLoginWithProvidersActive(state) {
+    return state.config.google || state.config.facebook || state.config.phone || state.config.saml
+  },
+  isOnlySingleProvider(state) {
+    let cc = 0
+    const check = ["google", "facebook", "phone", "saml"]
+
+    check.forEach((c) => {
+      if (state.config[c] === true) cc++
+    })
+
+    // to render large button instead icon
+    return cc === 1
+  },
 }