Added filter queries for extension

app/Http/Controllers/Api/AliasController.php

@@ -3,30 +3,45 @@
 namespace App\Http\Controllers\Api;
 
 use App\Http\Controllers\Controller;
+use App\Http\Requests\IndexAliasRequest;
 use App\Http\Requests\StoreAliasRequest;
 use App\Http\Requests\UpdateAliasRequest;
 use App\Http\Resources\AliasResource;
 use App\Models\AdditionalUsername;
 use App\Models\Domain;
-use Illuminate\Http\Request;
 use Illuminate\Support\Str;
 use Ramsey\Uuid\Uuid;
 
 class AliasController extends Controller
 {
-    public function index(Request $request)
+    public function index(IndexAliasRequest $request)
     {
         $aliases = user()->aliases()->with('recipients')->latest();
 
-        if ($request->deleted === 'with') {
+        // Keep /aliases?deleted=with for backwards compatibility
+        if ($request->deleted === 'with' || $request->input('filter.deleted') === 'with') {
             $aliases->withTrashed();
         }
 
-        if ($request->deleted === 'only') {
+        if ($request->deleted === 'only' || $request->input('filter.deleted') === 'only') {
             $aliases->onlyTrashed();
         }
 
-        return AliasResource::collection($aliases->get());
+        if ($request->input('filter.search')) {
+            $searchTerm = strtolower($request->input('filter.search'));
+
+            $aliases = $aliases->get()->filter(function ($alias) use ($searchTerm) {
+                return Str::contains(strtolower($alias->email), $searchTerm) || Str::contains(strtolower($alias->description), $searchTerm);
+            })->values();
+        }
+
+        if ($request->page) {
+            $aliases = $aliases->jsonPaginate(10);
+        } elseif (!$request->input('filter.search')) {
+            $aliases = $aliases->get();
+        }
+
+        return AliasResource::collection($aliases);
     }
 
     public function show($id)

app/Http/Controllers/Api/RecipientController.php

@@ -3,14 +3,25 @@
 namespace App\Http\Controllers\Api;
 
 use App\Http\Controllers\Controller;
+use App\Http\Requests\IndexRecipientRequest;
 use App\Http\Requests\StoreRecipientRequest;
 use App\Http\Resources\RecipientResource;
 
 class RecipientController extends Controller
 {
-    public function index()
+    public function index(IndexRecipientRequest $request)
     {
-        return RecipientResource::collection(user()->recipients()->with('aliases')->latest()->get());
+        $recipients = user()->recipients()->with('aliases')->latest();
+
+        if ($request->input('filter.verified') === 'true') {
+            $recipients->verified();
+        }
+
+        if ($request->input('filter.verified') === 'false') {
+            $recipients->verified('false');
+        }
+
+        return RecipientResource::collection($recipients->get());
     }
 
     public function show($id)

app/Http/Requests/IndexAliasRequest.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class IndexAliasRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'page' => [
+                'nullable',
+                'array'
+            ],
+            'page.number' => [
+                'nullable',
+                'integer'
+            ],
+            'filter' => [
+                'nullable',
+                'array'
+            ],
+            'filter.search' => [
+                'nullable',
+                'string',
+                'max:50',
+                'min:3'
+            ],
+            'filter.deleted' => [
+                'nullable',
+                'in:with,without,only',
+                'string',
+            ],
+        ];
+    }
+}

app/Http/Requests/IndexRecipientRequest.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class IndexRecipientRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'filter' => [
+                'nullable',
+                'array'
+            ],
+            'filter.verified' => [
+                'nullable',
+                'in:true,false',
+                'string',
+            ],
+        ];
+    }
+}

app/Models/Alias.php

@@ -62,6 +62,11 @@ class Alias extends Model
                 $alias->deactivate();
             }
         });
+
+        // Activate the alias when it is restored
+        Alias::restoring(function ($alias) {
+            $alias->activate();
+        });
     }
 
     public function setLocalPartAttribute($value)

app/Models/Recipient.php

@@ -57,6 +57,18 @@ class Recipient extends Model
         });
     }
 
+    /**
+     * Query scope to return verified or unverified recipients.
+     */
+    public function scopeVerified($query, $condition = null)
+    {
+        if ($condition === 'false') {
+            return $query->whereNull('email_verified_at');
+        }
+
+        return $query->whereNotNull('email_verified_at');
+    }
+
     /**
      * Get the user the recipient belongs to.
      */

app/Providers/AppServiceProvider.php

@@ -2,6 +2,10 @@
 
 namespace App\Providers;
 
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Collection;
+use Illuminate\Pagination\LengthAwarePaginator;
+use Illuminate\Support\Arr;
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 use Swift_Preferences;
@@ -28,5 +32,42 @@ class AppServiceProvider extends ServiceProvider
         Blade::withoutComponentTags();
 
         Swift_Preferences::getInstance()->setQPDotEscape(true);
