i18n: switch to fluent in login page

This commit is contained in:
nkanaev
2026-06-22 21:03:49 +01:00
parent 9e46014787
commit 6202451c7c
3 changed files with 36 additions and 17 deletions

View File

@@ -9,6 +9,7 @@
<link rel="alternate icon" href="./static/graphicarts/favicon.png" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
[v-cloak] { display: none }
form {
max-width: 300px;
margin: 0 auto;
@@ -23,21 +24,33 @@
</style>
</head>
<body class="theme-{% .settings.theme_name %}">
<form action="" method="post">
<img src="./static/graphicarts/anchor.svg" alt="">
{% if .error %}
<div class="text-danger text-center my-3">{% .error %}</div>
{% end %}
<div class="form-group">
<label for="username">Username</label>
<input name="username" class="form-control" id="username" autocomplete="off"
value="{% if .username %}{% .username %}{% end %}" required autofocus>
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" class="form-control" id="password" type="password" required>
</div>
<button class="btn btn-block btn-default" type="submit">Login</button>
</form>
<div id="app" v-cloak>
<form action="" method="post">
<img src="./static/graphicarts/anchor.svg" alt="">
<div class="text-danger text-center my-3" v-if="hasError">{{ $t('login_error') }}</div>
<div class="form-group">
<label for="username">{{ $t('username') }}</label>
<input name="username" class="form-control" id="username" autocomplete="off"
value="{% if .username %}{% .username %}{% end %}" required autofocus>
</div>
<div class="form-group">
<label for="password">{{ $t('password') }}</label>
<input name="password" class="form-control" id="password" type="password" required>
</div>
<button class="btn btn-block btn-default" type="submit">{{ $t('login') }}</button>
</form>
</div>
<script src="./static/javascripts/vue.min.js"></script>
<script src="./static/javascripts/fluent.js"></script>
<script src="./static/javascripts/i18n.js"></script>
<script>
Vue.use(i18n)
new Vue({
data: { hasError: {% .hasError %} },
created: function () {
this.$setLang('{% .settings.language %}')
}
}).$mount('#app')
</script>
</body>
</html>