Gumga Login
Gumga login ofereçe uma experiência moderna aos usuários, o login é feito pelo próprio componente,
armazenando o usuário e suas organizações na sessionStorage.
Dependências
bower install angular
// Adicione no seu projeto
< script src = " /bower_components/angular/angular.min.js " > < / script >
Instalação
bower install gumga-login
Exemplo de uso
// Adicione no seu projeto
< script src = " bower_components/gumga-login/dist/gumga-login.min.js " > < / script >
< link rel = " stylesheet " href = " bower_components/gumga-login/dist/gumga-login.min.css " >
Gumga Header
< gl-login-header
background = " /images/gumga-login-bg.jpg "
logo = " /images/gumga-logo-vertical-negative.svg "
title = " Gumga Studio "
menus = " meusmenus " > </ gl-login-header >
Atributo
Descrição
background
Caminho da imagem que será usada de background
logo
Caminho da imagem que será usada de logo
title
Usado no atributo title da logo
Gumga Login
< gl-login
on-login = " onLogin(user, organizations) "
register = " exemplo "
configuration = " configuration " >
</ gl-login >
Atributo
Descrição
on-login
Função de retorno que será executada após o login
register
Objeto com os atributos do formulário de registro
configuration
Objeto de configuração do gumga login
Controller
angular
. module ( ' app ' , [ ' gumga.login ' ] )
. controller ( ' LoginController ' , [ ' $scope ' , function ( $scope ) {
$scope . configuration = {
appURL : ' http://gumga.studio/dashboard-api '
} ;
$scope . onLogin = ( user , organizations ) => {
console . log ( user , organizations )
}
$scope . exemplo = {
fields : [
{
field : ' name ' ,
placeholder : ' Nome ' ,
type : ' text '
} ,
{
field : ' email ' ,
placeholder : ' E-mail ' ,
type : ' email '
} ,
{
field : ' password ' ,
placeholder : ' Senha ' ,
type : ' password '
} ,
{
field : ' confirmPassword ' ,
placeholder : ' Confirme sua senha ' ,
type : ' password ' ,
conditions : [
{
operation : ' == ' ,
field : ' password '
}
]
}
] ,
submit : function ( data ) {
console . log ( data )
}
}
} ] )
Adicionando Menus a Header
< body ng-controller = " LoginController " >
< gl-login-header
background = " /images/gumga-login-bg.jpg "
logo = " /images/gumga-logo-vertical-negative.svg "
title = " Gumga Studio "
menus = " meusmenus "
> </ gl-login-header >
</ body >
angular
. module ( ' app ' , [ ' gumga.login ' ] )
. controller ( ' LoginController ' , [ ' $scope ' , function ( $scope ) {
$scope . meumenu = [
{
label : ' Pagina inicial ' ,
link : true ,
icon : ' <i class="fa fa-etsy" aria-hidden="true"></i> ' ,
url : ' https://www.gumga.io/ '
} ,
{
label : ' Pagina inicial ' ,
link : false ,
icon : ' <i class="fa fa-etsy" aria-hidden="true"></i> ' ,
url : ' cliente.list '
}
]
} ] )
Login com redes sociais
< body ng-controller = " LoginController " >
< gl-login-header
register = " home.login "
login = " home.login "
background = " /images/gumga-login-bg.jpg "
logo = " /images/gumga-logo-vertical-negative.svg "
title = " Gumga Studio "
> </ gl-login-header >
< gl-login on-submit = " loginGumga(login) " type = " email " username = " email " password = " senha " >
< div class = " divider " > < strong class = " divider-title " > ou entre com </ strong > </ div >
< gl-login-facebook app-key = " " on-login = " login(data) " > < / gl-login-facebook >
< gl-login-google app-key = " "
on-login = " login(data) "
client-id = " " >
</ gl-login-google >
</ gl-login >
</ body >