add login view password, make sure it checks if your logged in, vscode recommends exts
This commit is contained in:
parent
b40c1db189
commit
7ddd7fa7a1
5 changed files with 65 additions and 3 deletions
9
.vscode/extensions.json
vendored
Normal file
9
.vscode/extensions.json
vendored
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"mikestead.dotenv",
|
||||||
|
"EditorConfig.EditorConfig",
|
||||||
|
"leonzalion.vscode-ejs",
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"stylelint.vscode-stylelint"
|
||||||
|
]
|
||||||
|
}
|
|
@ -116,6 +116,37 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.password-group {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password-wrapper input {
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-password {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
fill: var(--text-secondary);
|
||||||
|
transition: fill 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-password:hover {
|
||||||
|
fill: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
color: var(--error);
|
color: var(--error);
|
||||||
background-color: rgb(237 66 69 / 10%);
|
background-color: rgb(237 66 69 / 10%);
|
||||||
|
|
|
@ -35,3 +35,18 @@ if (loginForm) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const passwordInput = document.getElementById("password");
|
||||||
|
const togglePassword = document.getElementById("toggle-password");
|
||||||
|
|
||||||
|
togglePassword.addEventListener("click", () => {
|
||||||
|
if (passwordInput.type === "password") {
|
||||||
|
passwordInput.type = "text";
|
||||||
|
togglePassword.innerHTML =
|
||||||
|
'<path d="M12 4.5c-5 0-9.27 3.11-11 7.5 1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 13c-3.03 0-5.5-2.47-5.5-5.5s2.47-5.5 5.5-5.5 5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5z"/>';
|
||||||
|
} else {
|
||||||
|
passwordInput.type = "password";
|
||||||
|
togglePassword.innerHTML =
|
||||||
|
'<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 13c-3.03 0-5.5-2.47-5.5-5.5s2.47-5.5 5.5-5.5 5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5zm0-9a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"/>';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
|
@ -7,7 +7,9 @@ const routeDef: RouteDef = {
|
||||||
returns: "text/html",
|
returns: "text/html",
|
||||||
};
|
};
|
||||||
|
|
||||||
async function handler(): Promise<Response> {
|
async function handler(request: ExtendedRequest): Promise<Response> {
|
||||||
|
if (request.session) return Response.redirect("/");
|
||||||
|
|
||||||
const instanceName: string =
|
const instanceName: string =
|
||||||
(await getSetting("instance_name")) || "Unnamed Instance";
|
(await getSetting("instance_name")) || "Unnamed Instance";
|
||||||
|
|
||||||
|
|
|
@ -30,9 +30,14 @@
|
||||||
<input type="email" name="email" id="email" required placeholder="Enter your email">
|
<input type="email" name="email" id="email" required placeholder="Enter your email">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group password-group">
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
|
<div class="password-wrapper">
|
||||||
<input type="password" name="password" id="password" required placeholder="Enter your password">
|
<input type="password" name="password" id="password" required placeholder="Enter your password">
|
||||||
|
<svg id="toggle-password" class="toggle-password" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 13c-3.03 0-5.5-2.47-5.5-5.5s2.47-5.5 5.5-5.5 5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5zm0-9a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-footer">
|
<div class="form-footer">
|
||||||
|
|
Loading…
Add table
Reference in a new issue