feat(account-linking): better error handling

src/backend/routes/views/account/get/linkGog.js

@@ -17,7 +17,7 @@ exports = module.exports = function (req, res) {
 
             flash.class = 'alert-danger'
             flash.messages = errors.map((error) => ({ msg: error.detail }))
-            flash.type = 'Error'
+            flash.type = 'Error!'
         }
     } else {
         flash = null

src/backend/routes/views/account/get/linkSteam.js

@@ -14,7 +14,7 @@ exports = module.exports = function (req, res) {
 
             flash.class = 'alert-danger'
             flash.messages = errors.map((error) => ({ msg: error.detail }))
-            flash.type = 'Error'
+            flash.type = 'Error!'
         } else {
             flash.class = 'alert-success'
             flash.messages = [

src/backend/templates/views/account/linkGog.pug

@@ -6,6 +6,7 @@ block content
     .playMain
         .playInnerGrid
             h1 How to link FAF Account to GOG
+            if flash == null || flash.type !== 'Error!'
                 p.highlightText Shouldn't take more than 1-2 minutes.
             .playContainer
                 h2 Your GOG account must be public to link
@@ -40,9 +41,15 @@ block content
                     label Make sure the flash message below states you are connected.
 
                     p Flash Message:
-                    +flash-messages(flash)
+                    span#flash-msg-container(
+                        data-flash-type=flash ? flash.type : ''
+                    )
+                        +flash-messages(flash)
                 h1 And you are done with GOG linking forever!
                     p Now if you want, you can set your privacy settings back to private and your profile's about you to normal.
                 h2 Why do I need to link my Steam/GOG account to FAF?
                     p FAF as an organization doesn't own the copyright or trademark to SC:FA (Square Enix does). <br> Therefore, we need to verify you own a copy of SC:FA to prevent piracy.
                     p Linking your GOG account to FAF doesn't provide us with any information or powers over your account. <br> Only the fact that you own Supreme Commander: Forged Alliance. <br> Which is why we need you to set your Game Details to public when linking your account.
+
+block js
+    script(src=webpackAssetJS('scroll-to-flash'))

src/backend/templates/views/account/linkSteam.pug

@@ -5,6 +5,7 @@ block content
     .playMain
         .playInnerGrid
             h1 How to link FAF Account to Steam
+            if flash == null || flash.type !== 'Error!'
                 p.highlightText Shouldn't take more than 1-2 minutes.
             .playContainer
                 h2 Your Steam account must be public to link
@@ -19,7 +20,10 @@ block content
                     img(src='/images/steamGOG/steamLogin.jpg')
                     label Make sure the flash message below states you are connected.
                     label Flash Message:
-                    +flash-messages(flash)
+                    span#flash-msg-container(
+                        data-flash-type=flash ? flash.type : ''
+                    )
+                        +flash-messages(flash)
                     label If you encounter issues linking then you may also need to set the game to be public
                     label Login to steam in your browser -> Games -> Supreme commander -> "Unmark as private"
                     img(src='/images/steamGOG/steamBrowserGames.jpg')
@@ -30,3 +34,6 @@ block content
                 h2 Why do I need to link my Steam/GOG account to FAF?
                     p FAF as an organization doesn't own the copyright or trademark to SC:FA (Square Enix does). <br> Therefore, we need to verify you own a copy of SC:FA to prevent piracy.
                     p Linking your steam account to FAF doesn't provide us with any information or powers over your account. <br> Only the fact that you own Supreme Commander: Forged Alliance. <br> Which is why we need you to set your Game Details to public when linking your account.
+
+block js
+    script(src=webpackAssetJS('scroll-to-flash'))

src/frontend/js/entrypoint/scroll-to-flash.js

@@ -0,0 +1,14 @@
+const scrollAndHighlight = () => {
+    const element = document.getElementById('flash-msg-container')
+    const flashType = element?.getAttribute('data-flash-type')
+    if (element && flashType === 'Error!') {
+        const originalColor = element.style.backgroundColor
+        element.scrollIntoView({ behavior: 'instant', block: 'center' })
+        element.style.backgroundColor = '#ffc107'
+        setTimeout(() => {
+            element.style.backgroundColor = originalColor
+        }, 1700)
+    }
+}
+
+window.onload = () => scrollAndHighlight()

webpack.config.js

@@ -25,6 +25,7 @@ module.exports = {
         play: ['./src/frontend/js/entrypoint/play.js'],
         report: ['./src/frontend/js/entrypoint/report.js'],
         'clan-invite': ['./src/frontend/js/entrypoint/clan-invite.js'],
+        'scroll-to-flash': ['./src/frontend/js/entrypoint/scroll-to-flash.js'],
     },
     output: {
         filename: '[name].[contenthash].js',