From 093f025de3e97339750dc3df5be626a0315507dc Mon Sep 17 00:00:00 2001 From: Ben Woodward Date: Thu, 5 Aug 2021 12:12:17 -0700 Subject: Style and code refactor (#166) * Move all settings below card * refactor components; lifting state up * background color * Evergreen components for everything * password error * Tighten card size * Simply hide password to basic toggle, never disable * Hide password label, too * Maximize mobile portrait width * Make wifi tip smaller * Small style tweaks * Copy: update password length error text to include helpful instructions This will need a backfill for other translations * Remove unused css * Use empty string for EncryptionMode=None value * Remove light.min.css * Include logo on wificard * Cleanup after rebase * Clean-up comments on state * Padding for mobile --- src/App.js | 173 ++++++++++++++++++++++++---------- src/components/Card.js | 225 --------------------------------------------- src/components/Settings.js | 77 ++++++++++++++++ src/components/WifiCard.js | 148 +++++++++++++++++++++++++++++ src/components/style.css | 46 +++++---- src/i18n.js | 33 ++++++- src/style.css | 7 +- 7 files changed, 401 insertions(+), 308 deletions(-) delete mode 100644 src/components/Card.js create mode 100644 src/components/Settings.js create mode 100644 src/components/WifiCard.js (limited to 'src') diff --git a/src/App.js b/src/App.js index 87b88da..3d93bd6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,9 @@ -import React from 'react'; +import { Button, Heading, Link, Pane, Paragraph } from 'evergreen-ui'; +import React, { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import logo from '../src/images/wifi.png'; -import { Card } from './components/Card'; +import { Settings } from './components/Settings'; +import { WifiCard } from './components/WifiCard'; import './style.css'; /* List of languages that require RTL direction (alphabetic order). */ @@ -10,65 +12,138 @@ const RTL_LANGUAGES = ['ar', 'fa-IR']; function App() { const html = document.querySelector('html'); const { t, i18n } = useTranslation(); + const firstLoad = useRef(true); + const [settings, setSettings] = useState({ + // Network SSID name + ssid: '', + // Network password + password: '', + // Settings: Network encryption mode + encryptionMode: 'WPA', + // Settings: Hide password on the printed card + hidePassword: false, + // Settings: Portrait orientation + portrait: false, + }); + const [errors, setErrors] = useState({ + ssidError: '', + passwordError: '', + }); - const changeLanguage = (language) => { + const onChangeLanguage = (language) => { html.style.direction = RTL_LANGUAGES.includes(language) ? 'rtl' : 'ltr'; i18n.changeLanguage(language); }; - /* handle the edge case of the initial render requiring RTL direction */ - if (RTL_LANGUAGES.includes(i18n.language)) { - html.style.direction = 'rtl'; - } + const onPrint = () => { + if (!settings.ssid.length) { + setErrors({ + ...errors, + ssidError: t('wifi.alert.name'), + }); + return; + } + + if (settings.ssid.length > 0) { + if (settings.password.length < 8 && settings.encryptionMode === 'WPA') { + setErrors({ + ...errors, + passwordError: t('wifi.alert.password.length.8'), + }); + } else if ( + settings.password.length < 5 && + settings.encryptionMode === 'WEP' + ) { + setErrors({ + ...errors, + passwordError: t('wifi.alert.password.length.5'), + }); + } else { + document.title = 'WiFi Card - ' + settings.ssid; + window.print(); + } + } + }; + + const onSSIDChange = (ssid) => { + setErrors({ ...errors, ssidError: '' }); + setSettings({ ...settings, ssid }); + }; + const onPasswordChange = (password) => { + setErrors({ ...errors, passwordError: '' }); + setSettings({ ...settings, password }); + }; + const onEncryptionModeChange = (encryptionMode) => { + setErrors({ ...errors, passwordError: '' }); + setSettings({ ...settings, encryptionMode }); + }; + const onOrientationChange = (portrait) => { + setSettings({ ...settings, portrait }); + }; + const onHidePasswordChange = (hidePassword) => { + setSettings({ ...settings, hidePassword }); + }; + const onFirstLoad = () => { + firstLoad.current = false; + }; + + useEffect(() => { + /* handle the edge case of the initial render requiring RTL direction */ + if (RTL_LANGUAGES.includes(i18n.language)) { + html.style.direction = 'rtl'; + } + }); return ( -
-

+ + icon -   {t('title')} -

+ + {t('title')} + + + + + {t('desc.use')} -
- - -
+ + {t('desc.privacy')}{' '} + + {t('desc.source')} + + . + + -

{t('desc.use')}

+ -

- {t('desc.privacy')}{' '} - {t('desc.source')}. -

+ - -
+ + ); } diff --git a/src/components/Card.js b/src/components/Card.js deleted file mode 100644 index 601b760..0000000 --- a/src/components/Card.js +++ /dev/null @@ -1,225 +0,0 @@ -import QRCode from 'qrcode.react'; -import { useEffect, useRef, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import './style.css'; - -export const Card = ({ direction = 'ltr' }) => { - const firstLoad = useRef(true); - const [qrvalue, setQrvalue] = useState(''); - const [network, setNetwork] = useState({ - ssid: '', - encryptionMode: 'WPA', - password: '', - hidePassword: false, - }); - const [portrait, setPortrait] = useState(false); - const { t } = useTranslation(); - const escape = (v) => { - const needsEscape = ['"', ';', ',', ':', '\\']; - - let escaped = ''; - for (const c of v) { - if (needsEscape.includes(c)) { - escaped += `\\${c}`; - } else { - escaped += c; - } - } - return escaped; - }; - - const onPrint = () => { - if (network.ssid.length > 0) { - if (network.password.length < 8 && network.encryptionMode === 'WPA') { - alert(t('wifi.alert.password.length.8')); - } else if ( - network.password.length < 5 && - network.encryptionMode === 'WEP' - ) { - alert(t('wifi.alert.password.length.5')); - } else { - document.title = 'WiFi Card - ' + network.ssid; - window.print(); - } - } else { - alert(t('wifi.alert.name')); - } - }; - - const disableHidePassword = () => { - const isWEPWithPasswordLengthShorterThat5Characters = () => { - return network.encryptionMode === 'WEP' && network.password.length < 5 - ? true - : false; - }; - - return network.encryptionMode === 'WPA' && network.password.length < 8 - ? true - : isWEPWithPasswordLengthShorterThat5Characters(); - }; - - useEffect(() => { - if (firstLoad.current && window.innerWidth < 500) { - firstLoad.current = false; - setPortrait(true); - } - - const ssid = escape(network.ssid); - const password = - network.encryptionMode === 'nopass' ? '' : escape(network.password); - setQrvalue(`WIFI:T:${network.encryptionMode};S:${ssid};P:${password};;`); - }, [network]); - - const setEncryptionMode = (e) => - setNetwork({ - ...network, - encryptionMode: e.target.value, - }); - - const checkDirectionAndSetPadding = - direction === 'ltr' ? { paddingRight: '1em' } : { paddingLeft: '1em' }; - - return ( -
-