Untitled

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>

<head>

    <title>Login View Template</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" type="text/css" href="lib/appframework/icons.css" />
    <link rel="stylesheet" type="text/css" href="lib/appframework/af.ui.css" />

    <script type="text/javascript" charset="utf-8" src="lib/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/fastclick.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/appframework/appframework.ui.min.js"></script>

    <script src='cordova.js'></script>

    <script>

        $(document).ready(function(){

            $("#main").bind("panelbeforeload", startApp);
            // setup signin and signup button events
            $("#login").on("click", function(){
                signIn();
            });

            $("#register").on("click", function(){
                signUp();
            });

        });

        function signIn(){
            var valid_login = false;

            //Pega valores digitado
            var username = $('#usuario').val();
            var senha = $('#senha').val();

            //Pega dados do localstorage
            var usuarioLocal = JSON.parse(localStorage.getItem('usuario'));

            if(usuarioLocal){
                //Compara os dados enviados com os dados local
                if(usuarioLocal.username == username && usuarioLocal.password == senha){
                    valid_login = true;
                }
            }


            if(valid_login){
                $.afui.loadContent("#main", null, null, "fade");
            }
            else
            {
                //Example use of the error toast api
                var opts={
                    message:"Usuário ou senha incorretos",
                    position:"tc",
                    delay:2000,
                    autoClose:true,
                    type:"error"
                };
                $.afui.toast(opts);
            }
        }

        function signUp(){

            //example client side validation
            if ($("#password").val() === $("#confirmpassword").val())
            {
                //Pega os dados do formulario
                var dados = {
                    name: $('#name').val(),
                    email: $('#email').val(),
                    username: $('#username').val(),
                    password:$('#password').val(),
                }

                var optError = {
                    message:"Todos campos são obrigatorio!",
                    position:"tc",
                    delay:2000,
                    autoClose:true,
                    type:"error"

                }

                //Verifica se tem algum vazio
                if(!dados.name){
                    $.afui.toast(optError);
                }else if(!dados.email){
                    return $.afui.toast(optError);
                }else if(!dados.username){
                    return $.afui.toast(optError);
                }else if(!dados.password){
                    return $.afui.toast(optError);
                }else{
                    var usuario = JSON.stringify(dados);
                    localStorage.setItem('usuario', usuario)
                   //render main view
                    $.afui.loadContent("#main", null, null, "fade");
                    //Example use of the success toast
                    var opts={
                    message:"Account Created",
                    position:"tc",
                    delay:2000,
                    autoClose:true,
                    type:"success"
                };
                $.afui.toast(opts);
                }
            }
            else
            {
                //Example use of the error toast
                var opts={
                    message:"password e confirmação não estm iguais! Verifique.",
                    position:"tc",
                    delay:2000,
                    autoClose:true,
                    type:"error"
                };
                $.afui.toast(opts);
            }


        }

        function startApp(){
            // clears all back button history
            $.afui.clearHistory();

            // your app code here
        }

    </script>

</head>

<body>

    <div id="splashscreen" class='ui-loader heavy'>
        App Framework - Login View
        <br>
        <br>
        <span class='ui-icon ui-icon-loading spin'></span>
        <h1>Starting app</h1>
    </div>

    <div class="view" id="mainview">
        <header>
            <h1>Login View Example</h1>
        </header>

        <div class="pages">

            <!-- Welcome View -->
            <div class="panel" data-title="Welcome" id="page1" data-header="none" data-footer="none" selected="true">
                <div style="text-align:center">
                    <br>
                    <br>
                    <p>This is space for welcome message</p>
                    <br>
                    <br>
                </div>
                <ul class="list inset">
                    <li><a href="#signin" class="icon user" style="text-align:center">Login</a></li>
                    <li><a href="#signup" class="icon pencil" style="text-align:center">Register</a></li>
                </ul>
            </div>

            <!-- Login View -->
            <div class="panel" data-title="Login" id="signin" data-footer="none">
                <div style="text-align:center">
                    <br>
                    <br>
                    <p>This is space for login message</p>
                    <br>
                    <br>
                </div>
                <input name="username" id="usuario" type="text" placeholder="username" />
                <input name="password" id="senha" type="password" placeholder="password" />
                <a class="button block" href="#" id="login">Login</a>
            </div>

            <!-- Register View -->
            <div class="panel" data-title="Register" id="signup" data-footer="none">
                <div style="text-align:center">
                    <br>
                    <br>
                    <p>This is space for register message</p>
                    <br>
                    <br>
                </div>
                <input name="name" type="text" placeholder="Name" id="name" />
                <input name="email" type="text" placeholder="Email" id="email" />
                <input name="username" type="text" placeholder="Username" id="username" />
                <input name="password" type="password" placeholder="Password" id="password" />
                <input name="password2" type="password" placeholder="Confirm Password" id="confirmpassword" />
                <a class="button block" href="#" id="register">Register</a>
            </div>

            <!-- Main App View -->
            <div class="panel" data-title="Start" id="main">
                <p>This is App page after user has signed in...</p>
            </div>
        </div>
    </div>

</body>

</html>