Skip to content

Commit

Permalink
Make password autogeneration option obvious
Browse files Browse the repository at this point in the history 
Re-added the password auto-generation checkbox back to the password
input group (now just called "Auto"). The checkbox is always visible.

To counteract the used space, we now selectively hide the signal (for
SSID) and padlock (for password) icons on mobile (xs breakpoint) so as
to create more space for those text fields.

Also, did a bit more cleanup.
  • Loading branch information
@brunokc
brunokc committed Oct 27, 2023
1 parent be17a36 commit 57f28d9
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 37 deletions.
20 changes: 20 additions & 0 deletions css/connectify.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,3 +124,23 @@
align-items:start;
text-align: start;
} */

/*
We use input-groups with an icon at the start of a text input. That icon
disapears on the sm breakpoint via "d-none d-sm-block". When it does disappear
it is still the first-child of the input-group and that prevents Bootstrap
from applying roundness to the left (start) of the textbox. This class is here
so that it can selectively applying "start-roundness" for the sm breakpoint,
and regular "squareness" when the icon is visible (md breakpoint and above)
*/
.rounded-start-sm {
border-bottom-left-radius: var(--bs-border-radius) !important;
border-top-left-radius: var(--bs-border-radius) !important
}

@media (min-width: 576px) {
.rounded-start-sm {
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important
}
}
67 changes: 30 additions & 37 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>ConnectiFy</title>
<meta name="application-name" content="ConnectiFy">
<meta name="description" content="Wi-Fi connection cards with QR code (LinkCard) generator">
<meta name="author" content="Bruno Kraychete da Costa">
<meta name="keywords" content="wifi, wi-fi, qrcode, nfc, connection, card-generator, link-card, connection-card">
<title>ConnectiFy</title>
<link rel="stylesheet" type="text/css" media="all" href="./css/bootstrap-5.3.2.min.css">

<link rel="stylesheet" href="./css/bootstrap-5.3.2.min.css">
<link rel="stylesheet" href="./css/bootstrap-icons-1.11.1.min.css">
<link rel="stylesheet" type="text/css" media="all" href="./css/connectify.css">
<link rel="stylesheet" type="text/css" media="all" href="./css/forkongithub.css">
<link rel="stylesheet" type="text/css" media="all" href="./css/password-meter.css">
<link rel="stylesheet" type="text/css" media="all" href="./css/advanced-bootstrap-range.css">
<link rel="stylesheet" href="./css/connectify.css">
<link rel="stylesheet" href="./css/forkongithub.css">
<link rel="stylesheet" href="./css/password-meter.css">
<link rel="stylesheet" href="./css/advanced-bootstrap-range.css">
<link rel="shortcut icon" href="./images/connectify-logo.svg" type="image/svg+xml">
<!-- <link rel="manifest" href="manifest.json"> -->
</head>
Expand Down Expand Up @@ -56,9 +57,9 @@ <h1 id="title" class="my-4 d-print-none">ConnectiFy</h1>
<div class="form-group">
<label for="ssid" class="form-label">SSID</label>
<div class="input-group mb-3">
<span id="basic-addon-ssid" class="input-group-text"><i class="bi bi-reception-4"></i></span>
<input type="text" id="ssid" name="ssid" class="form-control" placeholder="SSID"
aria-describedby="basic-addon-ssid" required>
<span class="input-group-text d-none d-sm-block"><i class="bi bi-reception-4"></i></span>
<input type="text" id="ssid" name="ssid" class="form-control rounded-start-sm"
placeholder="SSID" required>
<div class="input-group-text" data-toggle="tooltip" title="Is your network hidden?">
<input class="form-check-input m-auto me-1" type="checkbox" id="hidden">
<label class="form-label m-auto" for="hidden">Hidden</label>
Expand All @@ -71,17 +72,17 @@ <h1 id="title" class="my-4 d-print-none">ConnectiFy</h1>
<div class="input-group">
<select name="encryption" id="encryption" class="form-select">
<option value="WPA">WPA/WPA2/WPA3</option>
<option value="WEP">WEP</option>
<option value="nopass">None</option>
<option value="WEP">WEP (not recommended)</option>
<option value="nopass">None (not recommended)</option>
</select>
</div>
</div>

