Improve token banner/ add copy buttons

app/Http/Controllers/Settings/ApiTokenController.php

@@ -21,9 +21,9 @@ public function store(CreateApiTokenRequest $request)
     {
         $token = $this->dispatchSync(new CreateApiToken(Auth::user(), $request->name()));
 
-        $this->success('settings.api_token.created', ['token' => $token->plainTextToken]);
+        $this->success('settings.api_token.created');
 
-        return redirect()->route('settings.profile');
+        return redirect()->route('settings.profile')->with('api_token', $token->plainTextToken);
     }
 
     public function destroy(DeleteApiTokenRequest $request)

resources/lang/en/settings.php

@@ -6,7 +6,7 @@
     'deleted' => 'Account was successfully removed.',
     'password.updated' => 'Password successfully changed!',
     'api_token' => [
-        'created' => 'API token created! Please copy the following token as it will not be shown again: <span class="bg-white text-gray-800 px-1">:token</span>',
+        'created' => 'API token created! Please copy the following token as it will not be shown again:',
         'deleted' => 'API token successfully removed.',
     ],
 ];

resources/views/components/api-token.blade.php

@@ -0,0 +1,24 @@
+<div>
+    <div x-data="{ showApi: false, copyToast: false }" class="flex justify-end items-center">
+        <input
+            x-bind:type="!showApi ? 'password' : 'text'" name="apikey" readonly="readonly" value="{{ $token }}"
+            class="bg-white mr-2 text-gray-800 px-2 py-1 rounded-md"
+        />
+
+        <x-heroicon-o-clipboard
+            aria-label="Copy API key"
+            @@click="navigator.clipboard.writeText('{{ $token }}'); copyToast = true; setTimeout(() => copyToast = false, 4000)"
+            class="mr-2 text-white h-6 w-6 hover:cursor-pointer"
+        />
+
+        <x-heroicon-o-eye aria-label="Show Api Key" x-show="!showApi" @@click="showApi = true" class="mr-2 h-6 w-6 text-white hover:cursor-pointer" />
+
+        <x-heroicon-o-eye-off aria-label="Hide API Key" x-show="showApi" @@click="showApi = false" class="mr-2 h-6 w-6 text-white hover:cursor-pointer" />
+
+        <div x-show="copyToast" x-transition class="fixed bottom-20 left-0 z-10 right-0 flex justify-center items-center">
+            <span class="text-white z-[99999] bg-gray-800 px-5 py-4 rounded-md text-md">
+                API Key Copied
+            </span>
+        </div>
+    </div>
+</div>

resources/views/layouts/_alerts.blade.php

@@ -17,8 +17,13 @@ class="text-xl"
 
 @if (session()->has('success'))
     <div class="w-full text-white bg-lio-500 p-4" x-data="{}">
-        <div class="flex items-center justify-between container mx-auto px-4">
+        <div class="flex items-center flex-wrap justify-between container mx-auto px-4">
             {!! session()->pull('success') !!}
+
+            @if (session()->has('api_token'))
+                <x-api-token :token="session()->pull('api_token')" />
+            @endif
+
             <button
                 type="button"
                 class="text-xl"

tests/Feature/SettingsTest.php

@@ -153,7 +153,7 @@
             'name' => 'My API Token',
         ])
         ->seePageIs('/settings')
-        ->see('API token created! Please copy the following token as it will not be shown again: ');
+        ->see('API token created! Please copy the following token as it will not be shown again:');
 
     expect($user->refresh()->tokens)->toHaveCount(1);
 });