Initial commit

.gitignore

@@ -0,0 +1,29 @@
+# Frontend development
+node_modules/
+*.local
+.env.local
+.env.*.local
+.cache/
+.vite/
+.temp/
+.tmp/
+
+# Frontend build
+/static/
+
+# Backend development
+/lib/vendor/
+coverage/
+phpunit.xml.cache
+.phpunit.result.cache
+.php-cs-fixer.cache
+.phpstan.cache
+.phpactor/
+
+# Editors
+.DS_Store
+.vscode/
+.idea/
+
+# Logs
+*.log

composer.json

@@ -0,0 +1,13 @@
+{
+  "name": "ktrix/authentication-provider-password",
+  "description": "Ktrix password authentication provider",
+  "type": "project",
+  "autoload": {
+    "psr-4": {
+      "KTXM\\AuthenticationProviderPassword\\": "lib/"
+    }
+  },
+  "require": {
+    "php": ">=8.2"
+  }
+}

lib/Controllers/PasswordController.php

@@ -0,0 +1,119 @@
+<?php
+
+namespace KTXM\AuthenticationProviderPassword\Controllers;
+
+use KTXC\Http\Response\JsonResponse;
+use KTXC\SessionIdentity;
+use KTXC\SessionTenant;
+use KTXF\Controller\ControllerAbstract;
+use KTXF\Routing\Attributes\AuthenticatedRoute;
+use KTXF\Security\Crypto;
+use KTXM\AuthenticationProviderPassword\Provider;
+use KTXM\AuthenticationProviderPassword\Stores\CredentialStore;
+
+class PasswordController extends ControllerAbstract
+{
+    public function __construct(
+        private readonly SessionIdentity $sessionIdentity,
+        private readonly SessionTenant $sessionTenant,
+        private readonly CredentialStore $credentialStore,
+        private readonly Provider $provider,
+        private readonly Crypto $crypto
+    ) {
+    }
+
+    #[AuthenticatedRoute('/password/update', name: 'password.update', methods: ['POST'])]
+    public function update(string $current_password, string $new_password): JsonResponse
+    {
+        $tenantId = $this->sessionTenant->identifier();
+        $identifier = $this->sessionIdentity->mailAddress();
+
+        if ($tenantId === null || $identifier === null) {
+            return new JsonResponse(['error' => 'Invalid session state'], 400);
+        }
+
+        $credential = $this->credentialStore->fetchByIdentifier($tenantId, $identifier);
+
+        if (!$credential) {
+            return new JsonResponse(['error' => 'No password set'], 400);
+        }
+
+        if (!$this->crypto->verifyPassword($current_password, $credential['secret'])) {
+            return new JsonResponse(['error' => 'Invalid current password'], 400);
+        }
+
+        $newHash = $this->crypto->hashPassword($new_password);
+        $this->credentialStore->updateSecret($tenantId, $identifier, $newHash);
+
+        return new JsonResponse(['success' => true]);
+    }
+
+    /**
+     * Admin endpoint: Get credential status for a user
+     */
+    #[AuthenticatedRoute('/admin/status/{uid}', name: 'password.admin.status', methods: ['GET'])]
+    public function getStatus(string $uid): JsonResponse
+    {
+        $tenantId = $this->sessionTenant->identifier();
+
+        if ($tenantId === null) {
+            return new JsonResponse(['error' => 'Invalid session state'], 400);
+        }
+
+        // TODO: Add permission check for admin operations
+
+        $hasCredentials = $this->provider->hasCredentials($tenantId, $uid);
+
+        return new JsonResponse([
+            'enrolled' => $hasCredentials,
+            'provider' => 'password',
+        ]);
+    }
+
+    /**
+     * Admin endpoint: Set/reset user password
+     */
+    #[AuthenticatedRoute('/admin/reset', name: 'password.admin.reset', methods: ['POST'])]
+    public function adminReset(string $uid, string $password): JsonResponse
+    {
+        $tenantId = $this->sessionTenant->identifier();
+
+        if ($tenantId === null) {
+            return new JsonResponse(['error' => 'Invalid session state'], 400);
+        }
+
+        // TODO: Add permission check for admin operations
+
+        if (strlen($password) < 8) {
+            return new JsonResponse(['error' => 'Password must be at least 8 characters'], 400);
+        }
+
+        $success = $this->provider->setCredential($tenantId, $uid, $password);
+
+        if (!$success) {
+            return new JsonResponse(['error' => 'Failed to set password'], 500);
+        }
+
+        return new JsonResponse(['success' => true]);
+    }
+
+    /**
+     * Admin endpoint: Remove user password
+     */
+    #[AuthenticatedRoute('/admin/remove/{uid}', name: 'password.admin.remove', methods: ['DELETE'])]
+    public function adminRemove(string $uid): JsonResponse
+    {
+        $tenantId = $this->sessionTenant->identifier();
+
+        if ($tenantId === null) {
+            return new JsonResponse(['error' => 'Invalid session state'], 400);
+        }
+
+        // TODO: Add permission check for admin operations
+
+        $this->credentialStore->delete($tenantId, $uid);
+
+        return new JsonResponse(['success' => true]);
+    }
+}
+

