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

3 files changed, 127 insertions, 99 deletions

diff --git a/src/components/Settings.js b/src/components/Settings.js
index a0dbab5..837b4f0 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -1,4 +1,10 @@
-import { Checkbox, Pane, RadioGroup, SelectField } from 'evergreen-ui';
+import {
+  Checkbox,
+  Pane,
+  RadioGroup,
+  SelectField,
+  TextInputField,
+} from 'evergreen-ui';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import i18n from '../i18n';
@@ -62,6 +68,19 @@ export const Settings = (props) => {
         checked={props.settings.hiddenSSID}
         onChange={() => props.onHiddenSSIDChange(!props.settings.hiddenSSID)}
       />
+
+      <Checkbox
+        label={t('cards.tip.hide')}
+        checked={props.settings.hideTip}
+        onChange={() => props.onHideTipChange(!props.settings.hideTip)}
+      />
+      <TextInputField
+        type="number"
+        width={300}
+        label={t('cards.additional')}
+        value={props.settings.additionalCards}
+        onChange={(e) => props.onAdditionalCardsChange(e.target.value)}
+      />
       <RadioGroup
         label={t('wifi.password.encryption')}
         size={16}
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>
   );
 };
diff --git a/src/components/style.css b/src/components/style.css
index 5275770..10eac9b 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -3,21 +3,25 @@
   src: url(./SourceSerif4-Semibold.otf);
 }
 
-#print-area {
+.card-print {
   border-color: #aaa;
   margin-bottom: 1em;
   margin-top: 2em;
   padding: 1em;
 }
 
+#print-area {
+  display: none;
+}
+
 .details {
   display: flex;
   align-items: center;
 }
 
 .qrcode {
-  margin-bottom: 1em;
   max-width: 175px;
+  padding: 1em;
 }
 
 .hidden {
@@ -65,12 +69,20 @@ button {
     visibility: visible;
   }
   #print-area {
-    border-style: dashed;
-    box-shadow: none;
-  }
-  #print-area {
     position: absolute;
     left: 0;
     top: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    row-gap: 0em;
+  }
+  .card-print {
+    border-style: dashed;
+    box-shadow: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    break-inside: avoid;
+    page-break-inside: avoid;
   }
 }