4 files changed, 64 insertions, 5 deletions

diff --git a/src/components/Settings.js b/src/components/Settings.js
index 837b4f0..0485aaf 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -20,6 +20,7 @@ export const Settings = (props) => {
     { 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) {
diff --git a/src/components/WifiCard.js b/src/components/WifiCard.js
index 70e1189..e977ac8 100644
--- a/src/components/WifiCard.js
+++ b/src/components/WifiCard.js
@@ -8,7 +8,7 @@ import {
   Text,
   TextareaField,
 } from 'evergreen-ui';
-import QRCode from 'qrcode.react';
+import { QRCodeSVG as QRCode } from 'qrcode.react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import logo from '../../src/images/wifi.png';
@@ -71,6 +71,9 @@ export const WifiCard = (props) => {
     return !eapIdentityFieldLabel() ? '' : t('wifi.encryption.eapMethod');
   };
 
+  const keyid = props.keyid || '';
+  const suffixKeyID = (prefix) => `${prefix}-${keyid}`;
+
   return (
     <Card
       className="card-print"
@@ -102,7 +105,7 @@ export const WifiCard = (props) => {
 
         <Pane width={'100%'}>
           <TextareaField
-            id="ssid"
+            id={suffixKeyID('ssid')}
             type="text"
             marginBottom={5}
             autoComplete="off"
@@ -120,7 +123,7 @@ export const WifiCard = (props) => {
           {props.settings.encryptionMode === 'WPA2-EAP' && (
             <>
               <TextareaField
-                id="eapmethod"
+                id={suffixKeyID('eapmethod')}
                 type="text"
                 marginBottom={5}
                 readOnly={true}
@@ -130,7 +133,7 @@ export const WifiCard = (props) => {
               />
 
               <TextareaField
-                id="identity"
+                id={suffixKeyID('identity')}
                 type="text"
                 marginBottom={5}
                 autoComplete="off"
@@ -150,7 +153,7 @@ export const WifiCard = (props) => {
           )}
           {!(props.settings.hidePassword || !props.settings.encryptionMode) && (
             <TextareaField
-              id="password"
+              id={suffixKeyID('password')}
               type="text"
               maxLength="63"
               autoComplete="off"
diff --git a/src/components/style.css b/src/components/style.css
index 10eac9b..87ba63a 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -67,6 +67,13 @@ button {
   #print-area,
   #print-area * {
     visibility: visible;
+    /* For printing, use a font stack that prioritizes system fonts 
+       to ensure CJK characters are rendered correctly in Chrome. */
+    font-family:
+      'PingFang SC', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans JP',
+      'Noto Sans KR', 'Microsoft YaHei', serif;
+    font-weight: 500;
+    font-style: semibold;
   }
   #print-area {
     position: absolute;
diff --git a/src/components/useHashParam.js b/src/components/useHashParam.js
new file mode 100644
index 0000000..e43e1e4
--- /dev/null
+++ b/src/components/useHashParam.js
@@ -0,0 +1,48 @@
+import { useState, useEffect, useCallback } from 'react';
+
+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;
+};
+
+const useHashParam = (key) => {
+  const [innerValue, setInnerValue] = useState();
+
+  useEffect(() => {
+    const handleHashChange = () => setInnerValue(getHashParam(key));
+    handleHashChange();
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [key]);
+
+  const setValue = useCallback(
+    (value) => {
+      setHashParam(key, value);
+    },
+    [key]
+  );
+
+  return [innerValue, setValue];
+};
+
+export default useHashParam;