iOnic: como criar uma página de login bonita

Olá pessoal. Nesse tutorial vou mostrar como criar uma página de login para seu aplicativo iOnic bonita, com uma imagem de fundo desfocada e campos de usuário e senha centralizados e com validação básica.

Estive procurando hoje a como fazer uma tela de login bonita. Neste post expliquei a como deixar a página de login sem o menu ou as tabs em baixo, no rodapé. Agora veremos como deixar essa página mais atrativa, como a abaixo que estou desenvolvendo na empresa que trabalho.

FixMob – Aplicativo que está sendo desenvolvido para a Marcopolo. Tela de Login.

Escolha uma boa imagem

Primeiramente, escolha uma imagem bonita, talvez uma paisagem, de tamanho grande. Se ela não tiver o efeito borrado, utilize algum editor para fazer esse efeito (blur). O tamanho da imagem deverá ser de 768 x 1024. No Mac, eu utilizei o GravitDesigner, que é (pelo menos até agora) gratuito. Você pode utilizar qualquer outro, como o PhotoShop ou Gimp. Você poderá colocar o Raio do Desfoque de 44.5.

Desfoque de imamem no Gravit Designer — GravitDesigner, desfoque

Salve essa imagem no seu projeto iOnic, na pasta src/assets/imgs/background.png. Se desejar, salve também a logotipo (com um tamanho aproximado de 150px x 150px) no mesmo diretório: src/assets/imgs/applogo.png.

Classes para a página de login

Vá até o arquivo src/pages/login/login.scss (ou semelhante) e aplique o seguinte código:

page-login {

.loginPage{

background: url(“/assets/imgs/background.png”);

background-size: cover;

background-position: center;

background-repeat: no-repeat;

}

.login-container {

border-radius: 10px;

opacity: 0.8;

width: 80%;

text-align: center;

background-color: white;

}

.login-logo{

vertical-align: center;

text-align: center;

}

.login-form{

opacity: none!important;

}

}

A primeira classe CSS definirá a imagem de background (fundo) e definirá a posição dela para que, tanto em tablets quanto em Smartphones ela fique bem-posicionada.

A segunda classe (.login-container) define o local onde haverá o formulário de login, etc. Colocamos uma borda arredondada, uma transparência, uma largura de 80% em relação a página e um alinhamento central.

A terceira classe (.login-logo) centraliza o logo do nosso APP e a quarta diz que o conteúdo do formulário não terá opacidade ou transparência.

HTML para a página de login

Vamos agora para o arquivo src/pages/login/login.html (ou semelhante). A estrutura do seu arquivo deverá ser mais ou menos assim:

<ion-content padding class="loginPage" scroll="false">
<ion-grid style="height: 100%" >
<ion-row justify-content-center align-items-center style="height: 80%" >
<ion-grid class="login-container">
<form #loginForm="ngForm" (ngSubmit)="login()"autocomplete="off"class="login-form">
<ion-row align-items-center>
<ion-col>
<img src="/assets/imgs/logo.png"width="200px"height="200px">
</ion-col>
</ion-row >
<ion-row >
<ion-col >
<ion-list inset >
<ion-item >
<ion-input placeholder="Usuário" name="username" id="loginField" type="text" required [(ngModel)]="username" > </ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Senha" name="password" id="passwordField" type="password" required [(ngModel)]="password" ></ion-input>
</ion-item></ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div *ngIf="error" class="alert alert-danger" >{{error}}</div>
<buttonion-button class="submit-btn" fulltype="submit" [disabled]="!loginForm.form.valid" >ENTRAR</button>
</ion-col>
</ion-row>
</form>
</ion-grid>
</ion-row>
</ion-grid>
</ion-content>

Pronto, basta dar o comando abaixo para que o iOnic colete seus arquivos e você já poderá rodar seu APP com a tela de login.