MrDiderot/CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace custom CRM with Monica fork
Some checks failed
Build & Push Monica Image to Gitea Registry / build-and-push (push) Failing after 9s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-22 16:19:55 +02:00
parent 38cc4c09ca
commit a213a1dba0
2215 changed files with 242567 additions and 6015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
resources/js/components/passport/AuthorizedClients.vue Normal file
View File

@@ -0,0 +1,96 @@
<template>
<div>
<h3 class="mb3">
{{ $t('settings.api_authorized_clients') }}
</h3>
<p>{{ $t('settings.api_authorized_clients_desc') }}</p>
<!-- Authorized Clients -->
<p v-if="tokens.length === 0" class="mb0">
{{ $t('settings.api_authorized_clients_none') }}
</p>
<div v-else class="dt dt--fixed w-100 collapse br--top br--bottom">
<em>{{ $t('settings.api_authorized_clients_title') }}</em>
<div class="dt-row">
<div class="dtc w-20">
<div class="pa2 b">
{{ $t('settings.api_authorized_clients_name') }}
</div>
</div>
<div class="dtc w-20">
<div class="pa2 b">
{{ $t('settings.api_authorized_clients_scopes') }}
</div>
</div>
<div class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
<div class="pa2 b">
{{ $t('settings.personalization_contact_field_type_table_actions') }}
</div>
</div>
</div>
<div v-for="token in tokens" :key="token.id" class="dt-row bb b--light-gray">
<!-- Client Name -->
<div class="dtc">
<div class="pa2">
{{ token.client.name }}
</div>
</div>
<!-- Scopes -->
<div class="dtc">
<div class="pa2">
<span v-if="token.scopes.length > 0">
{{ token.scopes.join(', ') }}
</span>
</div>
</div>
<!-- Revoke Button -->
<div class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
<div class="pa2">
<span class="pointer" @click="revoke(token)">{{ $t('app.revoke') }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tokens: []
};
},
mounted() {
this.getTokens();
},
methods: {
/**
* Get all of the authorized tokens for the user.
*/
getTokens() {
axios.get('oauth/tokens')
.then(response => {
this.tokens = response.data;
});
},
/**
* Revoke the given token.
*/
revoke(token) {
axios.delete('oauth/tokens/' + token.id)
.then(response => {
this.getTokens();
});
}
}
};
</script>

316
resources/js/components/passport/Clients.vue Normal file
View File

