pcmt/templates/user/init-password-change.tmpl

52 lines
2.7 KiB
Go HTML Template

{{ template "head.tmpl" . }}
<body class="min-h-screen flex flex-col justify-between bg-white dark:bg-gray-900">
{{ template "navbar.tmpl" . }}
<main class="grow mb-auto">
<div class="container mx-auto place-items-center px-8">
{{ if and .Data .Data.flash }}
<h1 class="text-xl text-pink-600 dark:text-pink-500 py-2">
{{ .Data.flash }}
</h1>
{{- end }}
{{ if .User -}}
<h1 class="mt-20 text-2xl text-pink-400 font-bold">
Welcome, <code>{{.Name}}</code>, since you have never changed your password here before, now is the time to do that!<br>
</h1>
<span class="text-lg text-gray-500 dark:text-gray-300 font-italic">
This is necessary in order to make sure that only you know the password, since the account was pre-created <em>for</em> you.
</span>
<div class="block">
<div class="mt-8 md:flex md:items-center md:place-items-center md:justify-between">
<form method="POST" class="w-full md:w-5xl" action="/user/initial-password-change">
<input type="hidden" name="csrf" value="{{- .CSRF -}}">
<div class="relative flex items-center mt-4">
<span class="absolute" role="img" aria-label="password lock icon">
{{ template "svg-password.tmpl" }}
</span>
<input name="new-password" type="new-password"
placeholder="New password" {{if and .Data.form .Data.form.Password}}value="{{.Data.form.Password}}"{{else}}{{end}}
minlength=20
required
class="block w-full px-10 py-3 required:border-slate-500 dark:required:border-slate-300 required:border-3 valid:border text-gray-700 bg-white border rounded-lg dark:bg-gray-900 dark:text-gray-300 dark:valid:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
</div>
<button
class="w-full my-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-lg md:w-1/4 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50"
type="submit">Submit</button>
</form>
</div>
<form method="POST" class="w-full md:w-5xl" action="/logout">
<input type="hidden" name="csrf" value="{{- .CSRF -}}">
<button
class="w-full my-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-lg md:w-1/4 hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50"
type="submit">Logout</button>
</form>
</div>
{{- else }}
<h1 class="mt-20 text-2xl text-pink-400 font-bold">
Please log in.
</h1>
{{- end -}}
</div>
</main>
{{ template "footer.tmpl" . }}