Skip to content

Commit

Permalink
add password shower, do some small restructuring
Browse files Browse the repository at this point in the history
  • Loading branch information
@KTibow
KTibow committed Sep 24, 2023
1 parent 77aedec commit ee114e5
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 57 deletions.
127 changes: 80 additions & 47 deletions src/entrypoints/authorize.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { mdiAlertCircle, mdiLock, mdiCheck } from "@mdi/js";
import { mdiAlertCircle, mdiLock, mdiCheck, mdiEye, mdiEyeOff } from "@mdi/js";
import { toASCII } from "punycode";
import { LocalizeFunc, computeLocalize } from "../common/translations/localize";
import { extractSearchParamsObject } from "../common/url/search-params";
import type { AuthProvider } from "../data/auth";
import type { DataEntryFlowStep } from "../data/data_entry_flow";
import "../resources/roboto";
import { getLocalLanguage, getTranslation } from "../util/common-translation";
import type { HaFormSchema } from "../components/ha-form/types";

let localize: LocalizeFunc = () => "";
let localizeLoaded = false;
Expand All @@ -26,13 +27,86 @@ const loadLocalize = async () => {
loadLocalize();

const content = document.getElementById("content")!;

const escape = (text: string) =>
text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
const icon = (path: string, clazz: string) =>
`<svg viewBox="0 0 24 24" focusable="false" role="img" aria-hidden="true" class="${clazz}"><path d="${path}" fill="currentColor"/></svg>`;
const errorRow = (message: string) => `<div class="error">
${icon(mdiAlertCircle, "error")} ${message}
</div>`;
const makeInput = (
item: HaFormSchema,
name: string,
currentFormData: FormData | null
) => {
if (item.type === "string") {
const attributes: Record<string, any> = {
placeholder: name,
name: item.name,
type:
item.name === "password"
? "password"
: item.name === "code"
? "number"
: "text",
autocomplete:
item.name === "username"
? "username"
: item.name === "password"
? "current-password"
: item.name === "code"
? "one-time-code"
: undefined,
required: item.required,
};
if (item.name === "username" && currentFormData) {
attributes.value = currentFormData.get("username") || undefined;
}
if (item.name === "username" || item.name === "password") {
attributes.autocapitalize = "off";
attributes.autocorrect = "off";
}
const attributesStr = Object.entries(attributes)
.filter(([_key, value]) => value)
.map(([key, value]) => `${key}="${value}"`)
.join(" ");

let output = `<input ${attributesStr} /><div class="bar"></div>`;
if (item.name === "password") {
output += `<button type="button" onclick="togglePassword(event)">${icon(
mdiEye,
""
)}</button>`;
}
return `<div class="input-wrapper">${output}</div>`;
} else if (item.type === "select") {

Check failure on line 83 in src/entrypoints/authorize.ts

View workflow job for this annotation

GitHub Actions / Lint and check format 

Unnecessary 'else' after 'return'
const options = item.options.map(
(o) => `<option value="${o[0]}">${o[1]}</option>`
);
return `<div class="input-wrapper">
<select name="${item.name}"${
item.required ? " required" : ""
}>${options.join("")}</select>
<div class="bar"></div>
<span class="name">${name}</span>
</div>`;
}
return undefined;
};

window["togglePassword"] = (

Check failure on line 98 in src/entrypoints/authorize.ts

View workflow job for this annotation

GitHub Actions / Lint and check format 

["togglePassword"] is better written in dot notation
e: MouseEvent & { currentTarget: HTMLButtonElement }
) => {
const input = e.currentTarget.parentElement!.firstChild as HTMLInputElement;
if (input.type === "password") {
input.type = "text";
e.currentTarget.innerHTML = icon(mdiEyeOff, "");
} else {
input.type = "password";
e.currentTarget.innerHTML = icon(mdiEye, "");
}
};
const showError = (error: string) => {
content.innerHTML = `
${icon(mdiAlertCircle, "error")}
Expand Down Expand Up @@ -155,9 +229,6 @@ const intro = async () => {
let storeToken = true;

const updateContainer = () => {
const currentForm = document.querySelector("form");
const currentFormData = currentForm && new FormData(currentForm);

let contents = "";

if (mode.name === "app")
Expand All @@ -170,6 +241,8 @@ const intro = async () => {
})}</p>`;

if (step?.type === "form") {
const currentForm = document.querySelector("form");
const currentFormData = currentForm && new FormData(currentForm);
if (step.errors?.base) {
const error = localize(
`ui.panel.page-authorize.form.providers.${authProvider.type}.error.${step.errors.base}`
Expand All @@ -180,49 +253,9 @@ const intro = async () => {
const name = localize(
`ui.panel.page-authorize.form.providers.${authProvider.type}.step.${step.step_id}.data.${item.name}`
);
if (item.type === "string") {
const attributes: Record<string, any> = {
placeholder: name,
name: item.name,
type:
item.name === "password"
? "password"
: item.name === "code"
? "number"
: "text",
autocomplete:
item.name === "username"
? "username"
: item.name === "password"
? "current-password"
: item.name === "code"
? "one-time-code"
: undefined,
required: item.required,
};
if (item.name === "username") {
if (currentFormData)
attributes.value = currentFormData.get("username") || undefined;
attributes.autocapitalize = "off";
attributes.autocorrect = "off";
}
const attributesStr = Object.entries(attributes)
.filter(([_key, value]) => value)
.map(([key, value]) => `${key}="${value}"`)
.join(" ");
contents += `<div class="input-wrapper"><input ${attributesStr} /><div class="bar"></div></div>`;
} else if (item.type === "select") {
const options = item.options.map(
(o) => `<option value="${o[0]}">${o[1]}</option>`
);
contents += `<div class="input-wrapper">
<select name="${item.name}"${
item.required ? " required" : ""
}>${options.join("")}</select>
<div class="bar"></div>
<span class="name">${name}</span>
</div>`;
}
const result = makeInput(item, name, currentFormData);
console.log("adding", result);

Check failure on line 257 in src/entrypoints/authorize.ts

View workflow job for this annotation

GitHub Actions / Lint and check format 

Unexpected console statement
if (result) contents += result;
}
if (
step.step_id !== "select_mfa_module" &&
Expand Down
38 changes: 28 additions & 10 deletions src/html/authorize.html.template
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
}
input::placeholder {
color: inherit;
opacity: var(--text-opacity);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
Expand All @@ -91,6 +92,10 @@
input[type=number] {
appearance: textfield;
}
input:focus-visible + .bar, select:focus-visible + .bar {
background-color: var(--primary-color);
height: 4px;
}
.bar {
position: absolute;
background-color: var(--bar-color);
Expand All @@ -100,13 +105,27 @@
pointer-events: none;
transition: all 200ms;
}
.input-wrapper > button {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
opacity: var(--text-opacity);

width: 40px;
height: 40px;
top: 4px;
right: 4px;
padding: 0;
border-radius: 20px;
background-color: transparent;
}
.input-wrapper > button:hover {
background-color: inherit;
}
input:is([type=text], [type=number], [type=password]):focus-visible, select:focus-visible {
outline: none;
}
input:focus-visible + .bar, select:focus-visible + .bar {
background-color: var(--primary-color);
height: 4px;
}
label {
display: flex;
align-items: center;
Expand All @@ -129,6 +148,7 @@
left: 16px;
top: 6px;
font-size: 12px;
opacity: var(--text-opacity);
pointer-events: none;
}
@supports (moz-appearance: none) {
Expand All @@ -153,6 +173,8 @@
border: none;
cursor: pointer;
white-space: nowrap;
}
.buttons > button {
height: 40px;
border-radius: 20px;
}
Expand Down Expand Up @@ -199,9 +221,7 @@
.input-wrapper {
background-color: rgb(0, 0, 0, 0.08);
--bar-color: rgb(0, 0, 0, 0.4);
}
input::placeholder, .name {
opacity: 0.8;
--text-opacity: 0.8;
}
@media (prefers-color-scheme: dark) {
html {
Expand All @@ -219,9 +239,7 @@
.input-wrapper {
background-color: rgb(255, 255, 255, 0.05);
--bar-color: rgb(255, 255, 255, 0.4);
}
input::placeholder, .name {
opacity: 0.6;
--text-opacity: 0.6;
}
}
</style>
Expand Down

0 comments on commit ee114e5

Please sign in to comment.