TASK: Use own component for login flash messages and style them

Author: lorenzulrich

Configuration/Settings.yaml

@@ -18,6 +18,10 @@ Neos:
           'Sandstorm.NeosTwoFactorAuthentication':
             - '*'
 
+      backendLoginForm:
+        stylesheets:
+          'Sandstorm.NeosTwoFactorAuthentication:AdditionalStyles': 'resource://Sandstorm.NeosTwoFactorAuthentication/Public/Styles/Login.css'
+
   Flow:
     http:
       middlewares:

Resources/Private/Fusion/Presentation/Components/LoginFlashMessages.fusion

@@ -0,0 +1,9 @@
+prototype(Sandstorm.NeosTwoFactorAuthentication:Component.LoginFlashMessages) < prototype(Neos.Fusion:Component) {
+    flashMessages = ${[]}
+
+    renderer = afx`
+        <Neos.Fusion:Loop items={props.flashMessages} itemName="flashMessage">
+            <div class={'neos-two-factor-flashmessage neos-two-factor-flashmessage-' + String.toLowerCase(flashMessage.severity)}>{flashMessage}</div>
+        </Neos.Fusion:Loop>
+    `
+}

Resources/Private/Fusion/Presentation/Pages/SetupSecondFactorPage.fusion

@@ -75,10 +75,9 @@ prototype(Sandstorm.NeosTwoFactorAuthentication:Page.SetupSecondFactorPage) < pr
                                 </h1>
 
                                 <div class="neos-login-body neos">
-                                    <Sandstorm.NeosTwoFactorAuthentication:Component.FlashMessages flashMessages={props.flashMessages} />
+                                    <Sandstorm.NeosTwoFactorAuthentication:Component.LoginFlashMessages flashMessages={props.flashMessages} />
                                     <Neos.Fusion.Form:Form form.target.action="setupSecondFactor">
                                         <Neos.Fusion.Form:Hidden field.name="secret" field.value={secret}/>
-
                                         <div class="neos-control-group">
                                             <img src={qrCode} style="width: 100%; max-width: 400px"/>
                                         </div>

Resources/Public/Styles/Login.css

@@ -0,0 +1,16 @@
+.neos-two-factor-flashmessage {
+  font-size: 13px;
+  line-height: 1.4;
+  padding: 8px;
+  color: #fff;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.neos-two-factor-flashmessage-warning {
+  background-color: #F89406;
+}
+
+.neos-two-factor-flashmessage-info {
+  background-color: #5bc0de;
+}