line-gestao-frontend/src/app/pages/system-provision-user/system-provision-user.html

119 lines
4.6 KiB
HTML

<section class="system-provision-page">
<span class="page-blob blob-1" aria-hidden="true"></span>
<span class="page-blob blob-2" aria-hidden="true"></span>
<span class="page-blob blob-3" aria-hidden="true"></span>
<div class="container-shell">
<div class="card-shell">
<header class="card-header">
<div class="title-badge">
<i class="bi bi-shield-lock-fill"></i> SYSADMIN
</div>
<h1>Criar Credenciais do Cliente</h1>
<p>Selecione o cliente e gere o acesso para acompanhamento das linhas no sistema.</p>
</header>
<div class="card-body">
<div class="alert-box error" *ngIf="tenantsError">
{{ tenantsError }}
</div>
<div class="alert-box success" *ngIf="successMessage">
{{ successMessage }}
</div>
<div class="alert-box error" *ngIf="submitErrors.length">
<strong>Falha ao criar credencial:</strong>
<ul>
<li *ngFor="let err of submitErrors">{{ err }}</li>
</ul>
</div>
<form [formGroup]="provisionForm" (ngSubmit)="onSubmit()" class="provision-form" novalidate>
<div class="form-grid">
<div class="form-field span-2">
<label for="tenantId">Cliente</label>
<div class="select-row">
<select
id="tenantId"
formControlName="tenantId"
class="form-control"
>
<option value="">Selecione um cliente...</option>
<option
*ngFor="let tenant of tenants; trackBy: trackByTenantId"
[value]="tenant.tenantId"
>
{{ tenant.nomeOficial }}
</option>
</select>
<button type="button" class="btn btn-ghost" (click)="loadTenants()" [disabled]="tenantsLoading">
{{ tenantsLoading ? 'Atualizando...' : 'Atualizar lista' }}
</button>
</div>
<small class="field-error" *ngIf="hasFieldError('tenantId', 'required')">
Selecione um cliente.
</small>
</div>
<div class="form-field">
<label for="name">Nome</label>
<input id="name" type="text" class="form-control" formControlName="name" placeholder="Nome do responsável" />
</div>
<div class="form-field">
<label for="email">Email</label>
<input
id="email"
type="email"
class="form-control"
formControlName="email"
placeholder="usuario@cliente.com"
/>
<small class="field-error" *ngIf="hasFieldError('email', 'required')">Email é obrigatório.</small>
<small class="field-error" *ngIf="hasFieldError('email', 'email')">Email inválido.</small>
</div>
<div class="form-field">
<label for="password">Senha</label>
<input
id="password"
type="password"
class="form-control"
formControlName="password"
placeholder="Defina uma senha"
autocomplete="new-password"
/>
<small class="field-error" *ngIf="hasFieldError('password', 'required')">Senha é obrigatória.</small>
<small class="field-error" *ngIf="hasFieldError('password', 'minlength')">Mínimo de 6 caracteres.</small>
</div>
<div class="form-field">
<label for="confirmPassword">Confirmar senha</label>
<input
id="confirmPassword"
type="password"
class="form-control"
formControlName="confirmPassword"
placeholder="Repita a senha"
autocomplete="new-password"
/>
<small class="field-error" *ngIf="hasFieldError('confirmPassword', 'required')">
Confirmação é obrigatória.
</small>
<small class="field-error" *ngIf="passwordMismatch">As senhas não conferem.</small>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" [disabled]="submitting || provisionForm.invalid">
<span *ngIf="!submitting">Criar credencial de acesso</span>
<span *ngIf="submitting">Criando...</span>
</button>
</div>
</form>
</div>
</div>
</div>
</section>