When I scan a QR code using a mobile app, most of the results I get are a string:
WIFI:T:WEP;S:loadingf;P:dfdfdfdfffdfdf;;

Only some phones's cameras that can directly scan out wifi and can connect.

Most app systems come with a native browser that can scan the QR code and connect

Howdy, I've tried to create one of these and print them out on sheets of stickers, however the QR scan doesn't appear to work on Android devices! Yet, iPhone devices can scan these and connect right up without any hindrance.

My settings on https://wificard.io/ were simply inputting my SSID, password, WPA2 security, and selecting that this would indeed be a hidden network.

I attempted QR scans with the camera apps on both an original Pixel (2016) sporting Android 9 (PQ3A.190801.002) as well as Pixel 4a sporting Android 11 (RQ2A.210505.002). Both devices do immediately recognize that this QR code is a wifi network to join, and upon clicking on the option to connect, I'm brought to the Wi-Fi settings/available networks screen where the loading lines just scroll across the top bar for about 2 seconds and then nothing happens! Repeated attempts yield same result, devices never find/connect to the network.

A friend and also my sister, who both have iPhones, can scan this, press the join link, and boom, immediately finds/connects to the network. What gives!? This is the worst because iPhone normies love to talk smack on Android users an this just adds insult to injury! (not that serious just joking)

Attached is my same card used throughout all this. Printed my card from the web app linked above on Aug 19 @ 4 PM EST.

Do Android devices have a different specification or protocol for interpreting QR codes or something?
WiFi Card - The Wolf of Emerald Street.pdf

Hi,

There're some cases people create public networks and manage them with another way/device (like hotspots in hotels). Keeping password field mandatory basically prevents creating passwordless network cards.

It'd be nicer if there's an option to choose encryption, so based on selection password can be optional/ignored etc.

Here's the line that creates the qr value: https://github.com/bndw/wifi-card/blob/master/src/components/Card.js#L45
And here's more info about possible encryption values: https://en.wikipedia.org/wiki/QR_code#Joining_a_Wi%E2%80%91Fi_network

          ┌────────────────────────────────────────────────── ssid
          │           ┌────────────────────────────────────── encryption mode
          │           │                ┌───────────────────── password
          │           │                │               ┌───── hidden/visible flag
          │           │                │               │
WIFI:S:<SSID>;T:<WEP|WPA|blank>;P:<PASSWORD>;H:<true|false|blank>;

It can be nice to have an input to select how many cards should be printed.

So you dont have to print mutlipe time to get more than 1 card

I18n.js uses 'wifi.alert.password.length.5':, but Card.js uses t('wifi.alert.password.5').

↓Example of choosing Chinese. The text of the alert is in English.

It would be helpful to document the process of contributing a translation. Off the top of my head, the steps are roughly:

1. Add a translation to ./src/i18n.js
2. Add the language option to ./src/app.js. Use the format e.g. French (Français)
3. Run make fmt.write to format your changes with Prettier

Looks like one of these PRs broke the website?

https://github.com/bndw/wifi-card/pulls?q=rtl

Using Brave Version 1.27.111 Chromium: 92.0.4515.131 (Official Build) (x86_64)

My wifi password has a capital "i" in it. Would be great if a seriffed font was used to display the password, since it is virtually indistinguishable from a lowercase "L" with a sans-serif font.

I understand the goal of this project is to NOT type the wifi password, but I'm going to assume that there will be cases when people type it in manually.

What about adding a separate language ini or json file instead of putting everything in App.js? Easier to contribute to.

Originally posted by @Teraskull in #117 (comment)

There is currently no check for a valid network name when the user prints the card. A valid Network Name would simply be a non-empty string in this case. Not that anyone would print a card without inputting a network name 😆 , but this check should be added for completeness.

EDIT: An alert should also be added in the event that a Network Name is not supplied by the user.

I click rotate on the card, it returns a blank screen. Tested in Firefox and Chrome.

Returns an error message in the JS console:

Error: Minified React error #62; visit https://reactjs.org/docs/error-decoder.html?invariant=62&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    React 8
    unstable_runWithPriority scheduler.production.min.js:19
    React 5
react-dom.production.min.js:209:194

Uncaught Error: Minified React error #62; visit https://reactjs.org/docs/error-decoder.html?invariant=62&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    React 8
    unstable_runWithPriority scheduler.production.min.js:19
    React 5
react-dom.production.min.js:74:343

In development, another error message is returned:

Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
    in svg (created by QRCodeSVG)
    in QRCodeSVG (created by QRCode)
    in QRCode (at Card.js:96)
    in div (at Card.js:92)
    in fieldset (at Card.js:84)
    in div (at Card.js:83)
    in Card (at App.js:69)
    in div (at App.js:25)
    in App (at src/index.js:8)
    in StrictMode (at src/index.js:7)

