├── .DS_Store
├── signup-1
├── .DS_Store
├── bbblurry.svg
├── main.js
├── index.html
├── show.svg
├── hide.svg
└── styles.css
├── signup-2
├── .DS_Store
├── bbblurry.svg
├── index.html
├── show.svg
├── main.js
├── hide.svg
└── styles.css
├── signup-3
├── .DS_Store
├── main.js
├── styles.css
├── index.html
├── 3.svg
├── 2.svg
└── 1.svg
├── README.md
└── signup-4
├── main.js
├── show.svg
├── index.html
├── hide.svg
├── styles.css
└── logo.svg
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/es6-signups/HEAD/.DS_Store
--------------------------------------------------------------------------------
/signup-1/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/es6-signups/HEAD/signup-1/.DS_Store
--------------------------------------------------------------------------------
/signup-2/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/es6-signups/HEAD/signup-2/.DS_Store
--------------------------------------------------------------------------------
/signup-3/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-joe/es6-signups/HEAD/signup-3/.DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ES6-Logins
2 |
3 | Assortment of login forms, showcasing various techniques with ES6
4 |
5 | ### Examples
6 |
7 | - /login-1 - Password Visibility Button
8 |
9 | ### Usage
10 |
11 | To run the project:
12 |
13 | 1. Open each example folder (separately from main project)
14 | 2. Install VS Code LiveServer Plugin
15 | 3. Smash the "Go Live" button
16 |
17 | ### Support
18 |
19 | Hit me up on [Instagram](https://instagram.com/frontendjoe/) if you need any support :)
20 |
--------------------------------------------------------------------------------
/signup-4/main.js:
--------------------------------------------------------------------------------
1 | const setCaret = (el) => {
2 | if (!el) return;
3 |
4 | try {
5 | const range = document.createRange();
6 | const sel = window.getSelection();
7 |
8 | range.setStart(el.childNodes[0], el.innerText.length);
9 | range.collapse(true);
10 |
11 | sel.removeAllRanges();
12 | sel.addRange(range);
13 | } catch (err) {
14 | console.log("Error Setting Caret: ", err);
15 | }
16 | };
17 |
18 | const togglePassword = (button) => {
19 | button.classList.toggle("showing");
20 | const input = document.getElementById("password");
21 | input.type = input.type === "password" ? "text" : "password";
22 | input.focus();
23 | setCaret(input);
24 | };
25 |
--------------------------------------------------------------------------------
/signup-3/main.js:
--------------------------------------------------------------------------------
1 | const swiper = new Swiper(".swiper", {
2 | // Optional parameters
3 | speed: 500,
4 | allowTouchMove: false,
5 | });
6 |
7 | const gotoSlide = (index) => {
8 | swiper.slideTo(index);
9 | };
10 |
11 | const restart = () => {
12 | const inputs = document.querySelectorAll("input");
13 | const buttons = document.querySelectorAll("button[type=button]");
14 |
15 | buttons.forEach((button) => {
16 | button.disabled = true;
17 | });
18 |
19 | inputs.forEach((input) => {
20 | input.value = "";
21 | });
22 |
23 | gotoSlide(0);
24 | };
25 |
26 | const checkValid = (event) => {
27 | event.target.nextElementSibling.disabled = !event.target.value.length;
28 | };
29 |
--------------------------------------------------------------------------------
/signup-1/bbblurry.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/signup-2/bbblurry.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/signup-1/main.js:
--------------------------------------------------------------------------------
1 | const usernames = ["david", "david1", "david2"];
2 |
3 | const spinner = document.getElementById("spinner"),
4 | alert = document.getElementById("alert");
5 |
6 | const updateUi = (value) => {
7 | console.log("value", value);
8 | spinner.classList.remove("visible");
9 |
10 | const usernameExists = usernames.some((u) => u === value);
11 |
12 | console.log("usernames", usernames);
13 | console.log("usernameExists", usernameExists);
14 |
15 | if (usernameExists) {
16 | alert.classList.add("visible");
17 | } else {
18 | alert.classList.remove("visible");
19 | }
20 | };
21 |
22 | const debounce = (callback, time) => {
23 | let interval;
24 | return (...args) => {
25 | clearTimeout(interval);
26 | interval = setTimeout(() => {
27 | callback.apply(null, args);
28 | }, time);
29 | };
30 | };
31 |
32 | const handleStartTyping = () => {
33 | spinner.classList.add("visible");
34 | };
35 |
36 | const handleChange = debounce((input) => {
37 | const { value } = input.target;
38 |
39 | updateUi(value);
40 | }, 500);
41 |
--------------------------------------------------------------------------------
/signup-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Login 1
5 |
6 |
7 |
8 |
9 |
12 |
Login
13 |
Enter your credentials
14 |
36 |
9 |
12 |
Sign Up
13 |
Enter your credentials
14 |
40 |
15 |
16 |
Sign Up
17 |
41 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
Welcome
24 |
Let's create your username
25 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
Security
38 |
Enter a strong password
39 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
Finish
51 |
You're all good to go
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |