Avin Dev

Avin Dev: Transforming Ideas into stunning websites

Building a Secure SVG Animated Password Field

Introduction:

In the ever-evolving world of web development, creating secure and user-friendly SVG animated password fields is a crucial aspect of designing modern web forms. Whether you are a seasoned developer or just starting your coding journey, this comprehensive step-by-step tutorial will guide you through the process of building a robust password field using HTML, CSS, JavaScript and MorphSVGPlugin of gsap. By the end of this tutorial, you’ll have the skills to craft an intuitive and secure password input for your web forms, enhancing user experience and ensuring data security.

Who Can Do This:

Web developers, designers, and tech enthusiasts seeking to elevate their front-end development skills will find this tutorial beneficial. By the end of the video, you’ll have an impressive password field with an SVG button, and the knowledge to apply these concepts to your future projects.

Step 1: Setting Up the HTML Structure

To begin our journey, let’s create the foundation of our password field with HTML. Open your favorite text editor and start by creating a new HTML file. Begin with a simple form element that will encapsulate the password field and other relevant form elements if needed:

HTML
				<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="password-field">
        <input type="password" placeholder="Password">
        <input type="text" placeholder="Password" class="clear">
        <button>
            <svg viewBox="0 0 21 21">
                <circle class="eye" cx="10.5" cy="10.5" r="2.25" />
                <path class="top" d="M2 10.5C2 10.5 6.43686 5.5 10.5 5.5C14.5631 5.5 19 10.5 19 10.5" />
                <path class="bottom" d="M2 10.5C2 10.5 6.43686 15.5 10.5 15.5C14.5631 15.5 19 10.5 19 10.5" />
                <g class="lashes">
                    <path d="M10.5 15.5V18" />
                    <path d="M14.5 14.5L15.25 17" />
                    <path d="M6.5 14.5L5.75 17" />
                    <path d="M3.5 12.5L2 15" />
                    <path d="M17.5 12.5L19 15" />
                </g>
            </svg>
        </button>
    </div>
    <!-- We need Gsap and MorphSVGPlugin (read the warning on your console) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
			

Step 2: Styling with CSS

Next, let’s make our password field visually appealing and user-friendly using CSS. Create a new CSS file and link it to your HTML file within the head section:

CSS
				* {
    box-sizing: inherit;
}

*:before,
*:after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: "Poppins", Arial;
    min-height: 100vh;
    display: flex;
    padding-right: 10rem;
    justify-content: end;
    align-items: center;
    background: #FBFBFD;
    background-image: url(4439029.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.password-field {
    width: 520px;
    position: relative;
    border-radius: 7px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #E2E2ED, 0px 1px 3px rgba(41, 41, 86, 0.06);
    transition: box-shadow 0.25s;
    margin-top: 10rem;
}
.password-field:hover {
    box-shadow: inset 0 0 0 1px #09ABC3, 0px 1px 3px rgba(41, 41, 86, 0.06);
}

.password-field:focus-within {
    box-shadow: inset 0 0 0 1px #D0D0DB, 0px 1px 3px rgba(9, 171, 195, 0.25);
}
.password-field input,
.password-field button {
    outline: none;
    background: none;
    border: none;
    margin: 0;
}
.password-field input {
    display: block;
    font-family: inherit;
    font-size: 3rem;
    line-height: 21px;
    height: 100px;
    color: #5A5A64;
    padding: 12px 41px 12px 16px;
    transform: translateY(0) translateZ(0);
    opacity: var(1);
    pointer-events: auto;
    transition: filter 0.35s, transform 0.4s, opacity 0.25s;
}
.password-field.show input {
    transform: translateY(-12px) translateZ(0);
    opacity: 0;
    pointer-events: none;
}

.password-field input::placeholder {
    color: #A1A1B6;
    transition: color 0.25s;
}

.password-field input::selection {
    color: #09ABC3;
    background: rgba(9, 171, 195, 0.15);
}

.password-field input:focus::placeholder,
.password-field input:hover::placeholder {
    color: #5A5A64;
}

.password-field input:not(.clear) {
    width: 100%;
}
.password-field input.clear {
    transform: translateY(12px) translateZ(0);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}
.password-field.show input.clear{
    transform: translateY(0px) translateZ(0);
    opacity: 1;
    pointer-events:auto;
}
.password-field button {
    cursor: pointer;
    padding: 11px;
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    color: #A1A1B6;
    transition: color 0.25s, transform 0.15s;
}

.password-field button:hover {
    color: #5A5A64;
}

.password-field button svg {
    display: block;
    width: 75ox;
    height: 75px;
    pointer-events: none;
}

.password-field button svg .top,
.password-field button svg .bottom,
.password-field button svg .lashes {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5px;
    stroke-linecap: round;
}

.password-field button svg .lashes {
    stroke-dasharray: 3px;
    stroke-dashoffset: 3px;
}

.password-field button svg .top {
    fill: #fff;
    fill-opacity: 0;
}

.password-field button svg .eye {
    fill: currentColor;
    transform-origin: 10.5px 13.5px;
    transition: all 0.05s;
}
			

Step 3: Adding JavaScript Functionality

Now, let’s make our password field even more user-friendly by adding JavaScript functionality to allow users to toggle the visibility of their password. Create a new JavaScript file and link it to your HTML file just before the closing </body> tag and write this code:

JavaScript
				const { to, set, timeline, registerPlugin } = gsap

registerPlugin(MorphSVGPlugin)

document.querySelectorAll('.password-field').forEach(field => {
    let input = field.querySelectorAll('input'),
        button = field.querySelector('button'),
        svgTop = field.querySelector('button svg .top'),
        lashes = field.querySelector('button svg .lashes'),
        eye = field.querySelector('button svg .eye'),
        time = timeline({
            paused: true
        }).to(field.querySelector('svg .top'), {
            morphSVG: 'M2 10.5C2 10.5 6.43686 15.5 10.5 15.5C14.5631 15.5 19 10.5 19 10.5',
            duration: .2
        }).to(svgTop,{
            'fill-opacity': '1',
        },0).to(lashes,{
                'stroke-dashoffset': '0px',
                duration: .15
        },0).to(eye,{
            'opacity': '0',
            duration: .2
        },0)
    button.addEventListener('click', e => {
        if(field.classList.contains('show')) {
            field.classList.remove('show')
            time.reverse(0)
            return
        }
        field.classList.add('show')
        time.play(0)
    })
    input.forEach(single => single.addEventListener('input', e => input.forEach(i => i.value = e.target.value)))
})

			

Conclusion:

Congratulations! You’ve successfully built a secure and user-friendly password field for your web forms using HTML, CSS, and JavaScript. By following this step-by-step tutorial, you’ve gained valuable insights into frontend development techniques, password security best practices, and enhancing user experience. Remember to apply these principles to your future projects and continue exploring the exciting world of web development to further elevate your coding skills.

Now that you have mastered the art of creating a password field, the possibilities are endless. Combine this knowledge with other web development techniques to build innovative and secure web applications that will captivate users and ensure their data remains protected.

Happy coding! 馃殌

1 thought on “Building a Secure SVG Animated Password Field”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top