Skip to content

Commit e087809

Browse files
EncryptExEncryptEx
committed
feat: improved token display
1 parent 2078174 commit e087809

File tree

3 files changed

+89
-49
lines changed

3 files changed

+89
-49
lines changed

Diff for: ‎app/Http/Controllers/TokenController.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ public function create(Request $request)
1414
$tokens = auth()->user()->tokens;
1515
$nwtkn = auth()->user()->createToken($validated['token_name']);
1616
$newTokenName = $validated['token_name'];
17-
$newTokenCode = $nwtkn->plainTextToken;
17+
$newTokenCode = trim($nwtkn->plainTextToken);
1818
return view('token', ['tokens' => $tokens, 'newTokenName' => $newTokenName, 'newTokenCode' => $newTokenCode]);
1919
}
2020

Diff for: ‎resources/views/partials/create-token-form.blade.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<div class="items-center gap-4">
77
<div>
8-
<x-input-label for="token_name" :value="__('Token\'s Name')" />
8+
<x-input-label for="token_name" :value="__('Token\'s Name (just for you)')" />
99
<x-text-input id="token_name" name="token_name" type="text" class="mt-1 block w-full" />
1010
</div>
1111
<br>

Diff for: ‎resources/views/token.blade.php

+87-47
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,93 @@
1-
<x-app-layout>
2-
<x-slot name="header">
3-
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
4-
{{ __('Account Tokens') }}
5-
</h2>
6-
</x-slot>
7-
8-
<div class="py-12">
9-
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
10-
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
11-
12-
13-
<div class="p-6 text-gray-900 dark:text-gray-100">
14-
<p class="text-2xl">
15-
@if (count($tokens) != 0)
16-
{{ __("Curent Active Tokens:") }}
17-
@else
18-
{{ __("No active tokens") }}
19-
@endif
20-
21-
</p>
22-
23-
@foreach ($tokens as $token)
24-
<div class="p-4 mt-7 sm:p-5 my-2 bg-white dark:bg-gray-700 shadow sm:rounded-lg">
25-
<div class="max-w-xl">
26-
@include('partials.delete-token-form')
27-
</div>
28-
</div>
29-
@endforeach
30-
@if (isset ($newTokenName))
31-
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
32-
<div class="max-w-xl">
33-
<p class="text-lg"><b>Name:</b> {{ $newTokenName }}</p>
34-
<p class="text"><pre>{{ $newTokenCode }}</pre></p>
1+
@push('extra-head')
2+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
3+
<script>
4+
document.addEventListener('DOMContentLoaded', function() {
5+
var clipboard = new ClipboardJS('.copy-button');
6+
7+
clipboard.on('success', function(e) {
8+
var tooltip = document.getElementById(e.trigger.getAttribute('tooltip-target'));
9+
tooltip.classList.remove('hidden');
10+
tooltip.classList.add('inline-block');
11+
setTimeout(function() {
12+
tooltip.classList.add('hidden');
13+
tooltip.classList.remove('inline-block');
14+
}, 1000);
15+
e.clearSelection();
16+
});
17+
18+
clipboard.on('error', function(e) {
19+
console.error('Copy failed:', e.action);
20+
alert('Copy failed. Please try again.');
21+
});
22+
});
23+
</script>
24+
25+
<x-app-layout>
26+
<x-slot name="header">
27+
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
28+
{{ __('Account Tokens') }}
29+
</h2>
30+
</x-slot>
31+
32+
<div class="py-12">
33+
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
34+
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
35+
36+
37+
<div class="p-6 text-gray-900 dark:text-gray-100">
38+
<p class="text-2xl">
39+
@if (count($tokens) != 0)
40+
{{ __('Curent Active API Tokens:') }}
41+
@else
42+
{{ __('No active API tokens') }}
43+
@endif
44+
45+
</p>
46+
47+
@foreach ($tokens as $token)
48+
<div class="p-4 mt-7 sm:p-5 my-2 bg-white dark:bg-gray-700 shadow sm:rounded-lg">
49+
<div class="max-w-xl">
50+
@include('partials.delete-token-form')
51+
</div>
52+
</div>
53+
@endforeach
54+
@if (isset($newTokenName))
55+
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
56+
<div class="max-w-xl">
57+
<p class="text-lg"><b>Name:</b> {{ $newTokenName }}</p>
58+
<p class="text font-bold">Your API/Bearer Token is:</p>
59+
<div class="border-solid border-2 border-gray-500 px-2 py-2 rounded inline-block">
60+
61+
<pre id="rawbearertoken" class="inline-block">{{ $newTokenCode }}</pre>
62+
</div>
63+
<div id="tooltip"
64+
class="hidden bg-green-300 text-white text-sm px-2 py-1 rounded shadow-lg absolute -mt-12">
65+
Copied!</div>
66+
<button type="button" class="copy-button" data-clipboard-target="#rawbearertoken"
67+
tooltip-target="tooltip">
68+
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg"
69+
viewBox="0 0 448 512" stroke="currentColor" stroke-width="2"
70+
fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
71+
<path
72+
d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z" />
73+
</svg>
74+
</button>
75+
</div>
3576
</div>
36-
</div>
37-
@endif
77+
@endif
3878

39-
</div>
79+
</div>
4080

41-
</div>
42-
<br>
43-
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
44-
<div class="p-6 text-gray-900 dark:text-gray-100">
45-
<p class="text-2xl">
46-
{{ __("Create a new token") }}
47-
</p>
48-
@include('partials.create-token-form')
81+
</div>
82+
<br>
83+
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
84+
<div class="p-6 text-gray-900 dark:text-gray-100">
85+
<p class="text-2xl">
86+
{{ __('Create a new API token') }}
87+
</p>
88+
@include('partials.create-token-form')
89+
</div>
4990
</div>
5091
</div>
5192
</div>
52-
</div>
53-
</x-app-layout>
93+
</x-app-layout>

0 commit comments

Comments
 (0)