lib/Module.php

@@ -0,0 +1,73 @@
+<?php
+
+declare(strict_types=1);
+
+namespace KTXM\AuthenticationProviderPassword;
+
+use KTXC\Resource\ProviderManager;
+use KTXF\Module\ModuleInstanceAbstract;
+
+/**
+ * Default Identity Provider Module
+ * Provides local database authentication
+ */
+class Module extends ModuleInstanceAbstract
+{
+    public function __construct(
+        private readonly ProviderManager $providerManager,
+    ) {}
+
+    public function handle(): string
+    {
+        return 'authentication_provider_password';
+    }
+
+    public function label(): string
+    {
+        return 'Password Authentication Provider';
+    }
+
+    public function author(): string
+    {
+        return 'Ktrix';
+    }
+
+    public function description(): string
+    {
+        return 'Ktrix Password Authentication Provider - authenticates users against credentials stored in the database';
+    }
+
+    public function version(): string
+    {
+        return '0.0.1';
+    }
+    
+    public function permissions(): array
+    {
+        return [
+            'authentication_provider_password' => [
+                'label' => 'Access Password Authentication Provider',
+                'description' => 'View and access the password authentication provider module',
+                'group' => 'Authentication Providers'
+            ],
+        ];
+    }
+    
+    public function boot(): void
+    {
+        $this->providerManager->register('authentication', 'password', Provider::class);
+    }
+    
+    public function registerBI(): array
+    {
+        return [
+            'handle' => $this->handle(),
+            'namespace' => 'AuthenticationProviderPassword',
+            'version' => $this->version(),
+            'label' => $this->label(),
+            'author' => $this->author(),
+            'description' => $this->description(),
+            'boot' => 'static/module.mjs',
+        ];
+    }
+}

lib/Provider.php

