aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/WifiCard.js
diff options
context:
space:
mode:
authorguicamest <guicamest@gmail.com>2023-08-15 17:32:18 +0200
committerGitHub <noreply@github.com>2023-08-15 08:32:18 -0700
commitf1d79a17f615a9cd34b15dd7b96764e4bb99486a (patch)
treeadbaf3522176ad3240a47183388d5d8127abd3a8 /src/components/WifiCard.js
parent7f2413d3d08b5da7a30c17ecfc1586f5bc7b1219 (diff)
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
Diffstat (limited to 'src/components/WifiCard.js')
-rw-r--r--src/components/WifiCard.js181
1 files changed, 89 insertions, 92 deletions
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) => {
72 }; 72 };
73 73
74 return ( 74 return (
75 <Pane> 75 <Card
76 <Card 76 className="card-print"
77 id="print-area" 77 elevation={3}
78 elevation={3} 78 style={{ maxWidth: props.settings.portrait ? portraitWidth() : '100%' }}
79 style={{ maxWidth: props.settings.portrait ? portraitWidth() : '100%' }} 79 >
80 <Pane display="flex" paddingBottom={12}>
81 <img alt="icon" src={logo} width="24" height="24" />
82 <Heading
83 size={700}
84 paddingRight={10}
85 paddingLeft={10}
86 textAlign={props.settings.portrait ? 'center' : 'unset'}
87 >
88 {t('wifi.login')}
89 </Heading>
90 </Pane>
91
92 <Pane
93 className="details"
94 style={{ flexDirection: props.settings.portrait ? 'column' : 'row' }}
80 > 95 >
81 <Pane display="flex" paddingBottom={12}> 96 <QRCode
82 <img alt="icon" src={logo} width="24" height="24" /> 97 className="qrcode"
83 <Heading 98 style={{ marginBottom: props.settings.portrait ? '1em' : '0' }}
84 size={700} 99 value={qrvalue}
85 paddingRight={10} 100 size={150}
86 paddingLeft={10} 101 />
87 textAlign={props.settings.portrait ? 'center' : 'unset'}
88 >
89 {t('wifi.login')}
90 </Heading>
91 </Pane>
92 102
93 <Pane 103 <Pane width={'100%'}>
94 className="details" 104 <TextareaField
95 style={{ flexDirection: props.settings.portrait ? 'column' : 'row' }} 105 id="ssid"
96 > 106 type="text"
97 <QRCode 107 marginBottom={5}
98 className="qrcode" 108 autoComplete="off"
99 style={{ padding: '1em' }} 109 autoCorrect="off"
100 value={qrvalue} 110 autoCapitalize="none"
101 size={150} 111 spellCheck={false}
112 maxLength="32"
113 label={t('wifi.name')}
114 placeholder={t('wifi.name.placeholder')}
115 value={props.settings.ssid}
116 onChange={(e) => props.onSSIDChange(e.target.value)}
117 isInvalid={!!props.ssidError}
118 validationMessage={!!props.ssidError && props.ssidError}
102 /> 119 />
120 {props.settings.encryptionMode === 'WPA2-EAP' && (
121 <>
122 <TextareaField
123 id="eapmethod"
124 type="text"
125 marginBottom={5}
126 readOnly={true}
127 spellCheck={false}
128 label={eapMethodFieldLabel()}
129 value={props.settings.eapMethod}
130 />
103 131
104 <Pane width={'100%'}> 132 <TextareaField
105 <TextareaField 133 id="identity"
106 id="ssid" 134 type="text"
107 type="text" 135 marginBottom={5}
108 marginBottom={5} 136 autoComplete="off"
109 autoComplete="off" 137 autoCorrect="off"
110 autoCorrect="off" 138 autoCapitalize="none"
111 autoCapitalize="none" 139 spellCheck={false}
112 spellCheck={false} 140 label={eapIdentityFieldLabel()}
113 maxLength="32" 141 placeholder={t('wifi.identity.placeholder')}
114 label={t('wifi.name')} 142 value={props.settings.eapIdentity}
115 placeholder={t('wifi.name.placeholder')} 143 onChange={(e) => props.onEapIdentityChange(e.target.value)}
116 value={props.settings.ssid} 144 isInvalid={!!props.eapIdentityError}
117 onChange={(e) => props.onSSIDChange(e.target.value)} 145 validationMessage={
118 isInvalid={!!props.ssidError} 146 !!props.eapIdentityError && props.eapIdentityError
119 validationMessage={!!props.ssidError && props.ssidError} 147 }
120 /> 148 />
121 <TextareaField 149 </>
122 id="eapmethod" 150 )}
123 type="text" 151 {!(props.settings.hidePassword || !props.settings.encryptionMode) && (
124 marginBottom={5}
125 readOnly={true}
126 spellCheck={false}
127 className={`
128 ${props.settings.encryptionMode !== 'WPA2-EAP' && 'hidden'}
129 `}
130 label={eapMethodFieldLabel()}
131 value={props.settings.eapMethod}
132 />
133 <TextareaField
134 id="identity"
135 type="text"
136 marginBottom={5}
137 autoComplete="off"
138 autoCorrect="off"
139 autoCapitalize="none"
140 spellCheck={false}
141 className={`
142 ${props.settings.encryptionMode !== 'WPA2-EAP' && 'hidden'}
143 `}
144 label={eapIdentityFieldLabel()}
145 placeholder={t('wifi.identity.placeholder')}
146 value={props.settings.eapIdentity}
147 onChange={(e) => props.onEapIdentityChange(e.target.value)}
148 isInvalid={!!props.eapIdentityError}
149 validationMessage={
150 !!props.eapIdentityError && props.eapIdentityError
151 }
152 />
153 <TextareaField 152 <TextareaField
154 id="password" 153 id="password"
155 type="text" 154 type="text"
@@ -158,18 +157,12 @@ export const WifiCard = (props) => {
158 autoCorrect="off" 157 autoCorrect="off"
159 autoCapitalize="none" 158 autoCapitalize="none"
160 spellCheck={false} 159 spellCheck={false}
161 className={`
162 ${
163 (props.settings.hidePassword ||
164 !props.settings.encryptionMode) &&
165 'hidden'
166 }
167 `}
168 height={ 160 height={
169 props.settings.portrait && props.settings.password.length > 40 161 props.settings.portrait && props.settings.password.length > 40
170 ? '5em' 162 ? '5em'
171 : 'auto' 163 : 'auto'
172 } 164 }
165 marginBottom={5}
173 label={passwordFieldLabel()} 166 label={passwordFieldLabel()}
174 placeholder={t('wifi.password.placeholder')} 167 placeholder={t('wifi.password.placeholder')}
175 value={props.settings.password} 168 value={props.settings.password}
@@ -177,17 +170,21 @@ export const WifiCard = (props) => {
177 isInvalid={!!props.passwordError} 170 isInvalid={!!props.passwordError}
178 validationMessage={!!props.passwordError && props.passwordError} 171 validationMessage={!!props.passwordError && props.passwordError}
179 /> 172 />
180 </Pane> 173 )}
181 </Pane> 174 </Pane>
182 <hr /> 175 </Pane>
183 <Paragraph> 176 {!props.settings.hideTip && (
184 <CameraIcon /> 177 <>
185 <MobilePhoneIcon /> 178 <hr />
186 <Text size={300} paddingRight={8} paddingLeft={8}> 179 <Paragraph>
187 {t('wifi.tip')} 180 <CameraIcon />
188 </Text> 181 <MobilePhoneIcon />
189 </Paragraph> 182 <Text size={300} paddingRight={8} paddingLeft={8}>
190 </Card> 183 {t('wifi.tip')}
191 </Pane> 184 </Text>
185 </Paragraph>
186 </>
187 )}
188 </Card>
192 ); 189 );
193}; 190};
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-18 20:50:37 +0000