+
+        Builder::macro('jsonPaginate', function (int $maxResults = null, int $defaultSize = null) {
+            $maxResults = $maxResults ?? 30;
+            $defaultSize = $defaultSize ?? 30;
+            $paginationMethod = 'simplePaginate'; // or 'paginate';
+
+            $size = (int) request()->input('page.size', $defaultSize);
+
+            $size = $size > $maxResults ? $maxResults : $size;
+
+            $paginator = $this
+                ->{$paginationMethod}($size, ['*'], 'page.number')
+                ->setPageName('page[number]')
+                ->appends(Arr::except(request()->input(), 'page.number'));
+
+            return $paginator;
+        });
+
+        Collection::macro('jsonPaginate', function (int $maxResults = null, int $defaultSize = null, $page = null) {
+            $maxResults = $maxResults ?? 30;
+            $defaultSize = $defaultSize ?? 30;
+            $size = (int) request()->input('page.size', $defaultSize);
+            $size = $size > $maxResults ? $maxResults : $size;
+
+            $page = (int) request()->input('page.number', 1);
+
+            return new LengthAwarePaginator(
+                $this->forPage($page, $size),
+                $this->count(),
+                $size,
+                $page,
+                [
+                    'path' => LengthAwarePaginator::resolveCurrentPath(),
+                    'pageName' => 'page[number]',
+                ]
+            );
+        });
     }
 }

config/version.yml

@@ -5,9 +5,9 @@ current:
   major: 0
   minor: 7
   patch: 3
-  prerelease: 1-g3011a28
+  prerelease: 2-g92ce598
   buildmetadata: ''
-  commit: 3011a2
+  commit: 92ce59
   timestamp:
     year: 2020
     month: 10

resources/js/components/MoreOptions.vue

@@ -7,7 +7,18 @@
       id="project-options-menu-0"
       aria-has-popup="true"
       type="button"
-      class="w-8 h-8 bg-white inline-flex items-center justify-center text-grey-400 rounded-full hover:text-grey-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+      class="
+        w-8
+        h-8
+        bg-white
+        inline-flex
+        items-center
+        justify-center
+        text-grey-400
+        rounded-full
+        hover:text-grey-500
+        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500
+      "
     >
       <span class="sr-only">Open options</span>
 
@@ -28,7 +39,21 @@
     >
       <div
         v-show="isOpen"
-        class="mx-3 origin-top-right absolute right-7 top-0 w-48 mt-1 rounded-md shadow-lg z-10 bg-white ring-1 ring-black ring-opacity-5 divide-y divide-grey-200"
+        class="
+          mx-3
+          origin-top-right
+          absolute
+          right-7
+          top-0
+          w-48
+          mt-1
+          rounded-md
+          shadow-lg
+          z-10
+          bg-white
+          ring-1 ring-black ring-opacity-5
+          divide-y divide-grey-200
+        "
         role="menu"
         aria-orientation="vertical"
         aria-labelledby="project-options-menu-0"

resources/js/components/Toggle.vue

@@ -4,12 +4,38 @@
     type="button"
     :aria-pressed="value.toString()"
     :class="this.value ? 'bg-cyan-500' : 'bg-grey-300'"
-    class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none"
+    class="
+      relative
+      inline-flex
+      flex-shrink-0
+      h-6
+      w-11
+      border-2 border-transparent
+      rounded-full
+      cursor-pointer
+      transition-colors
+      ease-in-out
+      duration-200
+      focus:outline-none
+    "
   >
     <span class="sr-only">Use setting</span>
     <span
       :class="this.value ? 'translate-x-5' : 'translate-x-0'"
-      class="relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+      class="
+        relative
+        inline-block
+        h-5
+        w-5
+        rounded-full
+        bg-white
+        shadow
+        transform
+        ring-0
+        transition
+        ease-in-out
+        duration-200
+      "
     >
       <span
         :class="this.value ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200'"

resources/js/components/WebauthnKeys.vue

@@ -55,7 +55,16 @@
         <div class="mt-6">
           <button
             @click="remove"
-            class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-red-500
+              hover:bg-red-600
+              text-white
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="removeKeyLoading ? 'cursor-not-allowed' : ''"
             :disabled="removeKeyLoading"
           >
@@ -64,7 +73,18 @@
           </button>
           <button
             @click="closeDeleteKeyModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Close
           </button>

resources/js/components/passport/PersonalAccessTokens.vue

@@ -36,7 +36,17 @@
 
     <button
       @click="openCreateTokenModal"
-      class="bg-cyan-400 w-full hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+      class="
+        bg-cyan-400
+        w-full
+        hover:bg-cyan-300
+        text-cyan-900
+        font-bold
+        py-3
+        px-4
+        rounded
+        focus:outline-none
+      "
     >
       Generate New Token
     </button>
@@ -107,14 +117,33 @@
             v-model="form.name"
             type="text"
             id="create-token-name"
-            class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-3 mb-6"
+            class="
+              w-full
+              appearance-none
+              bg-grey-100
+              border border-transparent
+              text-grey-700
+              focus:outline-none
+              rounded
+              p-3
+              mb-6
+            "
             :class="form.errors.length > 0 ? 'border-red-500' : ''"
             placeholder="e.g. Firefox extension"
             autofocus
           />
           <button
             @click="store"
-            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-cyan-400
+              hover:bg-cyan-300
+              text-cyan-900
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="loading ? 'cursor-not-allowed' : ''"
             :disabled="loading"
           >
@@ -123,7 +152,18 @@
           </button>
           <button
             @click="closeCreateTokenModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Close
           </button>
@@ -141,14 +181,33 @@
         </p>
         <textarea
           v-model="accessToken"
-          class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-3 text-sm"
+          class="
+            w-full
+            appearance-none
+            bg-grey-100
+            border border-transparent
+            text-grey-700
+            focus:outline-none
+            rounded
+            p-3
+            text-sm
+          "
           rows="10"
           readonly
         >
         </textarea>
         <div class="mt-6">
           <button
-            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-cyan-400
+              hover:bg-cyan-300
+              text-cyan-900
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             v-clipboard="() => accessToken"
             v-clipboard:success="clipboardSuccess"
             v-clipboard:error="clipboardError"
