Login validation, user profile icon

This commit is contained in:
Deon George
2020-09-15 22:40:32 +10:00
parent c549d28340
commit db61e0d1ce
9 changed files with 119 additions and 66 deletions

View File

@@ -5,33 +5,23 @@
@endsection
@section('content')
@if(isset($login_note) AND $login_note)
<div class="alert alert-info alert-dismissible m-auto">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h5><i class="icon fas fa-info"></i> NOTE!</h5>
{!! $login_note !!}
</div>
<br>
@endisset
@if (Session::has('error'))
<div class="alert alert-danger">
<strong>Hmm...</strong> {{ trans('message.someproblems') }}<br><br>
<ul>
<li>{{ Session::get('error') }}</li>
</ul>
</div>
@endif
<!-- /.login-logo -->
<div class="app-container app-theme-white body-tabs-shadow">
<div class="app-container">
<div class="h-100 bg-animation">
<div class="d-flex h-100 justify-content-center align-items-center">
<div class="mx-auto app-login-box col-md-8">
@if(asset('login-note.txt'))
<div class="mx-auto card text-white card-body bg-primary w-50">
<h5 class="text-white card-title"><i class="icon fa-2x fas fa-info pr-3"></i><span class="font-size-xlg">NOTE</span></h5>
<span class="w-100 pb-0">
{!! file_get_contents('login-note.txt') !!}
</span>
</div>
@endif
<div class="modal-dialog w-100 mx-auto">
<div class="modal-content">
<form method="post">
<form class="needs-validation" novalidate method="post">
{{ csrf_field() }}
<div class="modal-body">
@@ -43,22 +33,24 @@
</div>
<div class="form-row">
<div class="col-md-12">
<div class="position-relative form-group">
<input name="email" id="user" placeholder="Email..." type="email" class="form-control">
<div class="col-md-12 mt-3">
<label class="mb-1">Email</label>
<input name="email" id="user" placeholder="" type="email" class="form-control" required="">
<div class="invalid-feedback">
Please enter your email.
</div>
</div>
<div class="col-md-12">
<div class="position-relative form-group">
<input name="password" id="password" placeholder="Password..." type="password" class="form-control">
<div class="col-md-12 mt-2">
<label class="mb-1">Password</label>
<input name="password" id="password" placeholder="" type="password" class="form-control" required>
<div class="invalid-feedback">
Please enter your password.
</div>
</div>
</div>
{{--
<div class="divider"></div>
<h6 class="mb-0">No account? <a href="javascript:void(0);" class="text-primary">Sign up now</a></h6>
--}}
</div>
<div class="modal-footer">
@if (count($errors) > 0)
<div class="alert alert-danger w-100">
@@ -70,11 +62,6 @@
</ul>
</div>
@endif
{{--
<div class="float-left">
<a href="javascript:void(0);" class="btn-lg btn btn-link">Recover Password</a>
</div>
--}}
<div class="float-right">
<button class="btn btn-primary btn-lg">Login</button>
</div>
@@ -88,3 +75,39 @@
</div>
</div>
@endsection
@section('page-scripts')
<style>
label {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 85%;
font-weight: bold;
}
table.table tr:last-child {
border-bottom: 1px solid #e9ecef;
}
</style>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
window.addEventListener('load',function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
@append

View File

@@ -11,6 +11,8 @@
@section('scripts')
@include('architect::auth.partials.scripts')
@yield('page-scripts')
@show
</body>
</html>

View File

@@ -1,7 +1,4 @@
<script src="{{ asset('/js/app.js') }}" type="text/javascript"></script>
{{--
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
--}}
<!-- Architect -->
<script src="{{ asset('/js/architect.min.js') }}"></script>

View File

@@ -54,35 +54,34 @@
<div class="header-btn-lg pr-0">
<div class="widget-content p-0">
<div class="widget-content-wrapper">
<div class="widget-content-left">
<div class="btn-group">
<a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="p-0 btn">
<img width="42" class="rounded-circle" src="assets/images/avatars/1.jpg" alt="">
<i class="fas fa-angle-down ml-2 opacity-8"></i>
</a>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
{{--
<button type="button" tabindex="0" class="dropdown-item">User Account</button>
<h6 tabindex="-1" class="dropdown-header">Header</h6>
<button type="button" tabindex="0" class="dropdown-item">Actions</button>
<div tabindex="-1" class="dropdown-divider"></div>
<button type="button" tabindex="0" class="dropdown-item">Dividers</button>
--}}
</div>
</div>
</div>
<div class="widget-content-left ml-3 header-user-info">
<div class="widget-content-left ml-3 header-user-info">
<div class="widget-heading">
{{ $user->name ?? 'John Smith' }}
{{ $user->exists ? Arr::get($user->getAttribute('cn'),0,'Anonymous') : 'Anonymous' }}
</div>
<div class="widget-subheading">
{{ $user->title ?? 'Primary Developer' }}
{{ $user->exists ? Arr::get($user->getAttribute('mail'),0,'') : '' }}
</div>
</div>
<div class="widget-content-right header-user-info ml-3">
<button type="button" class="btn-shadow p-1 btn btn-primary btn-sm show-toastr-example">
<i class="fas text-white fa-calendar pr-1 pl-1"></i>
</button>
<div class="widget-content-right">
<div class="btn-group">
<a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="p-0 btn">
<i class="fas fa-angle-down ml-2 opacity-8"></i>
<img width="35" height="35" class="rounded" src="{{ url('user/image') }}" alt="" style="background-color: #eee;padding: 2px;">
</a>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
@if ($user->exists)
<h6 tabindex="-1" class="dropdown-header text-center">User Menu</h6>
<div tabindex="-1" class="dropdown-divider"></div>
<a href="{{ url('logout') }}" tabindex="0" class="dropdown-item">
<i class="fas fa-fw fa-sign-out-alt mr-2"></i> Sign Out
</a>
@else
<a href="{{ url('login') }}" tabindex="0" class="dropdown-item">
<i class="fas fa-fw fa-sign-in-alt mr-2"></i> Sign In
</a>
@endif
</div>
</div>
</div>
</div>
</div>