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

1 files changed, 20 insertions, 1 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}