@@ -0,0 +1,316 @@
<template>
<div>
<notifications group="passport-clients" position="top middle" :duration="5000" width="400" />
<h3 class="mb3">
{{ $t('settings.api_oauth_clients') }}
<a class="btn nt2" :class="[ dirltr ? 'fr' : 'fl' ]" href="" @click.prevent="showCreateClientForm">
{{ $t('settings.api_oauth_create_new') }}
</a>
</h3>
<p>{{ $t('settings.api_oauth_clients_desc') }}</p>
<p v-html="$t('settings.api_oauth_clients_desc2', { url: 'https://laravel.com/docs/master/passport#requesting-tokens' })"></p>
<!-- Current Clients -->
<p v-if="clients.length === 0" class="mb0">
{{ $t('settings.api_oauth_not_created') }}
</p>
<div v-else class="dt w-100 collapse br--top br--bottom">
<em>{{ $t('settings.api_oauth_title') }}</em>
<div class="dt-row">
<div class="dtc w-20">
<div class="pa2 b">
{{ $t('settings.api_oauth_clientid') }}
</div>
</div>
<div class="dtc w-20">
<div class="pa2 b">
{{ $t('settings.api_oauth_name') }}
</div>
</div>
<div class="dtc">
<div class="pa2 b">
{{ $t('settings.api_oauth_secret') }}
</div>
</div>
<div class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
<div class="pa2 b">
{{ $t('settings.personalization_contact_field_type_table_actions') }}
</div>
</div>
</div>
<div v-for="client in clients" :key="client.id" class="dt-row bb b--light-gray">
<!-- ID -->
<div class="dtc">
<div class="pa2">
{{ client.id }}
</div>
</div>
<!-- Name -->
<div class="dtc">
<div class="pa2">
{{ client.name }}
</div>
</div>
<!-- Secret -->
<div class="dtc">
<div class="pa2 flex flex-auto">
<code dir="ltr">{{ client.secret }}</code>
<em class="fa fa-clipboard pointer" :class="[ dirltr ? 'ml2' : 'mr2' ]"
:title="$t('settings.dav_copy_help')"
@click="copyIntoClipboard(client.secret)"
></em>
</div>
</div>
<div class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
<div class="pa2">
<em class="fa fa-pencil-square-o pointer pr2" @click="edit(client)"></em>
<em class="fa fa-trash-o pointer" @click="destroy(client)"></em>
</div>
</div>
</div>
</div>
<!-- Create Client Modal -->
<sweet-modal ref="modalClient" overlay-theme="dark" tabindex="-1" role="dialog"
:title="form.id ? $t('settings.api_oauth_edit') : $t('settings.api_oauth_create')"
@open="_focusInput"
>
<!-- Form Errors -->
<errors :errors="form.errors" />
<!-- Create Client Form -->
<form ref="form" class="form-horizontal" role="form">
<!-- Name -->
<div class="form-group">
<div class="col-md-auto">
<form-input
:id="'client-name'"
ref="clientName"
v-model="form.name"
:iclass="'br2 f5 w-50 ba b--black-40 pa2 outline-0'"
:required="true"
:title="$t('settings.api_oauth_name')"
:validator="$v.form.name"
@submit="store"
/>
<span class="help-block">
{{ $t('settings.api_oauth_name_help') }}
</span>
</div>
</div>
<!-- Redirect URL -->
<div class="form-group">
<div class="col-md-auto">
<form-input
:id="'redirect-url'"
v-model="form.redirect"
:iclass="'br2 f5 w-50 ba b--black-40 pa2 outline-0'"
:required="true"
:title="$t('settings.api_oauth_redirecturl')"
:validator="$v.form.redirect"
@submit="store"
/>
<span class="help-block">
{{ $t('settings.api_oauth_redirecturl_help') }}
</span>
</div>
</div>
</form>
<!-- Modal Actions -->
<div slot="button">
<a class="btn" href="" @click.prevent="closeModal">
{{ $t('app.close') }}
</a>
<a class="btn btn-primary" href="" @click.prevent="store">
{{ form.id ? $t('app.save') : $t('app.create') }}
</a>
</div>
</sweet-modal>
</div>
</template>
<script>
import Errors from '../partials/Error.vue';
import { SweetModal } from 'sweet-modal-vue';
import { validationMixin } from 'vuelidate';
import { required, url } from 'vuelidate/lib/validators';
export default {
components: {
SweetModal,
Errors,
},
mixins: [validationMixin],
data() {
return {
clients: [],
form: {
errors: [],
name: '',
redirect: ''
},
};
},
validations: {
form: {
name: {
required,
},
redirect: {
required,
url,
}
}
},
computed: {
dirltr() {
return this.$root.htmldir === 'ltr';
}
},
mounted() {
this.prepareComponent();
},
methods: {
prepareComponent() {
this.getClients();
},
/**
* Focus on modal open.
*/
_focusInput() {
const vm = this;
setTimeout(function() {
vm.$refs.clientName.focus();
}, 10);
},
/**
* Get all of the OAuth clients for the user.
*/
getClients() {
axios.get('oauth/clients')
.then(response => {
this.clients = response.data;
});
},
/**
* Show the form for creating new clients.
*/
showCreateClientForm() {
this.resetField();
this.$refs.modalClient.open();
},
/**
* Create a new OAuth client for the user.
*/
store() {
this.$v.$touch();
if (this.$v.$invalid) {
return;
}
const method = this.form.id ? 'put' : 'post';
const url = this.form.id ? 'oauth/clients/' + this.form.id : 'oauth/clients';
this.persistClient(method, url, this.form);
},
/**
* Edit the given client.
*/
edit(client) {
this.form = Object.assign({errors:[]}, client);
this.$refs.modalClient.open();
},
/**
* Persist the client to storage using the given form.
*/
persistClient(method, uri, form) {
form.errors = [];
axios[method](uri, form)
.then(response => {
this.getClients();
this.closeModal();
})
.catch(error => {
if (typeof error.response.data === 'object') {
form.errors = _.flatten(_.toArray(error.response.data));
} else {
form.errors = [this.$t('app.error_try_again')];
}
});
},
/**
* Destroy the given client.
*/
destroy(client) {
axios.delete('oauth/clients/' + client.id)
.then(response => {
this.getClients();
});
},
closeModal() {
this.resetField();
this.$v.$reset();
this.$refs.form.reset();
this.$refs.modalClient.close();
},
resetField() {
this.form = {
id: '',
errors:[],
name: '',
redirect: '',
};
},
/**
* Copy text into clipboard
*/
copyIntoClipboard(text) {
this.$copyText(text)
.then(response => {
this.notify(this.$t('settings.dav_clipboard_copied'), true);
});
},
notify(text, success) {
this.$notify({
group: 'passport-clients',
title: text,
text: '',
type: success ? 'success' : 'error'
});
}
}
};
</script>

