refactor(ui): auth views migrate onto the shared buttons; two variants added

The five auth views each defined .btn-submit identically — full-width, filled,
0.6rem — and LoginView additionally defined .btn-oauth. Those rules are now
gone entirely rather than tokenised: the template composes `btn-primary
btn-block` and `btn-ghost btn-block`, and there is nothing left per-file to
drift.

That is the difference between this and the earlier chunks. Consolidating the
core four moved geometry into one place but left every semantic name defining
its own; this removes the definition.

Two variants added, both earned rather than invented:

- .btn-text — no fill, no border. The most common shape in the dense surfaces
  (dismiss, cancel-beside-confirm, clear-search) where a border would draw a
  box around something that should read as an action on the adjacent text.
  Distinct from ghost, which IS a box.
- .btn-danger-outline — already existed independently in three views before
  this sheet, which is what makes it a variant and not a one-off. It is what a
  delete looks like when it must not shout.

.btn-block composes with a variant rather than being one, because width is
orthogonal to appearance.

Also corrected the sheet's own header, which claimed "no template changes" —
true when it was written, false as of this commit. It now states the actual
model: a button is variant + size, composed in the template. Semantic per-view
names are named as the thing that drifted, and why: a name says what a button
is FOR and nothing about what it should look like, so two buttons doing the
same job in two views had no reason to match, and didn't.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs

frontend/src/views/ForgotPasswordView.vue

@@ -49,7 +49,7 @@ async function handleSubmit() {
             />
           </div>
           <p v-if="error" class="error-msg">{{ error }}</p>
-          <button type="submit" class="btn-submit" :disabled="submitting">
+          <button type="submit" class="btn-primary btn-block" :disabled="submitting">
             {{ submitting ? "Sending..." : "Send Reset Link" }}
           </button>
         </form>
@@ -137,24 +137,6 @@ async function handleSubmit() {
 .success-msg p {
   margin: 0.5rem 0;
 }
-.btn-submit {
-  width: 100%;
-  padding: 0.6rem;
-  background: var(--color-action-primary);
-  color: var(--fs-text-on-action);
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.95rem;
-  font-weight: var(--fs-weight-medium);
-}
-.btn-submit:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.btn-submit:hover:not(:disabled) {
-  opacity: 0.9;
-}
 .auth-footer {
   text-align: center;
   font-size: 0.9rem;

frontend/src/views/LoginView.vue

@@ -84,7 +84,7 @@ function loginWithOAuth() {
         <p class="forgot-link">
           <router-link to="/forgot-password">Forgot your password?</router-link>
         </p>
-        <button type="submit" class="btn-submit" :disabled="submitting">
+        <button type="submit" class="btn-primary btn-block" :disabled="submitting">
           {{ submitting ? "Signing in..." : "Sign In" }}
         </button>
       </form>
@@ -98,7 +98,7 @@ function loginWithOAuth() {
 
       <button
         v-if="authStore.oauthEnabled"
-        class="btn-oauth"
+        class="btn-ghost btn-block"
         @click="loginWithOAuth"
       >
         Login with Authentik
@@ -176,24 +176,6 @@ function loginWithOAuth() {
   font-size: 0.9rem;
   margin: 0 0 0.75rem;
 }
-.btn-submit {
-  width: 100%;
-  padding: 0.6rem;
-  background: var(--color-action-primary);
-  color: var(--fs-text-on-action);
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.95rem;
-  font-weight: var(--fs-weight-medium);
-}
-.btn-submit:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.btn-submit:hover:not(:disabled) {
-  opacity: 0.9;
-}
 .divider {
   display: flex;
   align-items: center;
@@ -208,20 +190,6 @@ function loginWithOAuth() {
   flex: 1;
   border-top: 1px solid var(--color-border);
 }
-.btn-oauth {
-  width: 100%;
-  padding: 0.6rem;
-  background: transparent;
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.95rem;
-  font-weight: var(--fs-weight-medium);
-}
-.btn-oauth:hover {
-  background: var(--color-bg-hover, var(--color-border));
-}
 .auth-footer {
   text-align: center;
   font-size: 0.9rem;

frontend/src/views/RegisterInviteView.vue

@@ -144,7 +144,7 @@ async function handleSubmit() {
             <p v-if="passwordMismatch" class="error-hint">Passwords do not match</p>
           </div>
           <p v-if="error" class="error-msg">{{ error }}</p>
-          <button type="submit" class="btn-submit" :disabled="!canSubmit">
+          <button type="submit" class="btn-primary btn-block" :disabled="!canSubmit">
             {{ submitting ? "Creating Account..." : "Create Account" }}
           </button>
         </form>
@@ -247,24 +247,6 @@ async function handleSubmit() {
   font-size: 0.9rem;
   margin: 0 0 0.75rem;
 }
-.btn-submit {
-  width: 100%;
-  padding: 0.6rem;
-  background: var(--color-action-primary);
-  color: var(--fs-text-on-action);
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.95rem;
-  font-weight: var(--fs-weight-medium);
-}
-.btn-submit:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.btn-submit:hover:not(:disabled) {
-  opacity: 0.9;
-}
 .auth-footer {
   text-align: center;
   font-size: 0.9rem;

frontend/src/views/RegisterView.vue

@@ -117,7 +117,7 @@ async function handleSubmit() {
             <p v-if="passwordMismatch" class="error-hint">Passwords do not match</p>
           </div>
           <p v-if="error" class="error-msg">{{ error }}</p>
-          <button type="submit" class="btn-submit" :disabled="!canSubmit">
+          <button type="submit" class="btn-primary btn-block" :disabled="!canSubmit">
             {{ submitting ? "Creating account..." : "Create Account" }}
           </button>
         </form>
@@ -216,24 +216,6 @@ async function handleSubmit() {
   font-size: 0.9rem;
   margin: 0 0 0.75rem;
 }
-.btn-submit {
-  width: 100%;
-  padding: 0.6rem;
-  background: var(--color-action-primary);
-  color: var(--fs-text-on-action);
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.95rem;
-  font-weight: var(--fs-weight-medium);
-}
-.btn-submit:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.btn-submit:hover:not(:disabled) {
-  opacity: 0.9;
-}
 .auth-footer {
   text-align: center;
   font-size: 0.9rem;

frontend/src/views/ResetPasswordView.vue

@@ -88,7 +88,7 @@ async function handleSubmit() {
             <p v-if="passwordMismatch" class="error-hint">Passwords do not match</p>
           </div>
           <p v-if="error" class="error-msg">{{ error }}</p>
-          <button type="submit" class="btn-submit" :disabled="!canSubmit">
+          <button type="submit" class="btn-primary btn-block" :disabled="!canSubmit">
             {{ submitting ? "Resetting..." : "Reset Password" }}
           </button>
         </form>
@@ -195,24 +195,6 @@ async function handleSubmit() {
   font-size: 0.9rem;
   margin: 0 0 0.75rem;
 }
-.btn-submit {
-  width: 100%;
-  padding: 0.6rem;
-  background: var(--color-action-primary);
-  color: var(--fs-text-on-action);
-  border: none;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.95rem;
-  font-weight: var(--fs-weight-medium);
-}
-.btn-submit:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.btn-submit:hover:not(:disabled) {
-  opacity: 0.9;
-}
 .auth-footer {
   text-align: center;
   font-size: 0.9rem;