<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
   ______                  __  __
  / ____/___  __  ______  / /_/ /_  __
 / /   / __ \/ / / / __ \/ __/ / / / /
/ /___/ /_/ / /_/ / / / / /_/ / /_/ /
\____/\____/\__,_/_/ /_/\__/_/\__, /
              http://count.ly/____/
-->
<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="referrer" content="no-referrer">
    <link rel="stylesheet" href="stylesheets/font-awesome/css/font-awesome.min.css" />

	<link href='stylesheets/pre-login/main.css' rel='stylesheet' type='text/css'>
	<link rel="icon" type="image/png" href="<%- countlyFavicon %>">
    <% if (themeFiles && themeFiles.css) { %>
        <% for(var i=0, l=themeFiles.css.length; i<l; i++) {%>
    <link href='<%= themeFiles.css[i]%>' rel='stylesheet' type='text/css'>
        <% } %>
    <% } %>
	<title><%- countlyTitle %></title>
	<script>window.countlyGlobal = window.countlyGlobal || {}; countlyGlobal["cdn"] = "<%- cdn %>";</script>
    <% if (typeof inject_template.css != 'undefined') { %>
	<style><%- inject_template.css %></style>
	<% } %>
</head>
<body>
	<div id="message" style="width:550px; margin-left:-275px; font-size:14px; line-height:20px;" data-localize="setup.explanation"></div>
    <div  id="error-message"></div>
	<div id="top-container">
		<% if (countlyPage){ %>
		<a class="top-button" href="<%- countlyPage %>"><%- countlyTitle %></a>
        <% } %>
		<div class="top-button" id="select-lang">
			<div id="active-lang">EN</div>
			<div id="langs">
                <div class="group">
                <% for(var i=0, l=(languages.length/2); i<l; i++) {%>
                    <a data-language-code="<%=languages[i].code%>" class="item"><%=languages[i].name%></a>
                <% } %>
                </div>
                <div class="group">
                <% for(var i=(parseInt(languages.length/2) + 1), l=languages.length; i<l; i++) {%>
                    <a data-language-code="<%=languages[i].code%>" class="item"><%=languages[i].name%></a>
                <% } %>
                </div>
			</div>
		</div>
	</div>
	<div id="login-form" class="register-form" style="height:306px; margin-top:-153px;">
        <div id="login-logo" style="margin-bottom:25px;"></div>
        <form id="account-form" method="POST" onsubmit="return validateForm()">
            <div>
                <input required autocapitalize="off" autocomplete="off" type="text" name="full_name" id="full_name" placeholder="Full Name" data-localize="placeholder.full-name"<% if (params && params.full_name){ %> value="<%- params.full_name %>" <% } %>/>
            </div>
            <div>
                <input required autocapitalize="off" autocomplete="off" type="email" name="email" id="email" placeholder="Email" data-localize="placeholder.email"<% if (params && params.email){ %> value="<%- params.email %>" <% } %>/>
            </div>
            <div>
                <input required type="text" autocapitalize="off" autocomplete="off" name="username" id="username" placeholder="Username" data-localize="placeholder.username"<% if (params && params.username){ %> value="<%- params.username %>" <% } %>/>
            </div>
            <div>
                <input required name="password" id="password" type="password" autocomplete="off" placeholder="Password" data-localize="placeholder.password"<% if (params && params.password){ %> value="<%- params.password %>" <% } %>/>
                <div id="password-requirements">
                    <ul>
                        <li id="hint-password_min"  data-localize="management-users.password.length"></li>
                        <li id="hint-password_char"  data-localize="management-users.password.has-char"></li>
                        <li id="hint-password_number" data-localize="management-users.password.has-number"></li>
                        <li id="hint-password_symbol"  data-localize="management-users.password.has-special"></li>
                    </ul>
                    <div class="hint-password-good" style="display: none;"><i class="far fa-thumbs-up" style="color:#2FA732; margin-right:5px"></i><span data-localize="setup.hint-password-good"></span></div>

                </div>
            </div>
            <% if (typeof inject_template.form != "undefined") { %>
                <%- inject_template.form %>
            <% } %>
            <div>
                <input type="hidden" value="<%= csrf %>" name="_csrf" />
                <input type="hidden" value="en" name="lang" id="form-lang" />
                <input id="login-button" value="Create account" type="submit" data-localize="setup.button"/>
            </div>
        </form>
        <% if (typeof inject_template.html != "undefined") { %>
            <%- inject_template.html %>
        <% } %>
	</div>
	<script language="javascript" type="text/javascript" src="javascripts/dom/jquery/jquery.js"></script>
	<script language="javascript" type="text/javascript" src="javascripts/utils/prefixfree.min.js"></script>
	<script language="javascript" type="text/javascript" src="javascripts/utils/store+json2.min.js"></script>
	<script language="javascript" type="text/javascript" src="javascripts/utils/jquery.i18n.properties-min-1.0.9.js"></script>
    <script language="javascript" type="text/javascript" src="javascripts/utils/jquery.xss.js"></script>
    <script language="javascript" type="text/javascript" src="javascripts/countly/countly.helpers.js"></script>
	<script language="javascript" type="text/javascript" src="javascripts/pre-login.js"></script>

	<script>
        var countlyTitle = "<%- countlyTitle %>";
        var params = <%- JSON.stringify(params) %>;
        countlyGlobal.security = <%- JSON.stringify(security) %>;
        function validateForm() {
            var valid = true;
            var errors = [];
            if ($("#full_name").val().trim().length === 0) {
                valid = false;
                errors.push(jQuery.i18n.map["management-users.full_name.invalid"]);
            }
            if ($("#username").val().trim().length === 0) {
                valid = false;
                errors.push(jQuery.i18n.map["management-users.username.invalid"]);
            }
            if (!CountlyHelpers.validateEmail($("#email").val())) {
                valid = false;
                errors.push(jQuery.i18n.map["management-users.email.invalid"]);
            }
            if (CountlyHelpers.validatePassword($("#password").val())) {
                errors.push(jQuery.i18n.map["placeholder.password"] + ": " + CountlyHelpers.validatePassword($("#password").val()));
                valid = false;
            }
            $("#error-message").html(errors.join("<br/>"));
            return valid;
        }
		$(document).ready(function() {
            $("#password-requirements li").first().text(jQuery.i18n.prop("management-users.password.length", countlyGlobal.security.password_min));
			if (jQuery.i18n.map["setup.title"]) {
                document.title = countlyTitle + " | " + jQuery.i18n.map["setup.title"];
            }
            var errorObj = <%- JSON.stringify(error) %>;
            if (errorObj.message && errorObj.message.length > 0) {
                var errI18n = []
                for (var i = 0; i < errorObj.message.length; i++) {
                    if (errorObj.message[i].indexOf('upchar') > 0) {
                        errI18n.push(jQuery.i18n.map["management-users.password.has-char"]);
                    } else if (errorObj.message[i].indexOf('min') > 0) {
                        errI18n.push(jQuery.i18n.prop("management-users.password.length", errorObj.passMinLen));
                    } else if (errorObj.message[i].indexOf('number') > 0) {
                        errI18n.push(jQuery.i18n.map["management-users.password.has-number"]);
                    } else if (errorObj.message[i].indexOf('special') > 0) {
                        errI18n.push(jQuery.i18n.map["management-users.password.has-special"]);
                    }
                } 
                $("#error-message").html(errI18n.join("<br/>"));
            }
		});
		$(document).bind('clyLangChange', function() {
			if (jQuery.i18n.map["setup.title"]) {
                document.title = countlyTitle + " | " + jQuery.i18n.map["setup.title"];
            }
		});
	</script>
	<% if (typeof inject_template.js != 'undefined') { %>
	<script><%- inject_template.js %></script>
	<% } %>
     <% if (themeFiles && themeFiles.js) { %>
        <% for(var i=0, l=themeFiles.js.length; i<l; i++) {%>
    <script language="javascript" type="text/javascript" src="<%=themeFiles.js[i]%>"></script>
        <% } %>
    <% } %>
</body>
</html>
