From 297f8f1ab7cafde2a371352d307b8e171ee1b88a Mon Sep 17 00:00:00 2001
From: wlsquid <wyndhammorland@gmail.com>
Date: Mon, 7 Feb 2022 16:19:32 +1000
Subject: [PATCH 1/4] add copy and show hide buttons for API token

---
 package-lock.json                         |  3 +--
 resources/lang/en/settings.php            | 18 +++++++++++++++++-
 resources/views/layouts/_alerts.blade.php |  2 +-
 tailwind.config.js                        |  1 +
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index af5cf0820..c6d4df7c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,10 +1,9 @@
 {
-  "name": "laravelio",
+  "name": "laravel.io",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "laravelio",
       "devDependencies": {
         "@tailwindcss/aspect-ratio": "^0.2.0",
         "@tailwindcss/forms": "^0.4.0",
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index 7f8dab0d8..3606516aa 100644
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -6,7 +6,23 @@
     '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: 
+        <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"> 
+        
+        <svg aria-label="Copy API key" @click="navigator.clipboard.writeText(\':token\'); copyToast = true; setTimeout(() => copyToast = false, 4000)" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
+          <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
+        </svg>
+
+        <svg aria-label="Show Api Key" x-show="!showApi" @click="showApi = true" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
+         <path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
+        </svg> 
+
+        <svg aria-label="Hide API Key" x-show="showApi" @click="showApi = false" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
+         <path fill="currentColor" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
+        </svg>
+
+        <div x-show="copyToast" x-transition class="fixed bottom-20 left-0 z-10 right-0 flex justify-center items-center" style="display:none;"><span class="text-white z-[99999] bg-gray-800 px-5 py-4 rounded-md text-md">API Key Copied</span></div>
+        </div>',
         'deleted' => 'API token successfully removed.',
     ],
 ];
diff --git a/resources/views/layouts/_alerts.blade.php b/resources/views/layouts/_alerts.blade.php
index c70a9250c..7437d3ce4 100644
--- a/resources/views/layouts/_alerts.blade.php
+++ b/resources/views/layouts/_alerts.blade.php
@@ -17,7 +17,7 @@ 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') !!}
             <button
                 type="button"
diff --git a/tailwind.config.js b/tailwind.config.js
index eb78c1020..5542e4f29 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
         './resources/**/*.js',
         './resources/macros/blade.php',
         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
+        './resources/lang/en/settings.php'
     ],
     theme: {
         container: {

From 5fad1e9e729b6a7654d7cfc6ba44c6441c20dc5b Mon Sep 17 00:00:00 2001
From: wlsquid <wyndhammorland@gmail.com>
Date: Tue, 8 Feb 2022 16:22:27 +1000
Subject: [PATCH 2/4] api token field moved to component

---
 .../Settings/ApiTokenController.php           |  4 +--
 app/View/Components/ApiField.php              | 31 +++++++++++++++++++
 resources/lang/en/settings.php                | 18 +----------
 .../views/components/api-field.blade.php      | 18 +++++++++++
 resources/views/layouts/_alerts.blade.php     |  9 +++++-
 5 files changed, 60 insertions(+), 20 deletions(-)
 create mode 100644 app/View/Components/ApiField.php
 create mode 100644 resources/views/components/api-field.blade.php

diff --git a/app/Http/Controllers/Settings/ApiTokenController.php b/app/Http/Controllers/Settings/ApiTokenController.php
index 296d77e05..c52e1f512 100644
--- a/app/Http/Controllers/Settings/ApiTokenController.php
+++ b/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('token', ['token' => $token->plainTextToken]);
     }
 
     public function destroy(DeleteApiTokenRequest $request)
diff --git a/app/View/Components/ApiField.php b/app/View/Components/ApiField.php
new file mode 100644
index 000000000..b3dcadeb6
--- /dev/null
+++ b/app/View/Components/ApiField.php
@@ -0,0 +1,31 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class ApiField extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+
+    public $token;
+    
+    public function __construct($token)
+    {
+        $this->token = $token;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.api-field');
+    }
+}
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index 3606516aa..1a124a5c2 100644
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -6,23 +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: 
-        <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"> 
-        
-        <svg aria-label="Copy API key" @click="navigator.clipboard.writeText(\':token\'); copyToast = true; setTimeout(() => copyToast = false, 4000)" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
-        </svg>
-
-        <svg aria-label="Show Api Key" x-show="!showApi" @click="showApi = true" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
-         <path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
-        </svg> 
-
-        <svg aria-label="Hide API Key" x-show="showApi" @click="showApi = false" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
-         <path fill="currentColor" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
-        </svg>
-
-        <div x-show="copyToast" x-transition class="fixed bottom-20 left-0 z-10 right-0 flex justify-center items-center" style="display:none;"><span class="text-white z-[99999] bg-gray-800 px-5 py-4 rounded-md text-md">API Key Copied</span></div>
-        </div>',
+        'created' => 'API token created! Please copy the following token as it will not be shown again: ',
         'deleted' => 'API token successfully removed.',
     ],
 ];
