1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
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>
|