@@ -157,7 +216,18 @@
           </button>
           <button
             @click="closeCreateTokenModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Close
           </button>
@@ -179,7 +249,16 @@
         <div class="mt-6">
           <button
             @click="revoke"
-            class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-red-500
+              hover:bg-red-600
+              text-white
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="revokeTokenLoading ? 'cursor-not-allowed' : ''"
             :disabled="revokeTokenLoading"
           >
@@ -188,7 +267,18 @@
           </button>
           <button
             @click="closeRevokeTokenModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Close
           </button>

resources/js/pages/Aliases.vue

@@ -500,8 +500,7 @@
                   px-4
                   py-3
                   text-sm text-grey-700
-                  hover:bg-grey-100
-                  hover:text-grey-900
+                  hover:bg-grey-100 hover:text-grey-900
                 "
                 role="menuitem"
               >
@@ -520,8 +519,7 @@
                   px-4
                   py-3
                   text-sm text-grey-700
-                  hover:bg-grey-100
-                  hover:text-grey-900
+                  hover:bg-grey-100 hover:text-grey-900
                 "
                 role="menuitem"
               >
@@ -543,8 +541,7 @@
                   px-4
                   py-3
                   text-sm text-grey-700
-                  hover:bg-grey-100
-                  hover:text-grey-900
+                  hover:bg-grey-100 hover:text-grey-900
                 "
                 role="menuitem"
               >
@@ -566,8 +563,7 @@
                   px-4
                   py-3
                   text-sm text-grey-700
-                  hover:bg-grey-100
-                  hover:text-grey-900
+                  hover:bg-grey-100 hover:text-grey-900
                 "
                 role="menuitem"
               >
@@ -807,7 +803,7 @@
           :clear-on-select="false"
           :searchable="true"
           :max="10"
-          placeholder="Select recipients (optional)..."
+          placeholder="Select recipient(s) (optional)..."
           label="email"
           track-by="email"
           :preselect-first="false"
@@ -931,8 +927,8 @@
           Restore alias
         </h2>
         <p class="mt-4 text-grey-700">
-          Are you sure you want to restore this alias? Once restored, you will need to set the alias
-          as <b>active before it can receive emails again</b>.
+          Are you sure you want to restore this alias? Once restored it will be
+          <b>able to receive emails again</b>.
         </p>
         <div class="mt-6">
           <button

resources/js/pages/Domains.vue

@@ -7,25 +7,71 @@
           @keyup.esc="search = ''"
           tabindex="0"
           type="text"
-          class="w-full md:w-64 appearance-none shadow bg-white text-grey-700 focus:outline-none rounded py-3 pl-3 pr-8"
+          class="
+            w-full
+            md:w-64
+            appearance-none
+            shadow
+            bg-white
+            text-grey-700
+            focus:outline-none
+            rounded
+            py-3
+            pl-3
+            pr-8
+          "
           placeholder="Search Domains"
         />
         <icon
           v-if="search"
           @click.native="search = ''"
           name="close-circle"
-          class="absolute right-0 inset-y-0 w-5 h-full text-grey-300 fill-current mr-2 flex items-center cursor-pointer"
+          class="
+            absolute
+            right-0
+            inset-y-0
+            w-5
+            h-full
+            text-grey-300
+            fill-current
+            mr-2
+            flex
+            items-center
+            cursor-pointer
+          "
         />
         <icon
           v-else
           name="search"
-          class="absolute right-0 inset-y-0 w-5 h-full text-grey-300 fill-current pointer-events-none mr-2 flex items-center"
+          class="
+            absolute
+            right-0
+            inset-y-0
+            w-5
+            h-full
+            text-grey-300
+            fill-current
+            pointer-events-none
+            mr-2
+            flex
+            items-center
+          "
         />
       </div>
       <div class="mt-4 md:mt-0">
         <button
           @click="addDomainModalOpen = true"
-          class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none ml-auto"
+          class="
+            bg-cyan-400
+            hover:bg-cyan-300
+            text-cyan-900
+            font-bold
+            py-3
+            px-4
+            rounded
+            focus:outline-none
+            ml-auto
+          "
         >
           Add Custom Domain
         </button>
@@ -75,7 +121,17 @@
               @keyup.esc="domainIdToEdit = domainDescriptionToEdit = ''"
               v-model="domainDescriptionToEdit"
               type="text"
-              class="flex-grow appearance-none bg-grey-100 border text-grey-700 focus:outline-none rounded px-2 py-1"
+              class="
+                flex-grow
+                appearance-none
+                bg-grey-100
+                border
+                text-grey-700
+                focus:outline-none
+                rounded
+                px-2
+                py-1
+              "
               :class="
                 domainDescriptionToEdit.length > 100 ? 'border-red-500' : 'border-transparent'
               "
@@ -247,14 +303,33 @@
           <input
             v-model="newDomain"
             type="text"
-            class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-3 mb-6"
+            class="
+              w-full
+              appearance-none
+              bg-grey-100
+              border border-transparent
+              text-grey-700
+              focus:outline-none
+              rounded
+              p-3
+              mb-6
+            "
             :class="errors.newDomain ? 'border-red-500' : ''"
             placeholder="example.com"
             autofocus
           />
           <button
             @click="validateNewDomain"
-            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-cyan-400
+              hover:bg-cyan-300
+              text-cyan-900
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="addDomainLoading ? 'cursor-not-allowed' : ''"
             :disabled="addDomainLoading"
           >
