vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Redo auth

pull/7232/head
Cagatay Civici 2025-02-11 13:26:24 +03:00
parent 7a3b228ae3
commit 9e35aa1804
7 changed files with 107 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
apps/showcase/components/layout/AppDesigner.vue
View File

@ -53,7 +53,8 @@ export default {
activateTheme: this.activateTheme,
applyTheme: this.applyTheme,
applyFont: this.applyFont,
replaceColorPalette: this.replaceColorPalette
replaceColorPalette: this.replaceColorPalette,
getCSRFToken: this.getCSRFToken
}
};
},
@ -62,6 +63,14 @@ export default {
deferredTabs: true
};
},
async mounted() {
const { data } = await $fetch(this.designerApiBase + '/license/restore', {
credentials: 'include'
});
this.$appState.designer.verified = data.valid;
this.$appState.designer.themeLimit = data.themeLimit;
},
methods: {
onShow() {
this.deferredTabs = false;
@ -70,15 +79,15 @@ export default {
this.deferredTabs = true;
},
async downloadTheme(theme) {
if (!this.$appState.designer.licenseKey) {
this.$toast.add({ severity: 'error', summary: 'Not Available', detail: 'A license is required to download', life: 3000 });
if (!this.$appState.designer.verified) {
this.$toast.add({ severity: 'error', summary: 'Not Available', detail: 'A license is required for download.', life: 3000 });
} else {
try {
const response = await $fetch(this.designerApiBase + '/theme/download/' + theme.t_key, {
responseType: 'blob',
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.getCSRFToken()
},
query: {
library: 'primevue'
@ -106,9 +115,9 @@ export default {
async saveTheme(theme) {
const { error } = await $fetch(this.designerApiBase + '/theme/update', {
method: 'PATCH',
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.getCSRFToken()
},
body: {
key: theme.key,
@ -122,7 +131,7 @@ export default {
}
},
applyTheme(theme) {
if (this.$appState.designer.licenseKey) {
if (this.$appState.designer.verified) {
this.saveTheme(theme);
}
@ -212,6 +221,14 @@ export default {
document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
this.replaceColorPalette();
this.refreshACTokens();
},
getCSRFToken() {
const name = 'X-CSRF-Token';
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
else return null;
}
},
computed: {

13
apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
View File

@ -107,16 +107,17 @@ export default {
document.body.classList.remove('material');
}
if (this.$appState.designer.licenseKey) {
if (this.$appState.designer.verified) {
const { data, error } = await $fetch(this.designerApiBase + '/theme/create', {
method: 'POST',
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.designerService.getCSRFToken()
},
body: {
name: this.themeName,
preset: newPreset,
project: 'primevue',
config: {
fontSize: '14px',
fontFamily: 'Inter var'
@ -135,12 +136,12 @@ export default {
},
async createThemeFromFigma() {
if (this.figmaData) {
if (this.$appState.designer.licenseKey) {
if (this.$appState.designer.verified) {
const { data, error } = await $fetch(this.designerApiBase + '/theme/figma', {
method: 'POST',
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.designerService.getCSRFToken()
},
body: {
name: this.themeName,

95
apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
View File

@ -5,14 +5,20 @@
</NuxtLink>
</div>
<div class="text-lg font-semibold mb-2">License Key</div>
<div class="text-lg font-semibold mb-2">Authenticate</div>
<span class="block text-muted-color leading-6 mb-4"
>A license can be purchased from PrimeStore, if you do not have a license key, you are still able to experience the Designer in trial mode. In trial mode, downloads, figma to code, migration assistand and cloud storage are not available.
<NuxtLink to="/designer" class="doc-link">Learn more</NuxtLink> about the Theme Designer.</span
>
<form @submit.prevent class="flex gap-4">
<input v-model="licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" />
<button type="button" @click="activate(false)" icon="pi pi-download" :disabled="!licenseKey" class="btn-design">Activate</button>
<span class="block text-muted-color leading-6 mb-4">License Key and Passkey are available at <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a>.</span>
<form v-if="!$appState.designer.verified" @submit.prevent class="flex gap-4">
<input v-model="licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" placeholder="License Key" />
<input v-model="otp" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700" placeholder="Passkey" />
<button type="button" @click="activate(false)" class="btn-design">Activate</button>
</form>
<form v-else @submit.prevent class="flex gap-4">
<input value="***********************************************************" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" placeholder="License Key" disabled />
<button type="button" @click="signOut" class="btn-design">Sign Out</button>
</form>
<div class="flex justify-between items-center mb-2 mt-6">
@ -77,7 +83,8 @@ export default {
inject: ['designerService'],
data() {
return {
licenseKey: this.$appState.designer.licenseKey,
licenseKey: null,
otp: null,
loading: false,
currentTheme: null,
confirmDialogVisible: false,
@ -121,42 +128,72 @@ export default {
};
},
created() {
if (!this.$appState.designer.licenseKey) {
const keyValue = localStorage.getItem(this.$appState.designer.localStoreKey);
if (keyValue) {
this.licenseKey = keyValue;
this.activate(true);
}
} else {
if (this.$appState.designer.verified) {
this.loadThemes();
}
},
methods: {
async activate(silent) {
const { data, error } = await $fetch(this.designerApiBase + '/license/verify/' + this.licenseKey);
const { data, error } = await $fetch(this.designerApiBase + '/license/signin/' + this.licenseKey, {
credentials: 'include',
query: {
passkey: this.otp
}
});
if (error) {
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
} else {
if (data.valid) {
this.$appState.designer.licenseKey = this.licenseKey;
this.$appState.designer.ticket = data.ticket;
this.$appState.designer.verified = true;
this.$appState.designer.themeLimit = data.themeLimit;
this.loadThemes();
localStorage.setItem(this.$appState.designer.localStoreKey, this.licenseKey);
if (!silent) {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'License is activated.', life: 3000 });
}
} else {
this.$toast.add({ severity: 'warn', summary: 'Unable to Activate', detail: 'Invalid key', life: 3000 });
this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Invalid key.', life: 3000 });
this.$appState.designer.themes = [];
}
}
},
async signOut() {
const { data } = await $fetch(this.designerApiBase + '/license/signout/', {
credentials: 'include'
});
if (data.signout) {
this.$appState.designer.verified = false;
this.$appState.designer.themeLimit = null;
this.$appState.designer.themes = [];
this.$appState.designer.acTokens = [];
this.$appState.designer = {
verified: false,
ticket: null,
themeLimit: null,
active: true,
activeView: 'dashboard',
activeTab: '0',
theme: {
key: null,
name: null,
preset: null,
config: null
},
acTokens: [],
themes: []
};
this.licenseKey = null;
this.otp = null;
this.currentTheme = null;
usePreset(Aura);
}
},
openNewTheme() {
if (!this.themeLimitReached) {
this.$appState.designer.activeView = 'create_theme';
@ -165,9 +202,9 @@ export default {
async loadThemes() {
this.loading = true;
const { data, error } = await $fetch(this.designerApiBase + '/theme/list/', {
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.designerService.getCSRFToken()
}
});
@ -181,9 +218,9 @@ export default {
},
async loadTheme(theme) {
const { data, error } = await $fetch(this.designerApiBase + '/theme/load/' + theme.t_key, {
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.designerService.getCSRFToken()
}
});
@ -197,9 +234,9 @@ export default {
async renameTheme(theme) {
const { error } = await $fetch(this.designerApiBase + '/theme/rename/' + theme.t_key, {
method: 'PATCH',
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.designerService.getCSRFToken()
},
body: {
name: theme.t_name
@ -213,9 +250,9 @@ export default {
async deleteTheme(theme) {
const { error } = await $fetch(this.designerApiBase + '/theme/delete/' + theme.t_key, {
method: 'DELETE',
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.designerService.getCSRFToken()
}
});
@ -228,9 +265,9 @@ export default {
async duplicateTheme(theme) {
const { error } = await $fetch(this.designerApiBase + '/theme/duplicate/' + theme.t_key, {
method: 'POST',
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.designerService.getCSRFToken()
}
});

8
apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
View File

@ -106,9 +106,9 @@ export default {
async preview() {
const { data, error } = await $fetch(this.designerApiBase + '/theme/migrate/preview/' + this.$appState.designer.theme.key, {
method: 'PATCH',
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.designerService.getCSRFToken()
}
});
@ -139,9 +139,9 @@ export default {
async migrate() {
const { data, error } = await $fetch(this.designerApiBase + '/theme/migrate/execute/' + this.$appState.designer.theme.key, {
method: 'PATCH',
credentials: 'include',
headers: {
Authorization: `Bearer ${this.$appState.designer.ticket}`,
'X-License-Key': this.$appState.designer.licenseKey
'X-CSRF-Token': this.designerService.getCSRFToken()
}
});

2
apps/showcase/doc/iconfield/BasicDoc.vue
View File

@ -5,7 +5,7 @@
<div class="card flex flex-wrap justify-center gap-4">
<IconField>
<InputIcon class="pi pi-search" />
<InputText v-model="value1" placeholder="Search" />
<Password v-model="value1" placeholder="Search" />
</IconField>
<IconField>

6
apps/showcase/doc/inputnumber/ButtonsDoc.vue
View File

@ -5,16 +5,16 @@
<div class="card flex flex-wrap gap-4">
<div class="flex-auto">
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid disabled />
</div>
<div class="flex-auto">
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid disabled />
</div>
<div class="flex-auto">
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid disabled>
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>

3
apps/showcase/plugins/app-state.js
View File

@ -15,8 +15,7 @@ const $appState = {
announcement: null,
storageKey: 'primevue',
designer: {
localStoreKey: 'primevue-designer',
licenseKey: null,
verified: false,
ticket: null,
themeLimit: null,
active: false,