diff --git a/resources/views/components/api-field.blade.php b/resources/views/components/api-field.blade.php
new file mode 100644
index 000000000..69fdcee28
--- /dev/null
+++ b/resources/views/components/api-field.blade.php
@@ -0,0 +1,18 @@
+<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['token'] }}" class="bg-white mr-2 text-gray-800 px-2 py-1 rounded-md"> 
+        
+        <svg aria-label="Copy API key" @click="navigator.clipboard.writeText('{{ $token['token'] }}'); copyToast = true; setTimeout(() => copyToast = false, 4000)" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
+          <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
+        </svg>
+    
+        <svg aria-label="Show Api Key" x-show="!showApi" @click="showApi = true" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
+         <path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
+        </svg> 
+    
+        <svg aria-label="Hide API Key" x-show="showApi" @click="showApi = false" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
+         <path fill="currentColor" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
+        </svg>
+    
+        <div x-show="copyToast" x-transition class="fixed bottom-20 left-0 z-10 right-0 flex justify-center items-center" style="display:none;"><span class="text-white z-[99999] bg-gray-800 px-5 py-4 rounded-md text-md">API Key Copied</span></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/_alerts.blade.php b/resources/views/layouts/_alerts.blade.php
index 7437d3ce4..63c75bb8c 100644
--- a/resources/views/layouts/_alerts.blade.php
+++ b/resources/views/layouts/_alerts.blade.php
@@ -18,7 +18,14 @@ 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 flex-wrap justify-between container mx-auto px-4">
-            {!! session()->pull('success') !!}
+            {!! session()->get('success') !!}
+
+            @if(strpos(request()->session()->pull('success'), "API token created!") !== false && session()->has('token'))
+             <x-api-field :token="session()->pull('token')" />
+            @endif
+        
+            
+
             <button
                 type="button"
                 class="text-xl"

From 236f12443f5801737d82724e8e2ade8343026e53 Mon Sep 17 00:00:00 2001
From: wlsquid <wyndhammorland@gmail.com>
Date: Tue, 8 Feb 2022 16:24:27 +1000
Subject: [PATCH 3/4] API token moved to component