@@ -263,7 +338,18 @@
           </button>
           <button
             @click="addDomainModalOpen = false"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -309,7 +395,16 @@
         <div class="mt-6">
           <button
             @click="checkRecords(domainToCheck)"
-            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-cyan-400
+              hover:bg-cyan-300
+              text-cyan-900
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="checkRecordsLoading ? 'cursor-not-allowed' : ''"
             :disabled="checkRecordsLoading"
           >
@@ -318,7 +413,18 @@
           </button>
           <button
             @click="closeCheckRecordsModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -357,7 +463,17 @@
           <button
             type="button"
             @click="editDefaultRecipient()"
-            class="px-4 py-3 text-cyan-900 font-semibold bg-cyan-400 hover:bg-cyan-300 border border-transparent rounded focus:outline-none"
+            class="
+              px-4
+              py-3
+              text-cyan-900
+              font-semibold
+              bg-cyan-400
+              hover:bg-cyan-300
+              border border-transparent
+              rounded
+              focus:outline-none
+            "
             :class="editDefaultRecipientLoading ? 'cursor-not-allowed' : ''"
             :disabled="editDefaultRecipientLoading"
           >
@@ -366,7 +482,18 @@
           </button>
           <button
             @click="closeDomainDefaultRecipientModal()"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -389,7 +516,17 @@
           <button
             type="button"
             @click="deleteDomain(domainIdToDelete)"
-            class="px-4 py-3 text-white font-semibold bg-red-500 hover:bg-red-600 border border-transparent rounded focus:outline-none"
+            class="
+              px-4
+              py-3
+              text-white
+              font-semibold
+              bg-red-500
+              hover:bg-red-600
+              border border-transparent
+              rounded
+              focus:outline-none
+            "
             :class="deleteDomainLoading ? 'cursor-not-allowed' : ''"
             :disabled="deleteDomainLoading"
           >
@@ -398,7 +535,18 @@
           </button>
           <button
             @click="closeDeleteModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>

resources/js/pages/Recipients.vue

@@ -7,25 +7,71 @@
           @keyup.esc="search = ''"
           tabindex="0"
           type="text"
-          class="w-full md:w-64 appearance-none shadow bg-white text-grey-700 focus:outline-none rounded py-3 pl-3 pr-8"
+          class="
+            w-full
+            md:w-64
+            appearance-none
+            shadow
+            bg-white
+            text-grey-700
+            focus:outline-none
+            rounded
+            py-3
+            pl-3
+            pr-8
+          "
           placeholder="Search Recipients"
         />
         <icon
           v-if="search"
           @click.native="search = ''"
           name="close-circle"
-          class="absolute right-0 inset-y-0 w-5 h-full text-grey-300 fill-current mr-2 flex items-center cursor-pointer"
+          class="
+            absolute
+            right-0
+            inset-y-0
+            w-5
+            h-full
+            text-grey-300
+            fill-current
+            mr-2
+            flex
+            items-center
+            cursor-pointer
+          "
         />
         <icon
           v-else
           name="search"
-          class="absolute right-0 inset-y-0 w-5 h-full text-grey-300 fill-current pointer-events-none mr-2 flex items-center"
+          class="
+            absolute
+            right-0
+            inset-y-0
+            w-5
+            h-full
+            text-grey-300
+            fill-current
+            pointer-events-none
+            mr-2
+            flex
+            items-center
+          "
         />
       </div>
       <div class="mt-4 md:mt-0">
         <button
           @click="addRecipientModalOpen = true"
-          class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none ml-auto"
+          class="
+            bg-cyan-400
+            hover:bg-cyan-300
+            text-cyan-900
+            font-bold
+            py-3
+            px-4
+            rounded
+            focus:outline-none
+            ml-auto
+          "
         >
           Add Recipient
         </button>
@@ -119,7 +165,17 @@
             />
             <icon
               name="fingerprint"
-              class="tooltip outline-none cursor-pointer block w-6 h-6 text-grey-300 fill-current mx-2"
+              class="
+                tooltip
+                outline-none
+                cursor-pointer
+                block
+                w-6
+                h-6
+                text-grey-300
+                fill-current
+                mx-2
+              "
               :data-tippy-content="props.row.fingerprint"
               v-clipboard="() => props.row.fingerprint"
               v-clipboard:success="clipboardSuccess"
@@ -190,14 +246,33 @@
           <input
             v-model="newRecipient"
             type="email"
-            class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-3 mb-6"
+            class="
+              w-full
+              appearance-none
+              bg-grey-100
+              border border-transparent
+              text-grey-700
+              focus:outline-none
+              rounded
+              p-3
+              mb-6
+            "
             :class="errors.newRecipient ? 'border-red-500' : ''"
             placeholder="johndoe@example.com"
             autofocus
           />
           <button
             @click="validateNewRecipient"
-            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-cyan-400
+              hover:bg-cyan-300
+              text-cyan-900
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="addRecipientLoading ? 'cursor-not-allowed' : ''"
             :disabled="addRecipientLoading"
           >
@@ -206,7 +281,18 @@
           </button>
           <button
             @click="addRecipientModalOpen = false"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -229,7 +315,17 @@
           </p>
           <textarea
             v-model="recipientKey"
-            class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-3 mb-6"
+            class="
+              w-full
+              appearance-none
+              bg-grey-100
+              border border-transparent
+              text-grey-700
+              focus:outline-none
+              rounded
+              p-3
+              mb-6
+            "
             :class="errors.recipientKey ? 'border-red-500' : ''"
             placeholder="Begins with '-----BEGIN PGP PUBLIC KEY BLOCK-----'"
             rows="10"
