index.vue

<script lang="ts" setup>
const isCurrentPasswordVisible = ref(false)
const isNewPasswordVisible = ref(false)
const isConfirmPasswordVisible = ref(false)
const currentPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')

const passwordRequirements = [
  'Panjang minimal 8 karakter, maksimal 20 karakter',
  'Minimal satu karakter huruf besar',
  'Minimal satu angka',
  'Minimal satu simbol, atau karakter spasi',
]

// Aturan Validasi
const oldPasswordRules = [
  (v: string) => !!v || 'Konfirmasi kata sandi diperlukan',
]

const passwordRules = [
  (v: string) => !!v || 'Kata sandi diperlukan',
  (v: string) => v.length >= 8 || 'Kata sandi minimal terdiri dari 8 karakter',
  (v: string) => /[a-z]/.test(v) || 'Kata sandi setidaknya mengandung satu huruf kecil',
  (v: string) => /[A-Z]/.test(v) || 'Kata sandi setidaknya mengandung satu huruf besar',
  (v: string) => /\d/.test(v) || 'Kata sandi setidaknya berisi satu angka',
  (v: string) => /[ !"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/.test(v) || 'Kata sandi setidaknya mengandung satu simbol atau spasi',
]

const confirmPasswordRules = [
  (v: string) => !!v || 'Konfirmasi kata sandi diperlukan',
  (v: string) => v === newPassword.value || 'Kata sandi tidak cocok',
]

// Generate Password
function generatePassword(length: number = 10): string {
  const lowercase = 'abcdefghijklmnopqrstuvwxyz'
  const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
  const numbers = '0123456789'
  const symbols = ' !"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~'

  // At least one character from each required category
  const mandatoryCharacters = [
    lowercase[Math.floor(Math.random() * lowercase.length)],
    uppercase[Math.floor(Math.random() * uppercase.length)],
    numbers[Math.floor(Math.random() * numbers.length)],
    symbols[Math.floor(Math.random() * symbols.length)],
  ]

  // Combine all character sets into one charset
  const allCharacters = lowercase + uppercase + numbers + symbols
  const remainingLength = length - mandatoryCharacters.length
  let password = mandatoryCharacters

  // Fill the rest of the password with random characters from the combined charset
  for (let i = 0; i < remainingLength; i++) {
    const randomChar = allCharacters[Math.floor(Math.random() * allCharacters.length)]

    password.push(randomChar)
  }

  // Shuffle the password to ensure randomness
  password = password.sort(() => Math.random() - 0.5)

  // Return the password as a string
  return password.join('')
}

// Set Password
function setPassword() {
  if (isEmpty(currentPassword.value)) {
    alert('Kata Sandi Lama tidak boleh kosong')

    return
  }

  if (newPassword.value.length < 8 || !/[a-z]/.test(newPassword.value) || !/\d/.test(newPassword.value) || !/[ !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(newPassword.value)) {
    alert('Kata Sandi harus memiliki minimal 8 karakter, setidaknya satu huruf besar, satu angka, dan satu karakter khusus.')

    return
  }

  if (newPassword.value !== confirmPassword.value) {
    alert('Kata Sandi Baru dan Konfirmasi Kata Sandi tidak cocok.')

    return
  }

  // Simulasi pengubahan password
  // Di sini Anda bisa menambahkan logika untuk mengupdate password ke server
  alert('Kata sandi Anda sudah diubah, silahkan logout dan login kembali dengan kata sandi yang baru')

  // Reset input
  currentPassword.value = ''
  newPassword.value = ''
  confirmPassword.value = ''
}

// const serverKeys = [
//   {
//     name: 'Server Key 1',
//     key: '23eaf7f0-f4f7-495e-8b86-fad3261282ac',
//     createdOn: '28 Apr 2021, 18:20 GTM+4:10',
//     permission: 'Full Access',
//   },
//   {
//     name: 'Server Key 2',
//     key: 'bb98e571-a2e2-4de8-90a9-2e231b5e99',
//     createdOn: '12 Feb 2021, 10:30 GTM+2:30',
//     permission: 'Read Only',
//   },
//   {
//     name: 'Server Key 3',
//     key: '2e915e59-3105-47f2-8838-6e46bf83b711',
//     createdOn: '28 Dec 2020, 12:21 GTM+4:10',
//     permission: 'Full Access',
//   },
// ]

// 👉 Change the image as per theme change
// const sittingGirlImg = useGenerateImageVariant(sittingGirlWithLaptopLight, sittingGirlWithLaptopDark)

// const isOneTimePasswordDialogVisible = ref(false)
</script>

<template>
  <VRow>
    <!-- SECTION: Change Password -->
    <VCol cols="12">
      <VCard>
        <VCardItem class="pb-6">
          <VCardTitle>Ganti Kata Sandi</VCardTitle>
        </VCardItem>
        <VForm>
          <VCardText class="pt-0">
            <!-- 👉 Current Password -->
            <VRow>
              <VCol
                cols="12"
                md="6"
              >
                <!-- 👉 current password -->
                <VTextField
                  v-model="currentPassword"
                  :type="isCurrentPasswordVisible ? 'text' : 'password'"
                  :maxlength="20"
                  :append-inner-icon="isCurrentPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
                  autocomplete="on"
                  label="Kata Sandi Lama"
                  :rules="oldPasswordRules"
                  clearable
                  @click:append-inner="isCurrentPasswordVisible = !isCurrentPasswordVisible"
                />
              </VCol>
            </VRow>

            <!-- 👉 New Password -->
            <VRow>
              <VCol
                cols="12"
                md="6"
              >
                <!-- 👉 new password -->
                <VTextField
                  v-model="newPassword"
                  :type="isNewPasswordVisible ? 'text' : 'password'"
                  :maxlength="20"
                  :append-inner-icon="isNewPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
                  label="Kata Sandi Baru"
                  autocomplete="on"
                  :rules="passwordRules"
                  clearable
                  @click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
                />
              </VCol>

              <VCol
                cols="12"
                md="6"
              >
                <!-- 👉 confirm password -->
                <VTextField
                  v-model="confirmPassword"
                  :type="isConfirmPasswordVisible ? 'text' : 'password'"
                  :maxlength="20"
                  :append-inner-icon="isConfirmPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
                  autocomplete="on"
                  label="Konfirmasi Kata Sandi"
                  :rules="confirmPasswordRules"
                  clearable
                  @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
                />
              </VCol>
            </VRow>
          </VCardText>

          <!-- 👉 Password Requirements -->
          <VCardText>
            <h6 class="text-h6 text-medium-emphasis mt-1">
              Persyaratan Kata Sandi:
            </h6>

            <VList>
              <VListItem
                v-for="(item, index) in passwordRequirements"
                :key="index"
                class="px-0 mt-n4 mb-n2"
              >
                <template #prepend>
                  <VIcon
                    size="8"
                    icon="ri-circle-fill"
                    color="rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))"
                  />
                </template>
                <VListItemTitle class="text-medium-emphasis text-wrap">
                  {{ item }}
                </VListItemTitle>
              </VListItem>
            </VList>

            <!-- 👉 Action Buttons -->
            <div class="d-flex flex-wrap gap-4">
              <VBtn @click="setPassword">
                Save changes
              </VBtn>

              <VBtn
                type="reset"
                color="secondary"
                variant="outlined"
              >
                Reset
              </VBtn>
              <VBtn
                color="secondary"
                variant="outlined"
                @click="newPassword = generatePassword(); confirmPassword = newPassword"
              >
                Generate Kata Sandi
              </VBtn>
            </div>
          </VCardText>
        </VForm>
      </VCard>
    </VCol>
    <!-- !SECTION -->

    <!-- SECTION Two-steps verification -->
    <!--
      <VCol cols="12">
      <VCard>
      <VCardItem class="pb-6">
      <VCardTitle>Two-steps verification</VCardTitle>
      </VCardItem>
      <VCardText>
      <p>
      Two factor authentication is not enabled yet.
      </p>
      <p class="mb-6">
      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>

      <VBtn @click="isOneTimePasswordDialogVisible = true">
      Enable 2FA
      </VBtn>
      </VCardText>
      </VCard>
      </VCol>
    -->
    <!-- !SECTION -->

    <!-- <VCol cols="12"> -->
    <!-- SECTION: Create an API key -->
    <!--
      <VCard title="Create an API key">
      <VRow>
    -->
    <!-- 👉 Choose API Key -->
    <!--
      <VCol cols="12" md="5" order-md="0" order="1">
      <VCardText class="pt-7">
      <VForm @submit.prevent="() => { }">
    -->
    <!-- 👉 Choose API Key -->
    <!--
      <VSelect label="Choose the API key type you want to create" placeholder="Select API key type"
      :items="['Full Control', 'Modify', 'Read & Execute', 'List Folder Contents', 'Read Only', 'Read & Write']" />
    -->

    <!-- 👉 Name the API Key -->
    <!-- <VTextField label="Name the API key" placeholder="Name the API key" class="my-5" /> -->

    <!-- 👉 Create Key Button -->
    <!--
      <VBtn type="submit" block>
      Create Key
      </VBtn>
      </VForm>
      </VCardText>
      </VCol>
    -->

    <!-- 👉 Lady image -->
    <!--
      <VCol cols="12" md="7" order="0" order-md="1" class="d-flex flex-column justify-center align-center">
      <VImg :src="sittingGirlImg" :width="310"
      :style="$vuetify.display.smAndDown ? '' : 'position: absolute; bottom: 0;'" />
      </VCol>
      </VRow>
      </VCard>
    -->
    <!-- !SECTION -->
    <!-- </VCol> -->

    <!-- <VCol cols="12"> -->
    <!-- SECTION: API Keys List -->
    <!--
      <VCard>
      <VCardItem class="pb-4">
      <VCardTitle>API Key List &amp; Access</VCardTitle>
      </VCardItem>

      <VCardText>
      <p class="mb-6">
      An API key is a simple encrypted string that identifies an application without any principal. They are
      useful
      for accessing public data anonymously, and are used to associate API requests with your project for quota
      and
      billing.
      </p>
    -->

    <!-- 👉 Server Status -->
    <!--
      <div class="d-flex flex-column gap-y-6">
      <div v-for="serverKey in serverKeys" :key="serverKey.key" class="bg-var-theme-background pa-4">
      <div class="d-flex align-center flex-wrap mb-2 gap-x-3">
      <h6 class="text-h6">
      {{ serverKey.name }}
      </h6>
      <VChip color="primary" size="small">
      {{ serverKey.permission }}
      </VChip>
      </div>

      <h6 class="text-h6 d-flex gap-x-3 text-medium-emphasis align-center mb-2">
      {{ serverKey.key }}
      <VIcon :size="20" icon="ri-file-copy-line" class="cursor-pointer" />
      </h6>
      <div class="text-disabled">
      Created on {{ serverKey.createdOn }}
      </div>
      </div>
      </div>
    -->
    <!--
      </VCardText>
      </VCard>
    -->
    <!-- !SECTION -->
    <!-- </VCol> -->
  </VRow>

  <!-- SECTION Enable One time password -->
  <!-- <TwoFactorAuthDialog v-model:isDialogVisible="isOneTimePasswordDialogVisible" /> -->
  <!-- !SECTION -->
</template>