Agora nós iremos fazer o formulário. Faremos formulários únicos, teremos um para a página de registro e outro para a de login, mas eles terão o mesmo visual.
Iremos usar os seguintes components do reactstrap: Form, FormGroup, Label.
Nós iremos primeiro configurar o “firstName” primeiro, depois iremos fazer para os outros.
<main>
<HeaderRegisterLogin logoUrl="/" btnUrl="/login" btnContent="Quero fazer login"/>
<Container className="py-5">
<p className={styles.formTitle}>Bem-vindo(a) ao OneBitFlix!</p>
<Form className={styles.form}>
<p className="text-center"><strong>Bem-vindo(a) ao OneBitFlix!</strong> </p>
<FormGroup>
<Label for="firstName" className={styles.label}>NOME</Label>
<Input
id="firstName"
name="firstName"
type="text"
placeholder="Qual o seu nome?"
required
maxLength={20}
className={styles.inputName}
>
</FormGroup>
</Form>
</Container>
</main>
</>
Agora nós vamos colocar as outras informações que vamos ter no formulário: Último nome, Telefone, Email, Data de nascimento, Senha e confirmação de senha.
<Form className={styles.form} onSubmit={handleRegister}>
<p className="text-center">
<strong>Bem-vindo(a) ao OneBitFlix!</strong>
</p>
<FormGroup>
<Label for="firstName" className={styles.label}>
NOME
</Label>
<Input
id="firstName"
name="firstName"
type="text"
placeholder="Qual o seu nome?"
required
maxLength={20}
className={styles.inputName}
/>
</FormGroup>
<FormGroup>
<Label for="lastName" className={styles.label}>
SOBRENOME
</Label>
<Input
id="lastName"
name="lastName"
type="text"
placeholder="Qual o seu sobrenome?"
required
maxLength={20}
className={styles.inputName}
/>
</FormGroup>
<FormGroup>
<Label for="phone" className={styles.label}>
WHATSAPP / TELEGRAM
</Label>
<Input
id="phone"
name="phone"
type="tel"
placeholder="(xx) 9xxxx-xxxx"
required
className={styles.input}
/>
</FormGroup>
<FormGroup>
<Label for="email" className={styles.label}>
E-MAIL
</Label>
<Input
id="email"
name="email"
type="email"
placeholder="Digite o seu email"
required
className={styles.input}
/>
</FormGroup>
<FormGroup>
<Label for="birth" className={styles.label}>
DATA DE NASCIMENTO
</Label>
<Input
id="birth"
name="birth"
type="date"
min="1930-01-01"
max="2020-12-31"
required
className={styles.input}
/>
</FormGroup>
<FormGroup>
<Label for="password" className={styles.label}>
SENHA
</Label>
<Input
id="password"
name="password"
type="password"
placeholder="Digite a sua senha (Min: 6 | Max: 20)"
required
minLength={6}
maxLength={20}
className={styles.input}
/>
</FormGroup>
<FormGroup>
<Label for="confirmPassword" className={styles.label}>
CONFIRME SUA SENHA
</Label>
<Input
id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="Confirme a sua senha"
required
minLength={6}
maxLength={20}
className={styles.input}
/>
</FormGroup>
<Button type="submit" outline className={styles.formBtn}>
CADASTRAR
</Button>
</Form>
Agora nós vamos adicionar uma máscara para o telefone. Enquanto a pessoa estiver digitando, tipo “+55” ou os parênteses do DDD. Isso também é muito comum de se ver em cpf, cep, etc...
Nós poderíamos fazer essa máscara na mão, só que, é algo muito extenso de se fazer, e seria de forma desnecessária, pois existe o “jsuites”. Ele é uma mini biblioteca, com ela, nós temos algumas funcionalidades que vão ajudar em coisas simples, tipo a nossa máscara. ⇒ https://jsuites.net/v4/javascript-mask
<Head>
<title>Onebitflix - Registro</title>
<link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
<script src="<https://jsuites.net/v4/jsuites.js>"></script>
</Head>
Agora nós vamos colocar isso no input em si, nós vamos colocar de forma fica o “+55”, que é o código de números brasileiros. Para colocarmos números fixos dessa forma, nós vamos usar o “[-]”, pois é o que o jsuites pede.
<FormGroup>
<Label for="phone" className={styles.label}>
WHATSAPP / TELEGRAM
</Label>
<Input
id="phone"
name="phone"
type="tel"
placeholder="(xx) 9xxxx-xxxx"
data-mask="[-]+55 (00) 00000-0000"
required
className={styles.input}
/>
</FormGroup>
E para finalizar a estrutura da página, vamos colocar o footer depois do fechamento do container.
</Container>
<Footer />
</main>
Agora, indo em “/registro”, temos o retorno visual desse nosso formulário.
Podemos ver que de estrutura está tudo certo. Nós vamos colocar um background diferente nessa página, então vamos colocar uma classe no main. Pois nessa página nós teremos um degradê indo para preto, ao invés de uma cor fixa.
<main className={styles.main}>
Agora nós vamos começar a manipulação visual da nossa página.
@import "./colors.module.scss";
.main {
background-image: linear-gradient(to bottom, #151515, black);
}
.formTitle {
font-size: 40px;
font-weight: bold;
margin-bottom: 40px;
}
.form {
width: 600px;
padding: 50px;
border: 1px solid $darkGray;
margin: 0 auto;
}
Nós podemos ver agora que o nosso formulário tomou uma bela vida. Iremos então fazer a alteração dos inputs. Nós temos os inputs de nomes um pouco diferente, pois nós iremos deixar os textos deles em upperCase, então faremos uma modificação pelo scss
.label {
font-size: 14px;
font-weight: bold;
padding-top: 20px;
}
.input {
border-color: $darkGray;
background-color: transparent;
color: white;
&::placeholder {
color: $lightGray;
}
&:focus {
background-color: transparent;
border-color: $lightGray;
color: white;
box-shadow: none;
}
}
.inputName {
@extend .input;
text-transform: uppercase;
&::placeholder {
text-transform: none;
}
}
.formBtn {
display: block;
margin: 50px auto 0 auto;
border-color: $lightRed;
color: white;
&:hover {
background-color: transparent;
color: $lightGray;
border-color: $darkRed;
}
}
Nós conseguimos ver via inspecionar do google que aos 767px, o nosso formulário e o seu título já começam a ficar estranhos. Podemos então fazer a modificação deles de agora.
@media (max-width: 767px) {
.formTitle {
font-size: 30px;
}
.form {
width: 95%;
}
}
Agora, nós conseguimos ver que no “575px”, os nossos inputs diminuem, então nós iremos modificar o padding dos inputs a partir daqui.
@media (max-width: 575px) {
.form {
padding: 50px 10px;
}
}
Agora, podemos ver que temos outra quebra de título acontecendo aos “423px”, vamos então fazer a manipulação do título novamente.
@media (max-width: 423px) {
.formTitle {
font-size: 24px;
text-align: center;
}
}
Com o nosso formulário de registro, podemos então dar o seu commit.
git add -A
git commit -m "Criação do formulário da página de registro, do seu estilo visual e também da sua responsividade completa - Registro"