From 80add1854ac27e476a31f8a790d529820ebc60a9 Mon Sep 17 00:00:00 2001 From: Florian Date: Sat, 22 Jun 2024 23:12:33 +0200 Subject: [PATCH 1/5] Add react support (jsx and tsx) --- README.md | 36 ++++++++++++++++++++++++------- resources/js/LoginLink.jsx | 33 +++++++++++++++++++++++++++++ resources/ts/LoginLink.tsx | 43 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 105 insertions(+), 7 deletions(-) create mode 100644 resources/js/LoginLink.jsx create mode 100644 resources/ts/LoginLink.tsx diff --git a/README.md b/README.md index ea16163..aa19e56 100644 --- a/README.md +++ b/README.md @@ -175,9 +175,9 @@ 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 and InertiaJS +### Usage with Vue or React and InertiaJS -The package has a built-in component to support Vue and InertiaJS. The props are the same of blade component. +The package has a built-in component to support Vue or React and InertiaJS. The props are the same of blade component. Edit the `HandleInertiaRequests` middleware like so: ```php @@ -190,21 +190,43 @@ public function share(Request $request): array } ``` -So, if you need to show the button only in your local environment, use the component like so: +So, if you need to show the button only in your local environment, use the component like so for Vue : ```vue import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/js/login-link.vue'; - + // or - + ``` -### Usage with React / Js / ... +For React, use the component like so: -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. +```jsx +import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/js/LoginLink'; +// or for TypeScript, uncomment the following line +//import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/ts/LoginLink'; + +{page.props.environment === 'local' && ( + +)} + +// or + +{page.props.environment === 'local' && ( + +)} +``` + +### Usage with Js / ... + +The package comes with Vue and React 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. diff --git a/resources/js/LoginLink.jsx b/resources/js/LoginLink.jsx new file mode 100644 index 0000000..5eb39cb --- /dev/null +++ b/resources/js/LoginLink.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { router } from '@inertiajs/react' + +const LoginLink = ({ + className = 'underline', + email = null, + guard = null, + keyId = null, + label = 'Login', + redirectUrl = null, + userAttributes = null, +}) => { + const submit = (event) => { + event.preventDefault(); + router.post(route('loginLinkLogin'), { + email: email, + key: keyId, + redirect_url: redirectUrl, + guard: guard, + user_attributes: userAttributes, + }); + }; + + return ( +
+ +
+ ); +}; + +export default LoginLink; diff --git a/resources/ts/LoginLink.tsx b/resources/ts/LoginLink.tsx new file mode 100644 index 0000000..475cfd6 --- /dev/null +++ b/resources/ts/LoginLink.tsx @@ -0,0 +1,43 @@ +import React, { FormEvent } from 'react'; +import { router } from '@inertiajs/react' + +interface LoginLinkProps { + className?: string; + email?: string; + guard?: string; + keyId?: string; + label?: string; + redirectUrl?: string; + userAttributes?: Record; +} + +const LoginLink: React.FC = ({ + className = 'underline', + email = null, + guard = null, + keyId = null, + label = 'Login', + redirectUrl = null, + userAttributes = null, +}) => { + const submit = (event: FormEvent) => { + event.preventDefault(); + router.post(route('loginLinkLogin'), { + email: email, + key: keyId, + redirect_url: redirectUrl, + guard: guard, + user_attributes: userAttributes, + }); + }; + + return ( +
+ +
+ ); +}; + +export default LoginLink; From 7a193313ce968a65d75d51c930a3c6ea1f02765e Mon Sep 17 00:00:00 2001 From: Florian <88294294+fouteox@users.noreply.github.com> Date: Wed, 10 Jul 2024 09:45:22 +0200 Subject: [PATCH 2/5] Update README.md Co-authored-by: Sebastian De Deyne --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index aa19e56..ea83c52 100644 --- a/README.md +++ b/README.md @@ -219,7 +219,7 @@ import LoginLink from '@/../../vendor/spatie/laravel-login-link/resources/js/Log )} ``` From 04391c77ac291da48652123b6c35ec9f0963e666 Mon Sep 17 00:00:00 2001 From: Florian <88294294+fouteox@users.noreply.github.com> Date: Wed, 10 Jul 2024 09:45:36 +0200 Subject: [PATCH 3/5] Update README.md Co-authored-by: Sebastian De Deyne --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ea83c52..1320006 100644 --- a/README.md +++ b/README.md @@ -175,7 +175,7 @@ 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 or React and InertiaJS +### Usage with Vue or React and Inertia.js The package has a built-in component to support Vue or React and InertiaJS. The props are the same of blade component. From c9f3e1206fc0f5637dda77a7b92b47fc1437e4c2 Mon Sep 17 00:00:00 2001 From: Florian <88294294+fouteox@users.noreply.github.com> Date: Wed, 10 Jul 2024 09:45:51 +0200 Subject: [PATCH 4/5] Update resources/ts/LoginLink.tsx Co-authored-by: Sebastian De Deyne --- resources/ts/LoginLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/ts/LoginLink.tsx b/resources/ts/LoginLink.tsx index 475cfd6..c13c6b4 100644 --- a/resources/ts/LoginLink.tsx +++ b/resources/ts/LoginLink.tsx @@ -20,7 +20,7 @@ const LoginLink: React.FC = ({ redirectUrl = null, userAttributes = null, }) => { - const submit = (event: FormEvent) => { + function handleSubmit(event: FormEvent) { event.preventDefault(); router.post(route('loginLinkLogin'), { email: email, From 490a9fef07eed63f7b0ff3d6cee4b860f9d78959 Mon Sep 17 00:00:00 2001 From: Florian Date: Wed, 10 Jul 2024 09:53:20 +0200 Subject: [PATCH 5/5] fix style code --- resources/js/LoginLink.jsx | 6 ++---- resources/ts/LoginLink.tsx | 8 +++----- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/resources/js/LoginLink.jsx b/resources/js/LoginLink.jsx index 5eb39cb..f7bbbfa 100644 --- a/resources/js/LoginLink.jsx +++ b/resources/js/LoginLink.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { router } from '@inertiajs/react' -const LoginLink = ({ +export default function LoginLink({ className = 'underline', email = null, guard = null, @@ -9,7 +9,7 @@ const LoginLink = ({ label = 'Login', redirectUrl = null, userAttributes = null, -}) => { +}) { const submit = (event) => { event.preventDefault(); router.post(route('loginLinkLogin'), { @@ -29,5 +29,3 @@ const LoginLink = ({ ); }; - -export default LoginLink; diff --git a/resources/ts/LoginLink.tsx b/resources/ts/LoginLink.tsx index c13c6b4..b305e18 100644 --- a/resources/ts/LoginLink.tsx +++ b/resources/ts/LoginLink.tsx @@ -11,7 +11,7 @@ interface LoginLinkProps { userAttributes?: Record; } -const LoginLink: React.FC = ({ +export default function LoginLink({ className = 'underline', email = null, guard = null, @@ -19,8 +19,8 @@ const LoginLink: React.FC = ({ label = 'Login', redirectUrl = null, userAttributes = null, -}) => { - function handleSubmit(event: FormEvent) { +}: LoginLinkProps) { + function submit(event: FormEvent) { event.preventDefault(); router.post(route('loginLinkLogin'), { email: email, @@ -39,5 +39,3 @@ const LoginLink: React.FC = ({ ); }; - -export default LoginLink;