format form login

episerver · Dec 12, 2023 · d91557c · d91557c
1 parent e32748a
commit d91557c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/samples/sample-react-app/src/App.css b/samples/sample-react-app/src/App.css
@@ -14,6 +14,11 @@
   text-align: center;
 }
 
+.main { display: flex; }
+.left { flex-grow: 1; }
+.right { flex-grow: 1; }
+.hide { display: none; }
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

diff --git a/samples/sample-react-app/src/App.tsx b/samples/sample-react-app/src/App.tsx
@@ -2,7 +2,7 @@ import './App.css';
 import { useFetch } from './hooks/useFetch';
 import { Form, FormLogin } from '@episerver/forms-react';
 import { extractParams } from './helpers/urlHelper';
-import { FormCache, FormConstants, IdentityInfo } from '@episerver/forms-sdk';
+import { FormCache, FormConstants, IdentityInfo, isNullOrEmpty } from '@episerver/forms-sdk';
 import { useState } from 'react';
 
 function App() {
@@ -25,20 +25,25 @@ function App() {
       {!loading && pageData && (
           <>
             <h1>{pageData.title}</h1>
-            <h2>Login</h2>
-            <FormLogin 
-              clientId='TestClient' 
-              authBaseUrl={process.env.REACT_APP_AUTH_BASEURL ?? ""} 
-              onAuthenticated={handleAuthen} />
-
-            {pageData.childrens.map((c: any) => (
-              <Form 
-                key={c.reference.key}
-                formKey={c.reference.key} 
-                language={language ?? "en"}
-                baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL ?? "/"}
-                identityInfo={identityInfo}/>
-            ))}
+            <div className='main'>
+              <div className='left'>
+                  {pageData.childrens.map((c: any) => (
+                    <Form 
+                      key={c.reference.key}
+                      formKey={c.reference.key} 
+                      language={language ?? "en"}
+                      baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL ?? "/"}
+                      identityInfo={identityInfo}/>
+                  ))}
+              </div>
+              <div className={`right ${!isNullOrEmpty(identityInfo.accessToken) ? "hide" : ""}`}>
+                <h2>Login</h2>
+                <FormLogin 
+                  clientId='TestClient' 
+                  authBaseUrl={process.env.REACT_APP_AUTH_BASEURL ?? ""} 
+                  onAuthenticated={handleAuthen} />
+              </div>
+            </div>
           </>
       )}
     </div>