Ability to change the font size for network name and password could be nice.

Maybe we can support more languages when printing the card. For example, translate the interface texts like these:

WiFi Login -> WiFi 登录信息
Network name -> 网络名称
Password -> 密码
Point your phone's camera at the QR Code to connect automatically -> 扫码自动连接

Generating PDF vertically is useful. Currently, there is an option to only generate PDF horizontally.

The website detects the Polish language and presents the version of the website in this language. However, in the drop-down list, the currently indicated language is English instead of Polish in this case.

Web browser: Chrome 92.0.4515.131
Android 10
dev.wificard.io (because I can't open on mobile Chrome wificard.io):

Web browser: built into Android 10 MIUI Global 12.0.4, browser V12.11.4-gn
Android 10
wificard.io (because I can open here wificard.io)

Hi
Like in topic.
Some networks have separated 2.4GHz and 5GHz bands.

The ability to hide a password written with text on the generated document.

Is there a way to toggle on 'hidden' for the SSID type?

Do we have any plan to support TypeScript for the entire application?

As we all know, this makes the entire project easier to maintain, especially the current project code is increasing.

Right now the dropdown languages are written in three different ways:

1. Locale name
2. Full name in that language
3. Language code
   

My suggestion is to have the names show like in Ventoy:

The full name in English, and the translated name in brackets.

For i18n, the international locale codes should be used, as found here.

'en-US': {
    translation: {
...

Add/Update the following translation keys

'wifi.password.hide': 'Hide password',
'wifi.name.hiddenSSID': 'Hidden SSID,
'wifi.alert.password.length.5':
    'Password must be at least 5 characters, or change the encryption to "None"',
'wifi.alert.password.length.8':
    'Password must be at least 8 characters, or change the encryption to "None"',

If the below language authors would kindly translate the above 4 keys, either as a comment or pull request
to this branch, it would be greatly appreciated ❤️

• Chinese, #190
• Spanish, #193
• Portuguese, #211
• Portuguese (Brazil), #211
• Japanese, #197
• Russian, #190
• Ukrainian, #190
• Dutch, #206
• French, #192
• Hindi, #211
• Catalan, #191
• German, #213
• Indonesia, #206
• Polish, #195
• Arabic, #200
• Occitan, #191
• Italian, #220
• Korean, #194
• Norwegian, #205
• Hungarian, #193
• Serbian, #206
• Turkish
• Urdu

I found this bug

Hi there :)

I did a German translation for the app. Feel free to implement it.

English <=> German

WiFi Login <=> WLAN Zugangsdaten:

Network name <=> Netzwerkname:

WiFi Network name <=> WLAN Netzwerkname

Password <=> Passwort:

Hide password field before printing <=> Passwortfeld vor dem Drucken ausblenden

Encryption: <=> Verschlüsselung:

None <=> Keine

Point your phone's camera at the QR Code to connect automatically <=> Richten Sie die Kamera Ihres Telefons auf den QR-Code um automatisch eine Verbindung herzustellen.

Currently the texts/translations of the encryption options are fixed. But at least for None it would be nice to have a translation.
Maybe some locales treat the names of the algorithms specially but i think those would be ok as they are for most locales.

A few translation corrections:
Russian: "Нет"
Ukrainian: "Немає"
Polish: "Brak"

Originally posted by @Teraskull in #157 (comment)

When viewing in an incognito or private browser a blank page is returned, with the following console error. This does not occur in a non-private browser window.

Uncaught TypeError: v.filter(...)[0] is undefined
    F App.js:33
    R App.js:117

WPA-PSK minimum WPA length is 8 characters. For a 40 bit WEP (probably very rare case) network the password is 5 characters.
To prevent someone forgot to enter the minimum number of characters by mistake, it may be worth adding a warning.

Max length of password is 63 ASCII printable characters (in case WPA2-AES PSK). 63 characters instead of 64.

I know that hardly anyone uses this browser and Microsoft itself recommends Edge. In any case, the tool does not work in this browser (there is a white page) and an error in the console:

SCRIPT5009: 'Promise' is undefined
i18next.js (169,7)

Undefined identifier

On July 16 there was another problem and after typing a letter in the network name field or in the password field I got a blank page with this error in the console:

IE Version 20H2 (OS Build 19042.1083)

Maybe it's worth noting:

• Critical
  

  wifi-card/src/components/Card.js

  Line 6 in 0eea7b5

  export const Card = () => {

Refactor this function to reduce its Cognitive Complexity from 34 to the 15 allowed. [+27 locations]sonarlint(javascript:S3776)
Cognitive Complexity of functions should not be too high (javascript:S3776)
Cognitive Complexity is a measure of how hard the control flow of a function is to understand. Functions with high Cognitive Complexity will be difficult to maintain.

• Minor:
  

  wifi-card/src/components/Card.js

  Line 21 in 0eea7b5

  for (let i = 0; i < v.length; i++) {

Expected a `for-of` loop instead of a `for` loop with this simple iteration.sonarlint(javascript:S4138)
"for of" should be used with Iterables (javascript:S4138)
If you have an iterable, such as an array, set, or list, your best option for looping through its values is the for of syntax. Use a counter, and ... well you'll get the right behavior, but your code just isn't as clean or clear.

when I zoom the pdf the qrcode is blurry on the edges, can it be fixed?

Trying to build this repo from Docker, but I get an error of the type

"COPY failed: stat /var/lib/docker/tmp/docker-builderXXXXXXX/... no such file or directory"

This seems to stem from the copy instruction "COPY build /usr/share/nginx/html" as there is no file or directory called "build" in the repository.

Maybe I'm doing something wrong? What would you expect to happen as per this instruction?

Kind regards, and thanks for your commitment.

Just as what title said.

Max length input network name is 32 characters and I inserted value with 32 characters: abcdefghijklmnopqrstuwxyzabcdefg
Max length input for password is 64 characters and I inserted value with 64 characters: abcdefghijklmnopqrstuwxyzabcdefghijklmnopqrstuwxyzabcdefghijklmn

Generated PDF (📡 WiFi Card.pdf) shows only abcdefghijklmnopqrst for network name and password. So it's only 20 characters, it means that 12 characters are missing for the network name and 44 characters are missing for the password.

The format of the encoded string is:

WIFI:S:;T:<WPA|WEP|>;P:;H:<true|false|>;

Order of fields does not matter. Special characters """ (quotation mark), ";" (semicolon), "," (comma), ":" (colon) and "" (backslash) should be escaped with a backslash ("") as in MECARD encoding. For example, if an SSID were "foo;bar\baz", with quotation marks part of the literal SSID name itself, this would be encoded as: WIFI:S:"foo;bar\baz";;[38]

https://en.wikipedia.org/wiki/QR_code#Joining_a_Wi%E2%80%91Fi_network

When selecting "None" encryption, the network.password field remains unchanged. In my testing, the password will actually change the QR code that is generated for None encryption. So assuming that we want to have no password for None encryption, we will need to clear network.password when upon selection of None encryption. Something like this:

setNetwork({ ...network, password: '' })

Originally posted by @noahhefner in #44 (comment)

Hello,

I am having a difficult time understanding from the README how to run this from Docker. I'm relatively new to Docker and this seemed like a fun project to explore with.

Based on the read me I should be able to run

make run

And It would run but I'm sure that there is more to it than that.

If ❌ it means that I see white page.

I have no logs because it is a mobile version of the browser, so I can't see it. I checked in the browser on the PC, I selected the option that I use smartphone, but in this case the problem does not occur.
When testing in mobile Chrome and selecting the desktop view option, the page loads correctly. So the problem is with loading the mobile version.

Web browser: Chrome 92.0.4515.131
Android 10

Not incognito, on left wificard.io, on right dev.wificard.io:

The translation keys are shown when first visiting the website instead of the actual translation text.
This issue can be reproduced by visiting the website in an incognito browser window.

With the growing number of controls and features, the card is beginning to feel pretty busy. One way to solve this would be to pull these sort of options into an "Advanced" section that's outside of the card border. This section should be collapsible and default to closed. Advanced controls could include:

• Rotate
• Font Size
• Hidden SSID
• Hide password

EDIT: The more accurate problem, I think, is that the card has controls on it that are not on the printed card. Keeping the card as a WYSIWYG would be a better approach. The natural place for these controls is below the card. They could be hidden behind a button by default but that's additional complexity that could always be added later.

Hi, great project.

What do you think about an option to export the QR Code to an SVG file? to be able to use it in any resolution.

All I need to do is paying with pay-pal or something and then the card will be sent to my mailbox.

🤪

The i18next-browser-languagedetector plugin detects my browser language as en-US
but that's not present in selector so it shows me the first option Arabic but the language is set to en
This can confuse a new user !

To reproduce this bug i clean my browser storage and all cache
so that i am like a new user on the site.

Preview

I really wanted this to work, but for my friends on iOS (including me) it doesn't. You can hit "join network", but it will always throw the error "Unable to join the network '[name]'"

Have double checked for typos, and tried various times on various devices

Change the behavior of the Hide password checkbox as follows:

1. Hide password checkbox hides the password textarea with display: none. This would make is immediately invisible to the user (expected) as well as the printout.
2. Selecting "None" encryption automatically checks hide password. This will trigger (1) and hide the password textarea
3. Changing the encryption mode from "None" to something else automatically unchecks hide password