@@ -0,0 +1,154 @@
+<?php
+
+declare(strict_types=1);
+
+namespace KTXM\AuthenticationProviderPassword;
+
+use KTXF\Security\Authentication\AuthenticationProviderAbstract;
+use KTXF\Security\Authentication\ProviderContext;
+use KTXF\Security\Authentication\ProviderResult;
+use KTXF\Security\Crypto;
+use KTXM\AuthenticationProviderPassword\Stores\CredentialStore;
+
+/**
+ * Password Authentication Provider
+ * 
+ * Authenticates users against local database credentials.
+ */
+class Provider extends AuthenticationProviderAbstract
+{
+    public function __construct(
+        private readonly CredentialStore $store,
+        private readonly Crypto $crypto,
+    ) { }
+
+    // =========================================================================
+    // Provider Implementation
+    // =========================================================================
+
+    public function type(): string
+    {
+        return 'authentication';
+    }
+
+    public function identifier(): string
+    {
+        return 'password';
+    }
+
+    public function method(): string
+    {
+        return self::METHOD_CREDENTIAL;
+    }
+
+    public function label(): string
+    {
+        return 'Password';
+    }
+
+    public function description(): string
+    {
+        return 'Authenticate using username and password stored in the local database.';
+    }
+
+    public function icon(): string
+    {
+        return 'lock';
+    }
+
+    public function verify(ProviderContext $context, string $secret): ProviderResult
+    {
+        if (empty($context->tenantId)) {
+            return ProviderResult::failed(
+                ProviderResult::ERROR_INTERNAL,
+                'Invalid tenant context'
+            );
+        }
+
+        $identity = $context->userIdentity;
+        if (empty($identity)) {
+            return ProviderResult::failed(
+                ProviderResult::ERROR_INVALID_CREDENTIALS,
+                'Identity is required'
+            );
+        }
+
+        // Fetch credentials (timing-safe: always compute hash)
+        $storedCredential = $this->store->fetchByIdentifier($context->tenantId, $identity);
+
+        // Always verify password to prevent timing attacks
+        $dummyHash = '$2y$10$' . str_repeat('0', 53);
+        $hashToVerify = $storedCredential['secret'] ?? $dummyHash;
+        
+        $isValid = $this->crypto->verifyPassword($secret, $hashToVerify);
+
+        if (!$storedCredential || !$isValid) {
+            return ProviderResult::failed(
+                ProviderResult::ERROR_INVALID_CREDENTIALS,
+                'Invalid credentials'
+            );
+        }
+
+        // Check if password needs rehash
+        if ($this->crypto->needsRehash($hashToVerify)) {
+            $newHash = $this->crypto->hashPassword($secret);
+            $this->store->updateSecret($context->tenantId, $identity, $newHash);
+        }
+
+        return ProviderResult::success([
+            'identity' => $identity,
+            'provider' => $this->identifier(),
+        ]);
+    }
+
+    // =========================================================================
+    // Credential Management
+    // =========================================================================
+
+    /**
+     * Set or update user credentials
+     */
+    public function setCredential(string $tenantId, string $userId, string $password): bool
+    {
+        if (empty($tenantId)) {
+            return false;
+        }
+
+        $hash = $this->crypto->hashPassword($password);
+        
+        // Check if credential exists, then update or create
+        if ($this->store->exists($tenantId, $userId)) {
+            return $this->store->updateSecret($tenantId, $userId, $hash);
+        }
+        return $this->store->create($tenantId, $userId, $hash);
+    }
+
+    /**
+     * Verify a password without full authentication
+     */
+    public function verifyPassword(string $tenantId, string $userId, string $password): bool
+    {
+        if (empty($tenantId)) {
+            return false;
+        }
+
+        $storedCredential = $this->store->fetchByIdentifier($tenantId, $userId);
+        if (!$storedCredential) {
+            return false;
+        }
+
+        return $this->crypto->verifyPassword($password, $storedCredential['secret']);
+    }
+
+    /**
+     * Check if user has credentials set
+     */
+    public function hasCredentials(string $tenantId, string $userId): bool
+    {
+        if (empty($tenantId)) {
+            return false;
+        }
+
+        return $this->store->exists($tenantId, $userId);
+    }
+}

lib/Stores/CredentialStore.php

