87 lines
3.6 KiB
HTML
87 lines
3.6 KiB
HTML
{{template "base" .}}
|
|
|
|
{{define "head"}}
|
|
{{if and .captchaEnabled (eq .captchaType "turnstile")}}
|
|
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{define "content"}}
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-5 col-lg-4">
|
|
<div class="card shadow">
|
|
<div class="card-body p-4">
|
|
<div class="text-center mb-4">
|
|
<i class="bi bi-journal-check display-4 text-primary"></i>
|
|
<h2 class="mt-2">ログイン</h2>
|
|
</div>
|
|
|
|
{{if .error}}
|
|
<div class="alert alert-danger">{{.error}}</div>
|
|
{{end}}
|
|
|
|
<form method="POST" action="/login">
|
|
{{.csrfField}}
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">メールアドレス</label>
|
|
<input type="email" class="form-control" id="email" name="email" value="{{.email}}" required
|
|
autofocus>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">パスワード</label>
|
|
<input type="password" class="form-control" id="password" name="password" required>
|
|
</div>
|
|
|
|
{{if .captchaEnabled}}
|
|
{{if eq .captchaType "turnstile"}}
|
|
<div class="mb-3 d-flex justify-content-center">
|
|
<div class="cf-turnstile" data-sitekey="{{.turnstileSiteKey}}"></div>
|
|
</div>
|
|
{{else if eq .captchaType "image"}}
|
|
<div class="mb-3">
|
|
<label class="form-label">画像認証</label>
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<img src="/captcha/{{.captchaID}}.png" alt="CAPTCHA" class="border rounded" id="captchaImg">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="reloadCaptcha()" title="更新">
|
|
<i class="bi bi-arrow-clockwise"></i>
|
|
</button>
|
|
</div>
|
|
<input type="hidden" name="captcha_id" id="captchaID" value="{{.captchaID}}">
|
|
<input type="text" class="form-control" name="captcha_answer"
|
|
placeholder="上の数字を入力" autocomplete="off" required>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">ログイン</button>
|
|
</div>
|
|
</form>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div class="text-center">
|
|
<p class="mb-0">アカウントをお持ちでない方は</p>
|
|
<a href="/register" class="btn btn-outline-secondary mt-2">新規登録</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "scripts"}}
|
|
{{if and .captchaEnabled (eq .captchaType "image")}}
|
|
<script>
|
|
function reloadCaptcha() {
|
|
fetch('/captcha-new')
|
|
.then(r => r.text())
|
|
.then(id => {
|
|
document.getElementById('captchaID').value = id;
|
|
document.getElementById('captchaImg').src = '/captcha/' + id + '.png?' + Date.now();
|
|
});
|
|
}
|
|
</script>
|
|
{{end}}
|
|
{{end}}
|