mdhub/app/application/resources/views/site/access-tokens/create.blade.php

90 lines
5.0 KiB
PHP

@section('meta_title', __('site.Create an access token'))
@section('h1', __('site.Create an access token'))
<x-layout.site>
<form method="post" id="token-store">
@csrf
<x-site.forms.input :title="__('validation.attributes.name')" name="name" type="text" value="" required autofocus />
<x-site.forms.select :title="__('validation.attributes.permissions')" name="permissions" :list="$permissions"></x-site.forms.select>
<div class="form-block">
<button class="button" type="submit">{{ __('Create') }}</button>
</div>
</form>
@push('scripts')
<div id="generated-token" style="display: none;">
<div class="generated-token__content">
<div class="generated-token__content__head">
{{ __('Token created') }}
</div>
<p>{{ __('Token Name') }}:<br><span id="generated-token-name"></span></p>
<p>{{ __('Access Permissions') }}:<br><span id="generated-token-permissions"></span></p>
<p><strong>{{ __('To use the access token from your Docker CLI client:') }}</strong></p>
<p><strong>1. {{ __('Run command') }}</strong></p>
<div class="block-copy">
<span class="block-copy-text">docker login {{ $serviceAddress }} -u {{ $user->username }}</span>
<button type="button" data-default="{{ __('Copy') }}" data-copy-error="{{ __('Error copy') }}" data-copy-success="{{ __('Copied') }}">{{ __('Copy') }}</button>
</div>
<p><strong>2. {{ __('At the password prompt, enter the personal access token.') }}</strong></p>
<div class="block-copy">
<span class="block-copy-text" id="generated-token-text"></span>
<button type="button" data-default="{{ __('Copy') }}" data-copy-error="{{ __('Error copy') }}" data-copy-success="{{ __('Copied') }}">{{ __('Copy') }}</button>
</div>
<p class="warning"><strong>{{ __('WARNING') }}</strong>: {{ __('This access token will only be displayed once. It will not be stored and cannot be retrieved. Please be sure to save it now.') }}</p>
<a href="{{ route('profile.access-tokens.index') }}" class="button">{{ __('OK, I saved it') }}</a>
</div>
</div>
<script>
(function() {
let formTokenStore = document.querySelector('#token-store');
if (formTokenStore) {
formTokenStore.addEventListener('submit', function(event) {
event.preventDefault();
[].slice.call(document.querySelector('#content').querySelectorAll('.alert.alert-danger')).map(function(el) {
el.remove();
});
axios.post(
'{{ route('profile.access-tokens.store') }}',
formTokenStore,
{
headers: {
'Content-Type': 'application/json'
},
}
)
.then(response => {
let blockToken = document.querySelector('#generated-token');
if (!blockToken) {
return null;
}
blockToken.querySelector('#generated-token-name').textContent = response.data.name;
blockToken.querySelector('#generated-token-permissions').textContent = response.data.permission;
blockToken.querySelector('#generated-token-text').textContent = response.data.token;
blockToken.style.display = 'block';
})
.catch(error => {
let messages = '<ul>';
if (error.response && error.response.data && error.response.data.errors) {
for (let key in error.response.data.errors) {
messages += '<li>' + error.response.data.errors[key] + '</li>';
}
} else {
messages += '<li>{{ __('Server Error') }}</li>';
messages += '<li>' + error + '</li>';
}
messages += '</ul>';
let container = document.createElement("div");
container.classList = 'alert alert-danger';
container.setAttribute('role', 'alert');
container.innerHTML = messages;
document.querySelector('#content').querySelector('h1').after(container);
});
});
}
})();
</script>
@endpush
</x-layout.site>