338
resources/js/components/passport/PersonalAccessTokens.vue Normal file
View File

@@ -0,0 +1,338 @@
<style scoped>
.access-key {
border: 1px solid #cacaca;
border-radius: 3px;
padding: 10px 10px 0;
background-color: #fafafa;
}
pre {
font-size: 12px;
word-wrap: break-word;
white-space: pre-wrap;
}
</style>
<template>
<div>
<h3 class="mb3">
{{ $t('settings.api_personal_access_tokens') }}
<a class="btn nt2" :class="[ dirltr ? 'fr' : 'fl' ]" href="" @click.prevent="showCreateTokenForm">
{{ $t('settings.api_token_create_new') }}
</a>
</h3>
<p>{{ $t('settings.api_pao_description') }}</p>
<!-- No Tokens Notice -->
<p v-if="tokens.length === 0" class="mb0">
{{ $t('settings.api_token_not_created') }}
</p>
<div v-else class="dt w-75 collapse br--top br--bottom">
<em>{{ $t('settings.api_token_title') }}</em>
<div class="dt-row">
<div class="dtc">
<div class="pa2 b">
{{ $t('settings.api_token_name') }}
</div>
</div>
<div class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
<div class="pa2 b">
{{ $t('settings.personalization_contact_field_type_table_actions') }}
</div>
</div>
</div>
<div v-for="token in tokens" :key="token.id" class="dt-row bb b--light-gray">
<!-- Client Name -->
<div class="dtc">
<div v-tooltip="$t('settings.api_token_expire', { date: token.expires_at })" class="pa2">
{{ token.name }}
</div>
</div>
<div class="dtc" :class="[ dirltr ? 'tr' : 'tl' ]">
<div class="pa2">
<span class="pointer" @click="revoke(token)">{{ $t('app.delete') }}</span>
</div>
</div>
</div>
</div>
<!-- Create Token Modal -->
<sweet-modal ref="modalCreateToken" overlay-theme="dark" tabindex="-1" role="dialog"
:title="$t('settings.api_token_create')" @open="_focusInput"
>
<!-- Form Errors -->
<errors :errors="form.errors" />
<!-- Create Token Form -->
<form ref="form" class="form-horizontal" role="form" @submit.prevent="store">
<!-- Name -->
<div class="col-md-auto">
<form-input
:id="'create-token-name'"
ref="createTokenName"
v-model="form.name"
:name="'name'"
:iclass="'br2 f5 w-50 ba b--black-40 pa2 outline-0'"
:required="true"
:title="$t('settings.api_token_name')"
:validator="$v.form.name"
/>
</div>
<!-- Scopes -->
<div v-if="scopes.length > 0" class="form-group">
<label class="col-md-4 col-form-label">
{{ $t('settings.api_token_scopes') }}
</label>
<div class="col-md-auto">
<div v-for="scope in scopes" :key="scope.id">
<div class="checkbox">
<label>
<input type="checkbox"
:checked="scopeIsAssigned(scope.id)"
@click="toggleScope(scope.id)"
/>
{{ scope.id }}
</label>
</div>
</div>
</div>
</div>
</form>
<!-- Modal Actions -->
<div slot="button">
<a class="btn" href="" @click.prevent="closeModal">
{{ $t('app.close') }}
</a>
<a class="btn btn-primary" href="" @click.prevent="store">
{{ $t('app.create') }}
</a>
</div>
</sweet-modal>
<!-- Access Token Modal -->
<sweet-modal ref="modalAccessToken" overlay-theme="dark" tabindex="-1" role="dialog" :title="$t('settings.api_token_title')">
<notifications group="passport-personal-access-token" position="middle" :duration="5000" width="400" />
<p>{{ $t('settings.api_token_help') }}</p>
<div class="flex-auto access-key overflow-y-scroll" style="max-height: 400px;" @click.prevent="copyIntoClipboard(accessToken)">
<pre><code>{{ accessToken }}</code></pre>
</div>
<!-- Modal Actions -->
<div slot="button">
<a class="btn btn-primary" :title="$t('settings.dav_copy_help')" href="" @click.prevent="copyIntoClipboard(accessToken)">
{{ $t('app.copy') }}
</a>
<a class="btn" href="" @click.prevent="closeModal">
{{ $t('app.close') }}
</a>
</div>
</sweet-modal>
</div>
</template>
<script>
import Errors from '../partials/Error.vue';
import { SweetModal } from 'sweet-modal-vue';
import { validationMixin } from 'vuelidate';
import { required } from 'vuelidate/lib/validators';
export default {
components: {
SweetModal,
Errors,
},
mixins: [validationMixin],
data() {
return {
endpoint: '',
accessToken: null,
tokens: [],
scopes: [],
form: {
name: '',
scopes: [],
errors: []
},
};
},
validations: {
form: {
name: {
required,
}
}
},
computed: {
dirltr() {
return this.$root.htmldir === 'ltr';
}
},
mounted() {
this.prepareComponent();
},
methods: {
prepareComponent() {
//this.$refs.modalAccessToken.$refs.content.className = 'flex-auto';
this.$refs.modalAccessToken.$refs.content.getElementsByClassName('sweet-content-content')[0].className = 'flex-auto';
this.getTokens();
this.getScopes();
},
/**
* Get all of the personal access tokens for the user.
*/
getTokens() {
axios.get('oauth/personal-access-tokens')
.then(response => {
this.tokens = response.data;
});
},
/**
* Get all of the available scopes.
*/
getScopes() {
axios.get('oauth/scopes')
.then(response => {
this.scopes = response.data;
});
},
/**
* Close all modals.
*/
closeModal() {
this.$refs.form.reset();
this.$v.$reset();
this.$refs.modalCreateToken.close();
this.$refs.modalAccessToken.close();
},
/**
* Focus on modal open.
*/
_focusInput() {
const vm = this;
setTimeout(function() {
vm.$refs.createTokenName.focus();
}, 10);
},
/**
* Show the form for creating new tokens.
*/
showCreateTokenForm() {
this.$refs.modalCreateToken.open();
},
/**
* Create a new personal access token.
*/
store() {
this.$v.$touch();
if (this.$v.$invalid) {
return;
}
this.accessToken = null;
this.form.errors = [];
axios.post('oauth/personal-access-tokens', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
this.tokens.push(response.data.token);
this.showAccessToken(response.data.accessToken);
})
.catch(error => {
if (typeof error.response.data === 'object') {
this.form.errors = _.flatten(_.toArray(error.response.data));
} else {
this.form.errors = [this.$t('app.error_try_again')];
}
});
},
/**
* Toggle the given scope in the list of assigned scopes.
*/
toggleScope(scope) {
if (this.scopeIsAssigned(scope)) {
this.form.scopes = _.reject(this.form.scopes, s => s === scope);
} else {
this.form.scopes.push(scope);
}
},
/**
* Determine if the given scope has been assigned to the token.
*/
scopeIsAssigned(scope) {
return _.indexOf(this.form.scopes, scope) >= 0;
},
/**
* Show the given access token to the user.
*/
showAccessToken(accessToken) {
this.$refs.modalCreateToken.close();
this.accessToken = accessToken;
this.$refs.modalAccessToken.open();
},
/**
* Revoke the given token.
*/
revoke(token) {
axios.delete('oauth/personal-access-tokens/' + token.id)
.then(response => {
this.getTokens();
});
},
/**
* Copy text into clipboard
*/
copyIntoClipboard(text) {
this.$copyText(text)
.then(response => {
this.notify(this.$t('settings.dav_clipboard_copied'), true);
});
},
notify(text, success) {
this.$notify({
group: 'passport-personal-access-token',
title: text,
text: '',
type: success ? 'success' : 'error'
});
}
}
};
</script>