aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.github/workflows/master_push.yml12
-rw-r--r--.github/workflows/pull_request.yml9
-rw-r--r--.prettierrc.json5
-rw-r--r--Dockerfile1
-rw-r--r--README.md2
-rw-r--r--package.json5
-rw-r--r--public/index.html10
-rw-r--r--src/App.js20
-rw-r--r--src/components/Card.js56
-rw-r--r--src/components/style.css5
-rw-r--r--yarn.lock5
11 files changed, 81 insertions, 49 deletions
diff --git a/.github/workflows/master_push.yml b/.github/workflows/master_push.yml
index 7c56fec..b1ad41b 100644
--- a/.github/workflows/master_push.yml
+++ b/.github/workflows/master_push.yml
@@ -6,18 +6,14 @@ jobs:
6 build-and-publish: 6 build-and-publish:
7 runs-on: ubuntu-latest 7 runs-on: ubuntu-latest
8 steps: 8 steps:
9 - 9 - name: Checkout
10 name: Checkout
11 uses: actions/checkout@v2 10 uses: actions/checkout@v2
12 - 11 - name: Set up Docker
13 name: Set up Docker
14 uses: docker/setup-buildx-action@v1 12 uses: docker/setup-buildx-action@v1
15 - 13 - name: Login to DockerHub
16 name: Login to DockerHub
17 uses: docker/login-action@v1 14 uses: docker/login-action@v1
18 with: 15 with:
19 username: ${{ secrets.DOCKERHUB_USERNAME }} 16 username: ${{ secrets.DOCKERHUB_USERNAME }}
20 password: ${{ secrets.DOCKERHUB_TOKEN }} 17 password: ${{ secrets.DOCKERHUB_TOKEN }}
21 - 18 - name: Build and publish
22 name: Build and publish
23 run: make build publish 19 run: make build publish
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
index 5a2ee16..65cffee 100644
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@@ -4,12 +4,9 @@ jobs:
4 build: 4 build:
5 runs-on: ubuntu-latest 5 runs-on: ubuntu-latest
6 steps: 6 steps:
7 - 7 - name: Checkout
8 name: Checkout
9 uses: actions/checkout@v2 8 uses: actions/checkout@v2
10 - 9 - name: Set up Docker
11 name: Set up Docker
12 uses: docker/setup-buildx-action@v1 10 uses: docker/setup-buildx-action@v1
13 - 11 - name: Build
14 name: Build
15 run: make build 12 run: make build
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..0dbf448
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,5 @@
1{
2 "trailingComma": "es5",
3 "semi": true,
4 "singleQuote": true
5}
diff --git a/Dockerfile b/Dockerfile
index 5a5f92f..7d640ca 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,6 +3,7 @@ FROM mhart/alpine-node:14 as builder
3WORKDIR /tmp 3WORKDIR /tmp
4COPY . . 4COPY . .
5 5
6RUN npx prettier --check . '!**/*.min.{css,js}'
6RUN yarn && yarn build 7RUN yarn && yarn build
7 8
8### 9###
diff --git a/README.md b/README.md
index 0df9331..40120d8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
1![ci](https://github.com/bndw/wifi-card/workflows/ci/badge.svg) 1![ci](https://github.com/bndw/wifi-card/workflows/ci/badge.svg)
2 2
3# πŸ“Ά WiFi Card 3# πŸ“Ά WiFi Card
4 4
5Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc. 5Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc.
6 6
diff --git a/package.json b/package.json
index 27a0c47..af43a10 100644
--- a/package.json
+++ b/package.json
@@ -35,5 +35,8 @@
35 "main": "index.js", 35 "main": "index.js",
36 "repository": "git@github.com:bndw/wifi-card.git", 36 "repository": "git@github.com:bndw/wifi-card.git",
37 "author": "bndw <ben@bdw.to>", 37 "author": "bndw <ben@bdw.to>",
38 "license": "MIT" 38 "license": "MIT",
39 "devDependencies": {
40 "prettier": "2.3.2"
41 }
39} 42}
diff --git a/public/index.html b/public/index.html
index 6685a59..52cbc44 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,10 +4,7 @@
4 <meta charset="utf-8" /> 4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <meta name="theme-color" content="#000000" /> 6 <meta name="theme-color" content="#000000" />
7 <meta 7 <meta name="description" content="Print a card for your WiFi login" />
8 name="description"
9 content="Print a card for your WiFi login"
10 />
11 <!-- 8 <!--
12 manifest.json provides metadata used when your web app is installed on a 9 manifest.json provides metadata used when your web app is installed on a
13 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 10 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -25,7 +22,10 @@
25 <title>πŸ“‘ WiFi Card</title> 22 <title>πŸ“‘ WiFi Card</title>
26 </head> 23 </head>
27 <body> 24 <body>
28 <noscript>You need to enable JavaScript to run this app. Feel free to view the <a href="https://github.com/bndw/wifi-card">source code</a>.</noscript> 25 <noscript
26 >You need to enable JavaScript to run this app. Feel free to view the
27 <a href="https://github.com/bndw/wifi-card">source code</a>.</noscript
28 >
29 <div id="root"></div> 29 <div id="root"></div>
30 <!-- 30 <!--
31 This HTML file is a template. 31 This HTML file is a template.
diff --git a/src/App.js b/src/App.js
index ef4859c..0895668 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,29 @@
1import React from 'react'; 1import React from 'react';
2import Card from './components/Card'; 2import { Card } from './components/Card';
3import './style.css'; 3import './style.css';
4 4
5function App() { 5function App() {
6 return ( 6 return (
7 <div className="App"> 7 <div className="App">
8 8 <h1>
9 <h1><span role="img" aria-label="antenna-bars">πŸ“Ά</span>&nbsp; WiFi Card</h1> 9 <span role="img" aria-label="antenna-bars">
10 πŸ“Ά
11 </span>
12 &nbsp; WiFi Card
13 </h1>
10 14
11 <p className="tag"> 15 <p className="tag">
12 Print a simple card with your WiFi login details. Tape it to the fridge, keep it in your wallet, etc. 16 Print a simple card with your WiFi login details. Tape it to the fridge,
17 keep it in your wallet, etc.
13 </p> 18 </p>
14 19
15 <p className="tag"> 20 <p className="tag">
16 Your WiFi information is never sent to the server. 21 Your WiFi information is never sent to the server. No tracking,
17 No tracking, analytics, or fingerprinting are used on this website. 22 analytics, or fingerprinting are used on this website. View the{' '}
18 View the <a href="https://github.com/bndw/wifi-card">source code</a>. 23 <a href="https://github.com/bndw/wifi-card">source code</a>.
19 </p> 24 </p>
20 25
21 <Card /> 26 <Card />
22
23 </div> 27 </div>
24 ); 28 );
25} 29}
diff --git a/src/components/Card.js b/src/components/Card.js
index 6c2c745..16f94a4 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -2,14 +2,16 @@ import React, { useState, useEffect } from 'react';
2import QRCode from 'qrcode.react'; 2import QRCode from 'qrcode.react';
3import './style.css'; 3import './style.css';
4 4
5const Card = () => { 5export const Card = () => {
6 const [ssid, setSsid] = useState(''); 6 const [network, setNetwork] = useState({
7 const [password, setPassword] = useState(''); 7 ssid: '',
8 password: '',
9 });
8 const [qrvalue, setQrvalue] = useState(''); 10 const [qrvalue, setQrvalue] = useState('');
9 11
10 const escape = (v) => { 12 const escape = (v) => {
11 const needsEscape = ['"', ';', ',', ':', '\\']; 13 const needsEscape = ['"', ';', ',', ':', '\\'];
12 14
13 let escaped = ''; 15 let escaped = '';
14 for (let i = 0; i < v.length; i++) { 16 for (let i = 0; i < v.length; i++) {
15 let c = v[i]; 17 let c = v[i];
@@ -20,14 +22,13 @@ const Card = () => {
20 } 22 }
21 23
22 return escaped; 24 return escaped;
23 } 25 };
24 26
25 useEffect(() => { 27 useEffect(() => {
26 let _ssid = escape(ssid), 28 const ssid = escape(network.ssid);
27 _password = escape(password); 29 const password = escape(network.password);
28 30 setQrvalue(`WIFI:T:WPA;S:${ssid};P:${password};;`);
29 setQrvalue(`WIFI:T:WPA;S:${_ssid};P:${_password};;`); 31 }, [network]);
30 }, [ssid, password]);
31 32
32 return ( 33 return (
33 <div> 34 <div>
@@ -35,26 +36,45 @@ const Card = () => {
35 <legend></legend> 36 <legend></legend>
36 37
37 <h1>WiFi Login</h1> 38 <h1>WiFi Login</h1>
38 <hr/> 39 <hr />
39 40
40 <div className="details"> 41 <div className="details">
41 <QRCode className="qrcode" value={qrvalue} size={175} /> 42 <QRCode className="qrcode" value={qrvalue} size={175} />
42 43
43 <div className="text"> 44 <div className="text">
44 <label>Network name</label> 45 <label>Network name</label>
45 <input id="ssid" type="text" maxLength="32" placeholder="WiFi Network name" value={ssid} onChange={event => setSsid(event.target.value)} /> 46 <input
47 id="ssid"
48 type="text"
49 maxLength="32"
50 placeholder="WiFi Network name"
51 value={network.ssid}
52 onChange={(e) => setNetwork({ ...network, ssid: e.target.value })}
53 />
46 <label>Password</label> 54 <label>Password</label>
47 <input id="password" type="text" maxLength="63" placeholder="Password" value={password} onChange={event => setPassword(event.target.value)} /> 55 <input
56 id="password"
57 type="text"
58 maxLength="63"
59 placeholder="Password"
60 value={network.password}
61 onChange={(e) =>
62 setNetwork({ ...network, password: e.target.value })
63 }
64 />
48 </div> 65 </div>
49 </div> 66 </div>
50 67
51 <p><span role="img" aria-label="mobile-phone">πŸ“ΈπŸ“±</span>Point your phone's camera at the QR Code to connect automatically</p> 68 <p>
69 <span role="img" aria-label="mobile-phone">
70 πŸ“ΈπŸ“±
71 </span>
72 Point your phone's camera at the QR Code to connect automatically
73 </p>
52 </fieldset> 74 </fieldset>
53 <div className="print-btn"> 75 <div className="print-btn">
54 <button onClick={window.print}>Print</button> 76 <button onClick={window.print}>Print</button>
55 </div> 77 </div>
56 </div> 78 </div>
57 ) 79 );
58} 80};
59
60export default Card;
diff --git a/src/components/style.css b/src/components/style.css
index 0f98052..d1440e2 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -8,7 +8,7 @@
8 display: flex; 8 display: flex;
9 padding: 1em; 9 padding: 1em;
10} 10}
11.details .text{ 11.details .text {
12 margin: 0; 12 margin: 0;
13} 13}
14.details .text * { 14.details .text * {
@@ -36,7 +36,8 @@
36 body * { 36 body * {
37 visibility: hidden; 37 visibility: hidden;
38 } 38 }
39 #print-area, #print-area * { 39 #print-area,
40 #print-area * {
40 visibility: visible; 41 visibility: visible;
41 } 42 }
42 #print-area input { 43 #print-area input {
diff --git a/yarn.lock b/yarn.lock
index f325f8d..1b746e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8811,6 +8811,11 @@ prepend-http@^1.0.0:
8811 resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" 8811 resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
8812 integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= 8812 integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
8813 8813
8814prettier@2.3.2:
8815 version "2.3.2"
8816 resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
8817 integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
8818
8814pretty-bytes@^5.3.0: 8819pretty-bytes@^5.3.0:
8815 version "5.6.0" 8820 version "5.6.0"
8816 resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" 8821 resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-19 10:10:19 +0000