From eaf2f5a7ecb091ffdc49f40ef8df9bc4ea274d80 Mon Sep 17 00:00:00 2001
From: Okke Harsta <oharsta@zilverline.com>
Date: Tue, 21 Jan 2025 21:02:53 +0100
Subject: [PATCH] Mobile service desk

---
 servicedesk-gui/src/locale/en.js           |  1 +
 servicedesk-gui/src/locale/nl.js           |  1 +
 servicedesk-gui/src/tabs/Confirmation.scss |  9 +++++
 servicedesk-gui/src/tabs/Control.jsx       | 42 +++++++++++-----------
 servicedesk-gui/src/tabs/Control.scss      |  2 +-
 5 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/servicedesk-gui/src/locale/en.js b/servicedesk-gui/src/locale/en.js
index 1b8d45cc..221902e4 100644
--- a/servicedesk-gui/src/locale/en.js
+++ b/servicedesk-gui/src/locale/en.js
@@ -57,6 +57,7 @@ const en = {
             dayOfBirth: "The date of birth in the document: <span>{{dayOfBirth}}</span> ",
         },
         invalidDate: "The day of birth can not be recognized, please select the correct date",
+        validDate: "The day of birth is corrected",
         idDocument: "Fill in the <span>last 6 characters</span> of the ID document",
     },
     confirmation: {
diff --git a/servicedesk-gui/src/locale/nl.js b/servicedesk-gui/src/locale/nl.js
index 67f0872a..c925efdb 100644
--- a/servicedesk-gui/src/locale/nl.js
+++ b/servicedesk-gui/src/locale/nl.js
@@ -57,6 +57,7 @@ const nl = {
             dayOfBirth: "De geboortedatum in het document: <span>{{dayOfBirth}}</span>",
         },
         invalidDate: "De geboortedatum wordt niet herkent, selecteer de juiste datum",
+        validDate: "De geboortedatum is gecorrigeerd",
         idDocument: "Vul de <span>laatste 6 karakters</span> van het document in",
     },
     confirmation: {
diff --git a/servicedesk-gui/src/tabs/Confirmation.scss b/servicedesk-gui/src/tabs/Confirmation.scss
index def4da26..64117d03 100644
--- a/servicedesk-gui/src/tabs/Confirmation.scss
+++ b/servicedesk-gui/src/tabs/Confirmation.scss
@@ -18,18 +18,27 @@ div.confirmation {
         width: 100%;
         margin: 20px auto 30px auto;
     }
+
     .img-container {
         display: flex;
         padding: 20px;
+
         img {
             margin: auto;
             width: 460px;
             height: auto;
+
+            @media (max-width: $verification-width) {
+                width: 310px;
+            }
+
         }
     }
+
     .button-container {
         display: flex;
         padding: 20px;
+
         button {
             margin: auto;
             max-width: 360px;
diff --git a/servicedesk-gui/src/tabs/Control.jsx b/servicedesk-gui/src/tabs/Control.jsx
index 55345601..919e9e55 100644
--- a/servicedesk-gui/src/tabs/Control.jsx
+++ b/servicedesk-gui/src/tabs/Control.jsx
@@ -97,7 +97,7 @@ const Control = ({restart, proceed}) => {
                     <Switch value={confirmations[index]} onChange={val => confirm(index, val)}/>
                 </div>)}
                 {!validDayOfBirth && <div className={`validation-item ${birthDay === null ? "invalid" : ""}`}>
-                    <p>{I18n.t("control.invalidDate")}</p>
+                    <p>{I18n.t(`control.${birthDay === null ? "invalidDate" : "validDate"}`)}</p>
                     <DatePicker
                         ref={inputRef}
                         preventOpenOnFocus
@@ -109,30 +109,30 @@ const Control = ({restart, proceed}) => {
                         dropdownMode="select"
                         weekLabel="Week"
                         todayButton={null}/>
-                    <div className={"calendar"} onClick={toggle}>
+                    <div className="calendar" onClick={toggle}>
                         <img src={calendarIcon} alt="calendar"/>
                     </div>
                 </div>}
-                    <div className="validation-item column">
-                        <p className="inner-html"
-                           dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(I18n.t("control.idDocument"))}}/>
-                        <div className="code-validation">
-                            <CodeValidation verify={val => setDocumentId(val)}
-                                            size={6}
-                                            focusFirst={false}
-                                            validate={() => true}
-                            />
-                            <Button txt={I18n.t("verification.proceed")}
-                                    disabled={isEmpty(documentId) || confirmations.some(val => !val) || loading || !isEmpty(error)
-                            || (!validDayOfBirth && isEmpty(birthDay))}
-                                    onClick={() => doConvertUserControlCode()}
-                            />
-                        </div>
+                <div className="validation-item column">
+                    <p className="inner-html"
+                       dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(I18n.t("control.idDocument"))}}/>
+                    <div className="code-validation">
+                        <CodeValidation verify={val => setDocumentId(val)}
+                                        size={6}
+                                        focusFirst={false}
+                                        validate={() => true}
+                        />
+                        <Button txt={I18n.t("verification.proceed")}
+                                disabled={isEmpty(documentId) || confirmations.some(val => !val) || loading || !isEmpty(error)
+                                    || (!validDayOfBirth && isEmpty(birthDay))}
+                                onClick={() => doConvertUserControlCode()}
+                        />
                     </div>
                 </div>
+            </div>
 
-                    </div>
-                    )
-                };
+        </div>
+    )
+};
 
-                export default Control;
\ No newline at end of file
+export default Control;
\ No newline at end of file
diff --git a/servicedesk-gui/src/tabs/Control.scss b/servicedesk-gui/src/tabs/Control.scss
index 48254e80..ffe1e6cd 100644
--- a/servicedesk-gui/src/tabs/Control.scss
+++ b/servicedesk-gui/src/tabs/Control.scss
@@ -88,7 +88,7 @@ div.control {
     }
 
     .calendar {
-        margin-right: 12px;
+        margin: 0 12px 0 auto;
         img {
             width: 32px;
             height: auto;