diff options
Diffstat (limited to '')
| -rw-r--r-- | src/web/_views/apps/profile/main.php | 2 | ||||
| -rw-r--r-- | src/web/_views/apps/settings/main.php | 151 | ||||
| -rw-r--r-- | src/web/_views/footer.php | 2 | ||||
| -rw-r--r-- | src/web/_views/header.php | 17 | ||||
| -rw-r--r-- | src/web/_views/modal/about.php | 28 | ||||
| -rw-r--r-- | src/web/_views/template/toast.php | 2 |
6 files changed, 197 insertions, 5 deletions
diff --git a/src/web/_views/apps/profile/main.php b/src/web/_views/apps/profile/main.php index 919b190..21b3b46 100644 --- a/src/web/_views/apps/profile/main.php +++ b/src/web/_views/apps/profile/main.php @@ -3,7 +3,7 @@ <div id="main-content"> <div id="profile-header-container"> <div id="profile-header" class="col"> - <?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner')?> + <?=image('/api/rpc/profile_banner?user_id=' . $user['id'], 'banner', mime: $user['banner_mime'])?> <div class="info row"> <div class="pfp-wrapper"> <?=pfp($user)?> diff --git a/src/web/_views/apps/settings/main.php b/src/web/_views/apps/settings/main.php new file mode 100644 index 0000000..0cdc4f2 --- /dev/null +++ b/src/web/_views/apps/settings/main.php @@ -0,0 +1,151 @@ +<?php /* Copyright (c) 2024 Freya Murphy */ ?> +<?php /* vi: syntax=php */ ?> + +<?php + +$user = $this->main->user(); + +function __create_form($user, $col) { + $ph = ucfirst(lang('ph_' . $col)); + $val = $user[$col]; + return "<form action=\"\" class=\"row mt settings-form\" onsubmit=\"handleSubmit(event)\"> + <div class=\"rel mb\" style=\"flex: 1\"> + <input + type=\"text\" + name=\"{$col}\" + id=\"{$col}\" + placeholder=\" \" + value=\"{$val}\" + > + <label for=\"{$col}\"> + {$ph} + </label> + </div> + <input type=\"hidden\" name=\"col\" value=\"{$col}\"> + <input type=\"hidden\" name=\"uid\" value=\"{$user['id']}\"> + <button + class=\"btn btn-submit ml\" + style=\"flex: 0; height: fit-content;\" + ><i class=\"mi\">check</i></button> + </form>"; +} + +?> + +<script> + +function onSuccess() { + successToast(<?=json_encode(ucfirst(lang('settings_success')))?>); +} + +function handleSubmit(e) { + e.preventDefault(); + let el = e.target.elements; + let col = el.col.value; + let uid = el.uid.value; + let val = el[col].value; + + $.ajax({ + url: '/api/user?id=eq.' + uid, + method: 'PATCH', + data: JSON.stringify({ [col]: val }), + success: onSuccess + }); + +} + +const toBase64 = file => new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = reject; +}); + +function updateMedia(media_type) { + + var input = document.createElement('input'); + input.type = 'file'; + + input.onchange = async (e) => { + var file = e.target.files[0]; + var data = (await toBase64(file)).split(";"); + var mime = data[0].split(":")[1]; + var content = data[1].split(",")[1]; + + $.ajax({ + url: '/api/rpc/update_user_media', + method: 'POST', + data: JSON.stringify({ + media_type, mime, content + }), + success: onSuccess + }); + + } + + input.click(); + +} + +function resetMedia(media_type) { + $.ajax({ + url: '/api/rpc/delete_user_media', + method: 'POST', + data: JSON.stringify({ + media_type + }), + success: onSuccess + }); +} +</script> + +<div id="main-content"> + <div id="settings" class="card"> + <h1><?=ucfirst(lang('title'))?></h1> + <hr class="mt"> + <h2><?=ucfirst(lang('general_title'))?></h2> + <strong><?=ucfirst(lang('general_desc'))?></strong> + <?=__create_form($user, 'username')?> + <?=__create_form($user, 'email')?> + <?=__create_form($user, 'first_name')?> + <?=__create_form($user, 'last_name')?> + <?=__create_form($user, 'gender')?> + <hr class="mt"> + <h2><?=ucfirst(lang('media_title'))?></h2> + <strong><?=ucfirst(lang('media_desc'))?></strong> + <h3><?=ucfirst(lang('ph_avatar'))?></h3> + <div class="row"> + <?=image( + "/api/rpc/profile_avatar?user_id={$user['id']}", + height: '100px' + )?> + <div class="col ml"> + <button + class="btn btn-alt btn-blue" + onclick="updateMedia('avatar')" + ><?=ucfirst(lang('update'))?></button> + <button + class="btn btn-alt btn-blue mt" + onclick="resetMedia('avatar')" + ><?=ucfirst(lang('reset'))?></button> + </div> + </div> + <h3><?=ucfirst(lang('ph_banner'))?></h3> + <div class="row"> + <?=image( + "/api/rpc/profile_banner?user_id={$user['id']}", + height: '100px' + )?> + <div class="col ml"> + <button + class="btn btn-alt btn-blue" + onclick="updateMedia('banner')" + ><?=ucfirst(lang('update'))?></button> + <button + class="btn btn-alt btn-blue mt" + onclick="resetMedia('banner')" + ><?=ucfirst(lang('reset'))?></button> + </div> + </div> + </div> +</div> diff --git a/src/web/_views/footer.php b/src/web/_views/footer.php index 9040c3a..bc9b3a2 100644 --- a/src/web/_views/footer.php +++ b/src/web/_views/footer.php @@ -1,7 +1,7 @@ <?php /* Copyright (c) 2024 Freya Murphy */ ?> <?php /* vi: syntax=php */ ?> <footer> - Freya Murphy © 2023 | <a href="https://freya.cat">freya.cat</a> + <?=ucfirst(lang('copyright'))?> | <a href="https://freya.cat">freya.cat</a> </footer> <body> diff --git a/src/web/_views/header.php b/src/web/_views/header.php index 97eb435..98fcf81 100644 --- a/src/web/_views/header.php +++ b/src/web/_views/header.php @@ -55,7 +55,7 @@ </script> <?=pfp($self, FALSE, 'toggleUserMenu()')?> <div class="card col hidden" id="user-menu"> - <span class="row" id="user-menu-header"> + <span class="row mr" id="user-menu-header"> <?=pfp($self, FALSE)?> <span class="col"> <strong><?=$this->format_model->name($self)?></strong> @@ -65,16 +65,25 @@ <hr> <?=ilang( 'action_profile', + id: 'action-profile', class: 'btn', href: '/profile?id=' . $self['id'] )?> <?=ilang( + 'action_xssbook_about', + id: 'action-xssbook-about', + class: 'btn', + click: 'viewAbout' + )?> + <?=ilang( 'action_settings', + id: 'action-settings', class: 'btn', href: '/settings' )?> <?=ilang( 'action_logout', + id: 'action-logout', class: 'btn', href: '/auth/logout' )?> @@ -84,6 +93,11 @@ <?php endif; ?> </div> <script> + $('#action-xssbook-about').on('click', function() { + $.get( "/modal/about", function (data) { + $(document.body).append(data); + }); + }) $('#action-hamburger').on('click', function() { let menu = $('.nav-center'); menu.toggleClass('visible'); @@ -94,7 +108,6 @@ userMenu = $('#user-menu'); var nav = $('.nav'); document.onclick = function(event) { - console.log(event.target, nav[0]); let outside = !(nav[0].contains(event.target)); if (outside) { userMenu.addClass('hidden'); diff --git a/src/web/_views/modal/about.php b/src/web/_views/modal/about.php new file mode 100644 index 0000000..746607e --- /dev/null +++ b/src/web/_views/modal/about.php @@ -0,0 +1,28 @@ +<?php /* Copyright (c) 2024 Freya Murphy */ ?> +<?php /* vi: syntax=php */ ?> +<div id="about-modal-body"> + <span class="logo">xssbook</span> + <hr> + <span class="mb"><?=ucfirst(lang('version'))?></span> + <span><?=ucfirst(lang('copyright'))?></span> + <hr> + <a class="btn btn-blue" href="https://g.freya.cat/freya/xssbook2">Source Code</a> +</div> +<style> +#about-modal-body { + display: flex; + margin-top: 50px; + flex-direction: column; + justify-content: center; + align-items: center; + font-weight: bold; + font-size: 1.1rem; + padding: 1rem; +} +#about-modal-body .logo { + color: var(--blue); + font-family: facebook; + font-size: 2.25rem; + margin-bottom: 1rem; +} +</style> diff --git a/src/web/_views/template/toast.php b/src/web/_views/template/toast.php index ae2e7d8..0a6a82f 100644 --- a/src/web/_views/template/toast.php +++ b/src/web/_views/template/toast.php @@ -20,7 +20,7 @@ } ?> -<div class="toast error"> +<div class="toast <?=$type?>"> <?=$lang_msg?> <?=ilang('action_close', class: 'action-close-toast')?> </div> |