@@ -239,7 +335,16 @@
           <button
             type="button"
             @click="validateRecipientKey"
-            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-cyan-400
+              hover:bg-cyan-300
+              text-cyan-900
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="addRecipientKeyLoading ? 'cursor-not-allowed' : ''"
             :disabled="addRecipientKeyLoading"
           >
@@ -248,7 +353,18 @@
           </button>
           <button
             @click="closeRecipientKeyModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -271,7 +387,17 @@
           <button
             type="button"
             @click="deleteRecipientKey(recipientKeyToDelete)"
-            class="px-4 py-3 text-white font-semibold bg-red-500 hover:bg-red-600 border border-transparent rounded focus:outline-none"
+            class="
+              px-4
+              py-3
+              text-white
+              font-semibold
+              bg-red-500
+              hover:bg-red-600
+              border border-transparent
+              rounded
+              focus:outline-none
+            "
             :class="deleteRecipientKeyLoading ? 'cursor-not-allowed' : ''"
             :disabled="deleteRecipientKeyLoading"
           >
@@ -280,7 +406,18 @@
           </button>
           <button
             @click="closeDeleteRecipientKeyModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -300,7 +437,17 @@
           <button
             type="button"
             @click="deleteRecipient(recipientToDelete)"
-            class="px-4 py-3 text-white font-semibold bg-red-500 hover:bg-red-600 border border-transparent rounded focus:outline-none"
+            class="
+              px-4
+              py-3
+              text-white
+              font-semibold
+              bg-red-500
+              hover:bg-red-600
+              border border-transparent
+              rounded
+              focus:outline-none
+            "
             :class="deleteRecipientLoading ? 'cursor-not-allowed' : ''"
             :disabled="deleteRecipientLoading"
           >
