Initial commit
This commit is contained in:
root
29
.gitignore
vendored
Normal file
29
.gitignore
vendored
Normal file
@@ -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
|
||||||
9
composer.json
Normal file
9
composer.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"name": "ktxm/profile",
|
||||||
|
"type": "project",
|
||||||
|
"autoload": {
|
||||||
|
"psr-4": {
|
||||||
|
"KTXM\\UserProfile\\": "lib/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
61
lib/Module.php
Normal file
61
lib/Module.php
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace KTXM\UserProfile;
|
||||||
|
|
||||||
|
use KTXF\Module\ModuleBrowserInterface;
|
||||||
|
use KTXF\Module\ModuleInstanceAbstract;
|
||||||
|
|
||||||
|
class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
|
||||||
|
{
|
||||||
|
public function __construct()
|
||||||
|
{ }
|
||||||
|
|
||||||
|
public function handle(): string
|
||||||
|
{
|
||||||
|
return 'user_profile';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function label(): string
|
||||||
|
{
|
||||||
|
return 'Profile & Settings';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function author(): string
|
||||||
|
{
|
||||||
|
return 'Ktrix';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function description(): string
|
||||||
|
{
|
||||||
|
return 'User profile management and settings.';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function version(): string
|
||||||
|
{
|
||||||
|
return '0.0.1';
|
||||||
|
}
|
||||||
|
|
||||||
|
public function permissions(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
'user_profile' => [
|
||||||
|
'label' => 'Access Profile & Settings',
|
||||||
|
'description' => 'View and access the user profile and settings module',
|
||||||
|
'group' => 'User Profile'
|
||||||
|
],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
public function registerBI(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
'handle' => $this->handle(),
|
||||||
|
'namespace' => 'UserProfile',
|
||||||
|
'version' => $this->version(),
|
||||||
|
'label' => $this->label(),
|
||||||
|
'author' => $this->author(),
|
||||||
|
'description' => $this->description(),
|
||||||
|
'boot' => 'static/module.mjs',
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
1534
package-lock.json
generated
Normal file
1534
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "user_profile",
|
||||||
|
"description": "Ktrix User Profile Module - User Settings and Account Management",
|
||||||
|
"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": {
|
||||||
|
"@mdi/js": "^7.4.47",
|
||||||
|
"pinia": "^2.3.1",
|
||||||
|
"vue": "^3.5.18",
|
||||||
|
"vue-router": "^4.5.1",
|
||||||
|
"vuetify": "^3.10.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^6.0.1",
|
||||||
|
"@vue/tsconfig": "^0.7.0",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"vite": "^7.1.2",
|
||||||
|
"vue-tsc": "^3.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
360
src/components/ProfileAccount.vue
Normal file
360
src/components/ProfileAccount.vue
Normal file
@@ -0,0 +1,360 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue'
|
||||||
|
import { useUserStore } from '@KTXC/stores/userStore'
|
||||||
|
import { userService } from '@KTXC/services/user/userService'
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
const refInputEl = ref<HTMLElement>()
|
||||||
|
const isSaving = ref(false)
|
||||||
|
|
||||||
|
// Local form state
|
||||||
|
const accountDataLocal = ref({
|
||||||
|
avatarImg: '',
|
||||||
|
name_given: '',
|
||||||
|
name_family: '',
|
||||||
|
email: '',
|
||||||
|
phone: '',
|
||||||
|
address: '',
|
||||||
|
city: '',
|
||||||
|
state: '',
|
||||||
|
zip: '',
|
||||||
|
country: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
// Load profile data on mount
|
||||||
|
onMounted(() => {
|
||||||
|
accountDataLocal.value = {
|
||||||
|
avatarImg: userStore.getProfileField('avatar') || '',
|
||||||
|
name_given: userStore.getProfileField('name_given') || '',
|
||||||
|
name_family: userStore.getProfileField('name_family') || '',
|
||||||
|
email: userStore.getProfileField('email') || '',
|
||||||
|
phone: userStore.getProfileField('phone') || '',
|
||||||
|
address: userStore.getProfileField('address') || '',
|
||||||
|
city: userStore.getProfileField('city') || '',
|
||||||
|
state: userStore.getProfileField('state') || '',
|
||||||
|
zip: userStore.getProfileField('zip') || '',
|
||||||
|
country: userStore.getProfileField('country') || '',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Check if field is editable
|
||||||
|
const isFieldEditable = (field: string) => userStore.isProfileFieldEditable(field)
|
||||||
|
|
||||||
|
// Reset form to current profile values
|
||||||
|
const resetForm = () => {
|
||||||
|
accountDataLocal.value = {
|
||||||
|
avatarImg: userStore.getProfileField('avatar') || '',
|
||||||
|
name_given: userStore.getProfileField('name_given') || '',
|
||||||
|
name_family: userStore.getProfileField('name_family') || '',
|
||||||
|
email: userStore.getProfileField('email') || '',
|
||||||
|
phone: userStore.getProfileField('phone') || '',
|
||||||
|
address: userStore.getProfileField('address') || '',
|
||||||
|
city: userStore.getProfileField('city') || '',
|
||||||
|
state: userStore.getProfileField('state') || '',
|
||||||
|
zip: userStore.getProfileField('zip') || '',
|
||||||
|
country: userStore.getProfileField('country') || '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save changes
|
||||||
|
const saveChanges = async () => {
|
||||||
|
isSaving.value = true
|
||||||
|
try {
|
||||||
|
// Build update object with only changed fields
|
||||||
|
const updates: Record<string, any> = {}
|
||||||
|
|
||||||
|
if (accountDataLocal.value.avatarImg !== userStore.getProfileField('avatar')) {
|
||||||
|
updates.avatar = accountDataLocal.value.avatarImg
|
||||||
|
}
|
||||||
|
if (accountDataLocal.value.name_given !== userStore.getProfileField('name_given')) {
|
||||||
|
updates.name_given = accountDataLocal.value.name_given
|
||||||
|
}
|
||||||
|
if (accountDataLocal.value.name_family !== userStore.getProfileField('name_family')) {
|
||||||
|
updates.name_family = accountDataLocal.value.name_family
|
||||||
|
}
|
||||||
|
if (accountDataLocal.value.email !== userStore.getProfileField('email')) {
|
||||||
|
updates.email = accountDataLocal.value.email
|
||||||
|
}
|
||||||
|
if (accountDataLocal.value.phone !== userStore.getProfileField('phone')) {
|
||||||
|
updates.phone = accountDataLocal.value.phone
|
||||||
|
}
|
||||||
|
if (accountDataLocal.value.address !== userStore.getProfileField('address')) {
|
||||||
|
updates.address = accountDataLocal.value.address
|
||||||
|
}
|
||||||
|
if (accountDataLocal.value.city !== userStore.getProfileField('city')) {
|
||||||
|
updates.city = accountDataLocal.value.city
|
||||||
|
}
|
||||||
|
if (accountDataLocal.value.state !== userStore.getProfileField('state')) {
|
||||||
|
updates.state = accountDataLocal.value.state
|
||||||
|
}
|
||||||
|
if (accountDataLocal.value.zip !== userStore.getProfileField('zip')) {
|
||||||
|
updates.zip = accountDataLocal.value.zip
|
||||||
|
}
|
||||||
|
if (accountDataLocal.value.country !== userStore.getProfileField('country')) {
|
||||||
|
updates.country = accountDataLocal.value.country
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Object.keys(updates).length > 0) {
|
||||||
|
// Use immediate update for explicit save action
|
||||||
|
await userService.updateProfileImmediate(updates)
|
||||||
|
|
||||||
|
// Update local store state
|
||||||
|
Object.entries(updates).forEach(([key, value]) => {
|
||||||
|
userStore.setProfileField(key, value)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to save profile:', error)
|
||||||
|
} finally {
|
||||||
|
isSaving.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// changeAvatar function
|
||||||
|
const changeAvatar = (file: Event) => {
|
||||||
|
const fileReader = new FileReader()
|
||||||
|
const { files } = file.target as HTMLInputElement
|
||||||
|
|
||||||
|
if (files && files.length) {
|
||||||
|
fileReader.readAsDataURL(files[0])
|
||||||
|
fileReader.onload = () => {
|
||||||
|
if (typeof fileReader.result === 'string')
|
||||||
|
accountDataLocal.value.avatarImg = fileReader.result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// reset avatar image
|
||||||
|
const resetAvatar = () => {
|
||||||
|
accountDataLocal.value.avatarImg = userStore.getProfileField('avatar') || ''
|
||||||
|
// Clear the file input
|
||||||
|
if (refInputEl.value) {
|
||||||
|
refInputEl.value.value = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const countries = [
|
||||||
|
'United States',
|
||||||
|
'United Kingdom',
|
||||||
|
'Canada',
|
||||||
|
'Australia',
|
||||||
|
'Germany',
|
||||||
|
'France',
|
||||||
|
'India',
|
||||||
|
'China',
|
||||||
|
'Japan',
|
||||||
|
'Brazil',
|
||||||
|
'Mexico',
|
||||||
|
'South Africa',
|
||||||
|
]
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VRow>
|
||||||
|
<VCol cols="12">
|
||||||
|
<VCard title="Account Details">
|
||||||
|
<VCardText class="d-flex">
|
||||||
|
<!-- 👉 Avatar -->
|
||||||
|
<VAvatar
|
||||||
|
rounded="lg"
|
||||||
|
size="100"
|
||||||
|
class="me-6"
|
||||||
|
:image="accountDataLocal.avatarImg"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 👉 Upload Photo -->
|
||||||
|
<form class="d-flex flex-column justify-center gap-5">
|
||||||
|
<div class="d-flex flex-wrap gap-2">
|
||||||
|
<VBtn
|
||||||
|
color="primary"
|
||||||
|
@click="refInputEl?.click()"
|
||||||
|
>
|
||||||
|
<VIcon icon="mdi-cloud-upload" class="d-sm-none" />
|
||||||
|
<span class="d-none d-sm-block">Upload new photo</span>
|
||||||
|
</VBtn>
|
||||||
|
|
||||||
|
<input
|
||||||
|
ref="refInputEl"
|
||||||
|
type="file"
|
||||||
|
name="file"
|
||||||
|
accept=".jpeg,.png,.jpg,GIF"
|
||||||
|
hidden
|
||||||
|
@input="changeAvatar"
|
||||||
|
>
|
||||||
|
|
||||||
|
<VBtn
|
||||||
|
type="button"
|
||||||
|
color="error"
|
||||||
|
variant="outlined"
|
||||||
|
@click="resetAvatar"
|
||||||
|
>
|
||||||
|
<span class="d-none d-sm-block">Reset</span>
|
||||||
|
<VIcon icon="mdi-refresh" class="d-sm-none" />
|
||||||
|
</VBtn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-body-1 mb-0">
|
||||||
|
Allowed JPG, GIF or PNG. Max size of 800K
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</VCardText>
|
||||||
|
|
||||||
|
<VDivider />
|
||||||
|
|
||||||
|
<VCardText>
|
||||||
|
<!-- 👉 Form -->
|
||||||
|
<VForm class="mt-6">
|
||||||
|
<VRow>
|
||||||
|
<!-- 👉 First Name -->
|
||||||
|
<VCol
|
||||||
|
md="6"
|
||||||
|
cols="12"
|
||||||
|
>
|
||||||
|
<VTextField
|
||||||
|
v-model="accountDataLocal.name_given"
|
||||||
|
placeholder="John"
|
||||||
|
label="First Name"
|
||||||
|
:readonly="!isFieldEditable('name_given')"
|
||||||
|
:hint="!isFieldEditable('name_given') ? 'Managed by authentication provider' : ''"
|
||||||
|
persistent-hint
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<!-- 👉 Last Name -->
|
||||||
|
<VCol
|
||||||
|
md="6"
|
||||||
|
cols="12"
|
||||||
|
>
|
||||||
|
<VTextField
|
||||||
|
v-model="accountDataLocal.name_family"
|
||||||
|
placeholder="Doe"
|
||||||
|
label="Last Name"
|
||||||
|
:readonly="!isFieldEditable('name_family')"
|
||||||
|
:hint="!isFieldEditable('name_family') ? 'Managed by authentication provider' : ''"
|
||||||
|
persistent-hint
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<!-- 👉 Email -->
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
>
|
||||||
|
<VTextField
|
||||||
|
v-model="accountDataLocal.email"
|
||||||
|
label="E-mail"
|
||||||
|
placeholder="john.doe@example.com"
|
||||||
|
type="email"
|
||||||
|
:readonly="!isFieldEditable('email')"
|
||||||
|
:hint="!isFieldEditable('email') ? 'Managed by authentication provider' : ''"
|
||||||
|
persistent-hint
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<!-- 👉 Phone -->
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
>
|
||||||
|
<VTextField
|
||||||
|
v-model="accountDataLocal.phone"
|
||||||
|
label="Phone Number"
|
||||||
|
placeholder="+1 (555) 123-4567"
|
||||||
|
:readonly="!isFieldEditable('phone')"
|
||||||
|
:hint="!isFieldEditable('phone') ? 'Managed by authentication provider' : ''"
|
||||||
|
persistent-hint
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<!-- 👉 Address -->
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
>
|
||||||
|
<VTextField
|
||||||
|
v-model="accountDataLocal.address"
|
||||||
|
label="Address"
|
||||||
|
placeholder="123 Main St"
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<!-- 👉 City -->
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
>
|
||||||
|
<VTextField
|
||||||
|
v-model="accountDataLocal.city"
|
||||||
|
label="City"
|
||||||
|
placeholder="New York"
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<!-- 👉 State -->
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
>
|
||||||
|
<VTextField
|
||||||
|
v-model="accountDataLocal.state"
|
||||||
|
label="State/Province"
|
||||||
|
placeholder="State"
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<!-- 👉 Zip Code -->
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
>
|
||||||
|
<VTextField
|
||||||
|
v-model="accountDataLocal.zip"
|
||||||
|
label="Zip Code"
|
||||||
|
placeholder="10001"
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<!-- 👉 Country -->
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
md="6"
|
||||||
|
>
|
||||||
|
<VSelect
|
||||||
|
v-model="accountDataLocal.country"
|
||||||
|
label="Country"
|
||||||
|
:items="countries"
|
||||||
|
placeholder="Select Country"
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
|
||||||
|
<!-- 👉 Form Actions -->
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
class="d-flex flex-wrap gap-4"
|
||||||
|
>
|
||||||
|
<VBtn
|
||||||
|
@click="saveChanges"
|
||||||
|
:loading="isSaving"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
Save changes
|
||||||
|
</VBtn>
|
||||||
|
|
||||||
|
<VBtn
|
||||||
|
color="secondary"
|
||||||
|
variant="outlined"
|
||||||
|
type="reset"
|
||||||
|
@click.prevent="resetForm"
|
||||||
|
>
|
||||||
|
Reset
|
||||||
|
</VBtn>
|
||||||
|
</VCol>
|
||||||
|
</VRow>
|
||||||
|
</VForm>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</VCol>
|
||||||
|
</VRow>
|
||||||
|
</template>
|
||||||
116
src/components/ProfileNotifications.vue
Normal file
116
src/components/ProfileNotifications.vue
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const recentDevices = ref(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
type: 'New for you',
|
||||||
|
email: true,
|
||||||
|
browser: true,
|
||||||
|
app: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'Account activity',
|
||||||
|
email: true,
|
||||||
|
browser: true,
|
||||||
|
app: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'A new browser used to sign in',
|
||||||
|
email: true,
|
||||||
|
browser: true,
|
||||||
|
app: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'A new device is linked',
|
||||||
|
email: true,
|
||||||
|
browser: false,
|
||||||
|
app: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
||||||
|
const selectedNotification = ref('Only when I\'m online')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VCard title="Notifications">
|
||||||
|
<VCardText>
|
||||||
|
We need permission from your browser to show notifications.
|
||||||
|
<a href="javascript:void(0)">Request Permission</a>
|
||||||
|
</VCardText>
|
||||||
|
|
||||||
|
<VTable class="text-no-wrap">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">
|
||||||
|
Type
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
EMAIL
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
BROWSER
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
App
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="device in recentDevices"
|
||||||
|
:key="device.type"
|
||||||
|
>
|
||||||
|
<td>
|
||||||
|
{{ device.type }}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<VCheckbox v-model="device.email" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<VCheckbox v-model="device.browser" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<VCheckbox v-model="device.app" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</VTable>
|
||||||
|
<VDivider />
|
||||||
|
|
||||||
|
<VCardText>
|
||||||
|
<VForm @submit.prevent="() => {}">
|
||||||
|
<p class="text-base font-weight-medium">
|
||||||
|
When should we send you notifications?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<VRow>
|
||||||
|
<VCol
|
||||||
|
cols="12"
|
||||||
|
sm="6"
|
||||||
|
>
|
||||||
|
<VSelect
|
||||||
|
v-model="selectedNotification"
|
||||||
|
mandatory
|
||||||
|
:items="['Only when I\'m online', 'Anytime']"
|
||||||
|
/>
|
||||||
|
</VCol>
|
||||||
|
</VRow>
|
||||||
|
|
||||||
|
<div class="d-flex flex-wrap gap-4 mt-4">
|
||||||
|
<VBtn type="submit">
|
||||||
|
Save Changes
|
||||||
|
</VBtn>
|
||||||
|
<VBtn
|
||||||
|
color="secondary"
|
||||||
|
variant="outlined"
|
||||||
|
type="reset"
|
||||||
|
>
|
||||||
|
Reset
|
||||||
|
</VBtn>
|
||||||
|
</div>
|
||||||
|
</VForm>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
70
src/components/ProfileSecurity.vue
Normal file
70
src/components/ProfileSecurity.vue
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue'
|
||||||
|
import { useIntegrationStore } from '@KTXC/stores/integrationStore'
|
||||||
|
|
||||||
|
const integrationStore = useIntegrationStore()
|
||||||
|
|
||||||
|
// Get all registered security panel components from modules
|
||||||
|
const securityPanels = computed(() => {
|
||||||
|
return integrationStore.getItems('user_settings_security')
|
||||||
|
})
|
||||||
|
|
||||||
|
// Store resolved components
|
||||||
|
const resolvedComponents = ref<Array<{ id: string; label: string; priority: number; component: any }>>([])
|
||||||
|
|
||||||
|
// Load components on mount
|
||||||
|
onMounted(async () => {
|
||||||
|
// Resolve all component loaders
|
||||||
|
const components = []
|
||||||
|
for (const panel of securityPanels.value) {
|
||||||
|
try {
|
||||||
|
if (panel.component) {
|
||||||
|
const module = await panel.component()
|
||||||
|
components.push({
|
||||||
|
id: panel.id,
|
||||||
|
label: panel.label || panel.id,
|
||||||
|
priority: panel.priority ?? 100,
|
||||||
|
component: module.default
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[ProfileSecurity] Failed to load component for', panel.id, ':', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort by priority and store
|
||||||
|
resolvedComponents.value = components.sort((a, b) => a.priority - b.priority)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VRow dense>
|
||||||
|
<!-- Render all registered security panel components from modules -->
|
||||||
|
<component
|
||||||
|
v-for="panel in resolvedComponents"
|
||||||
|
:key="panel.id"
|
||||||
|
:is="panel.component"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Fallback message if no panels are registered -->
|
||||||
|
<VCol
|
||||||
|
v-if="resolvedComponents.length === 0"
|
||||||
|
cols="12"
|
||||||
|
>
|
||||||
|
<VCard>
|
||||||
|
<VCardText class="text-center pa-8">
|
||||||
|
<VIcon
|
||||||
|
icon="mdi-shield-lock-outline"
|
||||||
|
size="48"
|
||||||
|
class="mb-4"
|
||||||
|
color="grey"
|
||||||
|
/>
|
||||||
|
<p class="text-h6 mb-2">No Security Settings Available</p>
|
||||||
|
<p class="text-body-2 text-medium-emphasis">
|
||||||
|
No security modules are currently enabled or installed.
|
||||||
|
</p>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</VCol>
|
||||||
|
</VRow>
|
||||||
|
</template>
|
||||||
40
src/integrations.ts
Normal file
40
src/integrations.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import type { ModuleIntegrations } from "@KTXC/types/moduleTypes";
|
||||||
|
|
||||||
|
const integrations: ModuleIntegrations = {
|
||||||
|
profile_menu: [
|
||||||
|
{
|
||||||
|
id: 'user_profile',
|
||||||
|
label: 'Profile & Settings',
|
||||||
|
path: '/me',
|
||||||
|
icon: 'mdi-account-outline',
|
||||||
|
priority: 90,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// User personal settings
|
||||||
|
user_settings_menu: [
|
||||||
|
{
|
||||||
|
id: 'profile',
|
||||||
|
label: 'Profile',
|
||||||
|
path: '/me/profile',
|
||||||
|
icon: 'mdi-account-circle',
|
||||||
|
priority: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'preferences',
|
||||||
|
label: 'Preferences',
|
||||||
|
path: '/me/preferences',
|
||||||
|
icon: 'mdi-tune',
|
||||||
|
priority: 20,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'security',
|
||||||
|
label: 'Security',
|
||||||
|
path: '/me/security',
|
||||||
|
icon: 'mdi-shield-lock',
|
||||||
|
priority: 30,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default integrations;
|
||||||
4
src/main.ts
Normal file
4
src/main.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
import routes from '@/routes'
|
||||||
|
import integrations from '@/integrations'
|
||||||
|
|
||||||
|
export { routes, integrations }
|
||||||
20
src/routes.ts
Normal file
20
src/routes.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
name: 'user_profile',
|
||||||
|
path: '/me',
|
||||||
|
component: () => import('@/views/ProfilePage.vue'),
|
||||||
|
meta: {
|
||||||
|
requiresAuth: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'user_profile-tab',
|
||||||
|
path: '/me/:tab',
|
||||||
|
component: () => import('@/views/ProfilePage.vue'),
|
||||||
|
meta: {
|
||||||
|
requiresAuth: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export default routes
|
||||||
66
src/views/ProfilePage.vue
Normal file
66
src/views/ProfilePage.vue
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import ProfileAccount from '@/components/ProfileAccount.vue'
|
||||||
|
import ProfileNotifications from '@/components/ProfileNotifications.vue'
|
||||||
|
import ProfileSecurity from '@/components/ProfileSecurity.vue'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const activeTab = ref(route.params.tab || 'account')
|
||||||
|
|
||||||
|
// tabs
|
||||||
|
const tabs = [
|
||||||
|
{ title: 'Account', icon: 'mdi-account-outline', tab: 'account' },
|
||||||
|
{ title: 'Security', icon: 'mdi-lock-outline', tab: 'security' },
|
||||||
|
{ title: 'Notifications', icon: 'mdi-bell-outline', tab: 'notifications' },
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PerfectScrollbar
|
||||||
|
class="pa-4"
|
||||||
|
style="height: calc(100vh - 64px);"
|
||||||
|
:options="{ wheelPropagation: false }"
|
||||||
|
>
|
||||||
|
<VTabs
|
||||||
|
v-model="activeTab"
|
||||||
|
show-arrows
|
||||||
|
class="v-tabs-pill"
|
||||||
|
>
|
||||||
|
<VTab
|
||||||
|
v-for="item in tabs"
|
||||||
|
:key="item.icon"
|
||||||
|
:value="item.tab"
|
||||||
|
>
|
||||||
|
<VIcon
|
||||||
|
size="20"
|
||||||
|
start
|
||||||
|
:icon="item.icon"
|
||||||
|
/>
|
||||||
|
{{ item.title }}
|
||||||
|
</VTab>
|
||||||
|
</VTabs>
|
||||||
|
|
||||||
|
<VWindow
|
||||||
|
v-model="activeTab"
|
||||||
|
class="mt-5 disable-tab-transition"
|
||||||
|
:touch="false"
|
||||||
|
>
|
||||||
|
<!-- Account -->
|
||||||
|
<VWindowItem value="account">
|
||||||
|
<ProfileAccount />
|
||||||
|
</VWindowItem>
|
||||||
|
|
||||||
|
<!-- Security -->
|
||||||
|
<VWindowItem value="security">
|
||||||
|
<ProfileSecurity />
|
||||||
|
</VWindowItem>
|
||||||
|
|
||||||
|
<!-- Notification -->
|
||||||
|
<VWindowItem value="notifications">
|
||||||
|
<ProfileNotifications />
|
||||||
|
</VWindowItem>
|
||||||
|
</VWindow>
|
||||||
|
</PerfectScrollbar>
|
||||||
|
</template>
|
||||||
15
tsconfig.app.json
Normal file
15
tsconfig.app.json
Normal file
@@ -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/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
19
tsconfig.node.json
Normal file
19
tsconfig.node.json
Normal file
@@ -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"]
|
||||||
|
}
|
||||||
|
}
|
||||||
26
vite.config.ts
Normal file
26
vite.config.ts
Normal file
@@ -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'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user