getalby clickable

app/Http/Livewire/Auth/LNUrlAuth.php

@@ -2,7 +2,6 @@
 
 namespace App\Http\Livewire\Auth;
 
-use App\Gamify\Points\LoggedIn;
 use App\Models\LoginKey;
 use App\Models\User;
 use App\Notifications\ModelCreatedNotification;
@@ -32,8 +31,11 @@ class LNUrlAuth extends Component
         $this->k1 = bin2hex(str()->random(32));
         $this->url = url('/api/lnurl-auth-callback?tag=login&k1='.$this->k1.'&action=login');
         $this->lnurl = lnurl\encodeUrl($this->url);
-        $this->qrCode = QrCode::size(300)
-                              ->generate($this->lnurl);
+        $this->qrCode = base64_encode(QrCode::format('png')
+                              ->size(300)
+                              ->merge('/public/android-chrome-192x192.png', .3)
+                              ->errorCorrection('H')
+                              ->generate($this->lnurl));
     }
 
     public function checkAuth()

docker/8.1/Dockerfile

@@ -31,7 +31,7 @@ RUN apt-get update \
        php8.1-intl php8.1-readline \
        php8.1-ldap php8.1-gmp \
        php8.1-msgpack php8.1-igbinary php8.1-redis php8.1-swoole \
-       php8.1-memcached php8.1-pcov php8.1-xdebug \
+       php8.1-memcached php8.1-pcov php8.1-xdebug php8.1-imagick \
     && php -r "readfile('https://getcomposer.org/installer');" | php -- --install-dir=/usr/bin/ --filename=composer \
     && curl -sLS https://deb.nodesource.com/setup_$NODE_VERSION.x | bash - \
     && apt-get install -y nodejs \

resources/lang/de.json

@@ -659,5 +659,6 @@
     "Your current Meetup groups": "Deine aktuellen Meetup-Gruppen",
     "Thanks, continue here": "Danke, weiter geht es hier",
     "Copy the LNURL and paste it under \"Send\" or scan the QR code with \"Send\". LNURL-auth enabled wallets:": "Kopiere die LNURL und füge sie unter \"Senden\" ein oder scanne den QR-Code mit \"Senden\". LNURL-auth fähige Wallets:",
-    "Without @": "Ohne @"
+    "Without @": "Ohne @",
+    "Scan this code or copy + paste it to your lightning wallet. Or click to login with your browser's wallet.": "Scanne diesen Code oder copy + paste ihn in deine Lightning-Wallet ein. Oder klicke, um dich mit der Wallet deines Browsers anzumelden."
 }

resources/lang/en.json

@@ -652,5 +652,6 @@
     "Your current Meetup groups": "",
     "Thanks, continue here": "",
     "Copy the LNURL and paste it under \"Send\" or scan the QR code with \"Send\". LNURL-auth enabled wallets:": "",
-    "Without @": ""
+    "Without @": "",
+  "Scan this code or copy + paste it to your lightning wallet. Or click to login with your browser's wallet.": ""
 }

resources/views/livewire/auth/ln-url-auth.blade.php

@@ -13,14 +13,20 @@
 
         <div>
 
+            <div class="text-center text-2xl text-gray-800 mt-6">
+                Login with lightning ⚡
+            </div>
+
             <div class="flex justify-center" wire:key="qrcode">
-                {!! $this->qrCode !!}
+                <a href="lightning:{{ $this->lnurl }}">
+                    <img src="{{ 'data:image/png;base64, '. $this->qrCode }}" alt="qrcode">
+                </a>
             </div>
             <div class="my-2 flex justify-center font-mono break-all">
                 <input class="w-full" readonly wire:key="lnurl" onClick="this.select();"
                        value="lightning:{{ $this->lnurl }}"/>
             </div>
-            <div class="flex justify-end w-full">
+            <div class="flex justify-between w-full">
                 <div
                     x-data="{
                       textToCopy: 'lightning:{{ $this->lnurl }}',
@@ -28,7 +34,21 @@
                     @click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('URL copied!') }}',icon:'success'});"
                 >
                     <x-button
-                        xs
+                        black
+                        :href="'lightning:'.$this->lnurl"
+                    >
+                        <i class="fa fa-thin fa-clipboard"></i>
+                        {{ __('Click to connect') }}<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M461.81 53.81a4.4 4.4 0 00-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a294.9 294.9 0 00-33.09 39.08c-21-1.9-42-.3-59.88 7.5-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 009.8 10.4l81.07-8.9a180.29 180.29 0 001.1 18.3 18.15 18.15 0 005.3 11.09l31.39 31.39a18.15 18.15 0 0011.1 5.3 179.91 179.91 0 0018.19 1.1l-8.89 81a9 9 0 0010.39 9.79c24.9-4 83-18.69 105.07-69.17 7.8-17.9 9.4-38.79 7.6-59.69a293.91 293.91 0 0039.19-33.09c68.38-68 115.47-190.86 102.37-247.95zM298.66 213.67a42.7 42.7 0 1160.38 0 42.65 42.65 0 01-60.38 0z"></path><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M109.64 352a45.06 45.06 0 00-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 00160 402.32"></path></svg>
+                    </x-button>
+                </div>
+                <div
+                    x-data="{
+                      textToCopy: 'lightning:{{ $this->lnurl }}',
+                    }"
+                    @click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('URL copied!') }}',icon:'success'});"
+                >
+                    <x-button
+                        black
                     >
                         <i class="fa fa-thin fa-clipboard"></i>
                         {{ __('Copy') }}
@@ -52,7 +72,7 @@
         @endif
 
         <div class="pt-12">
-            {{ __('Copy the LNURL and paste it under "Send" or scan the QR code with "Send". LNURL-auth enabled wallets:') }}
+            {{ __('Scan this code or copy + paste it to your lightning wallet. Or click to login with your browser\'s wallet.') }}
         </div>
         <div class="pt-2">
             <td