TC
/
arozos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
							<html>
    <head>
        <title>User Account</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
    </head>
    <body>
        <div class="ui container">
            <div class="ui basic segment">
                <div class="ui header">
                    <i class="user circle icon"></i>
                        <div class="content">
                        My Account
                        <div class="sub header">Manage your account information and password</div>
                    </div>
                </div>
            </div>
            <div class="ui stackable grid">
                <div class="six wide column">
                    <div class="ui card">
                        <div class="image">
                            <img id="profileIcon" src="../users/img/user.svg">
                        </div>
                        <div class="content">
                            <a id="username" class="header"></a>
                            <div class="meta">
                                <p><i class="ui envelope icon"></i><span id="email" class="date"></span><br>
                                <i class="ui user circle icon"></i><span id="usergroup" class="date"></span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ten wide column">
                    <h4 class="ui header">
                        Change Profile Picture
                    </h4>
                    <button class="ui blue button" onclick="handleProfilePic();">Upload</button>
                    <div class="ui divider"></div>
                    <h4 class="ui header">
                        Change Contact Email
                    </h4>
                    <form class="ui form" onsubmit="handleEmailChange(event);">
                        <div class="field">
                            <label>New Email</label>
                            <input id="newemail" type="text"  placeholder="New Email">
                        </div>
                        <button class="ui blue button" type="submit">Update</button>
                    </form>

                    <div class="ui divider"></div>
                    <h4 class="ui header">
                        Change Password
                    </h4>
                    <form class="ui form" onsubmit="handleSubmit(event);">
                        <div class="field">
                            <label>Old Password</label>
                            <input id="opw" type="password"  placeholder="Old Password">
                        </div>
                        <div class="field">
                            <label>New password</label>
                            <input id="npw" type="password" placeholder="New Password">
                        </div>
                        <div class="field">
                            <label>Confirm New Password</label>
                            <input id="cpw" type="password" placeholder="Confirm New Password">
                        </div>
                        <button class="ui blue button" type="submit">Update</button>
                    </form>
                    <div id="msgbox" class="ui green message" style="display:none;">
                        <i class="close icon"></i>
                        <div class="header">
                            Welcome back!
                        </div>
                        <p class="message">This is a special notification which you can dismiss if you're bored with it.</p>
                    </div>
                </div>
            </div>
        </div>
        <script>
            //Initiate user information
            $.get("../../system/users/userinfo",function(data){
                if (data.error !== undefined){
                    //Not logged in?

                }else{
                    if (data.Icondata == ""){
                        $("#profileIcon").attr('src', "../users/img/noprofileicon.svg");
                    }else{
                        $("#profileIcon").attr('src', data.Icondata);
                    }
                    
                    $("#username").text(data.Username);
                    console.log(data.Usergroup);
                    $("#usergroup").text(data.Usergroup.join(" / "));
                }
                
            });

            function initUserEmail(){
                $.get("../../system/register/email", function(data){
                    if (data == ""){
                        //Not set
                        $("#email").text("( Not Configured )");
                    }else{
                        $("#email").text(data);
                    }
                });
            }
            initUserEmail();
           

            //Handle change password form submit
            function handleSubmit(event){
                event.preventDefault();
                //Check if new password and confirm matches
                var oldPassword = $("#opw").val();
                var newPassword = $("#npw").val();
                var confirmPassword = $("#cpw").val();
                if (newPassword != confirmPassword){
                    $("#cpw").parent().addClass("error");
                    return;
                }else{
                    $("#cpw").parent().removeClass("error");
                }

                //OK to proceed.
                $.ajax({
                    url: "../../system/users/userinfo",
                    method: "POST",
                    data: {opr: "changepw", oldpw: oldPassword, newpw: newPassword},
                    success: function(data){
                        if (data.error != undefined){
                            msgbox("Update Failed", data.error);
                        }else{
                            //Updated suceed.
                            msgbox("Update Succeed", "Your password has been updated.");
                        }
                    }
                });

            }

            function handleEmailChange(e){
                e.preventDefault();
                var newEmail = $("#newemail").val();
                $.ajax({
                    url: "../../system/register/email",
                    data: {email: newEmail},
                    success: function(data){
                        if (data.error !== undefined){
                            alert(data.error);
                        }else{
                            msgbox("Update Succeed", "Your email has been updated.");
                            initUserEmail();
                        }
                       
                    }
                });
            }

            function handleProfilePic(){
                ao_module_selectFiles(function(files){
                    if (FileReader && files && files.length) {
                        var fr = new FileReader();
                        fr.onload = function () {
                            //Update the database for the new image
                            var fullImageDatapath = fr.result;
                            $.ajax({
                                url: "../../system/users/userinfo",
                                method: "POST",
                                data: {opr: "changeprofilepic", picdata: fullImageDatapath},
                                success: function(data){
                                    if (data.error !== undefined){
                                        console.log(data.error);
                                    }else{
                                        //Load the image into the src div
                                        document.getElementById("profileIcon").src = fullImageDatapath;
                                    }
                                    
                                }
                            })
                        }
                        fr.readAsDataURL(files[0]);
                    }
                },"file", ".png",false);
            }

            function msgbox(header, message){
                $("#msgbox").fadeIn('fast');
                $("#msgbox").find(".header").text(header);
                $("#msgbox").find(".message").text(message);
            }

            //Hook close msgbox event
            $('.message .close')
            .on('click', function() {
                $(this).parent().fadeOut('fast');
            });
        </script>
    </body>
</html>