@@ -0,0 +1,120 @@
+<?php
+
+declare(strict_types=1);
+
+namespace KTXM\AuthenticationProviderPassword\Stores;
+
+use KTXC\Db\DataStore;
+
+/**
+ * Credential Store for Default Identity Provider
+ * Manages local authentication credentials
+ * 
+ * Collection: provider_identity_default
+ * Schema: {
+ *   tid: string,        // Tenant identifier
+ *   identifier: string, // User identity (email/username)
+ *   secret: string,     // Encrypted password
+ *   created_at: int,    // Creation timestamp
+ *   updated_at: int     // Last update timestamp
+ * }
+ */
+class CredentialStore
+{
+    protected const COLLECTION_NAME = 'provider_identity_default';
+
+    public function __construct(private DataStore $store)
+    { }
+    
+    /**
+     * Fetch credential record by identifier (email/username)
+     * 
+     * @param string $tenant Tenant identifier
+     * @param string $identifier User identity
+     * @return array|null Credential record or null if not found
+     */
+    public function fetchByIdentifier(string $tenant, string $identifier): ?array
+    {
+        $entry = $this->store->selectCollection(self::COLLECTION_NAME)->findOne([
+            'tid' => $tenant, 
+            'identifier' => $identifier
+        ]);
+        
+        if (!$entry) { 
+            return null; 
+        }
+        
+        return (array)$entry;
+    }
+
+    /**
+     * Create a new credential record
+     * 
+     * @param string $tenant Tenant identifier
+     * @param string $identifier User identity
+     * @param string $encryptedSecret Encrypted password
+     * @return bool Whether creation was successful
+     */
+    public function create(string $tenant, string $identifier, string $encryptedSecret): bool
+    {
+        $result = $this->store->selectCollection(self::COLLECTION_NAME)->insertOne([
+            'tid' => $tenant,
+            'identifier' => $identifier,
+            'secret' => $encryptedSecret,
+            'created_at' => time(),
+            'updated_at' => time(),
+        ]);
+        
+        return $result->isAcknowledged();
+    }
+
+    /**
+     * Update credential secret
+     * 
+     * @param string $tenant Tenant identifier
+     * @param string $identifier User identity
+     * @param string $encryptedSecret New encrypted password
+     * @return bool Whether update was successful
+     */
+    public function updateSecret(string $tenant, string $identifier, string $encryptedSecret): bool
+    {
+        $result = $this->store->selectCollection(self::COLLECTION_NAME)->updateOne(
+            ['tid' => $tenant, 'identifier' => $identifier],
+            ['$set' => [
+                'secret' => $encryptedSecret,
+                'updated_at' => time(),
+            ]]
+        );
+        
+        return $result->isAcknowledged();
+    }
+
+    /**
+     * Delete credential record
+     * 
+     * @param string $tenant Tenant identifier
+     * @param string $identifier User identity
+     * @return bool Whether deletion was successful
+     */
+    public function delete(string $tenant, string $identifier): bool
+    {
+        $result = $this->store->selectCollection(self::COLLECTION_NAME)->deleteOne([
+            'tid' => $tenant, 
+            'identifier' => $identifier
+        ]);
+        
+        return $result->isAcknowledged();
+    }
+
+    /**
+     * Check if credential exists for identifier
+     * 
+     * @param string $tenant Tenant identifier
+     * @param string $identifier User identity
+     * @return bool Whether credential exists
+     */
+    public function exists(string $tenant, string $identifier): bool
+    {
+        return $this->fetchByIdentifier($tenant, $identifier) !== null;
+    }
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ktrix/authentication-provider-password",
+  "description": "Ktrix Password authentication provider",
+  "version": "1.0.0",
+  "private": true,
+  "license": "AGPL-3.0-or-later",
+  "author": "Ktrix",
+  "type": "module",
+  "scripts": {
+    "build": "vite build --mode production --config vite.config.ts",
+    "dev": "vite build --mode development --config vite.config.ts",
+    "watch": "vite build --mode development --watch --config vite.config.ts",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1",
+    "vue-tsc": "^2.1.10"
+  }
+}

