Authentication Patterns
Login Form
Use real-time validation with contextual error messages to disable submit until form is valid.
<form id="validation" nve-layout="column gap:md" style="max-width: 350px">
<nve-input>
<label>email</label>
<input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" />
<nve-control-message error="valueMissing">required</nve-control-message>
<nve-control-message error="patternMismatch">invalid NVIDIA email</nve-control-message>
</nve-input>
<nve-password>
<label>password</label>
<input type="password" name="password" required minlength="6" autocomplete="off" />
<nve-control-message error="valueMissing">required</nve-control-message>
<nve-control-message error="tooShort">minimum length is 6 characters</nve-control-message>
</nve-password>
<nve-button disabled>login to account</nve-button>
<nve-alert-group hidden status="success">
<nve-alert></nve-alert>
</nve-alert-group>
</form>
<script type="module">
const form = document.querySelector("form#validation");
const alertGroup = document.querySelector("#validation nve-alert-group");
const alert = document.querySelector("#validation nve-alert");
form.addEventListener("submit", (e) => {
e.preventDefault();
const { email, password } = Object.fromEntries(new FormData(form));
alert.innerText = email + " / " + password;
alertGroup.hidden = false;
});
form.addEventListener("input", (e) => {
form.querySelector("nve-button").disabled = form.matches(":invalid");
});
</script>No Access
Use for permission denied states informing users of access restrictions with a contact option.
<div nve-layout="column gap:lg pad:lg align:center">
<nve-icon name="lock" size="xl"></nve-icon>
<div nve-layout="column align:center gap:sm">
<h2 nve-text="heading lg">Access Restricted</h2>
<p nve-text="body muted center" style="max-width: 400px">You don't have permission to view this configuration. Contact your administrator to request access.</p>
</div>
<nve-button>Request Access</nve-button>
</div>Access Restricted
You don't have permission to view this configuration. Contact your administrator to request access.
Login Page
Page-level starter for sign-in pages. Centered card with email, password, OAuth options, and signup link.
<nve-page>
<nve-page-header slot="header">
<nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
<h2 slot="prefix" nve-text="heading sm">Developer Portal</h2>
<nve-button selected container="flat"><a href="#">Documentation</a></nve-button>
<nve-button container="flat"><a href="#">Support</a></nve-button>
</nve-page-header>
<main nve-layout="column gap:lg pad:lg align:center align:vertical-center">
<form>
<nve-card style="width: 400px">
<nve-card-header>
<h1 nve-text="heading medium">Sign In</h1>
</nve-card-header>
<nve-card-content>
<div nve-layout="column gap:md align:horizontal-stretch">
<nve-input>
<label>Email address</label>
<input type="email" name="email" required autocomplete="email" />
<nve-control-message error="valueMissing">required</nve-control-message>
<nve-control-message error="typeMismatch">enter a valid email</nve-control-message>
</nve-input>
<nve-password>
<label>Password</label>
<input type="password" name="password" required minlength="6" autocomplete="current-password" />
<nve-control-message error="valueMissing">required</nve-control-message>
<nve-control-message error="tooShort">minimum length is 6 characters</nve-control-message>
</nve-password>
<div nve-layout="row align:space-between align:vertical-center full">
<nve-checkbox>
<label>Remember me</label>
<input type="checkbox" name="remember-me" />
</nve-checkbox>
<a href="#" nve-text="body sm">Forgot password?</a>
</div>
<nve-button type="submit" interaction="emphasis" disabled style="width: 100%">Sign in</nve-button>
<div nve-layout="row gap:sm align:vertical-center pad-y:md">
<nve-divider style="flex: 1"></nve-divider>
<span nve-text="label sm muted">Or continue with</span>
<nve-divider style="flex: 1"></nve-divider>
</div>
<nve-button type="button">SSO Provider</nve-button>
<nve-alert-group hidden status="success">
<nve-alert></nve-alert>
</nve-alert-group>
</div>
</nve-card-content>
<nve-card-footer>
<p nve-text="body sm muted center" style="width: 100%">Not a member? <a href="#" nve-text="body sm">Sign Up</a></p>
</nve-card-footer>
</nve-card>
</form>
</main>
</nve-page>
<script type="module">
const form = document.querySelector("form");
const button = form.querySelector('nve-button[type="submit"]');
const alertGroup = form.querySelector("nve-alert-group");
const alert = form.querySelector("nve-alert");
form.addEventListener("input", () => {
button.disabled = form.matches(":invalid");
});
form.addEventListener("submit", (e) => {
e.preventDefault();
const { email } = Object.fromEntries(new FormData(form));
alert.innerText = "Signed in as " + email;
alertGroup.hidden = false;
});
</script>