view mod_password_reset/password_reset/password_reset.html @ 5627:3a5cf8d80089

mod_http_oauth2: Tweak method of centering the UI The percentage here was relative to the viewport width, which on some very wide screens may put the UI slightly outside of the view, requiring scrolling to see. By using a unit relative to the height of the viewport, this is avoided and should work better. But no guarantees, it's still possible to resize the browser or adjust font sizes so that the UI goes out of view.
author Kim Alvefur <zash@zash.se>
date Mon, 31 Jul 2023 07:28:09 +0200
parents 39d48f8bc5b2
children
line wrap: on
line source

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Reset password</title>
	<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
	<div class="container col-md-4 col-md-offset-4" style="margin-top: 100px">
		{message&
		<div class="alert {classes}">{message}</div>
		}
		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="panel-title">Reset password</div>
			</div>

			<div class="panel-body" style="padding: 20px">

				<p>Please enter a new password for your account.</p>

				<form method="post" class="form-horizontal">
					<div class="form-group" style="margin-right: 0px;">
						<label for="user" class="col-sm-2 control-label">Account:</label>
						<div class="input-group col-sm-10">
							<input type="text" name="user" class="form-control" disabled placeholder="{jid}">
						</div>
					</div>
					<div class="form-group" style="margin-right: 0px;">
						<label for="password" class="col-sm-2 control-label">Password:</label>
						<div class="input-group col-sm-10">
							<input type="password" required autofocus
								name="password"
								class="form-control"
								autocomplete="new-password"
								minlength="{min_password_length}"
							>
							<span class="form-text text-muted">Enter a new secure password for your account.</span>
						</div>
					</div>
					<input type="hidden" name="token" value="{token}">
					<button type="submit" class="btn btn-primary btn-lg">Reset</button>
				</form>
			</div>
		</div>
	</div>
</body>
</html>