분류
javascript
보안이 강화된 비밀번호를 입력 받으려면?
본문
https://codepen.io/allusis/pen/HcriG
//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
https://fonts.googleapis.com/css?family=Roboto:400,100
HTML :
<div id="container">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="middle">
<div id="form-container">
<div id="all-done">All done</div>
<form id="verify-new-password">
<label for="verify-password">Verify your password</label>
<input placeholder="Enter your password again" type="password" id="verify-password" name="password-to-verify">
<ul>
<li id="matches-password">Matches new password.</li>
</ul>
<input type="submit" id="verify-password-submit" value="Confirm password" disabled="disabled">
<button id="go-back">Go back</button>
</form>
<form id="new-password" class="visible">
<label for="password">Choose a new password</label>
<input placeholder="Enter your password" type="password" id="password" name="password">
<input type="submit" id="password-submit" value="Next">
<br class="clear" />
<ul>
<li id="eight-plus" class="complete">At least 8 characters long.</li>
<li id="uppercase" class="complete">Contains uppercase letters.</li>
<li id="lowercase" class="complete">Contains lowercase letters.</li>
<li id="numbers" class="complete">Contains numbers.</li>
<li id="punctuation" class="complete">Contains punctuation.</li>
</ul>
</form>
</div>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>CSS :
.clear {
clear: both;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
background: #0083ad;
height: 100%;
overflow: hidden;
font-family: 'Roboto', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-smooth: always;
}
#password {
font-size: 1.4rem;
font-weight: 100;
}
#all-done {
pointer-events: none;
text-indent: -10000px;
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: -moz-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
-ms-transition: -ms-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: -o-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
#all-done:after {
content: 'All done!';
font-weight: 100;
font-size: 40px;
color: rgba(255, 255, 255, 0.7);
text-align: center;
width: 100%;
display: block;
position: absolute;
left: 0;
top: 55%;
text-indent: 0;
}
#all-done:after {
content: 'All done!';
font-weight: 100;
font-size: 40px;
color: rgba(255, 255, 255, 0.7);
text-align: center;
width: 100%;
display: block;
position: absolute;
left: 0;
top: 55%;
text-indent: 0;
}
#all-done.visible {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
#container {
width: 100%;
height: 100%;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
.middle {
width: 100%;
height: 100%;
}
#form-container {
width: 100%;
height: 100%;
position: relative;
}
form {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: -moz-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
-ms-transition: -ms-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: -o-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
transition: transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
form.visible {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
form.done {
pointer-events: none;
opacity: 0;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}
label {
display: block;
font-weight: 100;
font-size: 3rem;
color: #fff;
text-shadow: 0px 1px 1px #00A9E0;
position: relative;
}
label:after {
content: '';
border-bottom: 0;
width: 100%;
height: 1px;
position: absolute;
bottom: -2px;
left: 0;
}
input[type="password"] {
height: 38px;
line-height: 38px;
border-radius: 0;
border: 1px solid #CACACA;
background: #FFFFFF;
font-family: Helvetica;
font-size: 18px;
color: #000;
width: 70%;
float: left;
padding: 0 3% 0 3%;
margin: 6.5% 0 0 0;
}
input[type="submit"] {
display: block;
float: left;
margin: 6.5% 0 0 3%;
background-image: linear-gradient(-179deg, #98C73D 0%, #98C73D 100%);
border: 3px solid #98C73D;
box-shadow: 0 0 0 3px #D0DD2B;
padding: 0 15px;
height: 38px;
font-size: 16px;
color: white;
text-transform: uppercase;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
font-weight: 400;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
-ms-transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
}
input[type="submit"][disabled] {
border: 3px solid rgba(255, 255, 255, 0.3);
box-shadow: none;
text-shadow: none;
color: rgba(255, 255, 255, 0.3);
text-transform: uppercase;
background-image: none;
background: transparent;
}
input[type=password] {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
input[type=password]:focus {
box-shadow: 0 0 0 3px #D0DD2B;
border: 1px solid transparent;
}
ul {
padding: 0;
margin: 3em 0 0 0;
list-style: none;
}
li {
color: rgba(255, 255, 255, 0.5);
font-size: 1.7rem;
height: 20px;
line-height: 20px;
margin: 0 0 0.8em 0;
padding: 0 0 0 40px;
/*background: url(tick-grey.svg) 10px 1px no-repeat;*/
position: relative;
-webkit-transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
-moz-transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
-ms-transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
-o-transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
-webkit-backface-visibility: visible;
}
li:before {
opacity: 1;
text-shadow: none;
content: "\e013";
position: absolute;
left: -25px;
width: 20px;
height: 20px;
/*background: url(tick-green.svg) 0 1px no-repeat;*/
position: relative;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
color: #006f94;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: -webkit-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
-moz-transition: -moz-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
-ms-transition: -ms-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
-o-transition: -o-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
transition: transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
-webkit-backface-visibility: hidden;
}
li.complete {
color: white;
}
li.complete:before {
opacity: 1;
color: #D0DD2B;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-ms-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
}
#go-back {
border: none;
background: none;
font-size: 13px;
color: #808080;
line-height: 13px;
text-shadow: 0px 1px 1px #FFFFFF;
float: right;
padding: 0 0 3px 0;
margin: 40px 5% 0 0;
border-bottom: 1px solid #808080;
cursor: pointer;
}
@media (min-width: 360px) {
form {
border-radius: 4px;
}
label {
border-radius: 4px 4px 0 0;
}
#container {
width: 100%;
height: 100%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.top, .left, .right, .bottom {
flex: 1 1 auto;
}
.middle {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
flex: 0 0 auto;
width: auto;
height: auto;
}
#form-container {
width: 330px;
height: 385px;
position: relative;
}
form {
position: absolute;
left: 0;
top: 0;
}
form#verify-new-password {
height: 72%;
top: 14%;
}
}
@-webkit-keyframes back {
0% {
-webkit-transform: scale(1) rotateY(180deg);
}
10% {
-webkit-transform: scale(1.000768) rotateY(180deg);
}
20% {
-webkit-transform: scale(1.024576) rotateY(180deg);
}
30% {
-webkit-transform: scale(1.125424) rotateY(180.1713571726deg);
}
40% {
-webkit-transform: scale(1.149232) rotateY(185.4834295234deg);
}
50% {
-webkit-transform: scale(1.15) rotateY(221.6397929434deg);
}
60% {
-webkit-transform: scale(1.149232) rotateY(318.3602070566deg);
}
70% {
-webkit-transform: scale(1.125424) rotateY(354.5165704766deg);
}
80% {
-webkit-transform: scale(1.024576) rotateY(359.8286428274deg);
}
90% {
-webkit-transform: scale(1.000768) rotateY(360deg);
}
100% {
-webkit-transform: scale(1) rotateY(360deg);
}
}
@-moz-keyframes back {
0% {
-moz-transform: scale(1) rotateY(180deg);
}
10% {
-moz-transform: scale(1.000768) rotateY(180deg);
}
20% {
-moz-transform: scale(1.024576) rotateY(180deg);
}
30% {
-moz-transform: scale(1.125424) rotateY(180.1713571726deg);
}
40% {
-moz-transform: scale(1.149232) rotateY(185.4834295234deg);
}
50% {
-moz-transform: scale(1.15) rotateY(221.6397929434deg);
}
60% {
-moz-transform: scale(1.149232) rotateY(318.3602070566deg);
}
70% {
-moz-transform: scale(1.125424) rotateY(354.5165704766deg);
}
80% {
-moz-transform: scale(1.024576) rotateY(359.8286428274deg);
}
90% {
-moz-transform: scale(1.000768) rotateY(360deg);
}
100% {
-moz-transform: scale(1) rotateY(360deg);
}
}
@-ms-keyframes back {
0% {
-ms-transform: scale(1) rotateY(180deg);
}
10% {
-ms-transform: scale(1.000768) rotateY(180deg);
}
20% {
-ms-transform: scale(1.024576) rotateY(180deg);
}
30% {
-ms-transform: scale(1.125424) rotateY(180.1713571726deg);
}
40% {
-ms-transform: scale(1.149232) rotateY(185.4834295234deg);
}
50% {
-ms-transform: scale(1.15) rotateY(221.6397929434deg);
}
60% {
-ms-transform: scale(1.149232) rotateY(318.3602070566deg);
}
70% {
-ms-transform: scale(1.125424) rotateY(354.5165704766deg);
}
80% {
-ms-transform: scale(1.024576) rotateY(359.8286428274deg);
}
90% {
-ms-transform: scale(1.000768) rotateY(360deg);
}
100% {
-ms-transform: scale(1) rotateY(360deg);
}
}
@-o-keyframes back {
0% {
-o-transform: scale(1) rotateY(180deg);
}
10% {
-o-transform: scale(1.000768) rotateY(180deg);
}
20% {
-o-transform: scale(1.024576) rotateY(180deg);
}
30% {
-o-transform: scale(1.125424) rotateY(180.1713571726deg);
}
40% {
-o-transform: scale(1.149232) rotateY(185.4834295234deg);
}
50% {
-o-transform: scale(1.15) rotateY(221.6397929434deg);
}
60% {
-o-transform: scale(1.149232) rotateY(318.3602070566deg);
}
70% {
-o-transform: scale(1.125424) rotateY(354.5165704766deg);
}
80% {
-o-transform: scale(1.024576) rotateY(359.8286428274deg);
}
90% {
-o-transform: scale(1.000768) rotateY(360deg);
}
100% {
-o-transform: scale(1) rotateY(360deg);
}
}
@keyframes back {
0% {
transform: scale(1) rotateY(180deg);
}
10% {
transform: scale(1.000768) rotateY(180deg);
}
20% {
transform: scale(1.024576) rotateY(180deg);
}
30% {
transform: scale(1.125424) rotateY(180.1713571726deg);
}
40% {
transform: scale(1.149232) rotateY(185.4834295234deg);
}
50% {
transform: scale(1.15) rotateY(221.6397929434deg);
}
60% {
transform: scale(1.149232) rotateY(318.3602070566deg);
}
70% {
transform: scale(1.125424) rotateY(354.5165704766deg);
}
80% {
transform: scale(1.024576) rotateY(359.8286428274deg);
}
90% {
transform: scale(1.000768) rotateY(360deg);
}
100% {
transform: scale(1) rotateY(360deg);
}
}
@-webkit-keyframes front {
0% {
-webkit-transform: scale(1) rotateY(0deg);
}
10% {
-webkit-transform: scale(1.000768) rotateY(0deg);
}
20% {
-webkit-transform: scale(1.024576) rotateY(0deg);
}
30% {
-webkit-transform: scale(1.125424) rotateY(0.1713571726deg);
}
40% {
-webkit-transform: scale(1.149232) rotateY(5.4834295234deg);
}
50% {
-webkit-transform: scale(1.15) rotateY(41.6397929434deg);
}
60% {
-webkit-transform: scale(1.149232) rotateY(138.3602070566deg);
}
70% {
-webkit-transform: scale(1.125424) rotateY(174.5165704766deg);
}
80% {
-webkit-transform: scale(1.024576) rotateY(179.8286428274deg);
}
90% {
-webkit-transform: scale(1.000768) rotateY(180deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
}
}
@-moz-keyframes front {
0% {
-moz-transform: scale(1) rotateY(0deg);
}
10% {
-moz-transform: scale(1.000768) rotateY(0deg);
}
20% {
-moz-transform: scale(1.024576) rotateY(0deg);
}
30% {
-moz-transform: scale(1.125424) rotateY(0.1713571726deg);
}
40% {
-moz-transform: scale(1.149232) rotateY(5.4834295234deg);
}
50% {
-moz-transform: scale(1.15) rotateY(41.6397929434deg);
}
60% {
-moz-transform: scale(1.149232) rotateY(138.3602070566deg);
}
70% {
-moz-transform: scale(1.125424) rotateY(174.5165704766deg);
}
80% {
-moz-transform: scale(1.024576) rotateY(179.8286428274deg);
}
90% {
-moz-transform: scale(1.000768) rotateY(180deg);
}
100% {
-moz-transform: scale(1) rotateY(180deg);
}
}
@-ms-keyframes front {
0% {
-ms-transform: scale(1) rotateY(0deg);
}
10% {
-ms-transform: scale(1.000768) rotateY(0deg);
}
20% {
-ms-transform: scale(1.024576) rotateY(0deg);
}
30% {
-ms-transform: scale(1.125424) rotateY(0.1713571726deg);
}
40% {
-ms-transform: scale(1.149232) rotateY(5.4834295234deg);
}
50% {
-ms-transform: scale(1.15) rotateY(41.6397929434deg);
}
60% {
-ms-transform: scale(1.149232) rotateY(138.3602070566deg);
}
70% {
-ms-transform: scale(1.125424) rotateY(174.5165704766deg);
}
80% {
-ms-transform: scale(1.024576) rotateY(179.8286428274deg);
}
90% {
-ms-transform: scale(1.000768) rotateY(180deg);
}
100% {
-ms-transform: scale(1) rotateY(180deg);
}
}
@-o-keyframes front {
0% {
-o-transform: scale(1) rotateY(0deg);
}
10% {
-o-transform: scale(1.000768) rotateY(0deg);
}
20% {
-o-transform: scale(1.024576) rotateY(0deg);
}
30% {
-o-transform: scale(1.125424) rotateY(0.1713571726deg);
}
40% {
-o-transform: scale(1.149232) rotateY(5.4834295234deg);
}
50% {
-o-transform: scale(1.15) rotateY(41.6397929434deg);
}
60% {
-o-transform: scale(1.149232) rotateY(138.3602070566deg);
}
70% {
-o-transform: scale(1.125424) rotateY(174.5165704766deg);
}
80% {
-o-transform: scale(1.024576) rotateY(179.8286428274deg);
}
90% {
-o-transform: scale(1.000768) rotateY(180deg);
}
100% {
-o-transform: scale(1) rotateY(180deg);
}
}
@keyframes front {
0% {
transform: scale(1) rotateY(0deg);
}
10% {
transform: scale(1.000768) rotateY(0deg);
}
20% {
transform: scale(1.024576) rotateY(0deg);
}
30% {
transform: scale(1.125424) rotateY(0.1713571726deg);
}
40% {
transform: scale(1.149232) rotateY(5.4834295234deg);
}
50% {
transform: scale(1.15) rotateY(41.6397929434deg);
}
60% {
transform: scale(1.149232) rotateY(138.3602070566deg);
}
70% {
transform: scale(1.125424) rotateY(174.5165704766deg);
}
80% {
transform: scale(1.024576) rotateY(179.8286428274deg);
}
90% {
transform: scale(1.000768) rotateY(180deg);
}
100% {
transform: scale(1) rotateY(180deg);
}
}
JS :
// Demo from http://www.aerotwist.com/blog/better-password-form-fields/
(function() {
var container = document.getElementById('container');
var eightPlus = document.getElementById('eight-plus');
var uppercase = document.getElementById('uppercase');
var lowercase = document.getElementById('lowercase');
var numbers = document.getElementById('numbers');
var punctuation = document.getElementById('punctuation');
var matchesPassword = document.getElementById('matches-password');
var passwordSubmitBtn = document.getElementById('password-submit');
var passwordInput = document.getElementById('password');
var passwordForm = document.getElementById('new-password');
var verifyPasswordSubmitBtn = document.getElementById('verify-password-submit');
var verifyPasswordInput = document.getElementById('verify-password');
var verifyPasswordForm = document.getElementById('verify-new-password');
var goBack = document.getElementById('go-back');
var allDone = document.getElementById('all-done');
var containsUppercase = /[A-Z]/;
var containsLowercase = /[a-z]/;
var containsNumbers = /[0-9]/;
var containsPunctuation = /[^\w\s]|_/;
function setForm() {
eightPlus.classList.remove('complete');
uppercase.classList.remove('complete');
lowercase.classList.remove('complete');
numbers.classList.remove('complete');
punctuation.classList.remove('complete');
passwordSubmitBtn.disabled = true;
}
passwordInput.addEventListener('input', function() {
var value = passwordInput.value;
// More than 8 characters
if (value.length >= 8)
eightPlus.classList.add('complete');
else
eightPlus.classList.remove('complete');
// Contains uppercase
if (containsUppercase.test(value))
uppercase.classList.add('complete');
else
uppercase.classList.remove('complete');
// Contains lowercase
if (containsLowercase.test(value))
lowercase.classList.add('complete');
else
lowercase.classList.remove('complete');
// Contains numbers
if (containsNumbers.test(value))
numbers.classList.add('complete');
else
numbers.classList.remove('complete');
// Contains punctuation
if (containsPunctuation.test(value))
punctuation.classList.add('complete');
else
punctuation.classList.remove('complete');
var passwordIsValid = (value.length >= 8) &&
containsUppercase.test(value) &&
containsLowercase.test(value) &&
containsNumbers.test(value) &&
containsPunctuation.test(value);
passwordSubmitBtn.disabled = !passwordIsValid;
});
verifyPasswordInput.addEventListener('input', function() {
var passwordsDoMatch = verifyPasswordInput.value === passwordInput.value;
if (passwordsDoMatch)
matchesPassword.classList.add('complete');
else
matchesPassword.classList.remove('complete');
verifyPasswordSubmitBtn.disabled = !passwordsDoMatch;
});
passwordForm.addEventListener('submit', function(evt) {
passwordForm.classList.add('done');
setTimeout(function() {
verifyPasswordForm.reset();
verifyPasswordForm.classList.add('visible');
verifyPasswordInput.focus();
matchesPassword.classList.remove('complete');
}, 400);
evt.preventDefault();
});
verifyPasswordForm.addEventListener('submit', function(evt) {
verifyPasswordForm.classList.add('done');
setTimeout(function() {
allDone.classList.add('visible');
}, 400);
evt.preventDefault();
});
goBack.addEventListener('click', function(evt) {
verifyPasswordForm.classList.remove('visible');
setTimeout(function() {
passwordForm.classList.remove('done');
passwordInput.focus();
}, 400);
evt.preventDefault();
});
window.addEventListener('load', function() {
passwordForm.classList.add('visible');
setForm();
});
})();
- 이전글비밀번호를 볼 수 있거나 못보거나.. 18.06.25
- 다음글Material Dashboard - 오픈 소스 부트 스트랩 4 Material Design Admin 18.06.25