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.

ionic cordova resources –force

Se você gostou do artigo, não deixe de dar seu comentário. Se tiver dúvidas, comente abaixo que ficarei feliz em tentar ajudá-lo.

Fontes e links úteis

Transparent Background Images

Gravit: https://gravit.io/

iOnic Authentication: https://scotch.io/tutorials/build-an-ionic-app-with-user-authentication

Background Image – iOnic forum: https://forum.ionicframework.com/t/ionic-background-image-device-problem/95947

CategoriasSem categoria

Deixe um comentário

O seu endereço de e-mail não será publicado.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.