---
 tailwind.config.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 5542e4f29..f36dd9bdc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,8 +5,7 @@ module.exports = {
         './resources/**/*.blade.php',
         './resources/**/*.js',
         './resources/macros/blade.php',
-        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
-        './resources/lang/en/settings.php'
+        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'
     ],
     theme: {
         container: {

From a39ac2cb5b09eae68f8382da6b6310952015c278 Mon Sep 17 00:00:00 2001
From: Dries Vints <dries@vints.io>
Date: Wed, 9 Feb 2022 17:26:33 +0100
Subject: [PATCH 4/4] wip

---
 .../Settings/ApiTokenController.php           |  2 +-
 app/View/Components/ApiField.php              | 31 -------------------
 resources/lang/en/settings.php                |  2 +-
 .../views/components/api-field.blade.php      | 18 -----------
 .../views/components/api-token.blade.php      | 24 ++++++++++++++
 resources/views/layouts/_alerts.blade.php     |  8 ++---
 tailwind.config.js                            |  2 +-
 tests/Feature/SettingsTest.php                |  2 +-
 8 files changed, 31 insertions(+), 58 deletions(-)
 delete mode 100644 app/View/Components/ApiField.php
 delete mode 100644 resources/views/components/api-field.blade.php
 create mode 100644 resources/views/components/api-token.blade.php

diff --git a/app/Http/Controllers/Settings/ApiTokenController.php b/app/Http/Controllers/Settings/ApiTokenController.php
index c52e1f512..f9a1e5ef4 100644
--- a/app/Http/Controllers/Settings/ApiTokenController.php
+++ b/app/Http/Controllers/Settings/ApiTokenController.php
@@ -23,7 +23,7 @@ public function store(CreateApiTokenRequest $request)
 
         $this->success('settings.api_token.created');
 
-        return redirect()->route('settings.profile')->with('token', ['token' => $token->plainTextToken]);
+        return redirect()->route('settings.profile')->with('api_token', $token->plainTextToken);
     }
 
     public function destroy(DeleteApiTokenRequest $request)
diff --git a/app/View/Components/ApiField.php b/app/View/Components/ApiField.php
deleted file mode 100644
index b3dcadeb6..000000000
--- a/app/View/Components/ApiField.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-
-namespace App\View\Components;
-
-use Illuminate\View\Component;
-
-class ApiField extends Component
-{
-    /**
-     * Create a new component instance.
-     *
-     * @return void
-     */
-
-    public $token;
-    
-    public function __construct($token)
-    {
-        $this->token = $token;
-    }
-
-    /**
-     * Get the view / contents that represent the component.
-     *
-     * @return \Illuminate\Contracts\View\View|\Closure|string
-     */
-    public function render()
-    {
-        return view('components.api-field');
-    }
-}
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index 1a124a5c2..63aaedad1 100644
--- a/resources/lang/en/settings.php
+++ b/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: ',
+        'created' => 'API token created! Please copy the following token as it will not be shown again:',
         'deleted' => 'API token successfully removed.',
     ],
 ];
diff --git a/resources/views/components/api-field.blade.php b/resources/views/components/api-field.blade.php
deleted file mode 100644
index 69fdcee28..000000000
--- a/resources/views/components/api-field.blade.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<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['token'] }}" class="bg-white mr-2 text-gray-800 px-2 py-1 rounded-md"> 
-        
-        <svg aria-label="Copy API key" @click="navigator.clipboard.writeText('{{ $token['token'] }}'); copyToast = true; setTimeout(() => copyToast = false, 4000)" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
-        </svg>
-    
-        <svg aria-label="Show Api Key" x-show="!showApi" @click="showApi = true" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
-         <path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
-        </svg> 
-    
-        <svg aria-label="Hide API Key" x-show="showApi" @click="showApi = false" class="mr-2 hover:cursor-pointer" style="width:24px;height:24px" viewBox="0 0 24 24">
-         <path fill="currentColor" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" />
-        </svg>
-    
-        <div x-show="copyToast" x-transition class="fixed bottom-20 left-0 z-10 right-0 flex justify-center items-center" style="display:none;"><span class="text-white z-[99999] bg-gray-800 px-5 py-4 rounded-md text-md">API Key Copied</span></div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/resources/views/components/api-token.blade.php b/resources/views/components/api-token.blade.php
new file mode 100644
index 000000000..30d4d750e
--- /dev/null
+++ b/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>
diff --git a/resources/views/layouts/_alerts.blade.php b/resources/views/layouts/_alerts.blade.php
index 63c75bb8c..4669d237b 100644
--- a/resources/views/layouts/_alerts.blade.php
+++ b/resources/views/layouts/_alerts.blade.php
@@ -18,13 +18,11 @@ 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 flex-wrap justify-between container mx-auto px-4">
-            {!! session()->get('success') !!}
+            {!! session()->pull('success') !!}
 
-            @if(strpos(request()->session()->pull('success'), "API token created!") !== false && session()->has('token'))
-             <x-api-field :token="session()->pull('token')" />
+            @if (session()->has('api_token'))
+                <x-api-token :token="session()->pull('api_token')" />
             @endif
-        
-            
 
             <button
                 type="button"
diff --git a/tailwind.config.js b/tailwind.config.js
index f36dd9bdc..eb78c1020 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,7 @@ module.exports = {
         './resources/**/*.blade.php',
         './resources/**/*.js',
         './resources/macros/blade.php',
-        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'
+        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
     ],
     theme: {
         container: {
diff --git a/tests/Feature/SettingsTest.php b/tests/Feature/SettingsTest.php
index 6307c2165..ed7880a45 100644
--- a/tests/Feature/SettingsTest.php
+++ b/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);
 });