Add support for EAP-PWD (#246)

I also added a German translation of the new strings.

4 files changed, 103 insertions, 4 deletions

diff --git a/src/App.js b/src/App.js
index 8ccf361..ccfa9b6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,6 +18,10 @@ function App() {
     password: '',
     // Settings: Network encryption mode
     encryptionMode: 'WPA',
+    // Settings: EAP Method
+    eapMethod: 'PWD',
+    // Settings: EAP identity
+    eapIdentity: '',
     // Settings: Hide password on the printed card
     hidePassword: false,
     // Settings: Mark your network as hidden SSID
@@ -28,6 +32,7 @@ function App() {
   const [errors, setErrors] = useState({
     ssidError: '',
     passwordError: '',
+    eapIdentityError: '',
   });
 
   const htmlDirection = (languageID) => {
@@ -63,6 +68,26 @@ function App() {
       });
       return;
     }
+    if (
+      settings.password.length < 1 &&
+      settings.encryptionMode === 'WPA2-EAP'
+    ) {
+      setErrors({
+        ...errors,
+        passwordError: t('wifi.alert.password'),
+      });
+      return;
+    }
+    if (
+      settings.eapIdentity.length < 1 &&
+      settings.encryptionMode === 'WPA2-EAP'
+    ) {
+      setErrors({
+        ...errors,
+        eapIdentityError: t('wifi.alert.eapIdentity'),
+      });
+      return;
+    }
     document.title = 'WiFi Card - ' + settings.ssid;
     window.print();
   };
@@ -79,6 +104,13 @@ function App() {
     setErrors({ ...errors, passwordError: '' });
     setSettings({ ...settings, encryptionMode });
   };
+  const onEapMethodChange = (eapMethod) => {
+    setSettings({ ...settings, eapMethod });
+  };
+  const onEapIdentityChange = (eapIdentity) => {
+    setErrors({ ...errors, eapIdentityError: '' });
+    setSettings({ ...settings, eapIdentity });
+  };
   const onOrientationChange = (portrait) => {
     setSettings({ ...settings, portrait });
   };
@@ -125,7 +157,9 @@ function App() {
         settings={settings}
         ssidError={errors.ssidError}
         passwordError={errors.passwordError}
+        eapIdentityError={errors.eapIdentityError}
         onSSIDChange={onSSIDChange}
+        onEapIdentityChange={onEapIdentityChange}
         onPasswordChange={onPasswordChange}
       />
 
@@ -135,6 +169,7 @@ function App() {
         onFirstLoad={onFirstLoad}
         onLanguageChange={onChangeLanguage}
         onEncryptionModeChange={onEncryptionModeChange}
+        onEapMethodChange={onEapMethodChange}
         onOrientationChange={onOrientationChange}
         onHidePasswordChange={onHidePasswordChange}
         onHiddenSSIDChange={onHiddenSSIDChange}
diff --git a/src/components/Settings.js b/src/components/Settings.js
index f12fe35..a0dbab5 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -10,9 +10,10 @@ export const Settings = (props) => {
   const encryptionModes = [
     { label: t('wifi.password.encryption.none'), value: '' },
     { label: 'WPA/WPA2/WPA3', value: 'WPA' },
+    { label: 'WPA2-EAP', value: 'WPA2-EAP' },
     { label: 'WEP', value: 'WEP' },
   ];
-
+  const eapMethods = [{ label: 'PWD', value: 'PWD' }];
   const langSelectDefaultValue = () => {
     const t = Translations.filter((t) => t.id === i18n.language);
     if (t.length !== 1) {
@@ -68,6 +69,16 @@ export const Settings = (props) => {
         options={encryptionModes}
         onChange={(e) => props.onEncryptionModeChange(e.target.value)}
       />
+      <RadioGroup
+        label={t('wifi.encryption.eapMethod')}
+        size={16}
+        value={props.settings.eapMethod}
+        options={eapMethods}
+        className={`
+          ${props.settings.encryptionMode !== 'WPA2-EAP' && 'hidden'}
+        `}
+        onChange={(e) => props.onEapMethodChange(e.target.value)}
+      />
     </Pane>
   );
 };
diff --git a/src/components/WifiCard.js b/src/components/WifiCard.js
index 8edf147..35f35a7 100644
--- a/src/components/WifiCard.js
+++ b/src/components/WifiCard.js
@@ -37,9 +37,11 @@ export const WifiCard = (props) => {
     const password = !props.settings.encryptionMode
       ? ''
       : escape(props.settings.password);
-    setQrvalue(
-      `WIFI:T:${props.settings.encryptionMode};S:${ssid};P:${password};H:${props.settings.hiddenSSID};`
-    );
+    const qrval =
+      props.settings.encryptionMode === 'WPA2-EAP'
+        ? `WIFI:T:${props.settings.encryptionMode};S:${ssid};P:${password};H:${props.settings.hiddenSSID};E:${props.settings.eapMethod};I:${props.settings.eapIdentity};;`
+        : `WIFI:T:${props.settings.encryptionMode};S:${ssid};P:${password};H:${props.settings.hiddenSSID};;`;
+    setQrvalue(qrval);
   }, [props.settings]);
 
   const portraitWidth = () => {
@@ -53,6 +55,15 @@ export const WifiCard = (props) => {
     return hiddenPassword ? '' : t('wifi.password');
   };
 
+  const eapIdentityFieldLabel = () => {
+    const hiddenIdentity = props.settings.encryptionMode !== 'WPA2-EAP';
+    return hiddenIdentity ? '' : t('wifi.identity');
+  };
+
+  const eapMethodFieldLabel = () => {
+    return !eapIdentityFieldLabel() ? '' : t('wifi.encryption.eapMethod');
+  };
+
   return (
     <Pane>
       <Card
@@ -101,6 +112,38 @@ export const WifiCard = (props) => {
               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="password"
               type="text"
               maxLength="63"
diff --git a/src/translations.js b/src/translations.js
index 861716d..d9d6fa4 100644
--- a/src/translations.js
+++ b/src/translations.js
@@ -9,6 +9,8 @@ export const Translations = [
       'desc.privacy':
         'Your WiFi information is never sent to the server. No tracking, analytics, or fingerprinting are used on this website. View the',
       'desc.source': 'source code',
+      'wifi.identity': 'Identity',
+      'wifi.identity.placeholder': 'Username',
       'wifi.login': 'WiFi Login',
       'wifi.name': 'Network name',
       'wifi.name.hiddenSSID': 'Hidden SSID',
@@ -18,13 +20,16 @@ export const Translations = [
       'wifi.password.hide': 'Hide password',
       'wifi.password.encryption': 'Encryption',
       'wifi.password.encryption.none': 'None',
+      'wifi.encryption.eapMethod': 'EAP method',
       'wifi.tip':
         "Point your phone's camera at the QR Code to connect automatically",
       'wifi.alert.name': 'Network name cannot be empty',
+      'wifi.alert.password': 'Password cannot be empty',
       'wifi.alert.password.length.5':
         'Password must be at least 5 characters, or change the encryption to "None"',
       'wifi.alert.password.length.8':
         'Password must be at least 8 characters, or change the encryption to "None"',
+      'wifi.alert.eapIdentity': 'Identity cannot be empty',
       'button.rotate': 'Rotate',
       'button.print': 'Print',
       select: 'Select Language',
@@ -436,6 +441,8 @@ export const Translations = [
       'desc.privacy':
         'Deine Zugangsdaten werden niemals zum Server gesendet. Es gibt kein Tracking, Analytics, oder Fingerprinting auf dieser Website. Hier geht es zum',
       'desc.source': 'Quellcode',
+      'wifi.identity': 'Identität',
+      'wifi.identity.placeholder': 'Nutzername',
       'wifi.login': 'WLAN-Zugangsdaten',
       'wifi.name': 'WLAN-Netzwerkname (SSID)',
       'wifi.name.placeholder': 'WLAN-Netzwerkname (SSID)',
@@ -445,13 +452,16 @@ export const Translations = [
       'wifi.name.hiddenSSID': 'Versteckte SSID',
       'wifi.password.encryption': 'Verschlüsselung',
       'wifi.password.encryption.none': 'Keine',
+      'wifi.encryption.eapMethod': 'EAP Methode',
       'wifi.tip':
         'Zeige mit der Kamera deines Handys auf den QR-Code, um automatisch eine Verbindung herzustellen',
       'wifi.alert.name': 'Der Netzwerkname darf nicht leer sein',
+      'wifi.alert.password': 'Das Passwort darf nicht leer sein',
       'wifi.alert.password.length.5':
         'Das Passwort muss mindestends 5 Zeichen lang sein, oder stelle die Verschlüsselung auf "Keine"',
       'wifi.alert.password.8':
         'Das Passwort muss mindestends 8 Zeichen lang sein, oder stelle die Verschlüsselung auf "Keine"',
+      'wifi.alert.eapIdentity': 'Die Identität darf nicht leer sein',
       'button.rotate': 'Drehen',
       'button.print': 'Drucken',
       select: 'Sprache auswählen',