Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Email App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
    <link rel="stylesheet" href="app.min.css">
    <link rel="shortcut icon" href="#" />
    <style>
        .home-topbar {
            background-color: blue;
        }
        .hidden {
            display: none;
        }
        .success {
            border: #7F7 2px solid;
        }
        .warning {
            border: red 2px solid;
        }

    </style>
</head>

<body>
<div class="app-page" data-page="home">
    <div class="app-topbar home-topbar">
        <div class="app-title">Sent An Email</div>
    </div>
    <div class="app-content">
        <div class="app-section">
            <div>Click below to sent an email!</div>
        </div>

        <div class="app-section">
            <div class="app-button" data-target="emailPage">Sent to new user</div>
        </div>
        <div class="app-section">
            <!--
            add email recipiants addresses from local storage here
            Hide if emtpy
            infinite scroll
              -->
        </div>
    </div>
</div>

<div class="app-page" data-page="emailPage">
    <div class="app-topbar">
        <div class="app-button right" data-back>Back</div>
        <div class="app-title">Sent Email</div>
    </div>
    <div class="app-content">
        <form method="post" id="myForm">
            <div id="alert" class="app-section hidden"></div>
            <div class="app-section">
                <p>From:</p>
                <input type="email" id="from" class="app-input" placeholder="You'r Email Address">
            </div>
            <div class="app-section">
                <p>To:</p>
                <input id="to" class="app-input" placeholder="Recipient Email Address">
            </div>
            <div class="app-section">
                <input id="subject" class="app-input" placeholder="Subject">
                <textarea id="message" class="app-input" placeholder="Message"></textarea>
                <div class="app-button green">Send</div>
            </div>
        </form>
    </div>
</div>

<!--<script src="zepto.js"></script>-->
<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script src="app.min.js"></script>
<script>
    App.controller('home', function (page) {
        // put stuff here
    });

    App.controller('emailPage', function (page) {

        function validateEmail(email) {
            var re = /\S+@\S+\.\S+/;
            return re.test(email);
        }

        function unhideAlert(){
            if ($("#alert").hasClass("hidden")){
                $("#alert").removeClass("hidden");
            }
        }

        function addUserEmail(email){
            if (localStorage.userEmail || localStorage.userEmail != email) {
                localStorage.setItem ("userEmail", email);
                alert(localStorage.userEmail+" saved to local storage");
            }
        }
        var tempEmail = localStorage.getItem("userEmail");
        if (tempEmail) {
            console.log('userEmail function ran '+ tempEmail);
            $("#from").val(tempEmail); //<--- doesnt work!
        }

        $(page).find(".app-button")
            .on("click", function(){
                //check if all fields are filled
                if ($("#from").val() == "" || $("#to").val() == "" || $("#subject").val() == "" || $("#message").val() == ""){
                    unhideAlert();
                    if ($("#alert").hasClass("success")){
                        $("#alert").removeClass("success");
                    }
                    $("#alert").addClass("warning");
                    $("#alert").html("Not all fields are filled");
                } else { //check if emails are valid
                    if (validateEmail($("#from").val()) && validateEmail($("#to").val())) {
                        var fromEmail = $("#from").val();
                        var toEmail = $("#to").val();
                        var subject = $("#subject").val();
                        var message = $("#message").val();

                        $.ajax({
                            url:'sentEmail.php',
                            method:'POST',
                            data:{
                                fromEmail: fromEmail,
                                toEmail: toEmail,
                                subject: subject,
                                message: message
                            },
                            dataType: "JSON",
                            success: function(data) {
                                unhideAlert();
                                if ($("#alert").hasClass("warning")){
                                    $("#alert").removeClass("warning");
                                }
                                if (data.error != "") {
                                    $("#alert").addClass("success");
                                    $("#alert").html(data.message);
                                    $('#myForm').trigger("reset");
                                    addUserEmail(fromEmail);
                                } else {
                                    $("#alert").addClass("warning");
                                    $("#alert").html(data.error);
                                }
                            },
                            error: function(data) {
                                alert("error 2: something went wrong please try again later (AJAX)" + data);
                            }
                        })

                    } else {
                        unhideAlert();
                        if ($("#alert").hasClass("success")){
                            $("#alert").removeClass("success");
                        }
                        $("#alert").addClass("warning");
                        $("#alert").html("One or both email addresses are not valid");
                    }
                }
            });
    });

    try {
        App.restore();
    } catch (err) {
        App.load('home');
    }
</script>
</body>
</html>