Implement password change flow
This commit is contained in:
@ -0,0 +1,67 @@
|
||||
{% extends "/dashboard/_base.html" %} {% block content %}
|
||||
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
|
||||
<div class="w-full max-w-xl p-6 space-y-8 bg-white rounded-lg shadow sm:p-8 dark:bg-gray-800">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
Change Password
|
||||
</h2>
|
||||
{% if errors | list %}
|
||||
<div class="flex p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
|
||||
<svg class="shrink-0 inline w-4 h-4 me-3 mt-[2px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
||||
</svg>
|
||||
<span class="sr-only">Danger</span>
|
||||
<div>
|
||||
<span class="font-medium">Error changing password:</span>
|
||||
<ul class="mt-1.5 list-disc list-inside">
|
||||
{% for error in errors %}
|
||||
<li> {{ error }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form class="mt-8 space-y-6" action="/password" method="POST" id="password-change-form">
|
||||
<input hidden type="text" name="username" value="{{ user.display_name }}" autocomplete="username">
|
||||
<div>
|
||||
<label for="current_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Current password</label>
|
||||
<input type="password" name="current_password" id="current_password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<div hx-target="this" hx-swap="outerHTML">
|
||||
<div>
|
||||
<label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">New password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
placeholder="••••••••"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<label for="confirm_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="confirm_password"
|
||||
id="confirm-password"
|
||||
placeholder="••••••••"
|
||||
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
hx-post="/password/validate-confirm"
|
||||
hx-include="[name='password']"
|
||||
>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button type="submit" class="w-full px-5 py-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Change password</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@ -0,0 +1,37 @@
|
||||
<div hx-target="this" hx-swap="outerHTML">
|
||||
<div>
|
||||
<label for="password" class="block mb-2 text-sm font-medium text-red-900 dark:text-white">New password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
placeholder="••••••••"
|
||||
value="{{ password }}"
|
||||
class="bg-red-50 border border-red-500 text-red-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-red-700 dark:border-red-600 dark:placeholder-red-400 dark:text-white dark:focus:ring-red-500 dark:focus:border-red-500"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<label for="confirm_password" class="block mb-2 text-sm font-medium text-red-900 dark:text-white">Confirm New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="confirm_password"
|
||||
id="confirm-password"
|
||||
placeholder="••••••••"
|
||||
class="bg-red-50 border border-red-500 text-red-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-red-700 dark:border-red-600 dark:placeholder-red-400 dark:text-white dark:focus:ring-red-500 dark:focus:border-red-500"
|
||||
required
|
||||
value="{{ confirm_password }}"
|
||||
autocomplete="new-password"
|
||||
hx-post="/password/validate-confirm"
|
||||
hx-include="[name='password']"
|
||||
>
|
||||
</div>
|
||||
|
||||
<p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> Passwords do not match!</p>
|
||||
|
||||
<div class="mt-2">
|
||||
<button type="submit" class="w-full px-5 py-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 cursor-not-allowed" disabled>Change password</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
{% extends "/dashboard/_base.html" %} {% block content %}
|
||||
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4">
|
||||
<div class="text-center xl:max-w-4xl">
|
||||
<h1 class="mb-3 text-2xl font-bold leading-tight text-gray-900 sm:text-4xl lg:text-5xl dark:text-white">Password Changed</h1>
|
||||
<p class="mb-5 text-base font-normal text-gray-500 md:text-lg dark:text-gray-400">Your password was changed sucessfully. Next time you log in, use your new password.</p>
|
||||
<a href="/dashboard" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-3 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
|
||||
<svg class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
Go back to the dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
@ -0,0 +1,33 @@
|
||||
<div hx-target="this" hx-swap="outerHTML">
|
||||
<div>
|
||||
<label for="password" class="block mb-2 text-sm font-medium text-green-900 dark:text-white">New password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
placeholder="••••••••"
|
||||
value="{{ password }}"
|
||||
class="bg-green-50 border border-green-500 text-green-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-green-700 dark:border-green-600 dark:placeholder-green-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<label for="confirm_password" class="block mb-2 text-sm font-medium text-green-900 dark:text-white">Confirm New Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="confirm_password"
|
||||
id="confirm-password"
|
||||
placeholder="••••••••"
|
||||
class="bg-green-50 border border-green-500 text-green-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-green-700 dark:border-green-600 dark:placeholder-green-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
|
||||
required
|
||||
value="{{ confirm_password }}"
|
||||
autocomplete="new-password"
|
||||
hx-post="/password/validate-confirm"
|
||||
hx-include="[name='password']"
|
||||
>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button type="submit" class="w-full px-5 py-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">Change password</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -94,7 +94,7 @@
|
||||
{% if user.local %}
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
href="/password"
|
||||
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
role="menuitem"
|
||||
>Change Password</a
|
||||
|
||||
@ -3,11 +3,17 @@
|
||||
# pyright: reportUnusedFunction=false
|
||||
import logging
|
||||
from typing import Annotated
|
||||
from fastapi import APIRouter, Depends, Request
|
||||
from fastapi import APIRouter, Depends, Form, Request
|
||||
from fastapi.responses import RedirectResponse
|
||||
from pydantic import BaseModel
|
||||
from sshecret_admin.auth import LocalUserInfo
|
||||
from sqlalchemy.ext.asyncio import AsyncSession
|
||||
from sshecret_admin.auth import LocalUserInfo, authenticate_user_async
|
||||
from sshecret_admin.auth.authentication import hash_password
|
||||
from sshecret_admin.frontend.exceptions import RedirectException
|
||||
from sshecret_admin.services import AdminBackend
|
||||
from starlette.datastructures import URL
|
||||
|
||||
from sshecret.backend.models import Operation
|
||||
|
||||
from ..dependencies import FrontendDependencies
|
||||
|
||||
@ -25,6 +31,14 @@ class StatsView(BaseModel):
|
||||
audit_events: int = 0
|
||||
|
||||
|
||||
class PasswordChangeForm(BaseModel):
|
||||
"""Password change form data."""
|
||||
|
||||
current_password: str
|
||||
password: str
|
||||
confirm_password: str
|
||||
|
||||
|
||||
async def get_stats(admin: AdminBackend) -> StatsView:
|
||||
"""Get stats for the frontpage."""
|
||||
clients = await admin.get_clients()
|
||||
@ -75,4 +89,102 @@ def create_router(dependencies: FrontendDependencies) -> APIRouter:
|
||||
},
|
||||
)
|
||||
|
||||
@app.get("/password")
|
||||
async def get_change_password(
|
||||
request: Request,
|
||||
current_user: Annotated[LocalUserInfo, Depends(dependencies.get_user_info)],
|
||||
):
|
||||
"""Render Change password site."""
|
||||
if not current_user.local:
|
||||
LOG.debug("User tried to change password, but is not a local user.")
|
||||
return RedirectException(to=URL("/"))
|
||||
|
||||
return templates.TemplateResponse(
|
||||
request,
|
||||
"change_password/index.html.j2",
|
||||
{
|
||||
"page_title": "Change Password",
|
||||
"user": current_user,
|
||||
"errors": [],
|
||||
},
|
||||
)
|
||||
|
||||
@app.post("/password")
|
||||
async def change_password(
|
||||
request: Request,
|
||||
current_user: Annotated[LocalUserInfo, Depends(dependencies.get_user_info)],
|
||||
admin: Annotated[AdminBackend, Depends(dependencies.get_admin_backend)],
|
||||
session: Annotated[AsyncSession, Depends(dependencies.get_async_session)],
|
||||
passwd_form: Annotated[PasswordChangeForm, Form()],
|
||||
):
|
||||
"""Change password."""
|
||||
errors: list[str] = []
|
||||
user = await authenticate_user_async(
|
||||
session, current_user.display_name, passwd_form.current_password
|
||||
)
|
||||
new_password_matches = passwd_form.password == passwd_form.confirm_password
|
||||
if not user:
|
||||
errors.append("Invalid current password entered")
|
||||
if not new_password_matches:
|
||||
errors.append("Passwords do not match")
|
||||
|
||||
if errors:
|
||||
return templates.TemplateResponse(
|
||||
request,
|
||||
"change_password/index.html.j2",
|
||||
{
|
||||
"page_title": "Change Password",
|
||||
"user": current_user,
|
||||
"errors": errors,
|
||||
},
|
||||
)
|
||||
|
||||
assert user is not None
|
||||
new_password_hash = hash_password(passwd_form.password)
|
||||
user.hashed_password = new_password_hash
|
||||
session.add(user)
|
||||
await session.commit()
|
||||
origin = "UNKNOWN"
|
||||
if request.client:
|
||||
origin = request.client.host
|
||||
await admin.write_audit_message(
|
||||
Operation.UPDATE,
|
||||
"User changed their password",
|
||||
origin,
|
||||
username=user.username,
|
||||
)
|
||||
|
||||
return templates.TemplateResponse(
|
||||
request,
|
||||
"change_password/success.html.j2",
|
||||
{
|
||||
"page_title": "Change Password success",
|
||||
"user": current_user,
|
||||
},
|
||||
)
|
||||
|
||||
@app.post("/password/validate-confirm")
|
||||
async def validate_password_match(
|
||||
request: Request,
|
||||
password: Annotated[str, Form()],
|
||||
confirm_password: Annotated[str, Form()],
|
||||
):
|
||||
"""Validate password matches."""
|
||||
valid = "/change_password/valid_password.html.j2"
|
||||
invalid = "/change_password/invalid_password.html.j2"
|
||||
template = valid
|
||||
if password != confirm_password:
|
||||
template = invalid
|
||||
|
||||
LOG.info("Password matches: %r", (password == confirm_password))
|
||||
|
||||
return templates.TemplateResponse(
|
||||
request,
|
||||
template,
|
||||
{
|
||||
"password": password,
|
||||
"confirm_password": confirm_password,
|
||||
},
|
||||
)
|
||||
|
||||
return app
|
||||
|
||||
Reference in New Issue
Block a user