1 files changed, 97 insertions, 18 deletions

diff --git a/src/App.js b/src/App.js
index 6eb712a..94a3e97 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,38 +1,105 @@
 import { Button, Heading, Link, Pane, Paragraph } from 'evergreen-ui';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import logo from '../src/images/wifi.png';
 import { Settings } from './components/Settings';
 import { WifiCard } from './components/WifiCard';
 import './style.css';
 import { Translations } from './translations';
+import useHashParam from './components/useHashParam';
 
 function App() {
+  const getHashSearchParams = (location) => {
+    const hash = location.hash.slice(1);
+    const [prefix, query] = hash.split('?');
+
+    return [prefix, new URLSearchParams(query)];
+  };
+  const getHashParam = (key, location = window.location) => {
+    const [_, searchParams] = getHashSearchParams(location);
+    return searchParams.get(key);
+  };
+  const setHashParam = (key, value, location = window.location) => {
+    const [prefix, searchParams] = getHashSearchParams(location);
+
+    if (typeof value === 'undefined') {
+      searchParams.delete(key);
+    } else {
+      searchParams.set(key, value);
+    }
+
+    const search = searchParams.toString();
+    location.hash = search ? `${prefix}?${search}` : prefix;
+  };
+
+  let pssid = getHashParam('ssid'); //params.get('ssid') || '';
+  let ppassword = getHashParam('password') || '';
+  let pencryptionMode =
+    getHashParam('encryptionMode') !== null
+      ? getHashParam('encryptionMode')
+      : 'WPA';
+  let peapMethod = getHashParam('eapMethod') || 'PWD';
+  let peapIdentity = getHashParam('eapIdentity') || '';
+  let phidePassword =
+    getHashParam('hidePassword') === null
+      ? false
+      : getHashParam('hidePassword').toLowerCase() === 'true'
+        ? true
+        : false;
+  let phiddenSSID =
+    getHashParam('hiddenSSID') === null
+      ? false
+      : getHashParam('hiddenSSID').toLowerCase() === 'true'
+        ? true
+        : false;
+  let pportrait =
+    getHashParam('portrait') === null
+      ? false
+      : getHashParam('portrait').toLowerCase() === 'true'
+        ? true
+        : false || false;
+  let padditionalCards = getHashParam('additionalCards') || 1;
+  let phideTip =
+    getHashParam('hideTip') === null
+      ? false
+      : getHashParam('hideTip').toLowerCase() === 'true'
+        ? true
+        : false;
+  let planguage =
+    getHashParam('lng') === null || getHashParam('lng').toLowerCase() === ''
+      ? 'en-US'
+      : getHashParam('lng');
+
+  // ########################
   const html = document.querySelector('html');
+
   const { t, i18n } = useTranslation();
   const firstLoad = useRef(true);
   const [settings, setSettings] = useState({
     // Network SSID name
-    ssid: '',
+    ssid: pssid,
     // Network password
-    password: '',
+    password: ppassword,
     // Settings: Network encryption mode
-    encryptionMode: 'WPA',
+    encryptionMode: pencryptionMode,
     // Settings: EAP Method
-    eapMethod: 'PWD',
+    eapMethod: peapMethod,
     // Settings: EAP identity
-    eapIdentity: '',
+    eapIdentity: peapIdentity,
     // Settings: Hide password on the printed card
-    hidePassword: false,
+    hidePassword: phidePassword,
     // Settings: Mark your network as hidden SSID
-    hiddenSSID: false,
+    hiddenSSID: phiddenSSID,
     // Settings: Portrait orientation
-    portrait: false,
+    portrait: pportrait,
     // Settings: Additional cards
-    additionalCards: 0,
+    additionalCards: padditionalCards,
     // Settings: Show tip (legend) on card
-    hideTip: false,
+    hideTip: phideTip,
+    // Display language
+    lng: planguage,
   });
+
   const [errors, setErrors] = useState({
     ssidError: '',
     passwordError: '',
@@ -48,6 +115,8 @@ function App() {
   const onChangeLanguage = (language) => {
     html.style.direction = htmlDirection(language);
     i18n.changeLanguage(language);
+
+    setSettings({ ...settings, lng: language });
   };
 
   const onPrint = () => {
@@ -126,7 +195,7 @@ function App() {
   };
   const onAdditionalCardsChange = (additionalCardsStr) => {
     const amount = parseInt(additionalCardsStr);
-    amount >= 0 && setSettings({ ...settings, additionalCards: amount });
+    amount >= 1 && setSettings({ ...settings, additionalCards: amount });
   };
   const onHideTipChange = (hideTip) => {
     setSettings({ ...settings, hideTip });
@@ -136,22 +205,34 @@ function App() {
     firstLoad.current = false;
   };
 
+  const generateUrl = () => {
+    Object.entries(settings).map(([key, value]) => {
+      //console.log(key+" = " + value)
+      setHashParam(key, value);
+      if (key === 'ssid') setName(value);
+      return true;
+    });
+  };
+  const [name, setName] = useHashParam('name');
+
   useEffect(() => {
     // Ensure the page direction is set properly on first load
     if (htmlDirection() === 'rtl') {
       html.style.direction = 'rtl';
     }
+    generateUrl();
   });
 
   return (
     <Pane>
+      Hello{' '}
+      {name ? name + '! You name is stored in hash params #️⃣' : 'visitor!'}
       <Pane display="flex">
         <img alt="icon" src={logo} width="32" height="32" />
         <Heading size={900} paddingRight={16} paddingLeft={16}>
           {t('title')}
         </Heading>
       </Pane>
-
       <Pane>
         <Paragraph marginTop={12}>{t('desc.use')}</Paragraph>
 
@@ -163,7 +244,6 @@ function App() {
           .
         </Paragraph>
       </Pane>
-
       <Pane>
         <WifiCard
           settings={settings}
@@ -175,7 +255,6 @@ function App() {
           onPasswordChange={onPasswordChange}
         />
       </Pane>
-
       <Settings
         settings={settings}
         firstLoad={firstLoad}
@@ -189,7 +268,6 @@ function App() {
         onAdditionalCardsChange={onAdditionalCardsChange}
         onHideTipChange={onHideTipChange}
       />
-
       <Button
         id="print"
         appearance="primary"
@@ -200,9 +278,10 @@ function App() {
         {t('button.print')}
       </Button>
       <Pane id="print-area">
-        {settings.additionalCards >= 0 &&
-          [...Array(settings.additionalCards + 1)].map((el, idx) => (
+        {settings.additionalCards >= 1 &&
+          [...Array(settings.additionalCards)].map((el, idx) => (
             <WifiCard
+              keyid={idx}
               key={`card-nr-${idx}`}
               settings={settings}
               ssidError={errors.ssidError}