<div class="container">
<div class="row">
<div class="col-md-5 mx-auto my-4">
<div class="card card-signup z-depth-0">
<div class="card-body text-center">
<img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" class="logo" />
<h3 class="card-title">Create an account</h3>
<p class="slogan">It's free and anyone can join!</p>
<div class="md-form mat-2">
<input type="text" id="username" class="form-control">
<label for="username">Username</label>
</div>
<div class="md-form mat-2">
<input type="email" id="email" class="form-control">
<label for="email">E-mail</label>
</div>
<div class="md-form mat-2">
<input type="password" id="password" class="form-control">
<label for="password">Password</label>
</div>
<div class="md-form mat-2">
<input type="password" id="password2" class="form-control">
<label for="password2">Password confirmation</label>
</div>
<div class="card-foter text-right">
<button type="button" class="btn btn-outline-primary" style="width: 140px;">Sign up</button>
</div>
</div>
</div>
</div>
</div>
</div>
:root {
--active-color: rgba(0,0,0,0.65);
}
.card-signup {
border: 1px solid #dadce0;
border-radius: .5rem;
}
.card-signup .card-body {
padding: 48px 40px 36px;
}
.logo {
width: 75px;
height: auto;
margin-bottom: 1rem;
}
.slogan {
color: #3c4043;
font-weight: 500;
font-size: .875rem;
}
.btn[class*=btn-outline-] {
border-width: 1px !important;
box-shadow: none;
padding-top: .525rem;
padding-right: 1.4375rem;
padding-bottom: .525rem;
padding-left: 1.4375rem;
font-weight: 500;
font-size: .785rem;
border-radius: .25rem;
}
.btn.btn-outline-primary {
border-color: #dadce0 !important;
}
.card-signup .btn.btn-outline-primary:hover {
background-color: #f6f9fe !important;
border-color: #d2e3fc !important;
box-shadow: none !important;
}
.card-signup .btn.btn-outline-primary:focus,
.card-signup .btn.btn-outline-primary:active {
background-color: #e4eefd !important;
border-color: #d2e3fc !important;
box-shadow: none !important;
}
.md-form.mat-2 input[type=text],
.md-form.mat-2 input[type=password],
.md-form.mat-2 input[type=email] {
border-width: 1px !important;
border-style: solid;
border-color: #ced4da;
border-radius: 5px;
padding-top: .5rem;
padding-left: 8px;
padding-right: 8px;
padding-bottom: .3rem;
font-size: .875rem;
line-height: 1.5;
box-sizing: border-box;
}
.md-form.mat-2 input[type=text]:focus,
.md-form.mat-2 input[type=password]:focus,
.md-form.mat-2 input[type=email]:focus {
border-color: #4285f4;
box-shadow: inset 0px 0px 0px 1px #4285f4;
}
.md-form.mat-2 label {
top: .5rem;
left: 8px;
font-size: .875rem;
}
.md-form.mat-2 label.active {
background: #fff;
font-weight: 500;
padding-right: 5px;
padding-left: 5px;
font-size: 11px;
top: 1rem;
left: 8px;
}
.btn-toggle-pass {
border: none;
position: absolute;
top: 6px;
background: transparent;
right: 0;
}
.btn-toggle-pass.active {
color: var(--active-color);
}
(($) => {
class Toggle {
constructor(element, options) {
this.defaults = {
icon: 'fa-eye'
};
this.options = this.assignOptions(options);
this.$element = element;
this.$button = $(``);
this.init();
};
assignOptions(options) {
return $.extend({}, this.defaults, options);
}
init() {
this._appendButton();
this.bindEvents();
}
_appendButton() {
this.$element.before(this.$button);
}
bindEvents() {
this.$button.on('click touchstart', this.handleClick.bind(this));
}
handleClick() {
let type = this.$element.attr('type');
type = type === 'password' ? 'text' : 'password';
this.$element.attr('type', type);
this.$button.toggleClass('active');
}
}
$.fn.togglePassword = function (options) {
return this.each(function () {
new Toggle($(this), options);
});
}
})(jQuery);
$(document).ready(function() {
$('#password').togglePassword();
$('#password2').togglePassword();
})