Skip to content

Instantly share code, notes, and snippets.

@extralam

extralam/login.blade.php

Created August 1, 2019 05:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save extralam/71469c59eddf04b527c186c6dfb366af to your computer and use it in GitHub Desktop.
Save extralam/71469c59eddf04b527c186c6dfb366af to your computer and use it in GitHub Desktop.
Download ZIP
Laravel-admin Custom Login view
Raw
login.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{config('admin.title')}} | {{ trans('admin.login') }}</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
@if(!is_null($favicon = Admin::favicon()))
<link rel="shortcut icon" href="{{$favicon}}">
@endif
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="{{ admin_asset("vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css") }}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{ admin_asset("vendor/laravel-admin/font-awesome/css/font-awesome.min.css") }}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ admin_asset("vendor/laravel-admin/AdminLTE/dist/css/AdminLTE.min.css") }}">
<!-- iCheck -->
<link rel="stylesheet" href="{{ admin_asset("vendor/laravel-admin/AdminLTE/plugins/iCheck/square/purple.css") }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body { font-family: 'Lato', sans-serif; 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif }
.login-page::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(161,129,148,0.88);
}
.logo {
max-width: 70%;
}
.btn-custom{
background-color: rgba(161,129,148,0.88);
border-color: rgba(161,129,148,0.88);
}
.btn-custom:hover, .btn-custom:active, .btn-custom:focus, .btn-custom:active:focus {
background-color: rgba(161,129,148,0.55);
border-color: rgba(161,129,148,0.55);
outline-color: rgba(161,129,148,0.88);
}
.round-border-with-shadow {
border-radius: 2px;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}
@media (max-width: 480px) {
.logo {
max-width: 60%;
}
}
</style>
</head>
<body class="hold-transition login-page" @if(config('admin.login_background_image'))style="background: url({{config('admin.login_background_image')}}) no-repeat;background-size: cover;"@endif>
<div class="login-box">
<div class="login-logo">
<a href="{{ admin_base_path('/') }}"><img class="logo" src="{{config('admin.login_logo')}}"></a>
</div>
<!-- /.login-logo -->
<div class="login-box-body round-border-with-shadow">
<h2 class="login-box-msg"><b>{{config('admin.name')}}</b></h2>
<form action="{{ admin_base_path('auth/login') }}" method="post">
<div class="form-group has-feedback {!! !$errors->has('username') ?: 'has-error' !!}">
@if($errors->has('username'))
@foreach($errors->get('username') as $message)
<label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i>{{$message}}</label><br>
@endforeach
@endif
<input type="text" class="form-control" placeholder="{{ trans('admin.username') }}" name="username" value="{{ old('username') }}">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback {!! !$errors->has('password') ?: 'has-error' !!}">
@if($errors->has('password'))
@foreach($errors->get('password') as $message)
<label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i>{{$message}}</label><br>
@endforeach
@endif
<input type="password" class="form-control" placeholder="{{ trans('admin.password') }}" name="password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
@if(config('admin.auth.remember'))
<div class="checkbox icheck">
<label>
<input type="checkbox" name="remember" value="1" {{ (!old('username') || old('remember')) ? 'checked' : '' }}>
{{ trans('admin.remember_me') }}
</label>
</div>
@endif
</div>
<!-- /.col -->
<div class="col-xs-12 col-4">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-primary btn-block btn-flat btn-custom">{{ trans('admin.login') }}</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- jQuery 2.1.4 -->
<script src="{{ admin_asset("vendor/laravel-admin/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js")}} "></script>
<!-- Bootstrap 3.3.5 -->
<script src="{{ admin_asset("vendor/laravel-admin/AdminLTE/bootstrap/js/bootstrap.min.js")}}"></script>
<!-- iCheck -->
<script src="{{ admin_asset("vendor/laravel-admin/AdminLTE/plugins/iCheck/icheck.min.js")}}"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-purple',
radioClass: 'iradio_square-purple',
increaseArea: '20%' // optional
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment