56 lines
2.6 KiB
Plaintext
56 lines
2.6 KiB
Plaintext
<div class="rr-app" data-auth-page>
|
|
<main class="auth-shell">
|
|
<h1>RpgRoller</h1>
|
|
<p class="auth-subtitle">Register or log in to join a campaign session.</p>
|
|
<p class="status-message @(StatusIsError ? "error" : "success")"
|
|
data-auth-status
|
|
aria-live="polite"
|
|
hidden="@string.IsNullOrWhiteSpace(StatusMessage)">@StatusMessage</p>
|
|
<div class="auth-grid">
|
|
<section class="card auth-card">
|
|
<h2>Register</h2>
|
|
<p class="form-error" data-form-error hidden></p>
|
|
<form class="form-grid" data-auth-form="register" novalidate>
|
|
<label for="register-username">Username</label>
|
|
<input id="register-username" name="username" autocomplete="username"/>
|
|
<p class="field-error" data-field-error="username" hidden></p>
|
|
|
|
<label for="register-display-name">Display name</label>
|
|
<input id="register-display-name" name="displayName" autocomplete="name"/>
|
|
<p class="field-error" data-field-error="displayName" hidden></p>
|
|
|
|
<label for="register-password">Password</label>
|
|
<input id="register-password" name="password" type="password" autocomplete="new-password"/>
|
|
<p class="field-error" data-field-error="password" hidden></p>
|
|
|
|
<button type="submit" data-submit-label="Register" data-submitting-label="Registering...">Register</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card auth-card">
|
|
<h2>Login</h2>
|
|
<p class="form-error" data-form-error hidden></p>
|
|
<form class="form-grid" data-auth-form="login" novalidate>
|
|
<label for="login-username">Username</label>
|
|
<input id="login-username" name="username" autocomplete="username"/>
|
|
<p class="field-error" data-field-error="username" hidden></p>
|
|
|
|
<label for="login-password">Password</label>
|
|
<input id="login-password" name="password" type="password" autocomplete="current-password"/>
|
|
<p class="field-error" data-field-error="password" hidden></p>
|
|
|
|
<button type="submit" data-submit-label="Login" data-submitting-label="Logging in...">Login</button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter]
|
|
public string? StatusMessage { get; set; }
|
|
|
|
[Parameter]
|
|
public bool StatusIsError { get; set; }
|
|
}
|