src/components/AdminSecurityPanel.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+interface User {
+  uid: string;
+  identity: string;
+  label: string;
+  provider?: string;
+}
+
+const props = defineProps<{
+  user: User;
+}>();
+
+const emit = defineEmits<{
+  update: [];
+}>();
+
+const loading = ref(false);
+const statusLoading = ref(false);
+const error = ref<string | null>(null);
+const success = ref<string | null>(null);
+
+const hasPassword = ref(false);
+const passwordDialog = ref(false);
+const removeDialog = ref(false);
+const newPassword = ref('');
+const confirmPassword = ref('');
+
+const loadStatus = async () => {
+  statusLoading.value = true;
+  try {
+    const response = await fetch(`/m/authentication_provider_password/admin/status/${props.user.uid}`, {
+      credentials: 'include',
+    });
+    
+    if (response.ok) {
+      const data = await response.json();
+      hasPassword.value = data.enrolled ?? false;
+    }
+  } catch (err) {
+    console.error('Failed to load password status:', err);
+  } finally {
+    statusLoading.value = false;
+  }
+};
+
+const resetPassword = async () => {
+  if (newPassword.value !== confirmPassword.value) {
+    error.value = 'Passwords do not match';
+    return;
+  }
+
+  if (newPassword.value.length < 8) {
+    error.value = 'Password must be at least 8 characters';
+    return;
+  }
+
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const response = await fetch('/m/authentication_provider_password/admin/reset', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify({
+        uid: props.user.uid,
+        password: newPassword.value,
+      }),
+    });
+
+    if (response.ok) {
+      success.value = hasPassword.value ? 'Password reset successfully' : 'Password set successfully';
+      passwordDialog.value = false;
+      newPassword.value = '';
+      confirmPassword.value = '';
+      await loadStatus();
+      emit('update');
+    } else {
+      const data = await response.json();
+      error.value = data.error || 'Failed to reset password';
+    }
+  } catch (err: any) {
+    error.value = err.message || 'Failed to reset password';
+  } finally {
+    loading.value = false;
+  }
+};
+
+const removePassword = async () => {
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const response = await fetch(`/m/authentication_provider_password/admin/remove/${props.user.uid}`, {
+      method: 'DELETE',
+      credentials: 'include',
+    });
+
+    if (response.ok) {
+      success.value = 'Password removed successfully';
+      removeDialog.value = false;
+      await loadStatus();
+      emit('update');
+    } else {
+      const data = await response.json();
+      error.value = data.error || 'Failed to remove password';
+    }
+  } catch (err: any) {
+    error.value = err.message || 'Failed to remove password';
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadStatus();
+});
+</script>
+
+<template>
+  <VCard variant="outlined">
+    <VCardTitle class="d-flex align-center">
+      <VIcon icon="mdi-lock" class="mr-2" />
+      Password
+    </VCardTitle>
+    <VCardText>
+      <VAlert
+        v-if="error"
+        type="error"
+        closable
+        class="mb-4"
+        @click:close="error = null"
+      >
+        {{ error }}
+      </VAlert>
+
+      <VAlert
+        v-if="success"
+        type="success"
+        closable
+        class="mb-4"
+        @click:close="success = null"
+      >
+        {{ success }}
+      </VAlert>
+
+      <div v-if="statusLoading" class="text-center py-4">
+        <VProgressCircular indeterminate size="small" />
+      </div>
+
+      <template v-else>
+        <p class="mb-2">
+          <strong>Status:</strong>
+          <VChip
+            :color="hasPassword ? 'success' : 'grey'"
+            size="small"
+            class="ml-2"
+          >
+            {{ hasPassword ? 'Password Set' : 'No Password' }}
+          </VChip>
+        </p>
+
+        <p class="mb-4">
+          {{ hasPassword ? 'Reset the user\'s password. The user will be able to login with the new password immediately.' : 'Set a password for this user to enable password-based authentication.' }}
+        </p>
+
+        <div class="d-flex gap-2">
+          <VBtn
+            color="primary"
+            :disabled="user.provider === 'oidc'"
+            @click="passwordDialog = true"
+          >
+            {{ hasPassword ? 'Reset Password' : 'Set Password' }}
+          </VBtn>
+
+          <VBtn
+            v-if="hasPassword"
+            color="error"
+            variant="outlined"
+            :disabled="user.provider === 'oidc'"
+            @click="removeDialog = true"
+          >
+            Remove Password
+          </VBtn>
+        </div>
+
+        <div v-if="user.provider === 'oidc'" class="text-caption text-grey mt-2">
+          Password authentication not available for externally managed users
+        </div>
+      </template>
+    </VCardText>
+
+    <!-- Password Reset Dialog -->
+    <VDialog v-model="passwordDialog" max-width="500">
+      <VCard>
+        <VCardTitle>{{ hasPassword ? 'Reset Password' : 'Set Password' }}</VCardTitle>
+        <VCardText>
+          <VForm @submit.prevent="resetPassword">
+            <VTextField
+              v-model="newPassword"
+              label="New Password"
+              type="password"
+              variant="outlined"
+              class="mb-4"
+              required
+              hint="Minimum 8 characters"
+            />
+            <VTextField
+              v-model="confirmPassword"
+              label="Confirm Password"
+              type="password"
+              variant="outlined"
+              required
+              :error="confirmPassword.length > 0 && confirmPassword !== newPassword"
+              :error-messages="confirmPassword.length > 0 && confirmPassword !== newPassword ? ['Passwords do not match'] : []"
+            />
+          </VForm>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn @click="passwordDialog = false">Cancel</VBtn>
+          <VBtn
+            color="primary"
+            :loading="loading"
+            @click="resetPassword"
+          >
+            {{ hasPassword ? 'Reset Password' : 'Set Password' }}
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+
+    <!-- Remove Password Dialog -->
+    <VDialog v-model="removeDialog" max-width="500">
+      <VCard>
+        <VCardTitle class="d-flex align-center">
+          <VIcon icon="mdi-alert" color="warning" class="mr-2" />
+          Remove Password
+        </VCardTitle>
+        <VCardText>
+          <VAlert type="warning" class="mb-4">
+            <strong>Warning:</strong> This will remove the user's password.
+            They will not be able to login using password authentication.
+          </VAlert>
+          <p>
+            Are you sure you want to remove the password for <strong>{{ user.label }}</strong>?
+          </p>
+        </VCardText>
+        <VCardActions>
+          <VSpacer />
+          <VBtn @click="removeDialog = false">Cancel</VBtn>
+          <VBtn
+            color="error"
+            :loading="loading"
+            @click="removePassword"
+          >
+            Remove Password
+          </VBtn>
+        </VCardActions>
+      </VCard>
+    </VDialog>
+  </VCard>
+</template>

