diff options
Diffstat (limited to 'src/web/_views/settings/main.php')
| -rw-r--r-- | src/web/_views/settings/main.php | 197 |
1 files changed, 197 insertions, 0 deletions
diff --git a/src/web/_views/settings/main.php b/src/web/_views/settings/main.php new file mode 100644 index 0000000..4401fe1 --- /dev/null +++ b/src/web/_views/settings/main.php @@ -0,0 +1,197 @@ +<?php /* Copyright (c) 2024 Freya Murphy */ + +$user = $session; + +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=\"form-input 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 + }); + +} + +function handlePassword(e) { + e.preventDefault(); + let el = e.target.elements; + let curr = el.curr_password.value; + let newp = el.new_password.value; + + $.ajax({ + url: '/api/rpc/update_password', + method: 'POST', + data: JSON.stringify({ + new_password: newp, + current_password: curr + }), + 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> + +<main id="main"> + <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')?> + <?=__create_form($user, 'profile_bio')?> + <hr class="mt"> + <h2><?=ucfirst(lang('security_title'))?></h2> + <strong><?=ucfirst(lang('security_desc'))?></strong> + <form action="" class="col mt settings-form" onsubmit="handlePassword(event)"> + <div class="form-input mb" style="flex: 1"> + <input + type="password" + name="curr_password" + id="curr_password" + placeholder=" " + > + <label for="curr_password"> + <?=ucwords(lang('ph_current_pass'))?> + </label> + </div> + <div class="form-input mb" style="flex: 1"> + <input + type="password" + name="new_password" + id="new_password" + placeholder=" " + > + <label for="new_password"> + <?=ucwords(lang('ph_new_pass'))?> + </label> + </div> + <button + class="btn grow btn-alt btn-submit" + style="flex: 0; height: fit-content;" + ><?=lang('update')?></button> + </form> + <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-primary" + onclick="updateMedia('avatar')" + ><?=ucfirst(lang('update'))?></button> + <button + class="btn btn-alt btn-primary 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-primary" + onclick="updateMedia('banner')" + ><?=ucfirst(lang('update'))?></button> + <button + class="btn btn-alt btn-primary mt" + onclick="resetMedia('banner')" + ><?=ucfirst(lang('reset'))?></button> + </div> + </div> + </div> +</main> |