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) {
|
func quotes(c *gin.Context) {
|
||||||
c.HTML(http.StatusOK, "quotes.html", nil)
|
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.Static("/static", "./static")
|
||||||
r.GET("/", api.MiddlewareAuth, root)
|
r.GET("/", api.MiddlewareAuth, root)
|
||||||
r.GET("/quotes", api.MiddlewareAuth, middlewareAuth, quotes)
|
r.GET("/quotes", api.MiddlewareAuth, middlewareAuth, quotes)
|
||||||
|
r.GET("/settings", api.MiddlewareAuth, middlewareAuth, settings)
|
||||||
|
|
||||||
r.Run(addr)
|
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>
|
<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>
|
<button id="btn-page-last" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">10</button>
|
||||||
</div>
|
</div>
|
||||||
|
<a href="/settings" class="block fas fa-gear text-gray-800" style="text-align: center;"> Настройки</a>
|
||||||
<div class="text-center mt-8">
|
<div class="text-center mt-8">
|
||||||
<p class="text-xs text-gray-500 font-['Inter']">
|
<p class="text-xs text-gray-500 font-['Inter']">
|
||||||
<i class="fas fa-quote-right text-custom mr-1"></i>
|
<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