From f1d79a17f615a9cd34b15dd7b96764e4bb99486a Mon Sep 17 00:00:00 2001
From: guicamest <guicamest@gmail.com>
Date: Tue, 15 Aug 2023 17:32:18 +0200
Subject: Allow setting additional cards to print (#275)

* Add setting for additional cards to print

* Render additional cards to print

* Do not render additional cards if amount is less than 1

* Render additional cards when printing

* Improve layout for portrait printing

* Render eap and identity textfields conditionally so that they dont use space

* Use all width in print-area

* Change additionalCards setting to Input and react to changes

* Allow hiding tip (legend) on card

* Print only full cards

* Move print-area - not-displayed - to the bottom of the page

* Set default ssid back to empty, additional cards to 0

* Lower marginBottom of password field to 5 instead of 24 (default)

* Use conditional rendering instead of class to hide password

* Set marginBottom to QR code only on portrait mode

* Set row-gap to 0 to allow up to 6 cards to fit in portrait mode in A4

* Move hideTip setting right after hiddenSSID
---
 src/components/WifiCard.js | 181 ++++++++++++++++++++++-----------------------
 1 file changed, 89 insertions(+), 92 deletions(-)

(limited to 'src/components/WifiCard.js')

diff --git a/src/components/WifiCard.js b/src/components/WifiCard.js
index 6e91be0..70e1189 100644
--- a/src/components/WifiCard.js
+++ b/src/components/WifiCard.js
@@ -72,84 +72,83 @@ export const WifiCard = (props) => {
   };
 
   return (
-    <Pane>
-      <Card
-        id="print-area"
-        elevation={3}
-        style={{ maxWidth: props.settings.portrait ? portraitWidth() : '100%' }}
+    <Card
+      className="card-print"
+      elevation={3}
+      style={{ maxWidth: props.settings.portrait ? portraitWidth() : '100%' }}
+    >
+      <Pane display="flex" paddingBottom={12}>
+        <img alt="icon" src={logo} width="24" height="24" />
+        <Heading
+          size={700}
+          paddingRight={10}
+          paddingLeft={10}
+          textAlign={props.settings.portrait ? 'center' : 'unset'}
+        >
+          {t('wifi.login')}
+        </Heading>
+      </Pane>
+
+      <Pane
+        className="details"
+        style={{ flexDirection: props.settings.portrait ? 'column' : 'row' }}
       >
-        <Pane display="flex" paddingBottom={12}>
-          <img alt="icon" src={logo} width="24" height="24" />
-          <Heading
-            size={700}
-            paddingRight={10}
-            paddingLeft={10}
-            textAlign={props.settings.portrait ? 'center' : 'unset'}
-          >
-            {t('wifi.login')}
-          </Heading>
-        </Pane>
+        <QRCode
+          className="qrcode"
+          style={{ marginBottom: props.settings.portrait ? '1em' : '0' }}
+          value={qrvalue}
+          size={150}
+        />
 
-        <Pane
-          className="details"
-          style={{ flexDirection: props.settings.portrait ? 'column' : 'row' }}
-        >
-          <QRCode
-            className="qrcode"
-            style={{ padding: '1em' }}
-            value={qrvalue}
-            size={150}
+        <Pane width={'100%'}>
+          <TextareaField
+            id="ssid"
+            type="text"
+            marginBottom={5}
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="none"
+            spellCheck={false}
+            maxLength="32"
+            label={t('wifi.name')}
+            placeholder={t('wifi.name.placeholder')}
+            value={props.settings.ssid}
+            onChange={(e) => props.onSSIDChange(e.target.value)}
+            isInvalid={!!props.ssidError}
+            validationMessage={!!props.ssidError && props.ssidError}
           />
+          {props.settings.encryptionMode === 'WPA2-EAP' && (
+            <>
+              <TextareaField
+                id="eapmethod"
+                type="text"
+                marginBottom={5}
+                readOnly={true}
+                spellCheck={false}
+                label={eapMethodFieldLabel()}
+                value={props.settings.eapMethod}
+              />
 
-          <Pane width={'100%'}>
-            <TextareaField
-              id="ssid"
-              type="text"
-              marginBottom={5}
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="none"
-              spellCheck={false}
-              maxLength="32"
-              label={t('wifi.name')}
-              placeholder={t('wifi.name.placeholder')}
-              value={props.settings.ssid}
-              onChange={(e) => props.onSSIDChange(e.target.value)}
-              isInvalid={!!props.ssidError}
-              validationMessage={!!props.ssidError && props.ssidError}
-            />
-            <TextareaField
-              id="eapmethod"
-              type="text"
-              marginBottom={5}
-              readOnly={true}
-              spellCheck={false}
-              className={`
-                ${props.settings.encryptionMode !== 'WPA2-EAP' && 'hidden'}
-              `}
-              label={eapMethodFieldLabel()}
-              value={props.settings.eapMethod}
-            />
-            <TextareaField
-              id="identity"
-              type="text"
-              marginBottom={5}
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="none"
-              spellCheck={false}
-              className={`
-                ${props.settings.encryptionMode !== 'WPA2-EAP' && 'hidden'}
-              `}
-              label={eapIdentityFieldLabel()}
-              placeholder={t('wifi.identity.placeholder')}
-              value={props.settings.eapIdentity}
-              onChange={(e) => props.onEapIdentityChange(e.target.value)}
-              isInvalid={!!props.eapIdentityError}
-              validationMessage={
-                !!props.eapIdentityError && props.eapIdentityError
-              }
-            />
+              <TextareaField
+                id="identity"
+                type="text"
+                marginBottom={5}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="none"
+                spellCheck={false}
+                label={eapIdentityFieldLabel()}
+                placeholder={t('wifi.identity.placeholder')}
+                value={props.settings.eapIdentity}
+                onChange={(e) => props.onEapIdentityChange(e.target.value)}
+                isInvalid={!!props.eapIdentityError}
+                validationMessage={
+                  !!props.eapIdentityError && props.eapIdentityError
+                }
+              />
+            </>
+          )}
+          {!(props.settings.hidePassword || !props.settings.encryptionMode) && (
             <TextareaField
               id="password"
               type="text"
@@ -158,18 +157,12 @@ export const WifiCard = (props) => {
               autoCorrect="off"
               autoCapitalize="none"
               spellCheck={false}
-              className={`
-                ${
-                  (props.settings.hidePassword ||
-                    !props.settings.encryptionMode) &&
-                  'hidden'
-                }
-              `}
               height={
                 props.settings.portrait && props.settings.password.length > 40
                   ? '5em'
                   : 'auto'
               }
+              marginBottom={5}
               label={passwordFieldLabel()}
               placeholder={t('wifi.password.placeholder')}
               value={props.settings.password}
@@ -177,17 +170,21 @@ export const WifiCard = (props) => {
               isInvalid={!!props.passwordError}
               validationMessage={!!props.passwordError && props.passwordError}
             />
-          </Pane>
+          )}
         </Pane>
-        <hr />
-        <Paragraph>
-          <CameraIcon />
-          <MobilePhoneIcon />
-          <Text size={300} paddingRight={8} paddingLeft={8}>
-            {t('wifi.tip')}
-          </Text>
-        </Paragraph>
-      </Card>
-    </Pane>
+      </Pane>
+      {!props.settings.hideTip && (
+        <>
+          <hr />
+          <Paragraph>
+            <CameraIcon />
+            <MobilePhoneIcon />
+            <Text size={300} paddingRight={8} paddingLeft={8}>
+              {t('wifi.tip')}
+            </Text>
+          </Paragraph>
+        </>
+      )}
+    </Card>
   );
 };
-- 
cgit v1.2.3