From e1927f633cab988ceeb8bcd51dd03aaa5b3f2392 Mon Sep 17 00:00:00 2001 From: Ben Woodward Date: Sat, 24 Jan 2026 20:46:24 -0800 Subject: Updates jan 2026 (#313) * Update dependencies to latest versions and migrate to React 19 - Update all dependencies to latest versions - Migrate to React 19 createRoot API (replaces deprecated ReactDOM.render) - Update qrcode.react import to v4 named export (QRCodeSVG) * Format CSS with prettier * Add Hebrew translation * Add Slovak translation * Add Malagasy translation * Add Bangla translation * Init field * Change the logic concerning number of cards to print * fix/clean * Fix Increment-field-ID-in-the-print-area * Increment-field-ID-in-the-print-area * Review id implementation logic * Fix git commit * Handle Query parameter * Fix package.json * Fix query parameter for language * fix query parameter for language * Fix EncryptionModeChange query parameters // Error when non in query * Fix EncryptionModeChange query parameters // Error when empty in query * clean Setting.js don't need to import i18n * clean file App.js * first iteration for Hash * Add Esperanto translation * Update translations for Occitan 2 lines added * Update translations.js Added Swiss German to the Translations JavaScript-File * Update translations.js Removed custom Translations-Strings of my own Version. * Update README.md * Format translations.js with prettier --------- Co-authored-by: Ido Bronfeld Co-authored-by: Matej Kubinec Co-authored-by: mpilasy <88362233+mpilasy@users.noreply.github.com> Co-authored-by: Tarek Hasan <94107336+Tarek-Hasan@users.noreply.github.com> Co-authored-by: ofostier Co-authored-by: zeecho <30541894+zeecho@users.noreply.github.com> Co-authored-by: Mejans <61360811+Mejans@users.noreply.github.com> Co-authored-by: Jan Zehnder <44242812+NZehnder@users.noreply.github.com> --- src/App.js | 115 +++++++++++++++--- src/components/Settings.js | 1 + src/components/WifiCard.js | 13 ++- src/components/style.css | 7 ++ src/components/useHashParam.js | 48 ++++++++ src/index.js | 8 +- src/translations.js | 259 ++++++++++++++++++++++++++++++++++++++--- 7 files changed, 410 insertions(+), 41 deletions(-) create mode 100644 src/components/useHashParam.js (limited to 'src') 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 ( + Hello{' '} + {name ? name + '! You name is stored in hash params #️⃣' : 'visitor!'} icon {t('title')} - {t('desc.use')} @@ -163,7 +244,6 @@ function App() { . - - -