update

BankID · Apr 11, 2024 · f40b042 · f40b042
1 parent acec025
commit f40b042
Show file tree

Hide file tree

Showing 8 changed files with 201 additions and 299 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -30,5 +30,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "vite": "^5.0.8"
+  },
+  "overrides": {
+    "qrcode": {
+      "yargs": "~17.7.2"
+    }
   }
 }
diff --git a/client/src/components/Settings/Settings.jsx b/client/src/components/Settings/Settings.jsx
@@ -40,6 +40,7 @@ import { useLocalization } from '../../contexts/localization/Localization';
 import Button from '../Button/Button';
 import FoldableContent from '../FoldableContent/FoldableContent';
 import StartButton from '../StartButton/StartButton';
+import externalLinkIcon from '../../styling/images/system-external-link.svg';
 
 const Settings = () => {
   const { translate, activeLanguage } = useLocalization();
@@ -79,32 +80,38 @@ const Settings = () => {
 
   return (
     <>
-      <FoldableContent title={translate('identification')}>
-        <span
-          className='setting-title'
-        >
-          {translate('identification-text')}
-        </span>
-
+      <FoldableContent title={translate('identification-text')}>
         <textarea
           className='setting-textarea'
           value={identificationText}
           onChange={(e) => setIdentificationText(e.target.value)}
         />
 
-        <label
-          className='checkbox-label'
-          htmlFor='formattedIdentificationTextCheckbox'
-        >
-          <input
-            id='formattedIdentificationTextCheckbox'
-            type='checkbox'
-            className='checkbox'
-            checked={formattedIdentificationText}
-            onChange={(e) => setFormattedIdentificationText(e.target.checked)}
-          />
-          {translate('use-formatted-identification-text')}
-        </label>
+        <div className='sidebar-settings-formatting-container'>
+          <label
+            className='checkbox-label'
+            htmlFor='formattedIdentificationTextCheckbox'
+          >
+            <input
+              id='formattedIdentificationTextCheckbox'
+              type='checkbox'
+              className='checkbox'
+              checked={formattedIdentificationText}
+              onChange={(e) => setFormattedIdentificationText(e.target.checked)}
+            />
+            {translate('use-formatted-identification-text')}
+          </label>
+
+          <a
+            href={translate('formatting-guide-url')}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="sidebar-settings-link"
+          >
+            {translate('formatting-guide')}
+            <img src={externalLinkIcon} alt='' />
+          </a>
+        </div>
 
         <div className='button-row space-between'>
           <Button
@@ -124,32 +131,37 @@ const Settings = () => {
 
       </FoldableContent>
 
-      <FoldableContent title={translate('signing')}>
-        <span
-          className='setting-title'
-        >
-          {translate('signing-text')}
-        </span>
-
+      <FoldableContent title={translate('signing-text')}>
         <textarea
           className='setting-textarea'
           value={signText}
           onChange={(e) => setSignText(e.target.value)}
         />
 
-        <label
-          className='checkbox-label'
-          htmlFor='formattedSignTextCheckbox'
-        >
-          <input
-            id='formattedSignTextCheckbox'
-            type='checkbox'
-            className='checkbox'
-            checked={formattedSignText}
-            onChange={(e) => setFormattedSignText(e.target.checked)}
-          />
-          {translate('use-formatted-signing-text')}
-        </label>
+        <div className='sidebar-settings-formatting-container'>
+          <label
+            className='checkbox-label'
+            htmlFor='formattedSignTextCheckbox'
+          >
+            <input
+              id='formattedSignTextCheckbox'
+              type='checkbox'
+              className='checkbox'
+              checked={formattedSignText}
+              onChange={(e) => setFormattedSignText(e.target.checked)}
+              />
+            {translate('use-formatted-signing-text')}
+          </label>
+          <a
+            href={translate('formatting-guide-url')}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="sidebar-settings-link"
+          >
+            {translate('formatting-guide')}
+            <img src={externalLinkIcon} alt='' />
+          </a>
+        </div>
 
         <div className='button-row space-between'>
           <Button

diff --git a/client/src/contexts/localization/eng.json b/client/src/contexts/localization/eng.json
@@ -8,8 +8,8 @@
 
     "startpage-title": "Demo: How BankID works",
     "startpage-subtitle": "View how BankID works when it's been set up properly for optimal security and user experience. BankID can be used for identification and digital signatures. Select the flow you wish to see with the buttons below. In the demo you use your normal BankID.",
-    "startpage-test-identification": "Try Identification",
-    "startpage-test-signing": "Try Signing",
+    "startpage-test-identification": "Test identification",
+    "startpage-test-signing": "Test signing",
 
     "footer-about": "About BankID demo",
     "footer-cookies": "Cookies",
@@ -23,16 +23,19 @@
     "identification": "Identification",
     "signing": "Signing",
 
-    "identification-text": "Text for \"My purpose\"",
-    "signing-text": "Signature text",
+    "identification-text": "Text for identification",
+    "signing-text": "Text for signature",
 
     "use-formatted-identification-text": "Use formatted text",
     "use-formatted-signing-text": "Use formatted text",
 
+    "formatting-guide": "Format guide",
+    "formatting-guide-url": "https://www.bankid.com/en/utvecklare/guider/formatera-text",
+
     "start-test": "Start test",
 
-    "default-identify-text": "# Identification in BankID Demo\n\nI identify myself with BankID Demo",
-    "default-sign-text": "# Signing with BankID Demo\n\nI sign with BankId Demo",
+    "default-identify-text": "# Identification in BankID demo\n\nCompanies using BankID in their services can add a text describing the intent with an identification. The text always follows the fixed heading “My intent:”",
+    "default-sign-text": "# Signature in BankID demo\n\nCompanies using BankID in their services can add a text describing the intent with a signature.",
 
     "identification-text-validation-error": "You can't have an empty text field when formatted text is activated.",
     "sign-text-validation-error": "You can't have an empty text field for signing.",
@@ -51,10 +54,11 @@
     "close": "Close",
     "try-again": "Try again",
     "cancel": "Cancel",
+    "refresh": "Reload",
 
     "help-text": "Here you can add your own texts and change settings.",
 
-    "test-sign": "Try signing",
+    "test-sign": "Test signing",
 
     "identification-success": "Success!",
     "sign-success": "Success!",
@@ -66,10 +70,10 @@
 
     "about-title": "About BankID Demo",
     "about-subtitle": "In this demo you can see how BankID works when it's properly integrated and provides a secure and good user experience. BankID can be used both for identification and digital signatures.",
-    "about-paragraphs-title-1": "Try identification",
-    "about-paragraphs-body-1": "When you try identification, you see how the user experiences the flow. You can choose to enter a descriptive text for the purpose of the identification. It increases clarity for your customers and makes it easier to discover if something is not right. The text automatically starts with “My intention:”. In the demo, you can try inserting and formatting your own text and see how it would look.",
-    "about-paragraphs-title-2": "Try signature",
-    "about-paragraphs-body-2": "Digital signatures with BankID are just as valid as physical ones. Try the flow from a user perspective. You can choose to enter text that explains what the customer is signing. It increases clarity and makes it easier to discover if something is not right. In the demo, you can try inserting and formatting the test and see how it would look.",
+    "about-paragraphs-title-1": "Test identification",
+    "about-paragraphs-body-1": "When you test identification, you see how the user experiences the flow. You can choose to enter a descriptive text for the purpose of the identification. It increases clarity for your customers and makes it easier to discover if something is not right. The text automatically starts with “My intention:”. In the demo, you can test inserting and formatting your own text and see how it would look.",
+    "about-paragraphs-title-2": "Test signature",
+    "about-paragraphs-body-2": "Digital signatures with BankID are just as valid as physical ones. Test the flow from a user perspective. You can choose to enter text that explains what the customer is signing. It increases clarity and makes it easier to discover if something is not right. In the demo, you can test inserting and formatting the test and see how it would look.",
     "about-paragraphs-title-3": "The code is available on GitHub",
     "about-paragraphs-body-3": "To make it as easy as possible for you to get a good and secure integration of BankID into your services, you, your developers or the integrator you work with can download the code directly from GitHub.",
 
@@ -99,6 +103,8 @@
     "hintcode-alreadyInProgress": "An identification or signing for this personal number is already started. Please try again.",
     "hintcode-requestTimeout": "Something went wrong. Please try again.",
     "hintcode-maintenance": "Something went wrong. Please try again.",
-    "hintcode-internalError": "Something went wrong. Please try again."
+    "hintcode-internalError": "Something went wrong. Please try again.",
+
+    "error-message-invalidCsrfToken": "Your session has expired. Please reload the page."
 
 }
diff --git a/client/src/contexts/localization/swe.json b/client/src/contexts/localization/swe.json
@@ -8,8 +8,8 @@
 
     "startpage-title": "Demo: Så fungerar BankID",
     "startpage-subtitle": "Se hur BankID fungerar när det satts upp på rätt sätt för högsta säkerhet och bästa kundupplevelse. BankID kan användas för identifiering och digital underskrift. Välj vilket flöde du vill se med knapparna nedan. I demon använder du ditt vanliga BankID.",
-    "startpage-test-identification": "Prova identifiering",
-    "startpage-test-signing": "Prova underskrift",
+    "startpage-test-identification": "Testa identifiering",
+    "startpage-test-signing": "Testa underskrift",
 
     "footer-about": "Om BankID demo",
     "footer-cookies": "Cookies",
@@ -23,16 +23,19 @@
     "identification": "Identifiering",
     "signing": "Underskrift",
 
-    "identification-text": "Text till \"Min avsikt\"",
+    "identification-text": "Text för identifiering",
     "signing-text": "Text för underskrift",
 
     "use-formatted-identification-text": "Använd formaterad text",
     "use-formatted-signing-text": "Använd formaterad text",
 
+    "formatting-guide": "Formatguide",
+    "formatting-guide-url": "https://www.bankid.com/utvecklare/guider/formatera-text",
+
     "start-test": "Starta testet",
 
-    "default-identify-text": "# Inloggning i BankID Demo\n\nDu som använder BankID i dina tjänster kan välja om du vill lägga in text och i vilka situationer.\n\nTydliga texter ger dina kunder en bättre överblick samt möjlighet att se om något inte stämmer, och då kunna undvika bedrägeriförsök.",
-    "default-sign-text": "# Jag skriver under hos BankID Demo\n\nI en underskrift ingår man avtal eller genomför förändringar och den är likvärdig en underskrift på ett fysiskt papper.",
+    "default-identify-text": "# Identifiering i BankID demo\n\nFöretag som använder BankID i sina tjänster kan lägga in text som beskriver avsikten med en identifiering. Texten följer alltid efter den fasta rubriken ”Min avsikt:”",
+    "default-sign-text": "# Underskrift i BankID demo\n\nFöretag som använder BankID i sina tjänster kan lägga in text som beskriver avsikten med en underskrift.",
 
     "identification-text-validation-error": "Du kan inte ha ett tomt textfält när formaterad text är aktiverat.",
     "sign-text-validation-error": "Du kan inte ha ett tomt textfält för underskrift.",
@@ -51,10 +54,11 @@
     "close": "Stäng",
     "try-again": "Försök igen",
     "cancel": "Avbryt",
+    "refresh": "Ladda om",
 
     "help-text": "Här kan du skriva in egna texter och ändra inställningar.",
 
-    "test-sign": "Prova underskrift",
+    "test-sign": "Testa underskrift",
 
     "identification-success": "Identifieringen lyckades!",
     "sign-success": "Underskriften lyckades!",
@@ -66,10 +70,10 @@
 
     "about-title": "Om BankID Demo",
     "about-subtitle": "I den här demon kan du se hur BankID fungerar när det integrerats rätt. Då får du en säker och bra användarupplevelse. BankID kan användas både för identifiering och för digitala underskrifter.",
-    "about-paragraphs-title-1": "Prova identifiering",
-    "about-paragraphs-body-1": "När du provar identifiering ser du hur användaren upplever flödet. Du kan välja att  skriva in en beskrivande text för avsikten med identifieringen. Det ökar tydligheten för dina kunder och gör det enklare att upptäcka om något inte stämmer. Texten börjar automatiskt med “Min avsikt:”. I demon kan du prova att lägga in och formatera din egen text och se hur det skulle se ut.",
-    "about-paragraphs-title-2": "Prova underskrift",
-    "about-paragraphs-body-2": "Digitala underskrifter med BankID är lika giltiga som fysiska. Prova flödet ur ett användarperspektiv. Du kan välja att skriva in text som förklarar vad personen skriver under. Det ökar tydligheten och gör det enklare att upptäcka om något inte stämmer. I demon kan du prova att lägga in och formatera din egen text och se hur det skulle se ut.",
+    "about-paragraphs-title-1": "Testa identifiering",
+    "about-paragraphs-body-1": "När du testar identifiering ser du hur användaren upplever flödet. Du kan välja att skriva in en beskrivande text för avsikten med identifieringen. Det ökar tydligheten för dina kunder och gör det enklare att upptäcka om något inte stämmer. Texten börjar automatiskt med “Min avsikt:”. I demon kan du testa att lägga in och formatera din egen text och se hur det skulle se ut.",
+    "about-paragraphs-title-2": "Testa underskrift",
+    "about-paragraphs-body-2": "Digitala underskrifter med BankID är lika giltiga som fysiska. Testa flödet ur ett användarperspektiv. Du kan välja att skriva in text som förklarar vad personen skriver under. Det ökar tydligheten och gör det enklare att upptäcka om något inte stämmer. I demon kan du testa att lägga in och formatera din egen text och se hur det skulle se ut.",
     "about-paragraphs-title-3": "Koden finns på GitHub",
     "about-paragraphs-body-3": "För att det ska bli så enkelt som möjligt för dig att få en bra och säker integration av BankID i dina tjänster kan du, dina utvecklare eller den integratör du jobbar med hämta koden direkt från GitHub.",
 
@@ -99,6 +103,8 @@
     "hintcode-alreadyInProgress": "En identifiering eller underskrift för det här personnumret är redan påbörjad. Försök igen.",
     "hintcode-requestTimeout": "Något gick fel. Försök igen.",
     "hintcode-maintenance": "Något gick fel. Försök igen.",
-    "hintcode-internalError": "Något gick fel. Försök igen."
+    "hintcode-internalError": "Något gick fel. Försök igen.",
+
+    "error-message-invalidCsrfToken": "Din session har löpt ut. Ladda om sidan."
 
 }
diff --git a/client/src/flow-utils.js b/client/src/flow-utils.js
@@ -129,11 +129,17 @@ const init = ({
   onUpdate,
 }) => {
   // If anything bad happens, we navigate away to an error page.
-  const handleError = () => {
+  const handleError = (err) => {
+    let errorType;
+    if (err.response.status === 403) {
+      errorType = 'invalidCsrfToken';
+    }
+
     navigate(URLS.resultFailed, {
       state: {
         testingType,
         flowType,
+        errorType,
       },
     });
   };

diff --git a/client/src/pages/ResultFailed/ResultFailed.jsx b/client/src/pages/ResultFailed/ResultFailed.jsx
@@ -44,7 +44,7 @@ const ResultFailed = () => {
   const { translate } = useLocalization();
   const location = useLocation();
   const testingType = (location.state || {}).testingType || 'identify';
-  const { statusHintCode, flowType } = location.state || {};
+  const { statusHintCode, flowType, errorType } = location.state || {};
 
   return (
     <div className='page-container'>
@@ -61,15 +61,28 @@ const ResultFailed = () => {
           </h3>
 
           <p className='guide-description'>
-            { translate(`hintcode-${flowType}-${statusHintCode || 'unknown'}`, `hintcode-${statusHintCode || 'unknown'}`) }
+            {translate(
+              `error-message-${errorType}`,
+              `hintcode-${flowType}-${statusHintCode || 'unknown'}`,
+              `hintcode-${statusHintCode || 'unknown'}`
+            )}
           </p>
 
           <div className='flex-col-center'>
-            <StartButton
-              testingType={testingType}
-              text={translate('try-again')}
-              buttonType='secondary'
-            />
+            {errorType === 'invalidCsrfToken' ? (
+              <a
+                href={URLS.start}
+                className='button secondary'
+              >
+                {translate('refresh')}
+              </a>
+            ) : (
+              <StartButton
+                testingType={testingType}
+                text={translate('try-again')}
+                buttonType='secondary'
+              />
+            )}
             <Link
               to={URLS.start}
               className='button none'

diff --git a/client/src/styling/index.css b/client/src/styling/index.css
@@ -332,6 +332,23 @@ h6 {
   cursor: pointer;
 }
 
+.sidebar-settings-formatting-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  column-gap: 16px;
+  row-gap: 8px;
+}
+
+.sidebar-settings-link {
+  color: white;
+}
+.sidebar-settings-link img {
+  height: 16px;
+  margin-left: 6px;
+}
+
 .sidebar-close-button {
   width: 20px;
   height: 20px;
@@ -471,10 +488,6 @@ h6 {
   flex-direction: column;
 }
 
-.setting-title {
-  font-weight: bold;
-}
-
 .setting-textarea {
   font-family: Inter, sans-serif;
   padding: 8px;