refactor: move template rendering to own properties and functions

react/common/src/ElixFormsComponentAbstract.tsx

@@ -113,6 +113,10 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     return this.createCustomFormFields(formFieldFactory);
   }
 
+  protected renderExtraContent(): JSX.Element | null {
+    return null;
+  }
+
   public override render(): React.ReactElement<IElixFormsComponentProperties> {
     const {
       description,
@@ -120,23 +124,91 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
       environmentMessage,
       hasTeamsContext,
       userDisplayName,
-      additionalFieldsJson
+      additionalFieldsJson,
+      moduleTitle,
+      pageTitle,
+      pageDescription,
+      heroImageSrc
     } = this.props;
 
     const queryParams = new URLSearchParams(window.location.search);
 
     return (
-      <section>
-        {/* className={`${styles.elixFormsReact} ${hasTeamsContext ? styles.teams : ''}`} */}
-        <div>{environmentMessage}</div>
-        <div>{description}</div>
-        <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
-          {this.createMandatoryFormFields(queryParams)}
-          {this.createAdditionalFormFields()}
-          {this.renderCustomFormFields()}
-          <input type="submit" value="Submit"/>
-        </form>
-      </section>
+      <div className="container_12" id="pageBody">
+        <div className="grid_12">
+          <div id="userConsole" className="fe-behaviour">
+            <header>
+              <div className="neutral">
+                <div className="grid_12">
+                  <div className="console_header">
+                    <div className="leftDiv">
+                      <h1>elixForms</h1>
+                      <div className="logo"><a href="https://www.unipr.it/" title="Torna alla homepage dell'Università: di Parma"><img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università: di Parma" /></a>
+                      </div>
+                    </div>
+                    <div className="rightDiv">
+                      <div className="rightDivInside info padding_r">
+                        <div className="clear"></div>
+                      </div>
+                    </div>
+                    <div className="clear"></div>
+                  </div>
+                </div>
+                <div className="clear"></div>
+              </div>
+            </header>
+
+            <div className="grid_12 console_main">
+              <div className="inside">
+                {moduleTitle && (
+                  <div>
+                    <div className="fe-module-header-container">
+                      <h2>{moduleTitle}</h2>
+                    </div>
+                  </div>
+                )}
+                <div className="receipt">
+                  <div className="container">
+                    {pageTitle && <h1>{pageTitle}</h1>}
+                    {heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image" />}
+                    {pageDescription && <p>{pageDescription}</p>}
+                    
+                    {environmentMessage && <div>{environmentMessage}</div>}
+                    {description && <div>{description}</div>}
+                    
+                    <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
+                      {this.createMandatoryFormFields(queryParams)}
+                      {this.createAdditionalFormFields()}
+                      {this.renderCustomFormFields()}
+                      <input type="submit" value="Submit"/>
+                    </form>
+
+                    {this.renderExtraContent()}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="clear"></div>
+
+            <footer className="it-footer">
+              <div className="it-footer-main">
+                <div className="container">
+                  <div className="row clearfix">
+                    <div className="col-sm-12">
+                      <div className="footer-content">
+                        <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
+                        <div className="subfooter-bottom"><div>versione 1.24.0</div></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </footer>
+          </div>
+          <div className="clear"></div>
+        </div>
+      </div>
     );
   }
 

react/common/src/IElixFormsComponentProperties.ts

@@ -8,6 +8,12 @@ export interface IElixFormsComponentProperties {
   hasTeamsContext: boolean;
   userDisplayName: string;
   additionalFieldsJson?: string;
+  
+  // Layout Properties
+  moduleTitle?: string;
+  pageTitle?: string;
+  pageDescription?: string;
+  heroImageSrc?: string;
 }
 
 // Additional Fields JSON Schema