give / src / DonationForms / resources / registrars / templates / groups / Authentication.tsx

Authentication.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.15.0, at src/DonationForms/resources/registrars/templates/groups/Authentication.tsx

184 lines 6.4 KB

Raw Download Zip

1	import {FC, useState} from 'react';
2	import {__} from '@wordpress/i18n';
3	import type {FieldProps} from '@givewp/forms/propTypes';
4	import {GroupProps} from '@givewp/forms/propTypes';
5	import getWindowData from '@givewp/forms/app/utilities/getWindowData';
6	import postData from '@givewp/forms/app/utilities/postData';
7	import getCurrentFormUrlData from '@givewp/forms/app/utilities/getCurrentFormUrlData';
8	import FieldError from '../layouts/FieldError';
9	import styles from '../styles.module.scss';
10
11	const {originUrl, isEmbed, embedId} = getCurrentFormUrlData();
12
13	const getRedirectUrl = (redirectUrl: URL) => {
14	const formPageUrl = new URL(originUrl);
15	formPageUrl.searchParams.append('givewp-auth-redirect', 'true');
16
17	if (isEmbed) {
18	formPageUrl.searchParams.append('givewp-is-embed', String(isEmbed));
19	formPageUrl.searchParams.append('givewp-embed-id', embedId);
20	}
21
22	// use wp core login redirect param
23	redirectUrl.searchParams.set('redirect_to', formPageUrl.toString());
24
25	return redirectUrl;
26	};
27	const handleLoginPageRedirected = () => {
28	const formPageUrl = new URL(window.top.location.href);
29
30	const isAuthRedirect =
31	formPageUrl.searchParams.has('givewp-auth-redirect') &&
32	formPageUrl.searchParams.get('givewp-auth-redirect') === 'true';
33
34	if (isAuthRedirect) {
35	const isEmbedRedirect =
36	formPageUrl.searchParams.has('givewp-is-embed') &&
37	formPageUrl.searchParams.get('givewp-is-embed') === 'true';
38	const isThisEmbed =
39	formPageUrl.searchParams.has('givewp-embed-id') &&
40	formPageUrl.searchParams.get('givewp-embed-id') === embedId;
41
42	if (isEmbedRedirect && isThisEmbed) {
43	window.frameElement.scrollIntoView({
44	behavior: 'smooth',
45	});
46	}
47	}
48	};
49
50	handleLoginPageRedirected();
51
52	interface AuthProps extends GroupProps {
53	nodeComponents: {
54	login: FC<FieldProps \| {}>;
55	password: FC<FieldProps \| {}>;
56	};
57	required: boolean;
58	isAuthenticated: boolean;
59	loginRedirect: boolean;
60	loginRedirectUrl: string;
61	loginNotice: string;
62	loginConfirmation: string;
63	lostPasswordUrl: string;
64	}
65
66	export default function Authentication({
67	nodeComponents: {login: Login, password: Password},
68	required,
69	isAuthenticated,
70	loginRedirect,
71	loginRedirectUrl,
72	loginNotice,
73	loginConfirmation,
74	lostPasswordUrl,
75	name,
76	}: AuthProps) {
77	const [isAuth, setIsAuth] = useState<boolean>(isAuthenticated);
78	const [showLogin, setShowLogin] = useState<boolean>(required);
79	const toggleShowLogin = () => setShowLogin(!showLogin);
80	const redirectToLoginPage = (e) => {
81	e.preventDefault();
82	const loginUrl = getRedirectUrl(new URL(loginRedirectUrl));
83	window.top.location.assign(loginUrl);
84	};
85
86	return (
87	<>
88	{isAuth && (
89	<p style={{textAlign: 'center'}}>
90	<em>{loginConfirmation}</em>
91	</p>
92	)}
93	{!isAuth && showLogin && (
94	<LoginForm success={() => setIsAuth(true)} lostPasswordUrl={lostPasswordUrl} nodeName={name}>
95	<Login />
96	<Password />
97	</LoginForm>
98	)}
99	{!isAuth && !showLogin && (
100	<div style={{display: 'flex'}}>
101	{loginRedirect ? (
102	<LoginNotice onClick={redirectToLoginPage}>{loginNotice}</LoginNotice>
103	) : (
104	<LoginNotice onClick={toggleShowLogin}>{loginNotice}</LoginNotice>
105	)}
106	</div>
107	)}
108	</>
109	);
110	}
111
112	/**
113	* @since 4.3.0 replace "Forgot your password" anchor element with a button since it does not contain a valid href attribute.
114	*/
115	const LoginForm = ({children, success, lostPasswordUrl, nodeName}) => {
116	const {authUrl} = getWindowData();
117	const {useWatch, useFormContext} = window.givewp.form.hooks;
118	const {setValue, getValues} = useFormContext();
119	const {firstName, lastName, email} = getValues();
120
121	const login = useWatch({name: 'login'});
122	const password = useWatch({name: 'password'});
123
124	const [errorMessage, setErrorMessage] = useState<string>('');
125
126	const tryLogin = async (event) => {
127	event.preventDefault();
128
129	const {response} = await postData(authUrl, {
130	login: login,
131	password: password,
132	});
133
134	const {data: responseData} = await response.json();
135	if (response.ok) {
136	setValue('firstName', firstName \|\| responseData.firstName);
137	setValue('lastName', lastName \|\| responseData.lastName);
138	setValue('email', email \|\| responseData.email);
139	success();
140	} else {
141	setErrorMessage(
142	'authentication_error' === responseData.type
143	? responseData.message
144	: __('Something went wrong. Please try or again or contact a site administrator.', 'give')
145	);
146	}
147	};
148
149	return (
150	<div className={styles['authentication__login-form']}>
151	<div className={styles['authentication__login-form__fields-wrapper']}>{children}</div>
152
153	{!!errorMessage && <FieldError error={errorMessage} name={nodeName} />}
154
155	<div className={styles['authentication__login-form__buttons-wrapper']}>
156	<div className={styles['authentication__login-form__reset-wrapper']}>
157	{__('Forgot your password?', 'give')}
158	<button
159	className={styles['authentication__login-form__reset-button']}
160	onClick={(event) => {
161	event.preventDefault();
162	const passwordResetUrl = getRedirectUrl(new URL(lostPasswordUrl));
163	window.top.location.assign(passwordResetUrl);
164	}}
165	>
166	<span>{__('Reset', 'give')}</span>
167	</button>
168	</div>
169	<button className={styles['authentication__login-form__login-button']} onClick={tryLogin}>
170	{__('Log In', 'give')}
171	</button>
172	</div>
173	</div>
174	);
175	};
176
177	const LoginNotice = ({children, onClick}) => {
178	return (
179	<button className={styles['authentication__login-notice']} onClick={onClick}>
180	{children}
181	</button>
182	);
183	};
184