src/components/CredentialSetupPanel.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface User {
+  uid: string;
+  identity: string;
+  label: string;
+}
+
+const props = defineProps<{
+  user: User;
+}>();
+
+const loading = ref(false);
+const error = ref<string | null>(null);
+const success = ref<string | null>(null);
+
+const password = ref('');
+const confirmPassword = ref('');
+const expanded = ref(false);
+
+const setPassword = async () => {
+  if (password.value !== confirmPassword.value) {
+    error.value = 'Passwords do not match';
+    return;
+  }
+
+  if (password.value.length < 8) {
+    error.value = 'Password must be at least 8 characters';
+    return;
+  }
+
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const response = await fetch('/m/authentication_provider_password/admin/reset', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify({
+        uid: props.user.uid,
+        password: password.value,
+      }),
+    });
+
+    if (response.ok) {
+      success.value = 'Password set successfully';
+      password.value = '';
+      confirmPassword.value = '';
+      expanded.value = false;
+    } else {
+      const data = await response.json();
+      error.value = data.error || 'Failed to set password';
+    }
+  } catch (err: any) {
+    error.value = err.message || 'Failed to set password';
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <VExpansionPanels v-model="expanded">
+    <VExpansionPanel>
+      <VExpansionPanelTitle>
+        <div class="d-flex align-center">
+          <VIcon icon="mdi-lock" class="mr-3" />
+          <div>
+            <div class="font-weight-medium">Password Authentication</div>
+            <div class="text-caption text-grey">
+              {{ success ? 'Password configured' : 'Set a password for this user' }}
+            </div>
+          </div>
+          <VSpacer />
+          <VChip
+            v-if="success"
+            color="success"
+            size="small"
+            prepend-icon="mdi-check"
+          >
+            Configured
+          </VChip>
+        </div>
+      </VExpansionPanelTitle>
+      <VExpansionPanelText>
+        <VAlert
+          v-if="error"
+          type="error"
+          closable
+          class="mb-4"
+          @click:close="error = null"
+        >
+          {{ error }}
+        </VAlert>
+
+        <VAlert
+          v-if="success"
+          type="success"
+          closable
+          class="mb-4"
+          @click:close="success = null"
+        >
+          {{ success }}
+        </VAlert>
+
+        <VForm @submit.prevent="setPassword">
+          <VTextField
+            v-model="password"
+            label="Password"
+            type="password"
+            variant="outlined"
+            class="mb-4"
+            required
+            hint="Minimum 8 characters"
+            persistent-hint
+          />
+          <VTextField
+            v-model="confirmPassword"
+            label="Confirm Password"
+            type="password"
+            variant="outlined"
+            required
+            :error="confirmPassword.length > 0 && confirmPassword !== password"
+            :error-messages="confirmPassword.length > 0 && confirmPassword !== password ? ['Passwords do not match'] : []"
+          />
+
+          <div class="mt-4">
+            <VBtn
+              type="submit"
+              color="primary"
+              :loading="loading"
+              :disabled="success !== null"
+            >
+              Set Password
+            </VBtn>
+          </div>
+        </VForm>
+      </VExpansionPanelText>
+    </VExpansionPanel>
+  </VExpansionPanels>
+</template>

src/integrations.ts

@@ -0,0 +1,32 @@
+import type { ModuleIntegrations } from '@KTXC/types/moduleTypes';
+
+const integrations: ModuleIntegrations = {
+  user_settings_security: [
+    {
+      id: 'password-change',
+      label: 'Change Password',
+      priority: 10,
+      component: () => import('@/views/UserSettingsSecurityPanel.vue'),
+    },
+  ],
+  user_manager_security_panels: [
+    {
+      id: 'password-management',
+      label: 'Password',
+      icon: 'mdi-lock',
+      priority: 10,
+      component: () => import('@/components/AdminSecurityPanel.vue'),
+    },
+  ],
+  user_manager_create_credentials: [
+    {
+      id: 'password-setup',
+      label: 'Password',
+      icon: 'mdi-lock',
+      priority: 10,
+      component: () => import('@/components/CredentialSetupPanel.vue'),
+    },
+  ],
+};
+
+export default integrations;

src/main.ts

@@ -0,0 +1,9 @@
+import integrations from './integrations'
+
+export {
+  integrations
+}
+
+export default {
+  integrations
+}

src/views/UserSettingsSecurityPanel.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const isLoading = ref(false);
+const errorMessage = ref<string | null>(null);
+const successMessage = ref<string | null>(null);
+
+const currentPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+
+// Password visibility toggles
+const isCurrentPasswordVisible = ref(false);
+const isNewPasswordVisible = ref(false);
+const isConfirmPasswordVisible = ref(false);
+
+// Password strength and validation
+const passwordRequirements = [
+  { 
+    text: 'Minimum 8 characters long',
+    test: (password: string) => password.length >= 8
+  },
+  { 
+    text: 'At least one lowercase character',
+    test: (password: string) => /[a-z]/.test(password)
+  },
+  { 
+    text: 'At least one uppercase character',
+    test: (password: string) => /[A-Z]/.test(password)
+  },
+  { 
+    text: 'At least one number',
+    test: (password: string) => /[0-9]/.test(password)
+  },
+];
+
+const passwordStrength = computed(() => {
+  if (!newPassword.value) return { score: 0, label: '', color: '' };
+  
+  const metRequirements = passwordRequirements.filter(req => req.test(newPassword.value)).length;
+  const total = passwordRequirements.length;
+  const percentage = (metRequirements / total) * 100;
+  
+  if (percentage < 50) return { score: percentage, label: 'Weak', color: 'error' };
+  if (percentage < 75) return { score: percentage, label: 'Fair', color: 'warning' };
+  if (percentage < 100) return { score: percentage, label: 'Good', color: 'info' };
+  return { score: percentage, label: 'Strong', color: 'success' };
+});
+
+const isFormValid = computed(() => {
+  return currentPassword.value.length > 0 &&
+         newPassword.value.length >= 8 &&
+         newPassword.value === confirmPassword.value &&
+         passwordRequirements.every(req => req.test(newPassword.value));
+});
+
+const saveChanges = async () => {
+    errorMessage.value = null;
+    successMessage.value = null;
+
+    if (!isFormValid.value) {
+        errorMessage.value = 'Please ensure all requirements are met.';
+        return;
+    }
+
+    if (newPassword.value !== confirmPassword.value) {
+        errorMessage.value = 'New passwords do not match.';
+        return;
+    }
+
+    isLoading.value = true;
+
+    try {
+        const response = await fetch('/m/authentication_provider_password/password/update', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                current_password: currentPassword.value,
+                new_password: newPassword.value,
+            }),
+        });
+
+        if (response.ok) {
+            currentPassword.value = '';
+            newPassword.value = '';
+            confirmPassword.value = '';
+            successMessage.value = 'Password updated successfully.';
+        } else {
+            const data = await response.json();
+            errorMessage.value = data.error || 'An error occurred while updating the password.';
+        }
+    } catch (error) {
+        errorMessage.value = 'An unexpected error occurred.';
+    } finally {
+        isLoading.value = false;
+    }
+};
+</script>
+
+<template>
+  <VCol cols="12" md="8" lg="4">
+    <VCard title="Change Password">
+      <VCardText>
+        <VAlert
+          v-if="errorMessage"
+          type="error"
+          class="mb-4"
+          closable
+          @click:close="errorMessage = null"
+        >
+          {{ errorMessage }}
+        </VAlert>
+        
+        <VAlert
+          v-if="successMessage"
+          type="success"
+          class="mb-4"
+          closable
+          @click:close="successMessage = null"
+        >
+          {{ successMessage }}
+        </VAlert>
+
+        <!-- Current Password -->
+        <VRow class="mb-3">
+          <VCol cols="12">
+            <VTextField
+              v-model="currentPassword"
+              :type="isCurrentPasswordVisible ? 'text' : 'password'"
+              :append-inner-icon="isCurrentPasswordVisible ? 'mdi-eye-off' : 'mdi-eye'"
+              label="Current Password"
+              placeholder="············"
+              variant="outlined"
+              autocomplete="off"
+              @click:append-inner="isCurrentPasswordVisible = !isCurrentPasswordVisible"
+            />
+          </VCol>
+        </VRow>
+
+        <!-- New Password -->
+        <VRow>
+          <VCol cols="12">
+            <VTextField
+              v-model="newPassword"
+              :type="isNewPasswordVisible ? 'text' : 'password'"
+              :append-inner-icon="isNewPasswordVisible ? 'mdi-eye-off' : 'mdi-eye'"
+              label="New Password"
+              placeholder="············"
+              variant="outlined"
+              autocomplete="new-password"
+              @click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
+            />
+          </VCol>
+
+          <VCol cols="12">
+            <VTextField
+              v-model="confirmPassword"
+              :type="isConfirmPasswordVisible ? 'text' : 'password'"
+              :append-inner-icon="isConfirmPasswordVisible ? 'mdi-eye-off' : 'mdi-eye'"
+              label="Confirm New Password"
+              placeholder="············"
+              variant="outlined"
+              autocomplete="new-password"
+              :error="confirmPassword.length > 0 && confirmPassword !== newPassword"
+              :error-messages="confirmPassword.length > 0 && confirmPassword !== newPassword ? ['Passwords do not match'] : []"
+              @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
+            />
+          </VCol>
+        </VRow>
+
+        <!-- Password Strength Indicator -->
+        <VRow v-if="newPassword.length > 0" class="mt-2">
+          <VCol cols="12">
+            <div class="mb-2">
+              <div class="d-flex justify-space-between mb-1">
+                <span class="text-caption">Password Strength</span>
+                <span class="text-caption font-weight-bold" :class="`text-${passwordStrength.color}`">
+                  {{ passwordStrength.label }}
+                </span>
+              </div>
+              <VProgressLinear
+                :model-value="passwordStrength.score"
+                :color="passwordStrength.color"
+                height="6"
+                rounded
+              />
+            </div>
+          </VCol>
+        </VRow>
+
+        <!-- Password Requirements -->
+        <VRow class="mt-2">
+          <VCol cols="12">
+            <p class="text-base font-weight-medium mb-2">
+              Password Requirements:
+            </p>
+            <ul class="d-flex flex-column gap-y-2">
+              <li
+                v-for="(requirement, index) in passwordRequirements"
+                :key="index"
+                class="d-flex align-center"
+              >
+                <VIcon
+                  :icon="newPassword.length > 0 && requirement.test(newPassword) ? 'mdi-check-circle' : 'mdi-circle-outline'"
+                  :color="newPassword.length > 0 && requirement.test(newPassword) ? 'success' : 'grey'"
+                  size="18"
+                  class="me-2"
+                />
+                <span :class="newPassword.length > 0 && requirement.test(newPassword) ? 'text-success' : ''">
+                  {{ requirement.text }}
+                </span>
+              </li>
+            </ul>
+          </VCol>
+        </VRow>
+
+        <!-- Action Buttons -->
+        <VRow class="mt-4">
+          <VCol cols="12">
+            <VBtn
+              color="primary"
+              :disabled="!isFormValid"
+              :loading="isLoading"
+              @click="saveChanges"
+            >
+              Save Changes
+            </VBtn>
+            <VBtn
+              color="secondary"
+              variant="outlined"
+              class="ms-3"
+              :disabled="isLoading"
+              @click="currentPassword = ''; newPassword = ''; confirmPassword = ''; errorMessage = null; successMessage = null"
+            >
+              Reset
+            </VBtn>
+          </VCol>
+        </VRow>
+      </VCardText>
+    </VCard>
+  </VCol>
+</template>

tsconfig.app.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@KTXC/*": ["../../core/src/*"]
+    }
+  }
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@KTXC': path.resolve(__dirname, '../../core/src')
+    },
+  },
+  build: {
+    outDir: 'static',
+    sourcemap: true,
+    lib: {
+      entry: path.resolve(__dirname, 'src/main.ts'),
+      formats: ['es'],
+      fileName: () => 'module.mjs',
+    },
+    rollupOptions: {
+      external: ['vue', 'vue-router', 'pinia'],
+    },
+  },
+})