ilk

ui/src/pages/MePassword.vue

@@ -0,0 +1,107 @@
+<template>
+  <q-page class="flex flex-center">
+    <q-card style="width:420px; max-width:90vw">
+
+      <q-card-section>
+        <div class="text-h6 text-weight-bold">🔐 Şifre Değiştir</div>
+        <div class="text-caption text-grey-7">
+          Mevcut şifrenizi girerek yeni şifre belirleyin
+        </div>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-section class="q-gutter-sm">
+        <q-input
+          v-model="current"
+          type="password"
+          label="Mevcut Şifre"
+          dense filled
+        />
+
+        <q-input
+          v-model="password"
+          type="password"
+          label="Yeni Şifre"
+          dense filled
+        />
+
+        <q-input
+          v-model="password2"
+          type="password"
+          label="Yeni Şifre (Tekrar)"
+          dense filled
+        />
+
+        <q-banner
+          v-if="error"
+          class="bg-red-1 text-red q-mt-sm"
+          rounded
+        >
+          {{ error }}
+        </q-banner>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          label="GÜNCELLE"
+          color="primary"
+          :loading="loading"
+          :disable="!canSubmit"
+          @click="submit"
+        />
+      </q-card-actions>
+
+    </q-card>
+  </q-page>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useQuasar } from 'quasar'
+import { useMePasswordStore } from 'stores/mePasswordStore'
+import { usePermission } from 'src/composables/usePermission'
+
+const { canRead, canWrite, canUpdate } = usePermission()
+
+const canReadOrder   = canRead('order')
+const canWriteOrder  = canWrite('order')
+const canUpdateOrder = canUpdate('order')
+
+const $q = useQuasar()
+const store = useMePasswordStore()
+
+const current = ref('')
+const password = ref('')
+const password2 = ref('')
+const error = ref(null)
+
+const loading = computed(() => store.loading)
+
+const canSubmit = computed(() =>
+  current.value &&
+  password.value.length >= 8 &&
+  password.value === password2.value &&
+  !loading.value
+)
+
+async function submit () {
+  error.value = null
+
+  if (!canSubmit.value) return
+
+  try {
+    await store.changePassword(current.value, password.value)
+
+    $q.notify({
+      type: 'positive',
+      message: 'Şifre başarıyla güncellendi',
+      position: 'top-right'
+    })
+
+    current.value = password.value = password2.value = ''
+  } catch {
+    error.value = store.error
+  }
+}
+</script>