feat: Make credentials easily copyable

files/website/_pages/index.blade.php

@@ -3,8 +3,7 @@
   <main class="grid h-full grid-cols-1 justify-between"
         id="content">
     <!-- Primary Hero -->
-    <div class="hero bg-base-200"
-         style="background-image: url('/media/hero_background.jpg')">
+    <div class="hero bg-base-200 bg-[url('/media/hero_background.jpg')]">
 
       <div class="hero-overlay bg-opacity-60"></div>
 
@@ -44,7 +43,7 @@ class="flex flex-col items-center justify-center space-x-3 text-3xl font-bold md
                   OR
                 </div>
 
-                <details class="dropdown dropdown-top">
+                <details class="dropdown-top dropdown">
                   <summary class="btn btn-secondary btn-wide m-1 rounded-full">Other versions</summary>
                   <ul class="menu dropdown-content z-50 w-52 rounded-box bg-base-100 p-2 shadow">
                     @foreach (config('hyde.moodle.versions')->skip(1) as $moodleVersion)

files/website/package.json

@@ -39,5 +39,9 @@
         "postcss": "^8.4.31",
         "prettier": "2.6.0",
         "tailwindcss": "^3.0.24"
+    },
+    "dependencies": {
+        "@ryangjchandler/alpine-clipboard": "^2.3.0",
+        "alpinejs": "^3.13.3"
     }
 }

files/website/resources/assets/app.js

@@ -2,3 +2,10 @@
 * This is the main JavaScript used by webpack to build the the app.js file.
 */
 import 'boxicons'
+import Alpine from 'alpinejs'
+import Clipboard from "@ryangjchandler/alpine-clipboard"
+
+Alpine.plugin(Clipboard)
+
+window.Alpine = Alpine
+window.Alpine.start()

files/website/resources/views/components/secondary_hero.blade.php

@@ -4,10 +4,28 @@
           'title' => 'Credentials',
           'icon' => 'key',
           'description' => '
-                Log in as the site administration with:
+                Click each credential to copy it.
+
                 <ul>
-                    <li class="flex flex-wrap justify-between"><span class="font-bold"><i class="bx bx-user"></i> Username</span> <span>moodler</span></li>
-                    <li class="flex flex-wrap justify-between"><span class="font-bold"><i class="bx bx-lock"></i> Password</span> <span>N3verstople@rning</span></li>
+                    <li class="flex flex-wrap justify-between">
+                      <span class="font-bold">
+                        <i class="bx bx-user"></i> Username
+                      </span>
+                      <span class="cursor-pointer space-x-2" title="Click to copy" x-clipboard.raw="moodler">
+                        <span>moodler</span>
+                        <i class="bx bx-copy"></i>
+                      </span>
+                    </li>
+
+                    <li class="flex flex-wrap justify-between">
+                      <span class="font-bold">
+                        <i class="bx bx-lock"></i> Password
+                      </span>
+                      <span class="cursor-pointer space-x-2" title="Click to copy" x-clipboard.raw="N3verstople@rning">
+                        <span>N3verstople@rning</span>
+                        <i class="bx bx-copy"></i>
+                        </span>
+                    </li>
                 </ul>
           ',
       ],
@@ -25,7 +43,7 @@
       [
           'title' => 'Additional Plugins',
           'icon' => 'plug',
-          'description' => 'The installation of additional plugins are disabled in order to make the automatic upgrade possible.',
+          'description' => 'The installation of additional plugins are disabled to make the automatic upgrades possible.',
       ],
       [
           'title' => 'Emails',