-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
34 lines (28 loc) · 1.28 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import "./style.css";
import { handleFormSubmit } from "./utilities.js";
document.querySelector("#app").innerHTML = `
<div class="page-container">
<sl-alert id="alert" variant="primary" duration="6000" closable>
<sl-icon slot="icon" name="info-circle"></sl-icon>
</sl-alert>
<section>
<img src="/Flanders_Badge_01.png" alt="Flanders Logo" class="logo" />
<h1>Welcome Back!</h1>
</section>
<form id="form" class="validity-styles form-container">
<sl-input id="email" type="email" id="email" name="email" label="Email" required>
<sl-icon name="at" slot="suffix"></sl-icon>
</sl-input>
<sl-input type="password" id="password" name="password" label="Password" password-toggle minlength="8" maxlength="127"required> </sl-input>
<sl-button id="submitBtn" type="submit" variant="primary">Login</sl-button>
</form>
<sl-button id="autofillBtn">Autofill Valid Credentials</sl-button>
</div>
`;
const form = document.querySelector(".form-container");
form.addEventListener("submit", handleFormSubmit);
const autofillBtn = document.querySelector("#autofillBtn");
autofillBtn.addEventListener("click", () => {
document.querySelector("#email").value = "user@gmail.com";
document.querySelector("#password").value = "oJ6ywJdMK.6-BH";
});