Rafael Lopes
8e29dde2a1
- Telas iniciais do projeto criadas - Estrutura de pastas e arquivos definida - Componentes instalados e linguagem definida - Vite configurado para React e build de dev rapida - Mockups de dados criados para desenvolvimento dos módulos - Documentação inicial criada para guiar o desenvolvimento e uso do projeto
98 lines
2.4 KiB
JavaScript
98 lines
2.4 KiB
JavaScript
import { useState } from 'react';
|
|
import { useLogin } from '../hooks/useLogin';
|
|
|
|
const fieldStyle = {
|
|
width: '100%',
|
|
border: '1px solid var(--color-border)',
|
|
borderRadius: '16px',
|
|
padding: '0.95rem 1rem',
|
|
background: '#fff',
|
|
color: 'var(--color-text)',
|
|
outline: 'none',
|
|
};
|
|
|
|
const primaryButtonStyle = {
|
|
width: '100%',
|
|
padding: '0.95rem 1rem',
|
|
borderRadius: '16px',
|
|
border: 'none',
|
|
background: 'linear-gradient(135deg, var(--color-primary), #0b5a86)',
|
|
color: '#fff',
|
|
fontWeight: 700,
|
|
boxShadow: 'var(--shadow-md)',
|
|
};
|
|
|
|
const secondaryButtonStyle = {
|
|
width: '100%',
|
|
padding: '0.95rem 1rem',
|
|
borderRadius: '16px',
|
|
border: '1px solid rgba(0, 49, 80, 0.16)',
|
|
background: '#fff',
|
|
color: 'var(--color-primary)',
|
|
fontWeight: 700,
|
|
};
|
|
|
|
const initialFormData = {
|
|
username: '',
|
|
password: '',
|
|
};
|
|
|
|
export function LoginForm() {
|
|
const [formData, setFormData] = useState(initialFormData);
|
|
const { login, isSubmitting } = useLogin();
|
|
|
|
async function handleSubmit(event) {
|
|
event.preventDefault();
|
|
await login(formData);
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
|
|
<label style={{ display: 'grid', gap: '0.5rem' }}>
|
|
<span style={{ fontWeight: 600 }}>Usuario AD</span>
|
|
<input
|
|
style={fieldStyle}
|
|
type="text"
|
|
placeholder="seu.usuario"
|
|
value={formData.username}
|
|
onChange={(event) =>
|
|
setFormData((current) => ({ ...current, username: event.target.value }))
|
|
}
|
|
/>
|
|
</label>
|
|
|
|
<label style={{ display: 'grid', gap: '0.5rem' }}>
|
|
<span style={{ fontWeight: 600 }}>Senha</span>
|
|
<input
|
|
style={fieldStyle}
|
|
type="password"
|
|
placeholder="Digite sua senha"
|
|
value={formData.password}
|
|
onChange={(event) =>
|
|
setFormData((current) => ({ ...current, password: event.target.value }))
|
|
}
|
|
/>
|
|
</label>
|
|
|
|
<button style={primaryButtonStyle} type="submit" disabled={isSubmitting}>
|
|
{isSubmitting ? 'Entrando...' : 'Entrar'}
|
|
</button>
|
|
|
|
<button style={secondaryButtonStyle} type="button">
|
|
Entrar com Microsoft
|
|
</button>
|
|
|
|
<a
|
|
href="#forgot-password"
|
|
style={{
|
|
justifySelf: 'center',
|
|
color: 'var(--color-secondary)',
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
Esqueci minha senha
|
|
</a>
|
|
</form>
|
|
);
|
|
}
|