auth.ejs

<div id="authContainer" style="display: none;">
    <div id="authCancelContainer" style="display: none;">
        <button id="authCancelButton">
            <div id="authCancelIcon">X</div>
            <span id="authCancelText">Отмена</span>
        </button>
    </div>
    <div id="authContent">
        <form id="authForm">
            <!-- <img id="authImageSeal" src="assets/images/SealCircle.png"/> -->
            <!-- <span id="authSubheader">NORTHERN BLADE auth</span> -->
            <div class="authFieldContainer">
                <svg id="profileSVG" class="authSVG" viewBox="40 37 65.36 61.43">
                    <g>
                        <path d="M86.77,58.12A13.79,13.79,0,1,0,73,71.91,13.79,13.79,0,0,0,86.77,58.12M97,103.67a3.41,3.41,0,0,0,3.39-3.84,27.57,27.57,0,0,0-54.61,0,3.41,3.41,0,0,0,3.39,3.84Z"/>
                    </g>
                </svg>
                <span class="authErrorSpan" id="authEmailError">* Invalid Value</span>
                <input id="authUsername" class="authField" type="text" placeholder="USERNAME"/>
            </div>
            <div class="authFieldContainer">
                <svg id="lockSVG" class="authSVG" viewBox="40 32 60.36 70.43">
                    <g>
                        <path d="M86.16,54a16.38,16.38,0,1,0-32,0H44V102.7H96V54Zm-25.9-3.39a9.89,9.89,0,1,1,19.77,0A9.78,9.78,0,0,1,79.39,54H60.89A9.78,9.78,0,0,1,60.26,50.59ZM70,96.2a6.5,6.5,0,0,1-6.5-6.5,6.39,6.39,0,0,1,3.1-5.4V67h6.5V84.11a6.42,6.42,0,0,1,3.39,5.6A6.5,6.5,0,0,1,70,96.2Z"/>
                    </g>
                </svg>
                <span class="authErrorSpan" id="authPasswordError">* Required</span>
                <input id="authPassword" class="authField" type="password" placeholder="PASSWORD"/>
                <div id="passwordVisibleImg" class="passwordVisibleImg"></div>
            </div>
            <button id="authButton" disabled>
                <div id="authButtonContent">
                    SAVE
                    <svg id="authSVG" viewBox="0 0 24.87 13.97">
                        <defs>
                            <style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>
                        </defs>
                        <polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
                    </svg>
                    <div class="circle-loader">
                        <div class="checkmark draw"></div>
                    </div>
                    <!--<div class="spinningCircle" id="authSpinner"></div>-->
                </div>
            </button>
        </form>
    </div>
    <script src="./assets/js/scripts/auth.js"></script>
</div>