ivalentin
/
SWDB


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
							<?php
/**
 * User profile view.
 *
 * Contains the view layout and ome code to present the data.
 *
 * @author Iñigo Valentin <i@inigovalentin.com>
 * @license https://www.gnu.org/licenses/gpl-3.0.en.html GNU General Public License V3
 * @package SWDB
 * @category View
 * @property Profile_Page $page The page model.
 * @var Profile_Page $page The page model.
 */
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <?=$page->generate_head()?>
        <script>

            /**
             * Redirects to the logout action.
             */
            function logout(){
                window.location = '/action/logout/';
            }

            /**
             * Shows an error window.
             *
             * @param msg Error message
             */
            function showError(msg){
                document.getElementById('error_window').style.display = 'block';
                document.getElementById('error_msg').innerHTML = msg;
            }

            /**
             * Closes the error window.
             */
            function closeError(){
                document.getElementById('error_window').style.display = 'none';
                document.getElementById('error_msg').innerHTML = ' ';
            }

            /**
             * Shows the mail change form.
             */
            function changeMail(){
                document.getElementById('static_mail').style.display = 'none';
                document.getElementById('change_mail').style.display = 'none';
                document.getElementById('edit_mail').style.display = 'block';
                document.getElementById('save_mail').style.display = 'block';
            }

            /**
             * Saves an email change.
             * 
             * Validates the new email format and makes an AJAX request. If
             * succesfull, hides the email change form.
             */
            function saveMail(){
                var http = new XMLHttpRequest();
                var mail = document.getElementById('edit_mail').value;
                if (mail.length < 1){
                    showError('Please enter a new email.');
                    return;
                }
                if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail) == false){
                    showError('Invalid email');
                    return;
                }
                http.open('POST', '/action/edit_profile', true);
                http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                http.onreadystatechange = function(){
                    if (this.readyState == 4){
                        if (this.status == 200 || this.status == 204){
                            document.getElementById('static_mail').innerHTML = mail;
                            document.getElementById('static_mail').style.display = 'block';
                            document.getElementById('change_mail').style.display = 'block';
                            document.getElementById('edit_mail').style.display = 'none';
                            document.getElementById('save_mail').style.display = 'none';
                        }
                        else{
                            showError('An error ocurred: ' + this.responseText + ' (' + this.status + ').');
                        }
                    }
                }
                http.send('user=<?=get_context()->get_user()->get_id()?>&mail=' + mail);
            }

            /**
             * Shows the password change form.
             */
            function changePass(){
                document.getElementById('static_pass').style.display = 'none';
                document.getElementById('change_pass').style.display = 'none';
                document.getElementById('edit_pass_current').value = '';
                document.getElementById('edit_pass_current').value = '';
                document.getElementById('edit_pass_new').value = '';
                document.getElementById('edit_pass_repeat').style.display = 'block';
                document.getElementById('edit_pass_new').style.display = 'block';
                document.getElementById('edit_pass_repeat').style.display = 'block';
                document.getElementById('save_pass').style.display = 'block';
            }

            /**
             * Saves a password change.
             * 
             * Validates the new password and makes an AJAX request. If
             * succesfull, hides the password change form.
             */
            function savePass(){
                var http = new XMLHttpRequest();
                var pass = document.getElementById('edit_pass_new').value;
                var currentPass = document.getElementById('edit_pass_current').value;
                var repeatPass = document.getElementById('edit_pass_repeat').value;
                if (pass.length < 1){
                    showError('Please enter a new password.');
                    return;
                }
                if (mail.length < 6){
                    showError('Minimum password length is 6 characters.');
                    return;
                }
                if (currentPass.length < 1){
                    showError('Please enter your current password.');
                    return;
                }
                if (pass != repeatPass){
                    showError('Entered passwords do not match.');
                    return;
                }
                http.open('POST', '/action/edit_profile', true);
                http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                http.onreadystatechange = function(){
                    if (this.readyState == 4){
                        if (this.status == 200 || this.status == 204){
                            document.getElementById('static_pass').style.display = 'block';
                            document.getElementById('change_pass').style.display = 'block';
                            document.getElementById('edit_pass_current').style.display = 'none';
                            document.getElementById('edit_pass_new').style.display = 'none';
                            document.getElementById('edit_pass_repeat').style.display = 'none';
                            document.getElementById('save_pass').style.display = 'none';
                        }
                        else{
                            showError('An error ocurred: ' + this.responseText + ' (' + this.status + ').');
                        }
                    }
                }
                http.send('user=<?=get_context()->get_user()->get_id()?>&pass=' + pass + '&currentPass=' + currentPass);
            }

            /**
             * Generates a new random API key.
             *
             * Makes a request. On success, updates the API in the UI.
             */
            function regenerateApi(){
                var http = new XMLHttpRequest();
                http.open('POST', '/action/edit_profile', true);
                http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                http.onreadystatechange = function(){
                    if (this.readyState == 4){
                        if (this.status == 200 || this.status == 204){
                            document.getElementById('api_key').innerHTML = this.responseText;
                        }
                        else{
                            showError('An error ocurred: ' + this.responseText + ' (' + this.status + ').');
                        }
                    }
                }
                http.send('user=<?=get_context()->get_user()->get_id()?>&api=1');
            }
        </script>
    </head>
        <header>
