Mod. React. Continue switch auth block. (#640)

* Mod. React. Continue switch auth block.

* Mod. React. Switch auth block.

* fix eslint

* fix psalm

* upd

* fix hints

* upd hint again

* Fix. Settings. Fix 2fa option switch.

* ref by review

* ref by review

* fix typo

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Upd. Settings. Improve modal layout.

* reminify

* fix eslint

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: svfcode

css/spbc-settings.min.css

@@ -39,12 +39,32 @@
 	100%  {	clip-path: polygon(50% 0%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 50%, 50% 50%);	}
 }
 
-#confirmation-code--resend .circle{
+#confirmation-code--resend .circle,
+.spbc-2fa-confirmation-resend .circle{
 	margin-left: 5px;
 	display: inline-block;
 	vertical-align: text-bottom;
 }
 
+/** 2FA confirmation modal: input + Resend on one row (narrow dialog vs .regular-text 25em) */
+.spbc-2fa-confirmation-row{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 10px;
+	margin: 1em 0;
+}
+.spbc-2fa-confirmation-row .spbc-2fa-confirmation-input{
+	flex: 1 1 auto;
+	min-width: 0;
+	width: auto !important;
+	max-width: 100%;
+	box-sizing: border-box;
+}
+.spbc-2fa-confirmation-row .spbc-2fa-confirmation-resend{
+	flex-shrink: 0;
+}
+
 .spbc---hidden{display: none;}
 .spbc---gray{color: gray;}
 .spbc---red{color: red;}

css/src/spbc-settings.css

@@ -1,7 +1,6 @@
 import React, {createContext} from 'react';
 import Header from '../pageElements/Header/Header';
 import ServiceButtons from '../pageElements/ServiceButtons/ServiceButtons';
-import HiddenElements from '../pageElements/HiddenElements/HiddenElements';
 import Tabs from '../pageElements/Tabs/Tabs';
 
 export const DataRootContext = createContext(null);
@@ -27,7 +26,6 @@ export default function App({dataRoot, dataTabs}) {
             <DataTabsContext.Provider value={dataTabs}>
                 <Header data={dataRoot} />
                 <ServiceButtons />
-                <HiddenElements data={dataRoot} />
                 <Tabs data={dataTabs} />
             </DataTabsContext.Provider>
         </DataRootContext.Provider>

inc/spbc-settings.php

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useState, useEffect} from 'react';
 
 /**
  * InputRadioGroup component
@@ -24,6 +24,10 @@ export default function InputRadioGroup({
 }) {
     const [selectedValue, setSelectedValue] = useState(String(initialValue ?? ''));
 
+    useEffect(() => {
+        setSelectedValue(String(initialValue ?? ''));
+    }, [initialValue]);
+
     const handleChange = (event) => {
         const newValue = event.target.value;
         setSelectedValue(newValue);

js/public/spbct-react-bundle.js

@@ -9,18 +9,25 @@ export default function Select({
     className = '',
     disabled = false,
     placeholder = '',
+    multiple = false,
     ...props
 }) {
-    const [selectedValue, setSelectedValue] = useState(initialValue || '');
+    const [selectedValue, setSelectedValue] = useState(
+        initialValue !== undefined ?
+            initialValue :
+            (multiple ? [] : ''),
+    );
 
     useEffect(() => {
         if (initialValue !== undefined) {
             setSelectedValue(initialValue);
         }
-    }, [initialValue]);
+    }, [initialValue, multiple]);
 
     const handleChange = (event) => {
-        const newValue = event.target.value;
+        const newValue = multiple ?
+            Array.from(event.target.selectedOptions, (option) => option.value) :
+            event.target.value;
         setSelectedValue(newValue);
 
         // Call `onChange` from props, if exists
@@ -37,6 +44,7 @@ export default function Select({
             onChange={handleChange}
             className={className}
             disabled={disabled}
+            multiple={multiple}
             {...props}
         >
             {placeholder && (

js/spbc-settings.min.js

@@ -3,7 +3,18 @@ import SettingsGroup from './SettingsGroup';
 const {__} = wp.i18n;
 
 export default function Settings(props) {
-    const {settingsSlug, settings, keyIsOk} = props;
+    const {
+        settingsSlug,
+        settings,
+        keyIsOk,
+        wpUserRolesOptions,
+        verificationEmail,
+        authLoginPageUrl,
+        techSupportUrlPrefix,
+        loginRenameNotifyAdminEmail,
+        canActivatePlugins,
+        shuffleSaltsUnlocked,
+    } = props;
 
     const settingKeys = Object.keys(settings || {});
 
@@ -24,6 +35,13 @@ export default function Settings(props) {
                     settingsSlug={settingsSlug}
                     settings={settings[sectionGroupId]}
                     keyIsOk={keyIsOk}
+                    wpUserRolesOptions={wpUserRolesOptions}
+                    verificationEmail={verificationEmail}
+                    authLoginPageUrl={authLoginPageUrl}
+                    techSupportUrlPrefix={techSupportUrlPrefix}
+                    loginRenameNotifyAdminEmail={loginRenameNotifyAdminEmail}
+                    canActivatePlugins={canActivatePlugins}
+                    shuffleSaltsUnlocked={shuffleSaltsUnlocked}
                 />;
             }
             if (
@@ -37,6 +55,13 @@ export default function Settings(props) {
                     settingsSlug={settingsSlug}
                     settings={settings[sectionGroupId]}
                     keyIsOk={keyIsOk}
+                    wpUserRolesOptions={wpUserRolesOptions}
+                    verificationEmail={verificationEmail}
+                    authLoginPageUrl={authLoginPageUrl}
+                    techSupportUrlPrefix={techSupportUrlPrefix}
+                    loginRenameNotifyAdminEmail={loginRenameNotifyAdminEmail}
+                    canActivatePlugins={canActivatePlugins}
+                    shuffleSaltsUnlocked={shuffleSaltsUnlocked}
                 />;
             }
             return null;