@@ -309,7 +456,18 @@
           </button>
           <button
             @click="closeDeleteModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -668,11 +826,13 @@ export default {
       this.recipientToAddKey = {}
     },
     validEmail(email) {
-      let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+      let re =
+        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
       return re.test(email)
     },
     validKey(key) {
-      let re = /-----BEGIN PGP PUBLIC KEY BLOCK-----([A-Za-z0-9+=\/\n]+)-----END PGP PUBLIC KEY BLOCK-----/i
+      let re =
+        /-----BEGIN PGP PUBLIC KEY BLOCK-----([A-Za-z0-9+=\/\n]+)-----END PGP PUBLIC KEY BLOCK-----/i
       return re.test(key)
     },
     clipboardSuccess() {

resources/js/pages/Rules.vue

@@ -7,7 +7,17 @@
       </div>
       <button
         @click="openCreateModal"
-        class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none ml-auto"
+        class="
+          bg-cyan-400
+          hover:bg-cyan-300
+          text-cyan-900
+          font-bold
+          py-3
+          px-4
+          rounded
+          focus:outline-none
+          ml-auto
+        "
       >
         Add New Rule
       </button>
@@ -91,7 +101,16 @@
           v-model="createRuleObject.name"
           id="rule_name"
           type="text"
-          class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-2"
+          class="
+            w-full
+            appearance-none
+            bg-grey-100
+            border border-transparent
+            text-grey-700
+            focus:outline-none
+            rounded
+            p-2
+          "
           :class="errors.ruleName ? 'border-red-500' : ''"
           placeholder="Enter name"
           autofocus
@@ -108,14 +127,34 @@
                 <select
                   v-model="createRuleObject.operator"
                   id="rule_operator"
-                  class="block appearance-none w-full text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                  class="
+                    block
+                    appearance-none
+                    w-full
+                    text-grey-700
+                    bg-white
+                    p-2
+                    pr-6
+                    rounded
+                    shadow
+                    focus:ring
+                  "
                   required
                 >
                   <option value="AND">AND</option>
                   <option value="OR">OR</option>
                 </select>
                 <div
-                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                  class="
+                    pointer-events-none
+                    absolute
+                    inset-y-0
+                    right-0
+                    flex
+                    items-center
+                    px-2
+                    text-gray-700
+                  "
                 >
                   <svg
                     class="fill-current h-4 w-4"
@@ -139,7 +178,18 @@
                       <select
                         v-model="createRuleObject.conditions[key].type"
                         id="rule_condition_types"
-                        class="block appearance-none w-32 text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                        class="
+                          block
+                          appearance-none
+                          w-32
+                          text-grey-700
+                          bg-white
+                          p-2
+                          pr-6
+                          rounded
+                          shadow
+                          focus:ring
+                        "
                         required
                       >
                         <option
@@ -151,7 +201,16 @@
                         </option>
                       </select>
                       <div
-                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                        class="
+                          pointer-events-none
+                          absolute
+                          inset-y-0
+                          right-0
+                          flex
+                          items-center
+                          px-2
+                          text-gray-700
+                        "
                       >
                         <svg
                           class="fill-current h-4 w-4"
@@ -174,7 +233,18 @@
                       <select
                         v-model="createRuleObject.conditions[key].match"
                         id="rule_condition_matches"
-                        class="block appearance-none w-40 text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                        class="
+                          block
+                          appearance-none
+                          w-40
+                          text-grey-700
+                          bg-white
+                          p-2
+                          pr-6
+                          rounded
+                          shadow
+                          focus:ring
+                        "
                         required
                       >
                         <option
@@ -186,7 +256,16 @@
                         </option>
                       </select>
                       <div
-                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                        class="
+                          pointer-events-none
+                          absolute
+                          inset-y-0
+                          right-0
+                          flex
+                          items-center
+                          px-2
+                          text-gray-700
+                        "
                       >
                         <svg
                           class="fill-current h-4 w-4"
@@ -205,7 +284,16 @@
                         v-model="createRuleObject.conditions[key].currentConditionValue"
                         @keyup.enter="addValueToCondition(createRuleObject, key)"
                         type="text"
-                        class="w-full appearance-none bg-white border border-transparent rounded-l text-grey-700 focus:outline-none p-2"
+                        class="
+                          w-full
+                          appearance-none
+                          bg-white
+                          border border-transparent
+                          rounded-l
+                          text-grey-700
+                          focus:outline-none
+                          p-2
+                        "
                         :class="errors.createRuleValues ? 'border-red-500' : ''"
                         placeholder="Enter value"
                         autofocus
@@ -256,7 +344,16 @@
           <!-- add condition button -->
           <button
             @click="addCondition(createRuleObject)"
-            class="mt-4 p-2 text-grey-800 bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              mt-4
+              p-2
+              text-grey-800
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Add condition
           </button>
@@ -286,7 +383,17 @@
                         v-model="createRuleObject.actions[key].type"
                         @change="ruleActionChange(createRuleObject.actions[key])"
                         id="rule_action_types"
-                        class="block appearance-none text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                        class="
+                          block
+                          appearance-none
+                          text-grey-700
+                          bg-white
+                          p-2
+                          pr-6
+                          rounded
+                          shadow
+                          focus:ring
+                        "
                         required
                       >
                         <option
@@ -298,7 +405,16 @@
                         </option>
                       </select>
                       <div
-                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                        class="
+                          pointer-events-none
+                          absolute
+                          inset-y-0
+                          right-0
+                          flex
+                          items-center
+                          px-2
+                          text-gray-700
+                        "
                       >
                         <svg
                           class="fill-current h-4 w-4"
@@ -324,7 +440,16 @@
                       <input
                         v-model="createRuleObject.actions[key].value"
                         type="text"
-                        class="w-full appearance-none bg-white border border-transparent rounded text-grey-700 focus:outline-none p-2"
+                        class="
+                          w-full
+                          appearance-none
+                          bg-white
+                          border border-transparent
+                          rounded
+                          text-grey-700
+                          focus:outline-none
+                          p-2
+                        "
                         :class="errors.createRuleActionValue ? 'border-red-500' : ''"
                         placeholder="Enter value"
                         autofocus
@@ -340,7 +465,18 @@
                       <select
                         v-model="createRuleObject.actions[key].value"
                         id="create_rule_action_banner"
-                        class="block appearance-none w-40 text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                        class="
+                          block
+                          appearance-none
+                          w-40
+                          text-grey-700
+                          bg-white
+                          p-2
+                          pr-6
+                          rounded
+                          shadow
+                          focus:ring
+                        "
                         required
                       >
                         <option selected value="top">Top</option>
@@ -348,7 +484,16 @@
                         <option selected value="off">Off</option>
                       </select>
                       <div
-                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                        class="
+                          pointer-events-none
+                          absolute
+                          inset-y-0
+                          right-0
+                          flex
+                          items-center
+                          px-2
+                          text-gray-700
+                        "
                       >
                         <svg
                           class="fill-current h-4 w-4"
@@ -378,7 +523,16 @@
           <!-- add action button -->
           <button
             @click="addAction(createRuleObject)"
-            class="mt-4 p-2 text-grey-800 bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              mt-4
+              p-2
+              text-grey-800
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Add action
           </button>
@@ -391,7 +545,16 @@
         <div class="mt-6">
           <button
             @click="createNewRule"
-            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-cyan-400
+              hover:bg-cyan-300
+              text-cyan-900
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="createRuleLoading ? 'cursor-not-allowed' : ''"
             :disabled="createRuleLoading"
           >
@@ -400,7 +563,18 @@
           </button>
           <button
             @click="createRuleModalOpen = false"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -428,7 +602,16 @@
           v-model="editRuleObject.name"
           id="edit_rule_name"
           type="text"
-          class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-2"
+          class="
+            w-full
+            appearance-none
+            bg-grey-100
+            border border-transparent
+            text-grey-700
+            focus:outline-none
+            rounded
+            p-2
+          "
           :class="errors.ruleName ? 'border-red-500' : ''"
           placeholder="Enter name"
           autofocus
@@ -445,14 +628,34 @@
                 <select
                   v-model="editRuleObject.operator"
                   id="edit_rule_operator"
-                  class="block appearance-none w-full text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                  class="
+                    block
+                    appearance-none
+                    w-full
+                    text-grey-700
+                    bg-white
+                    p-2
+                    pr-6
+                    rounded
+                    shadow
+                    focus:ring
+                  "
                   required
                 >
                   <option value="AND">AND</option>
                   <option value="OR">OR</option>
                 </select>
                 <div
-                  class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                  class="
+                    pointer-events-none
+                    absolute
+                    inset-y-0
+                    right-0
+                    flex
+                    items-center
+                    px-2
+                    text-gray-700
+                  "
                 >
                   <svg
                     class="fill-current h-4 w-4"
@@ -476,7 +679,18 @@
                       <select
                         v-model="editRuleObject.conditions[key].type"
                         id="edit_rule_condition_types"
-                        class="block appearance-none w-32 text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                        class="
+                          block
+                          appearance-none
+                          w-32
+                          text-grey-700
+                          bg-white
+                          p-2
+                          pr-6
+                          rounded
+                          shadow
+                          focus:ring
+                        "
                         required
                       >
                         <option
@@ -488,7 +702,16 @@
                         </option>
                       </select>
                       <div
-                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                        class="
+                          pointer-events-none
+                          absolute
+                          inset-y-0
+                          right-0
+                          flex
+                          items-center
+                          px-2
+                          text-gray-700
+                        "
                       >
                         <svg
                           class="fill-current h-4 w-4"
@@ -508,7 +731,18 @@
                       <select
                         v-model="editRuleObject.conditions[key].match"
                         id="edit_rule_condition_matches"
-                        class="block appearance-none w-40 text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                        class="
+                          block
+                          appearance-none
+                          w-40
+                          text-grey-700
+                          bg-white
+                          p-2
+                          pr-6
+                          rounded
+                          shadow
+                          focus:ring
+                        "
                         required
                       >
                         <option
@@ -520,7 +754,16 @@
                         </option>
                       </select>
                       <div
-                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                        class="
+                          pointer-events-none
+                          absolute
+                          inset-y-0
+                          right-0
+                          flex
+                          items-center
+                          px-2
+                          text-gray-700
+                        "
                       >
                         <svg
                           class="fill-current h-4 w-4"
@@ -539,7 +782,16 @@
                         v-model="editRuleObject.conditions[key].currentConditionValue"
                         @keyup.enter="addValueToCondition(editRuleObect, key)"
                         type="text"
-                        class="w-full appearance-none bg-white border border-transparent rounded-l text-grey-700 focus:outline-none p-2"
+                        class="
+                          w-full
+                          appearance-none
+                          bg-white
+                          border border-transparent
+                          rounded-l
+                          text-grey-700
+                          focus:outline-none
+                          p-2
+                        "
                         :class="errors.ruleConditions ? 'border-red-500' : ''"
                         placeholder="Enter value"
                         autofocus
@@ -587,7 +839,16 @@
           <!-- add condition button -->
           <button
             @click="addCondition(editRuleObject)"
-            class="mt-4 p-2 text-grey-800 bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              mt-4
+              p-2
+              text-grey-800
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Add condition
           </button>
@@ -617,7 +878,17 @@
                         v-model="editRuleObject.actions[key].type"
                         @change="ruleActionChange(editRuleObject.actions[key])"
                         id="rule_action_types"
-                        class="block appearance-none text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                        class="
+                          block
+                          appearance-none
+                          text-grey-700
+                          bg-white
+                          p-2
+                          pr-6
+                          rounded
+                          shadow
+                          focus:ring
+                        "
                         required
                       >
                         <option
@@ -629,7 +900,16 @@
                         </option>
                       </select>
                       <div
-                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                        class="
+                          pointer-events-none
+                          absolute
+                          inset-y-0
+                          right-0
+                          flex
+                          items-center
+                          px-2
+                          text-gray-700
+                        "
                       >
                         <svg
                           class="fill-current h-4 w-4"
@@ -655,7 +935,16 @@
                       <input
                         v-model="editRuleObject.actions[key].value"
                         type="text"
-                        class="w-full appearance-none bg-white border border-transparent rounded text-grey-700 focus:outline-none p-2"
+                        class="
+                          w-full
+                          appearance-none
+                          bg-white
+                          border border-transparent
+                          rounded
+                          text-grey-700
+                          focus:outline-none
+                          p-2
+                        "
                         :class="errors.ruleActions ? 'border-red-500' : ''"
                         placeholder="Enter value"
                         autofocus
@@ -668,7 +957,18 @@
                       <select
                         v-model="editRuleObject.actions[key].value"
                         id="edit_rule_action_banner"
-                        class="block appearance-none w-40 text-grey-700 bg-white p-2 pr-6 rounded shadow focus:ring"
+                        class="
+                          block
+                          appearance-none
+                          w-40
+                          text-grey-700
+                          bg-white
+                          p-2
+                          pr-6
+                          rounded
+                          shadow
+                          focus:ring
+                        "
                         required
                       >
                         <option value="top">Top</option>
@@ -676,7 +976,16 @@
                         <option value="off">Off</option>
                       </select>
                       <div
-                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+                        class="
+                          pointer-events-none
+                          absolute
+                          inset-y-0
+                          right-0
+                          flex
+                          items-center
+                          px-2
+                          text-gray-700
+                        "
                       >
                         <svg
                           class="fill-current h-4 w-4"
@@ -706,7 +1015,16 @@
           <!-- add action button -->
           <button
             @click="addAction(editRuleObject)"
-            class="mt-4 p-2 text-grey-800 bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              mt-4
+              p-2
+              text-grey-800
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Add action
           </button>
@@ -719,7 +1037,16 @@
         <div class="mt-6">
           <button
             @click="editRule"
-            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-cyan-400
+              hover:bg-cyan-300
+              text-cyan-900
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="editRuleLoading ? 'cursor-not-allowed' : ''"
             :disabled="editRuleLoading"
           >
@@ -728,7 +1055,18 @@
           </button>
           <button
             @click="closeEditModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -748,7 +1086,17 @@
           <button
             type="button"
             @click="deleteRule(ruleIdToDelete)"
-            class="px-4 py-3 text-white font-semibold bg-red-500 hover:bg-red-600 border border-transparent rounded focus:outline-none"
+            class="
+              px-4
+              py-3
+              text-white
+              font-semibold
+              bg-red-500
+              hover:bg-red-600
+              border border-transparent
+              rounded
+              focus:outline-none
+            "
             :class="deleteRuleLoading ? 'cursor-not-allowed' : ''"
             :disabled="deleteRuleLoading"
           >
@@ -757,7 +1105,18 @@
           </button>
           <button
             @click="closeDeleteModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>

resources/js/pages/Usernames.vue

@@ -7,25 +7,71 @@
           @keyup.esc="search = ''"
           tabindex="0"
           type="text"
-          class="w-full md:w-64 appearance-none shadow bg-white text-grey-700 focus:outline-none rounded py-3 pl-3 pr-8"
+          class="
+            w-full
+            md:w-64
+            appearance-none
+            shadow
+            bg-white
+            text-grey-700
+            focus:outline-none
+            rounded
+            py-3
+            pl-3
+            pr-8
+          "
           placeholder="Search Usernames"
         />
         <icon
           v-if="search"
           @click.native="search = ''"
           name="close-circle"
-          class="absolute right-0 inset-y-0 w-5 h-full text-grey-300 fill-current mr-2 flex items-center cursor-pointer"
+          class="
+            absolute
+            right-0
+            inset-y-0
+            w-5
+            h-full
+            text-grey-300
+            fill-current
+            mr-2
+            flex
+            items-center
+            cursor-pointer
+          "
         />
         <icon
           v-else
           name="search"
-          class="absolute right-0 inset-y-0 w-5 h-full text-grey-300 fill-current pointer-events-none mr-2 flex items-center"
+          class="
+            absolute
+            right-0
+            inset-y-0
+            w-5
+            h-full
+            text-grey-300
+            fill-current
+            pointer-events-none
+            mr-2
+            flex
+            items-center
+          "
         />
       </div>
       <div class="mt-4 md:mt-0">
         <button
           @click="addUsernameModalOpen = true"
-          class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none ml-auto"
+          class="
+            bg-cyan-400
+            hover:bg-cyan-300
+            text-cyan-900
+            font-bold
+            py-3
+            px-4
+            rounded
+            focus:outline-none
+            ml-auto
+          "
         >
           Add Username
         </button>
@@ -75,7 +121,17 @@
               @keyup.esc="usernameIdToEdit = usernameDescriptionToEdit = ''"
               v-model="usernameDescriptionToEdit"
               type="text"
-              class="flex-grow appearance-none bg-grey-100 border text-grey-700 focus:outline-none rounded px-2 py-1"
+              class="
+                flex-grow
+                appearance-none
+                bg-grey-100
+                border
+                text-grey-700
+                focus:outline-none
+                rounded
+                px-2
+                py-1
+              "
               :class="
                 usernameDescriptionToEdit.length > 100 ? 'border-red-500' : 'border-transparent'
               "
@@ -200,14 +256,33 @@
           <input
             v-model="newUsername"
             type="text"
-            class="w-full appearance-none bg-grey-100 border border-transparent text-grey-700 focus:outline-none rounded p-3 mb-6"
+            class="
+              w-full
+              appearance-none
+              bg-grey-100
+              border border-transparent
+              text-grey-700
+              focus:outline-none
+              rounded
+              p-3
+              mb-6
+            "
             :class="errors.newUsername ? 'border-red-500' : ''"
             placeholder="johndoe"
             autofocus
           />
           <button
             @click="validateNewUsername"
-            class="bg-cyan-400 hover:bg-cyan-300 text-cyan-900 font-bold py-3 px-4 rounded focus:outline-none"
+            class="
+              bg-cyan-400
+              hover:bg-cyan-300
+              text-cyan-900
+              font-bold
+              py-3
+              px-4
+              rounded
+              focus:outline-none
+            "
             :class="addUsernameLoading ? 'cursor-not-allowed' : ''"
             :disabled="addUsernameLoading"
           >
@@ -216,7 +291,18 @@
           </button>
           <button
             @click="addUsernameModalOpen = false"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -255,7 +341,17 @@
           <button
             type="button"
             @click="editDefaultRecipient()"
-            class="px-4 py-3 text-cyan-900 font-semibold bg-cyan-400 hover:bg-cyan-300 border border-transparent rounded focus:outline-none"
+            class="
+              px-4
+              py-3
+              text-cyan-900
+              font-semibold
+              bg-cyan-400
+              hover:bg-cyan-300
+              border border-transparent
+              rounded
+              focus:outline-none
+            "
             :class="editDefaultRecipientLoading ? 'cursor-not-allowed' : ''"
             :disabled="editDefaultRecipientLoading"
           >
@@ -264,7 +360,18 @@
           </button>
           <button
             @click="closeUsernameDefaultRecipientModal()"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>
@@ -289,7 +396,17 @@
           <button
             type="button"
             @click="deleteUsername(usernameIdToDelete)"
-            class="px-4 py-3 text-white font-semibold bg-red-500 hover:bg-red-600 border border-transparent rounded focus:outline-none"
+            class="
+              px-4
+              py-3
+              text-white
+              font-semibold
+              bg-red-500
+              hover:bg-red-600
+              border border-transparent
+              rounded
+              focus:outline-none
+            "
             :class="deleteUsernameLoading ? 'cursor-not-allowed' : ''"
             :disabled="deleteUsernameLoading"
           >
@@ -298,7 +415,18 @@
           </button>
           <button
             @click="closeDeleteModal"
-            class="ml-4 px-4 py-3 text-grey-800 font-semibold bg-white hover:bg-grey-50 border border-grey-100 rounded focus:outline-none"
+            class="
+              ml-4
+              px-4
+              py-3
+              text-grey-800
+              font-semibold
+              bg-white
+              hover:bg-grey-50
+              border border-grey-100
+              rounded
+              focus:outline-none
+            "
           >
             Cancel
           </button>