semlanik
/
gostfix


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="icon" href="/assets/logo.png">
        <link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
        <link type="text/css" href="/css/index.css" rel="stylesheet">
        <link type="text/css" href="/css/styles.css" rel="stylesheet">
        <link type="text/css" href="/css/controls.css" rel="stylesheet">
        <script src="/js/jquery-3.4.1.min.js"></script>
        <script>
            const emailRegex = /^[a-zA-Z]+[\w\d\._-]*$/
            const passwordRegex = /[A-Z0-6!"\#$%&'()*+,\-./:;<=>?@\[\\\]^_‘{|}~]/
            const fullnameRegex = /^[\w ]*$/
            var emailOk = false

            $(document).ready(function() {
                $('#showPasswordButton').mousedown(function() {
                    $('#passwordField').attr('type', 'text')
                })

                $('#showPasswordButton').mouseup(function() {
                    $('#passwordField').attr('type', 'password')
                })

                validateEmail($('#userField'))
                $('#fullnameField').on('input', validateFields)
                $('#userField').on('input', function(e) { validateEmail($(e.target)) })
                $('#passwordField').on('input', validateFields)
            })

            function submitChanges() {
                if (emailOk && validatePassword($('#passwordField')) && validateFullname($('#fullnameField'))) {
                    $('#registerForm').submit()
                }
            }

            var emailInputTimer = null
            function validateEmail(element) {
                emailOk = false
                validateFields()
                var fieldDiv = element.parent()
                if (emailRegex.test(element.val())) {
                    clearTimeout(emailInputTimer)
                    emailInputTimer = setTimeout(emailCheck, 200)
                    return
                } else {
                    fieldDiv.addClass("bad")
                }
            }

            function emailCheck() {
                var element = $('#userField')
                var fieldDiv = element.parent()

                $.ajax({
                    url: "/checkEmail",
                    data: {
                        user: element.val()
                    },
                    success: function(result) {
                        emailOk = true
                        validateFields()
                        fieldDiv.removeClass("bad")
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        emailOk = false
                        validateFields()
                        fieldDiv.addClass("bad")
                    }
                })
            }

            function validatePassword(element) {
                var fieldDiv = element.parent()
                if (validateField(element)) {
                    if (element.val().length < 8 || !passwordRegex.test(element.val())) {
                        fieldDiv.addClass("weak")
                    } else {
                        fieldDiv.removeClass("weak")
                    }
                    return true
                }

                return false
            }

            function validateFullname(element) {
                var fieldDiv = element.parent()
                if (fullnameRegex.test(element.val())) {
                    fieldDiv.removeClass("bad")
                    return true
                }
                fieldDiv.addClass("bad")
                return false
            }

            function validateField(element) {
                var fieldDiv = element.parent()
                if (element.val() != '') {
                    fieldDiv.removeClass('bad')
                    return true
                }
                fieldDiv.addClass('bad')
                return false
            }

            function validateFields() {
                var passwordOk = validatePassword($('#passwordField'))
                var fullnameOk = validateFullname($('#fullnameField'))
                if (emailOk && passwordOk && fullnameOk) {
                    $('#registerButton').removeClass('disabled')
                } else {
                    $('#registerButton').addClass('disabled')
                }
            }
        </script>
        <title>Gostfix mail {{.Version}}</title>
    </head>
    <body>
        <div id="main">
            <div class="horizontalPaddingBox">
                <div style="display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: center;">
                    <form id="registerForm" method="POST" action="/register" style="margin: 0 auto;">
                        <div class="inpt bad">
                            <input id="fullnameField" name="fullname" type="text" required maxlength="128" autocomplete="off">
                            <span class="highlight"></span>
                            <span class="bar"></span>
                            <label>Full name</label>
                        </div>
                        <div class="inpt bad">
                            <input id="userField" name="user" type="text" required maxlength="64" autocomplete="off">
                            <span class="highlight"></span>
                            <span class="bar"></span>
                            <label>User @{{.Domain}}</label>
                        </div>
                        <div class="inpt bad">
                            <input id="passwordField" name="password" type="password" required maxlength="128" autocomplete="off">
                            <span class="highlight"></span>
                            <span class="bar"></span>
                            <label>Password</label>
                            <img id="showPasswordButton" src="/assets/eye.svg"/>
                        </div>
                        <div id="registerButton" class="btn materialLevel1 disabled" style="margin-bottom: 15px;" onclick="submitChanges();">Register</div>
                    </form>
                </div>
            </div>
            <div id="copyrightBox" class="elidedText"><img src="/assets/logo.svg" height="30px"/>gostfix {{.Version}} Web interface. Copyright (c) 2020 Alexey Edelev &lt;semlanik@gmail.com&gt;</div>
        </div>
    </body>
</html>