File: src/googleauth-page/components/Google_Auth.jsx

import { createInterpolateElement } from "@wordpress/element";
import { Button, TextControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";

import AdminFooter from "./AdminFooter";
import Notification from "./Notification";
import React, { useState } from "react";

/**
 * WPMUDEV_Google_Auth
 *
 * @returns {React.ReactElement}
 */
const WPMUDEV_Google_Auth = () => {
	//get init values
	const {
		textDomain,
		initialClientId,
		initialClientSecret,
		nonce,
		restEndpointSave,
	} = window.wpmudevPluginTest;

	//client id
	const [clientId, setClientId] = useState(initialClientId);
	//client secret
	const [clientSecret, setClientSecret] = useState(initialClientSecret);
	//message state
	const [notificationMessage, setMessage] = useState({});

	/**
	 * Set Button to disabled and inputs
	 */
	const setDisabled = (disable = true) => {
		if (disable) {
			//set class client-id-input to readonly
			document.querySelector(".client-id-input").setAttribute("readonly", true);
			//set class client-secret-input to readonly
			document
				.querySelector(".client-secret-input")
				.setAttribute("readonly", true);

			//set class save-button-trigger to disabled
			document
				.querySelector(".save-button-trigger")
				.setAttribute("disabled", true);
		} else {
			//set class client-id-input to readonly
			document.querySelector(".client-id-input").removeAttribute("readonly");
			//set class client-secret-input to readonly
			document
				.querySelector(".client-secret-input")
				.removeAttribute("readonly");

			//set class save-button
			document
				.querySelector(".save-button-trigger")
				.removeAttribute("disabled");
		}
	};

	//handle click
	const handleClick = async (e) => {
		//prevent default
		e.preventDefault();
		//get updated values
		const formData = {
			clientId,
			clientSecret,
		};

		//set button to disabled
		setDisabled(true);

		//send updated values to server
		try {
			const response = await fetch(restEndpointSave, {
				method: "POST",
				headers: {
					"Content-Type": "application/json",
					//jwt
					Authorization: `Bearer ${nonce}`,
				},
				body: JSON.stringify(formData),
			});

			const data = await response.json();

			//set button to enabled
			setDisabled(false);

			//check data status is 200
			if (data.status === 200) {
				//set message
				setMessage({
					type: "success",
					message: data.message,
				});
			} else {
				//set message
				setMessage({
					type: "error",
					message: data.message,
				});
			}

			//log response
			// console.log("log", data); // Handle the response data
		} catch (error) {
			//set button to enabled
			setDisabled(false);
			//log error
			console.error("Error submitting form:", error);
		}
	};

	return (
		<>
			<div className="sui-header">
				<h1 className="sui-header-title">{__("Settings", textDomain)}</h1>
			</div>

			<div className="sui-box">
				<div className="sui-box-header">
					<h2 className="sui-box-title">
						{__("Set Google credentials", textDomain)}
					</h2>
				</div>

				<div className="sui-box-body">
					<div className="wpdev-notification">
						<Notification details={notificationMessage} />
					</div>

					<div className="sui-box-settings-row">
						<TextControl
							className="client-id-input"
							help={createInterpolateElement(
								__("You can get Client ID from <a>here</a>.", textDomain),
								{
									a: (
										<a href="https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid" />
									),
								},
							)}
							label={__("Client ID", textDomain)}
							value={clientId}
							onChange={(value) => setClientId(value)}
						/>
					</div>

					<div className="sui-box-settings-row">
						<TextControl
							className="client-secret-input"
							help={createInterpolateElement(
								__("You can get Client Secret from <a>here</a>.", textDomain),
								{
									a: (
										<a href="https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid" />
									),
								},
							)}
							label={__("Client Secret", textDomain)}
							value={clientSecret}
							onChange={(value) => setClientSecret(value)}
							//set type password
							type="password"
						/>
					</div>

					<div className="sui-box-settings-row">
						<AdminFooter />
					</div>
				</div>

				<div className="sui-box-footer">
					<div className="sui-actions-right">
						<Button
							variant="primary"
							className="button button-primary save-button-trigger"
							onClick={handleClick}
						>
							{__("Save", textDomain)}
						</Button>
					</div>
				</div>
			</div>
		</>
	);
};

export default WPMUDEV_Google_Auth;