Password Reset

Developer
Josh Vogt
Size
3,172 Kb
Views
14,168
  1. Password Reset Previews
  2. Password Reset HTML Codes
  3. Password Reset CSS Codes
  4. Password Reset JS Codes

How do I make an password reset?

Password reset with confirm input field and show password check.. What is a password reset? How do you make a password reset? This script and codes were developed by Josh Vogt on 06 December 2022, Tuesday.

Password Reset Previews
IQ Test

Password Reset - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Password Reset</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="password confirm"> <h2>Reset Password</h2> <form> <fieldset> <p> <label> Password: <input type="password" class="js-pass-one js-show-pass" /> </label> </p> <p> <label> Confirm Password: <span class="val hidden">Your passwords don't match</span> <input type="password" class="js-pass-two js-show-pass"/> </label> </p> <p class="show-password"> <label > <input class="show-check" type="checkbox" /> Show Password </label> </p> <button class="btn confirm-pass">Change Password</button> </fieldset> </form>
</div> <script src="js/index.js"></script>
</body>
</html>

Password Reset - Script Codes CSS Codes

* { box-sizing: border-box; font-family: sans-serif; position: relative;
}
html,
body { margin: 0; padding: 0; width: 100%; height: 100%;
}
fieldset { border: none; padding: 0; margin: 0;
}
.password { margin: 20px; width: 50vw; border: 1px solid #ccc; padding: 0 20px 20px 20px; float: left;
}
label { font-weight: 600; font-size: 0.875rem; curor: pointer;
}
.val { font-weight: 500; display: inline-block; clear: both; color: red;
}
.error { border-color: red;
}
.hidden { display: none;
}
input { margin-top: 5px; display: block; height: 30px; border-radius: 3px; padding: 0 5px; border: 1px solid #ccc; width: 100%;
}
.show p { margin: 0;
}
p.show-password { margin-bottom: 20px;
}
p.show-password label { display: inline-block; font-weight: 400; font-size: .8125rem; line-height: 24px;
}
p.show-password label input { height: 1rem; padding: 0; maargin: 0; display: inline-block; width: auto;
}
.btn { background: #000; border: none; height: 30px; width: 100%; border-radius: 3px; color: #fff; font-weight: 600; cursor: pointer;
}

Password Reset - Script Codes JS Codes

'use strict';
class passwordReset { constructor () { this.confirmEl = document.querySelector('.confirm-pass'); this.showEl = document.querySelector('.show-btn'); this.error = document.querySelector('.val'); this.showCheck = document.querySelector('.show-check'); this.passwordEl = document.querySelectorAll('.js-show-pass'); this.passOne = document.querySelector('.js-pass-one'); this.passTwo = document.querySelector('.js-pass-two'); this.showPassword = this.showPassword.bind(this); this.confirmPassword = this.confirmPassword.bind(this); this.addEventListeners(); } addEventListeners () { this.showCheck.addEventListener('change', this.showPassword); this.confirmEl.addEventListener('click', this.confirmPassword); } showPassword () { if(this.showCheck.checked){ this.passwordEl.forEach(function(element) { element.setAttribute('type','text'); }); } else{ this.passwordEl.forEach(function(element) { element.setAttribute('type','password'); }); } } confirmPassword (evt) { evt.preventDefault(); var first = this.passOne.value; var second = this.passTwo.value; if(first == second){ this.error.classList.add('hidden'); this.passOne.classList.remove('error'); this.passTwo.classList.remove('error'); } else{ this.error.classList.remove('hidden'); this.passOne.classList.add('error'); this.passTwo.classList.add('error'); } }
}
new passwordReset();
Password Reset - Script Codes
Password Reset - Script Codes
Home Page Home
Developer Josh Vogt
Username josh_vogt
Uploaded December 06, 2022
Rating 3
Size 3,172 Kb
Views 14,168
Do you need developer help for Password Reset?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josh Vogt (josh_vogt) Script Codes
Name
Header - search v3
Items sliding out of list
A Pen by Josh Vogt
Animating Flexbox Properties
Toggle - Slider
Hidden Panel
Making links into checkboxes
Header - search v1
SMPTE Test Pattern - Flexbox
CSS modals and sheets animations
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!