mws.frontend.vue/src/views/auth/LoginView.vue

<template>
  <div class="grid min-h-dvh lg:grid-cols-[1.05fr_1fr]">
    <Button
      :icon="theme.isDark.value ? 'pi pi-sun' : 'pi pi-moon'"
      rounded
      text
      severity="secondary"
      class="!fixed !right-4 !top-4 z-10"
      :aria-label="theme.isDark.value ? 'Switch to light mode' : 'Switch to dark mode'"
      @click="theme.toggle"
    />

    <!-- Signature: the indigo canvas with the brand gradient mesh -->
    <section class="brand-panel relative hidden overflow-hidden p-12 lg:flex lg:flex-col lg:justify-between">
      <span class="font-display text-[15px] font-extrabold tracking-[-0.01em] text-white">Workspace</span>
      <div class="relative z-10 max-w-[440px]">
        <h1 class="font-display text-[clamp(40px,4.4vw,62px)] font-extrabold uppercase leading-[0.98] text-white">
          Projects,<br />docs, tasks.<br />One place.
        </h1>
        <p class="mt-5 text-[17px] leading-relaxed text-white/70">
          Write documents, track work, and keep your team in sync — without switching tools.
        </p>
      </div>
      <div class="relative z-10 flex gap-6 text-white/60">
        <span class="text-[13px]">Documents</span>
        <span class="text-[13px]">Tasks</span>
        <span class="text-[13px]">Members</span>
      </div>
    </section>

    <section class="flex items-center justify-center p-6" style="background: var(--canvas)">
      <div class="w-full max-w-[360px]">
        <div class="mb-7">
          <span class="eyebrow">My Workspace</span>
          <h2 class="page-title mt-2">Sign in</h2>
          <p class="page-subtitle mt-1.5">Use the account your workspace owner set up for you.</p>
        </div>

        <form @submit.prevent="submit">
          <div class="field">
            <label for="username">Username</label>
            <InputText id="username" v-model.trim="username" class="w-full" autocomplete="username" autofocus />
          </div>
          <div class="field">
            <label for="password">Password</label>
            <Password
              id="password"
              v-model="password"
              class="w-full"
              inputClass="w-full"
              toggleMask
              :feedback="false"
              autocomplete="current-password"
            />
          </div>
          <Message v-if="error" severity="error" variant="simple" class="mb-3 w-full">{{ error }}</Message>
          <Button type="submit" label="Sign in" class="w-full" :loading="loading" />
        </form>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '../../stores/auth'
import { errorMessage } from '../../services/api'
import { useTheme } from '../../composables/useTheme'

const auth = useAuthStore()
const theme = useTheme()
const router = useRouter()
const route = useRoute()

const username = ref('')
const password = ref('')
const loading = ref(false)
const error = ref('')

async function submit() {
  error.value = ''
  if (!username.value || !password.value) {
    error.value = 'Enter your username and password'
    return
  }
  loading.value = true
  try {
    await auth.login(username.value, password.value)
    const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : '/projects'
    router.push(redirect)
  } catch (e) {
    error.value = errorMessage(e)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* Blurple → magenta mesh over the deep-indigo canvas (DESIGN.md brand gradient) */
.brand-panel {
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(88, 101, 242, 0.85) 0%, transparent 58%),
    radial-gradient(95% 85% at 88% 92%, rgba(236, 72, 189, 0.6) 0%, transparent 62%),
    #0a0d3a;
}
</style>