From c05fe3972d2157380993f7345857fe87283dd69e Mon Sep 17 00:00:00 2001
From: Luca Longo <l.longo@ambita.it>
Date: Tue, 14 Feb 2023 11:18:52 +0100
Subject: [PATCH 1/6] Vue component

---
 resources/js/login-link.vue | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 resources/js/login-link.vue

diff --git a/resources/js/login-link.vue b/resources/js/login-link.vue
new file mode 100644
index 0000000..224b88d
--- /dev/null
+++ b/resources/js/login-link.vue
@@ -0,0 +1,31 @@
+<script setup>
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    label: { type: String, default: () => 'Login' },
+    class: { type: String, default: () => 'underline' },
+    email: String,
+    key: String,
+    redirectUrl: String,
+    guard: String,
+    userAttributes: { type: Object, default: () => null },
+})
+
+function submit() {
+    router.post(route('loginLinkLogin'), {
+        email: props.email,
+        key: props.key,
+        redirect_url: props.redirectUrl,
+        guard: props.guard,
+        user_attributes: props.userAttributes,
+    })
+}
+</script>
+
+<template>
+    <form @submit.prevent="submit">
+        <button :class="props.class" type="submit">
+            {{ props.label }}
+        </button>
+    </form>
+</template>

From bfe009edd7157ecd64a7e89ef1ec6c5aafd3d922 Mon Sep 17 00:00:00 2001
From: Luca Longo <l.longo@ambita.it>
Date: Tue, 14 Feb 2023 11:24:34 +0100
Subject: [PATCH 2/6] Update README.md

---
 README.md | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 799c23c..d85bf26 100644
--- a/README.md
+++ b/README.md
@@ -170,9 +170,25 @@ If the user that needs to be logged in does not exist, the package will use the
 
 If you don't want this behaviour, set `automatically_create_missing_users` in the `local-link` config file to `false`.
 
-### Usage with Vue / React / ...
+### Usage with Vue
 
-The package doesn't come with any JS component out of the box. When you use a JS front end framework to render your views, you can still make use of the package.
+The package has a built-in component to support Vue. The props are the same of blade component.
+
+```vue
+import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/js/login-link.vue';
+
+<LoginLink />
+
+// or
+
+<LoginLink label="Login as l.longo@ambita.it" class="pb-3 text-red-500" :redirect-url="route('dashboard')" />
+```
+
+The component will do the rest.
+
+### Usage with React / Js / ...
+
+The package comes with Vue support only. When you use any other JS front end framework to render your views, you can still make use of the package.
 
 You should send a `POST` request to `/laravel-login-link-login`. If you don't give it any payload, then it will log in the first user in your users table. If there is no user, it will be created.
 

From 5f1a87c12fea7218c9a3c8e61c0ac995c9e44456 Mon Sep 17 00:00:00 2001
From: Luca Longo <l.longo@ambita.it>
Date: Tue, 14 Feb 2023 11:27:23 +0100
Subject: [PATCH 3/6] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d85bf26..d8217a1 100644
--- a/README.md
+++ b/README.md
@@ -172,7 +172,7 @@ If you don't want this behaviour, set `automatically_create_missing_users` in th
 
 ### Usage with Vue
 
-The package has a built-in component to support Vue. The props are the same of blade component.
+The package has a built-in component to support Vue (requires (Ziggy)[https://github.com/tighten/ziggy]). The props are the same of blade component.
 
 ```vue
 import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/js/login-link.vue';

From 802e45209121e40e4346869360a65b46178b75fc Mon Sep 17 00:00:00 2001
From: Luca Longo <l.longo@ambita.it>
Date: Tue, 14 Feb 2023 11:52:49 +0100
Subject: [PATCH 4/6] Update README.md

---
 README.md | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d8217a1..4630206 100644
--- a/README.md
+++ b/README.md
@@ -184,7 +184,23 @@ import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/js/log
 <LoginLink label="Login as l.longo@ambita.it" class="pb-3 text-red-500" :redirect-url="route('dashboard')" />
 ```
 
-The component will do the rest.
+Due to the nature of JavaScript, it isn't possible to know what's the environment, so you should create your logic to show or hide the component.
+
+If you use Inertia, it is easy to do it using the shared page props. You can edit the `HandleInertiaRequests` middleware like so:
+```php
+public function share(Request $request): array
+{
+    return array_merge(parent::share($request), [
+        'environment' => app()->environment(),
+        // ...
+    ]);
+}
+```
+
+So, in the Vue component:
+```vue
+<LoginLink v-if="$page.props.environment == 'local'" />
+```
 
 ### Usage with React / Js / ...
 

From 26c719852816b0d2488f24aea7549d303a9a5ff6 Mon Sep 17 00:00:00 2001
From: Luca Longo <l.longo@ambita.it>
Date: Tue, 14 Feb 2023 11:57:57 +0100
Subject: [PATCH 5/6] Update README.md

---
 README.md | 27 +++++++++++----------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 4630206..6b7488b 100644
--- a/README.md
+++ b/README.md
@@ -170,23 +170,11 @@ If the user that needs to be logged in does not exist, the package will use the
 
 If you don't want this behaviour, set `automatically_create_missing_users` in the `local-link` config file to `false`.
 
-### Usage with Vue
+### Usage with Vue and InertiaJS
 
-The package has a built-in component to support Vue (requires (Ziggy)[https://github.com/tighten/ziggy]). The props are the same of blade component.
+The package has a built-in component to support Vue and InertiaJS. The props are the same of blade component.
 
-```vue
-import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/js/login-link.vue';
-
-<LoginLink />
-
-// or
-
-<LoginLink label="Login as l.longo@ambita.it" class="pb-3 text-red-500" :redirect-url="route('dashboard')" />
-```
-
-Due to the nature of JavaScript, it isn't possible to know what's the environment, so you should create your logic to show or hide the component.
-
-If you use Inertia, it is easy to do it using the shared page props. You can edit the `HandleInertiaRequests` middleware like so:
+Edit the `HandleInertiaRequests` middleware like so:
 ```php
 public function share(Request $request): array
 {
@@ -197,9 +185,16 @@ public function share(Request $request): array
 }
 ```
 
-So, in the Vue component:
+So, if you need to show the button only in your local environment, use the component like so:
+
 ```vue
+import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/js/login-link.vue';
+
 <LoginLink v-if="$page.props.environment == 'local'" />
+
+// or
+
+<LoginLink v-if="$page.props.environment == 'local'" label="Login as l.longo@ambita.it" class="pb-3 text-red-500" :redirect-url="route('dashboard')" />
 ```
 
 ### Usage with React / Js / ...

From 32e2aa9dcc163cca9d65b144c7d6c09578f7bd77 Mon Sep 17 00:00:00 2001
From: Freek Van der Herten <freek@spatie.be>
Date: Tue, 14 Feb 2023 13:54:09 +0100
Subject: [PATCH 6/6] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6b7488b..0595a17 100644
--- a/README.md
+++ b/README.md
@@ -194,7 +194,7 @@ import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/js/log
 
 // or
 
-<LoginLink v-if="$page.props.environment == 'local'" label="Login as l.longo@ambita.it" class="pb-3 text-red-500" :redirect-url="route('dashboard')" />
+<LoginLink v-if="$page.props.environment == 'local'" label="Login as user@example.com" class="pb-3 text-red-500" :redirect-url="route('dashboard')" />
 ```
 
 ### Usage with React / Js / ...