Merge pull request #210 from silinternational/fix-safari-bug

Fix remove mfa bug and breakpoints

src/global/mfa.js

@@ -88,7 +88,7 @@ export const verifyWebauthn = async (id, verification = '', label = '') => {
 
 export const removeWebauthn = async (mfaId, webauthnId) => {
   await api.delete(`mfa/${mfaId}/webauthn/${webauthnId}`)
-  const index = mfa.keys.data.findIndex((m) => m.id === mfaId)
+  const index = mfa.keys.data.findIndex((m) => m.id === webauthnId)
   if (index > -1) {
     mfa.keys.data.splice(index, 1)
   }

src/plugins/vuetify.js

@@ -5,6 +5,15 @@ import * as directives from 'vuetify/directives'
 
 const vuetify = createVuetify({
   theme: {
+    breakpoints: {
+      thresholds: {
+        xs: 0,
+        sm: 600,
+        md: 960,
+        lg: 1264,
+        xl: 1904, // Match Vuetify 2 breakpoints
+      },
+    },
     themes: {
       light: {
         colors: {

src/profile/ProfileWizard.vue

@@ -4,11 +4,13 @@
       <template v-for="_step in steps" :key="`step-${_step.id}`">
         <v-stepper-item
           :value="_step.id"
-          :icon="toIcon(_step.state)"
+          :complete-icon="toIcon(_step.state)"
           :color="toColor(_step.state)"
           :complete="_step.state === 'complete'"
-          :title="$t(`${_step.nameKey}`)"
         >
+          <template #title>
+            <span :class="{ 'max-width text-truncate d-inline-block': isMd }">{{ $t(`${_step.nameKey}`) }}</span>
+          </template>
         </v-stepper-item>
 
         <v-divider v-if="hasMoreSteps(_step)" :key="`divider-${_step.id}`" />
@@ -29,8 +31,17 @@
 
 <script>
 import Steps from './steps'
+import { useDisplay } from 'vuetify'
 
 export default {
+  setup() {
+    const { mdAndDown, smAndDown } = useDisplay()
+
+    return {
+      isMd: mdAndDown,
+      isSm: smAndDown,
+    }
+  },
   data: () => ({
     steps: Steps.steps,
     currentStep: {},
@@ -74,3 +85,9 @@ export default {
   },
 }
 </script>
+
+<style>
+.max-width {
+  max-width: 120px;
+}
+</style>