Login e sessão expirada

A entrada no sistema é sempre pela conta do Tribunal. Quando a sessão termina, a tela avisa e leva a pessoa a entrar de novo, sem perder o lugar onde estava.

Quando usar

• O login é a primeira tela de quem ainda não entrou. Tem um botão só, que leva ao provedor de identidade do Tribunal, onde a pessoa digita a senha.
• A sessão expira quando a renovação do token falha depois de um tempo sem uso. A tela mostra o aviso no lugar do conteúdo, com "Entrar de novo".

Componentes

• BaseAppShell sem nav: a moldura com o cabeçalho, sem menu lateral, para a tela de login.
• BaseButton com size="lg" e loading: "Entrar com a conta do Tribunal".
• BasePageState com status="expired": título e texto padrão e o botão "Entrar de novo", que emite sign-in.
• BaseAlertBanner com tone="error": quando o login volta com falha (?login=failed).

Texto

• O botão diz com que conta: "Entrar com a conta do Tribunal".
• Uma linha de apoio: "Use a mesma conta com que você entra nos sistemas do Tribunal."
• Sessão expirada, texto padrão: "Sua sessão expirou" e "Por segurança, a sessão termina depois de um tempo sem uso. Entre de novo para continuar."
• Falha no login: "Não conseguimos confirmar a sua conta. Tente entrar de novo." Sem detalhe técnico do provedor.
• "Entrar" e "Sair", nunca "Logar" e "Logout".

Faça e não faça

Faça	Não faça
Um botão que leva ao login do Tribunal.	Pedir usuário e senha num formulário do próprio sistema.
Ao entrar de novo, voltar para a tela em que a pessoa estava.	Mandar sempre para o início depois da sessão expirada.
Avisar que a sessão expirou antes de mandar para o login.	Mudar de tela sem explicar, como se fosse um erro.

Código

<script setup lang="ts">
import { BaseAlertBanner, BaseAppShell, BaseButton, BasePage, BasePageState, BaseText } from '@lab-inovacao-tjes/design-system'

const props = defineProps<{ expired: boolean; failed: boolean; loading: boolean }>()
const emit = defineEmits<{ signIn: [] }>()
</script>

<template>
  <BaseAppShell product="Gestão de Obras">
    <BasePageState v-if="props.expired" status="expired" @sign-in="emit('signIn')" />
    <BasePage v-else title="Entrar">
      <BaseAlertBanner v-if="props.failed" tone="error">
        Não conseguimos confirmar a sua conta. Tente entrar de novo.
      </BaseAlertBanner>
      <BaseText>Use a mesma conta com que você entra nos sistemas do Tribunal.</BaseText>
      <BaseButton size="lg" icon="box-arrow-in-right" :loading="props.loading" @click="emit('signIn')">
        Entrar com a conta do Tribunal
      </BaseButton>
    </BasePage>
  </BaseAppShell>
</template>

Na tela de referência

• P19, login: LoginForm.vue e LoginFeature.vue.
• P19, sessão expirada: em construção. Hoje a tela volta para o login quando a sessão termina, sem o aviso do BasePageState.
• P20: em construção.