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> --- Dockerfile | 2 +- README.md | 4 + package.json | 26 +- 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 +- yarn.lock | 8073 ++++++++++++++++++---------------------- 11 files changed, 4128 insertions(+), 4428 deletions(-) create mode 100644 src/components/useHashParam.js diff --git a/Dockerfile b/Dockerfile index 181bc7a..f5567ba 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:18-alpine as builder +FROM node:22-alpine as builder WORKDIR /tmp COPY . . diff --git a/README.md b/README.md index b9e0924..7bad0bc 100644 --- a/README.md +++ b/README.md @@ -86,3 +86,7 @@ We would love for you to contribute to different languages and help make it even | Simplified Cantonese | [ous50](https://github.com/ous50) | | Punjabi | [phoenixgill34](https://github.com/phoenixgill34/) | | Danish | [dk90103](https://github.com/dk90103/) | +| Hebrew | [Ido Bronfeld](https://github.com/HelloWorldIL) | +| Slovak | [matejkubinec](https://github.com/matejkubinec/) | +| Esperanto | [zeecho](https://github.com/zeecho/) | +| German (Swiss) | [NZehnder](https://github.com/NZehnder) | diff --git a/package.json b/package.json index 1a38d28..0ec57db 100644 --- a/package.json +++ b/package.json @@ -3,21 +3,21 @@ "version": "0.1.0", "private": true, "dependencies": { - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "^14.4.3", - "evergreen-ui": "^6.13.1", - "i18next": "^22.0.6", - "i18next-browser-languagedetector": "^7.0.1", - "qrcode.react": "^3.0.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-i18next": "^12.0.0", + "@testing-library/jest-dom": "^6.9.1", + "@testing-library/react": "^16.3.2", + "@testing-library/user-event": "^14.6.1", + "evergreen-ui": "^7.1.9", + "i18next": "^25.8.0", + "i18next-browser-languagedetector": "^8.2.0", + "qrcode.react": "^4.2.0", + "react": "^19.2.3", + "react-dom": "^19.2.3", + "react-i18next": "^16.5.3", "react-scripts": "^5.0.1" }, "devDependencies": { - "husky": "^8.0.2", - "prettier": "2.8.0" + "husky": "^9.1.7", + "prettier": "3.8.1" }, "scripts": { "start": "react-scripts start", @@ -45,4 +45,4 @@ "repository": "git@github.com:bndw/wifi-card.git", "author": "bndw ", "license": "MIT" -} +} \ No newline at end of file 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() { . - - -