Initial commit

resources/js/views/apps/user/view/UserTabSecurity.vue

@@ -0,0 +1,188 @@
+<script setup>
+const isNewPasswordVisible = ref(false)
+const isConfirmPasswordVisible = ref(false)
+const smsVerificationNumber = ref('+1(968) 819-2547')
+const isTwoFactorDialogOpen = ref(false)
+
+const recentDeviceHeader = [
+  {
+    title: 'BROWSER',
+    key: 'browser',
+  },
+  {
+    title: 'DEVICE',
+    key: 'device',
+  },
+  {
+    title: 'LOCATION',
+    key: 'location',
+  },
+  {
+    title: 'RECENT ACTIVITY',
+    key: 'activity',
+  },
+]
+
+const recentDevices = [
+  {
+    browser: ' Chrome on Windows',
+    icon: 'tabler-brand-windows',
+    color: 'info',
+    device: 'HP Spectre 360',
+    location: 'Switzerland',
+    activity: '10, July 2021 20:07',
+  },
+  {
+    browser: 'Chrome on Android',
+    icon: 'tabler-brand-android',
+    color: 'success',
+    device: 'Oneplus 9 Pro',
+    location: 'Dubai',
+    activity: '14, July 2021 15:15',
+  },
+  {
+    browser: 'Chrome on macOS',
+    icon: 'tabler-brand-apple',
+    color: 'secondary',
+    device: 'Apple iMac',
+    location: 'India',
+    activity: '16, July 2021 16:17',
+  },
+  {
+    browser: 'Chrome on iPhone',
+    icon: 'tabler-device-mobile',
+    color: 'error',
+    device: 'iPhone 12x',
+    location: 'Australia',
+    activity: '13, July 2021 10:10',
+  },
+]
+</script>
+
+<template>
+  <VRow>
+    <VCol cols="12">
+      <!-- 👉 Change password -->
+      <VCard title="Change Password">
+        <VCardText>
+          <VAlert
+            closable
+            variant="tonal"
+            color="warning"
+            class="mb-4"
+            title="Ensure that these requirements are met"
+            text="Minimum 8 characters long, uppercase & symbol"
+          />
+
+          <VForm @submit.prevent="() => { }">
+            <VRow>
+              <VCol
+                cols="12"
+                md="6"
+              >
+                <AppTextField
+                  label="New Password"
+                  placeholder="············"
+                  :type="isNewPasswordVisible ? 'text' : 'password'"
+                  :append-inner-icon="isNewPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
+                  @click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
+                />
+              </VCol>
+              <VCol
+                cols="12"
+                md="6"
+              >
+                <AppTextField
+                  label="Confirm Password"
+                  autocomplete="confirm-password"
+                  placeholder="············"
+                  :type="isConfirmPasswordVisible ? 'text' : 'password'"
+                  :append-inner-icon="isConfirmPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
+                  @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
+                />
+              </VCol>
+
+              <VCol cols="12">
+                <VBtn type="submit">
+                  Change Password
+                </VBtn>
+              </VCol>
+            </VRow>
+          </VForm>
+        </VCardText>
+      </VCard>
+    </VCol>
+
+    <VCol cols="12">
+      <!-- 👉 Two step verification -->
+      <VCard
+        title="Two-steps verification"
+        subtitle="Keep your account secure with authentication step."
+      >
+        <VCardText>
+          <div class="text-h6 mb-1">
+            SMS
+          </div>
+          <AppTextField placeholder="+1(968) 819-2547">
+            <template #append>
+              <IconBtn color="secondary">
+                <VIcon
+                  icon="tabler-edit"
+                  size="22"
+                />
+              </IconBtn>
+              <IconBtn color="secondary">
+                <VIcon
+                  icon="tabler-user-plus"
+                  size="22"
+                />
+              </IconBtn>
+            </template>
+          </AppTextField>
+
+          <p class="mb-0 mt-4">
+            Two-factor authentication adds an additional layer of security to your account by requiring more than just a password to log in. <a
+              href="javascript:void(0)"
+              class="text-decoration-none"
+            >Learn more</a>.
+          </p>
+        </VCardText>
+      </VCard>
+    </VCol>
+
+    <VCol cols="12">
+      <!-- 👉 Recent devices -->
+
+      <VCard title="Recent devices">
+        <VDivider />
+        <VDataTable
+          :items="recentDevices"
+          :headers="recentDeviceHeader"
+          hide-default-footer
+          class="text-no-wrap"
+        >
+          <template #item.browser="{ item }">
+            <div class="d-flex align-center gap-x-4">
+              <VIcon
+                :icon="item.icon"
+                :color="item.color"
+                :size="22"
+              />
+              <div class="text-body-1 text-high-emphasis">
+                {{ item.browser }}
+              </div>
+            </div>
+          </template>
+          <!-- TODO Refactor this after vuetify provides proper solution for removing default footer -->
+          <template #bottom />
+        </VDataTable>
+      </VCard>
+    </VCol>
+  </VRow>
+
+  <!-- 👉 Enable One Time Password Dialog -->
+  <TwoFactorAuthDialog
+    v-model:is-dialog-visible="isTwoFactorDialogOpen"
+    :sms-code="smsVerificationNumber"
+  />
+</template>