init(web): add settings page
This commit is contained in:
parent
3d35de3234
commit
14a7104c5f
@ -18,3 +18,7 @@ func root(c *gin.Context) {
|
||||
func quotes(c *gin.Context) {
|
||||
c.HTML(http.StatusOK, "quotes.html", nil)
|
||||
}
|
||||
|
||||
func settings(c *gin.Context) {
|
||||
c.HTML(http.StatusOK, "settings.html", nil)
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@ func Serve(addr string) {
|
||||
r.Static("/static", "./static")
|
||||
r.GET("/", api.MiddlewareAuth, root)
|
||||
r.GET("/quotes", api.MiddlewareAuth, middlewareAuth, quotes)
|
||||
r.GET("/settings", api.MiddlewareAuth, middlewareAuth, settings)
|
||||
|
||||
r.Run(addr)
|
||||
}
|
||||
|
||||
58
web/static/js/settings.js
Normal file
58
web/static/js/settings.js
Normal file
@ -0,0 +1,58 @@
|
||||
$(window).on("load", function (e) {
|
||||
$.ajax({
|
||||
url: "/api/auth",
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function (resp) {
|
||||
$("#input-name").val(resp.name);
|
||||
$("#input-login").val(resp.login);
|
||||
$("#input-tgid").val(resp.telegram_id);
|
||||
},
|
||||
error: function (err) {
|
||||
$("#error-message").text(err.responseJSON.error);
|
||||
$("#error").removeClass("hidden");
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("click", "#btn-logout", function (e) {
|
||||
$.ajax({
|
||||
url: "/api/auth",
|
||||
type: "DELETE",
|
||||
success: function () {
|
||||
location.reload();
|
||||
},
|
||||
error: function (err) {
|
||||
$("#error-message").text(err.responseJSON.error);
|
||||
$("#error").removeClass("hidden");
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on("submit", "#user-update", function (e) {
|
||||
e.preventDefault();
|
||||
formdata = $("#user-update").serializeArray();
|
||||
data = {};
|
||||
$(formdata).each(function (index, obj) {
|
||||
data[obj.name] = obj.value;
|
||||
});
|
||||
console.log(data);
|
||||
$.ajax({
|
||||
url: "/api/auth",
|
||||
type: "PATCH",
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
processData: false,
|
||||
dataType: "json",
|
||||
success: function () {
|
||||
$("#error").addClass("hidden");
|
||||
$("#success").removeClass("hidden");
|
||||
$("#input-password").val("");
|
||||
},
|
||||
error: function (err) {
|
||||
$("#success").addClass("hidden");
|
||||
$("#error-message").text(err.responseJSON.error);
|
||||
$("#error").removeClass("hidden");
|
||||
},
|
||||
});
|
||||
});
|
||||
@ -50,6 +50,7 @@
|
||||
<div id="pages-next" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">...</div>
|
||||
<button id="btn-page-last" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">10</button>
|
||||
</div>
|
||||
<a href="/settings" class="block fas fa-gear text-gray-800" style="text-align: center;"> Настройки</a>
|
||||
<div class="text-center mt-8">
|
||||
<p class="text-xs text-gray-500 font-['Inter']">
|
||||
<i class="fas fa-quote-right text-custom mr-1"></i>
|
||||
|
||||
100
web/templates/settings.html
Normal file
100
web/templates/settings.html
Normal file
@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
{{ template "head" . }}
|
||||
<title>Настройки | SkazaNull</title>
|
||||
</head>
|
||||
|
||||
<body class="min-h-screen bg-gray-50 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-lg w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-quote-left text-4xl text-custom mb-4"></i>
|
||||
<h2 class="mt-6 text-3xl font-bold font-['Playfair_Display'] text-gray-900">
|
||||
Настройки юзверя
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-gray-600 font-['Inter']">
|
||||
Изменяй и властвуй
|
||||
</p>
|
||||
</div>
|
||||
<div id="error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
|
||||
<p id="error-message" class="text-sm text-red-600 font-['Inter']"></p>
|
||||
</div>
|
||||
<div id="success" class="hidden mt-4 p-4 rounded-md bg-green-50 border border-green-200">
|
||||
<p id="success-message" class="text-sm text-green-600 font-['Inter']">Юзверь обновлен!</p>
|
||||
</div>
|
||||
<form id="user-update" class="mt-8 space-y-6" action="/api/auth" method="PATCH">
|
||||
<div class="space-y-5">
|
||||
<div><label class="block text-sm font-medium text-gray-700 font-["Inter"]">Имя юзверя</label>
|
||||
<div class="mt-1 relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fas fa-user text-gray-400"></i>
|
||||
</div>
|
||||
<input type="text" id="input-name" name="name" placeholder="Например, "Центробек""
|
||||
class="!rounded-button appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-["Inter"]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-medium text-gray-700 font-["Inter"]">
|
||||
Логин (то, что при авторизации используется)
|
||||
</label>
|
||||
<div class="mt-1 relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fas fa-at text-gray-400"></i>
|
||||
</div>
|
||||
<input type="login" id="input-login" name="login" placeholder="Например, "centrobeque""
|
||||
class="!rounded-button appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-["Inter"]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-medium text-gray-700 font-["Inter"]">
|
||||
Пароль
|
||||
</label>
|
||||
<div class="mt-1 relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fas fa-lock text-gray-400"></i>
|
||||
</div>
|
||||
<input type="password" id="input-password" name="password" placeholder="Например, "uzbeki_sila!""
|
||||
class="!rounded-button appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-["Inter"]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-medium text-gray-700 font-["Inter"]">
|
||||
Telegram ID
|
||||
</label>
|
||||
<div class="mt-1 relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<i class="fab fa-telegram text-gray-400"></i>
|
||||
</div>
|
||||
<input type="number" id="input-tgid" name="telegram_id" placeholder="Здесь должны быть ТОЛЬКО цифры"
|
||||
class="!rounded-button appearance-none block w-full pl-10 pr-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-["Inter"]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex justify-between w-full">
|
||||
<button type="submit"
|
||||
class="!rounded-button px-6 py-2 text-sm font-medium text-white bg-custom hover:bg-custom/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-["Inter"]">
|
||||
Сохранить изменения
|
||||
</button>
|
||||
<button type="button" id="btn-logout"
|
||||
class="!rounded-button px-6 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 font-["Inter"]">
|
||||
Выйти
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<a href="/quotes" class="block fas fa-book text-gray-800" style="text-align: center;"> К цитатам</a>
|
||||
<div class="text-center">
|
||||
<p class="text-xs text-gray-500 font-['Inter']">
|
||||
<i class="fas fa-quote-right text-custom mr-1"></i>
|
||||
© Masahiko AMANO (H1K0), 2025—present
|
||||
<i class="fas fa-quote-left text-custom ml-1"></i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/settings.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user