<?php
            include __DIR__ . "/inc/header_app.php";
?>
        </header>
        <aside>
            <h2>
                <?=get_context()->get_user()->get_name()?>
            </h2>
            <p>
                Edit your profile settings
            </p>
        </aside>
        <main>
            <section class='content'>
                <h2>
                    <?=get_context()->get_user()->get_name()?>
                </h2>
                <article>
                    <table id='profile'>
                        <tr>
                            <td class='title'>
                                Username:
                            </td>
                            <td class='value'>
                                <span>
                                    <?=get_context()->get_user()->get_name()?>
                                </span>
                            </td>
                            <td class='action'>
                                <input onclick='logout();' type='button' value='Logout'/>
                            </td>
                        </tr>
                        <tr>
                            <td class='title'>
                                eMail:
                            </td>
                            <td class='value'>
                                <span id='static_mail'>
                                    <?=get_context()->get_user()->get_mail()?>
                                </span>
                                <input id='edit_mail' type='text' value='<?=get_context()->get_user()->get_mail()?>'/>
                            </td>
                            <td class='action'>
                                <input id='change_mail' onclick='changeMail();' type='button' value='Change'/>
                                <input id='save_mail' onclick='saveMail();' type='button' value='Save'/>
                            </td>
                        </tr>
                        <tr>
                            <td class='title'>
                                API key:
                            </td>
                            <td class='value'>
                                <span id='api_key'>
                                    <?=get_context()->get_user()->get_api_key()?>
                                </span>
                            </td>
                            <td class='action'>
                                <input id='regenerate_api' onclick='regenerateApi();' type='button' value='Regenerate'/>
                            </td>
                        </tr>
                        <tr>
                            <td class='title'>
                                Password:
                            </td>
                            <td class='value'>
                                <span id='static_pass'>
                                    ********
                                </span>
                                <input id='edit_pass_current' type='password' placeholder='Currrent password'/>
                                <input id='edit_pass_new' type='password' placeholder='New password'/>
                                <input id='edit_pass_repeat' type='password' placeholder='Repeat password'/>
                            </td>
                            <td class='action'>
                                <input id='change_pass' onclick='changePass();' type='button' value='Change'/>
                                <input id='save_pass' onclick='savePass();' type='button' value='Save'/>
                            </td>
                        </tr>
                        <tr>
                            <td class='title'>
                                Visibility:
                            </td>
                            <td id='visibility'>
                                <input type='checkbox' name='visible' onChange='toggleVisibility(this.value);'/>
                                <label for='filter_defeat'>Public profile</label>
                                <div class='help_tooltip'>
                                    <p>
                                        When checked, other users can view you game data. This includes:
                                        <span>Units</span>
                                        <span>Teams</span>
                                        <span>Runes, artifacts and enchantments</span>
                                        <span>Your guild name</span>
                                        <span>Records</span>
                                        <span>Building levels</span>
                                        <span>Guild name</span>
                                        This data will never be shown to other users:
                                        <span>Personal data (email, password...)</span>
                                        <span>Run logs</span>
                                        <span>Statistics</span>
                                        <span>Guild member list</span>
                                        <span>Inventory</span>
                                        <span>Building levels</span>
                                        <span>Guild name</span>
                                    </p>
                                </div>
                            </td>
                        </tr>
                    </table>
                </article>
            </section>
        </main>
        <div id='error_window'>
            <section class='content'>
                <h2>
                    <span>
                        Error
                    </span>
                </h2>
                <article>
                    <p id='error_msg'>
                    </p>
                    <input type='button' value='Close' onclick='closeError();'/>
                </article>
            </section>
        </div>

<?php
        include __DIR__ . "/inc/footer.php";
?>
    </body>
</html>