<div class="form-group mb-3" id="password-p">
<label for="password" class="form-label">Password</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
<input type="password" id="password" name="password" class="form-control font-monospace"
<span class="input-group-text d-none d-sm-block"><i class="bi bi-lock-fill"></i></span>
<input type="password" id="password" class="form-control font-monospace rounded-start-sm"
placeholder="Password" autocomplete="off" aria-describedby="passwordHelp" required>
<!--
<div class="input-group-text" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
Expand All @@ -90,53 +91,50 @@ <h1 id="title" class="my-4 d-print-none">ConnectiFy</h1>
<label class="form-label m-auto" for="autogenpass">Autogenerate</label>
</div>
-->
<button class="btn btn-outline-secondary dropdown-toggle rounded-end d-none d-sm-block"
<!-- <button class="btn btn-outline-secondary dropdown-toggle rounded-end d-none d-sm-block"
type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
Options
</button>
<button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split d-sm-none"
Auto
</button> -->
<div class="input-group-text" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
<input class="form-check-input me-1" type="checkbox" id="autogenpass" checked>
<label class="form-label m-auto" for="autogenpass">Auto</label>
</div>
<button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<div class="dropdown-item" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
<input class="form-check-input me-1" type="checkbox" id="autogenpass" checked>
<label class="form-label" for="autogenpass">Autogenerate</label>
</div>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<div class="dropdown-item ms-3" data-toggle="tooltip" title="Use lowercase characters">
<div class="dropdown-item" data-toggle="tooltip" title="Use lowercase characters">
<input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
id="passUseLowercase" checked>
<label class="form-label" for="passUseLowercase">Use lowercase</label>
</div>
</li>
<li>
<div class="dropdown-item ms-3" data-toggle="tooltip" title="Use uppercase characters">
<div class="dropdown-item" data-toggle="tooltip" title="Use uppercase characters">
<input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
id="passUseUppercase" checked>
<label class="form-label" for="passUseUppercase">Use uppercase</label>
</div>
</li>
<li>
<div class="dropdown-item ms-3" data-toggle="tooltip" title="Use digits">
<div class="dropdown-item" data-toggle="tooltip" title="Use digits">
<input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
id="passUseDigits" checked>
<label class="form-label" for="passUseDigits">Use digits</label>
</div>
</li>
<li>
<div class="dropdown-item ms-3" data-toggle="tooltip" title="Use symbols">
<div class="dropdown-item" data-toggle="tooltip" title="Use symbols">
<input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
id="passUseSymbols" checked>
<label class="form-label" for="passUseSymbols">Use symbols</label>
</div>
</li>
<li>
<div class="dropdown-item ms-3" data-toggle="tooltip" title="Use brackets">
<div class="dropdown-item" data-toggle="tooltip" title="Use brackets">
<input class="form-check-input me-1 pass-auto-gen-control" type="checkbox"
id="passUseBrackets" checked>
<label class="form-label" for="passUseBrackets">Use brackets</label>
Expand All @@ -146,7 +144,6 @@ <h1 id="title" class="my-4 d-print-none">ConnectiFy</h1>
</div>

<div class="form-group">
<!-- <label for="passwordLength" class="form-label">Password Length</label> -->
<input id="passwordLength" type="range" title="Password length"
min="12" max="22" step="1" value="16"
class="form-range range-with-labels range-with-notches pass-auto-gen-control">
Expand All @@ -164,10 +161,6 @@ <h1 id="title" class="my-4 d-print-none">ConnectiFy</h1>
Use 12 or more characters with a mix of letters, numbers & symbols.
</div>
</div>
<!-- <div class="input-group" data-toggle="tooltip" title="Autogenerate Wi-Fi password">
<input class="form-check-input me-1" type="checkbox" id="autogenpass" checked>
<label class="form-label" for="autogenpass">Autogenerate Password</label>
</div> -->
</div>
</div>

Expand Down

0 comments on commit 57f28d9

Please sign in to comment.