Enabled new login page

This commit is contained in:
Deon George 2021-06-13 13:56:27 +10:00
parent d7f3ab4130
commit 182f877701
10 changed files with 300 additions and 121 deletions

View File

@ -3,6 +3,7 @@
namespace App\Http\Controllers\Auth; namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller; use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\ResetsPasswords; use Illuminate\Foundation\Auth\ResetsPasswords;
class ResetPasswordController extends Controller class ResetPasswordController extends Controller
@ -25,7 +26,7 @@ class ResetPasswordController extends Controller
* *
* @var string * @var string
*/ */
protected $redirectTo = '/home'; protected $redirectTo = RouteServiceProvider::HOME;
/** /**
* Create a new controller instance. * Create a new controller instance.

View File

@ -2,6 +2,7 @@
namespace App\Http\Middleware; namespace App\Http\Middleware;
use App\Providers\RouteServiceProvider;
use Closure; use Closure;
use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Auth;
@ -18,7 +19,7 @@ class RedirectIfAuthenticated
public function handle($request, Closure $next, $guard = null) public function handle($request, Closure $next, $guard = null)
{ {
if (Auth::guard($guard)->check()) { if (Auth::guard($guard)->check()) {
return redirect('/home'); return redirect(RouteServiceProvider::HOME);
} }
return $next($request); return $next($request);

View File

@ -17,7 +17,7 @@ class RouteServiceProvider extends ServiceProvider
* *
* @var string * @var string
*/ */
public const HOME = '/home'; public const HOME = '/';
/** /**
* The controller namespace for the application. * The controller namespace for the application.

View File

@ -29,6 +29,7 @@ img::-moz-selection {
img::selection { img::selection {
background-color:rgba(0,172,0,.5) background-color:rgba(0,172,0,.5)
} }
a, a,
a:before, a:before,
a:after, a:after,
@ -40,9 +41,9 @@ textarea {
a:link { a:link {
text-decoration:none text-decoration:none
} }
:not(dt)>a:link,
:not(dt)>a:visited { .cap {
color:#0aa text-transform:uppercase
} }
div p:last-child { div p:last-child {
@ -50,27 +51,23 @@ div p:last-child {
} }
body { body {
font-family:ibmbios2y,monospace;
font-size:16px;
background-color: #000; background-color: #000;
color: #aaa; color: #aaa;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
margin: 0; margin: 0;
line-height: 20px line-height: 20px;
}
body {
font-family:ibmbios2y,monospace;
font-size:16px
}
body {
position:relative; position:relative;
padding-bottom:68px; padding-bottom:68px;
min-height:100% min-height:100%;
} }
sup { sup {
color: #530000; color: #530000;
vertical-align: unset !important;
top: -.3em;
} }
sup:before { sup:before {
content: '['; content: '[';
@ -112,7 +109,7 @@ sup:after {
width: 216px; width: 216px;
font-size: 1.5em; font-size: 1.5em;
font-weight:400; font-weight:400;
padding: 0; padding: 12px 0 0 0;
color: #fff; color: #fff;
display: inline-block; display: inline-block;
text-transform:uppercase; text-transform:uppercase;
@ -203,7 +200,7 @@ ul#navlist-desktop {
height:calc(100vh - 3em + 8px); height:calc(100vh - 3em + 8px);
width:22ch; width:22ch;
overflow:hidden; overflow:hidden;
padding-top:.5em; padding-top:1.5em;
color:#c60; color:#c60;
background-color:#000; background-color:#000;
box-sizing:border-box; box-sizing:border-box;
@ -280,7 +277,7 @@ ul#navlist-desktop {
margin-top:8px margin-top:8px
} }
#content h3, #content h3,
#content h4 { #content h4:not(.alert-heading) {
font-size:100%; font-size:100%;
font-weight:400; font-weight:400;
text-align:left text-align:left
@ -291,7 +288,7 @@ ul#navlist-desktop {
color:#c60; color:#c60;
border-bottom:1px solid #b00 border-bottom:1px solid #b00
} }
#content h4 { #content h4:not(.alert-heading) {
box-sizing:border-box; box-sizing:border-box;
margin:0 0 1em -.3px; margin:0 0 1em -.3px;
color:#b00; color:#b00;
@ -345,7 +342,8 @@ dt a:active {
} }
dd { dd {
margin-left: 0; margin-left: 0;
text-align:left margin-bottom: 0;
text-align: left;
} }
dd a::before { dd a::before {
content:"\BB\a0"; content:"\BB\a0";
@ -363,6 +361,53 @@ dd a:active {
background-color:#0aa background-color:#0aa
} }
form div.row {
padding-top: 15px;
--bs-gutter-x: 0;
}
.greyframe {
position:relative;
background-color: #192124;
padding:0 4ch 1em;
margin-top:.5em;
max-width:calc(100% - 2ch)
}
.greyframe>* {
z-index:1;
position:relative
}
.greyframe.shadow0xb0:before {
filter:saturate(0) brightness(.42)
}
.greyframe:after {
content:' ';
position:absolute;
top:5px;
left:10px;
width:calc(100% - 20px);
height:calc(100% - 13px);
border-top:3px double #eee;
border-bottom:3px double #eee;
border-left:5px double #eee;
border-right:5px double #eee;
z-index:0
}
.greyframe h2.cap {
width:24ch;
margin:23px auto -23px auto!important;
z-index:1
}
.greyframe h2.cap+h3,
.greyframe h2.cap+p {
margin-top:1em
}
label.form-label {
font-size: 75%;
margin-bottom: 1px;
}
p { p {
margin:0 0 1em; margin:0 0 1em;
padding:0; padding:0;
@ -370,6 +415,62 @@ p {
word-break:break-word word-break:break-word
} }
.pad {
padding:1em 1.5ch;
background-color:#292929;
text-align:left
}
.pad h1 {
color: #ff0000 !important;
text-shadow: 2px 2px 0 #360303 !important;
border-bottom: 2px solid #ff9999 !important;
}
.pad-alert {
background-color: #2a1a1a;
color: #ff3333;
width: 400px;
margin: auto;
}
.row {
text-align: left;
}
.shadow0xb0:before {
background-color:#000;
z-index:-20;
position:absolute;
display:block;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACAQMAAABFZu8gAAAABlBMVEUAqqoAAAC9JseZAAAADElEQVQI12O4wMwBAAKCANzeIkjIAAAAAElFTkSuQmCC);
content:' ';
width:100%;
height:100%;
top:16px;
left:16px;
transition:all .1s ease-in-out
}
.text-center {
text-align:center;
}
.text-left {
text-align:left;
}
.text-right {
text-align:right;
}
.titledbox {
margin:1.5em auto 2.5em auto
}
.titledbox h2 {
position:relative;
margin:0 auto -.5em auto!important;
top:-2em;
box-shadow:8px 9px 0 0 #000 !important;
}
ul { ul {
text-align:left text-align:left
} }
@ -383,33 +484,51 @@ ul {
height:48px; height:48px;
width:100% width:100%
} }
a#getback,
a#getback:link, a.goback,
a#getback:visited { a.goback:link,
a.goback:visited {
display:inline-block; display:inline-block;
text-decoration:none; text-decoration:none;
color:#0a0; color:#0a0;
padding:.5em 1ch; padding:.5em 1ch;
margin:0 3ch 0 0 margin:0 3ch 0 0
} }
a#getback:active, a.goback:active,
a#getback:hover { a.goback:hover {
color:#5f5; color:#5f5;
background-color:#333 background-color:#333
} }
a#getback:focus { a.goback:focus {
color:#5ff; color:#5ff;
background-color:#333; background-color:#333;
outline:0 outline:0
} }
a#getback:before { a.goback:before {
color:#a00; color:#a00;
content:"\25C4\25C4\a0" content:"\25C4\25C4\a0"
} }
a#getback:active:before, a.goback:active:before,
a#getback:hover:before { a.goback:hover:before {
color:#f55 color:#f55
} }
a#getback:focus:before { a.goback:focus:before {
color:#fff color:#fff
} }
.gohome {
text-align:right;
float:right
}
.gohome:before {
color:#0aa;
content:"\25b2\a0"
}
.gohome:after {
color:#0aa;
content:"\a0\25b2"
}
.gohome:hover:before,
.gohome:hover:after {
color:#a50!important
}

View File

@ -5,107 +5,126 @@
@endsection @endsection
@section('content') @section('content')
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
@if(isset($login_note) AND $login_note) @if(isset($login_note) AND $login_note)
<div class="alert alert-info alert-dismissible m-auto"> <div class="row">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <div class="col-8 m-auto">
<h5><i class="icon fas fa-info"></i> NOTE!</h5> <div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<h4 class="alert-heading">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
NOTE!
</h4>
{!! $login_note !!} {!! $login_note !!}
</div> </div>
<br> </div>
</div>
@endisset @endisset
<div class="col-6 pt-2 pb-2 m-auto bg-blue"> @if (Session::has('error'))
<div class="login-logo"> <div class="row">
<a>{!! config('app.name_html_long') !!}</a> <div class="col-8 m-auto">
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<h4 class="alert-heading">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<strong>Whoops!</strong> Some is not right...
</h4>
{{ Session::get('error') }}</li>
</div> </div>
</div>
</div>
@endif
@if (count($errors) > 0) @if (count($errors) > 0)
<div class="alert alert-danger"> <div class="row">
<strong>Whoops!</strong> {{ trans('message.someproblems') }}<br><br> <div class="col-8 m-auto">
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<strong>Whoops!</strong> Some is not right...
</h4>
<ul> <ul>
@foreach ($errors->all() as $error) @foreach ($errors->all() as $error)
<li>{{ $error }}</li> <li>{{ $error }}</li>
@endforeach @endforeach
</ul> </ul>
</div> </div>
@endif </div>
@if (Session::has('error'))
<div class="alert alert-danger">
<strong>Whoops!</strong> {{ trans('message.someproblems') }}<br><br>
<ul>
<li>{{ Session::get('error') }}</li>
</ul>
</div> </div>
@endif @endif
<!-- /.login-logo --> <div class="row">
<div class=""> <div class="col-6 m-auto">
<div class="xcard-body"> <div class="greyframe titledbox shadow0xb0 text-center">
<div class="text-light text-center p-3 pb-4"><h4>Login</h4></div> <h2 class="cap">Login</h2>
<form method="post"> <form class="row g-0 needs-validation" method="post" novalidate>
{{ csrf_field() }} {{ csrf_field() }}
<div class="row"> <div class="row">
<div class="col-3 text-right">
Login:
</div>
<div class="col-8">
<div class="input-group mb-3">
<input type="email" name="email" class="form-control" placeholder="Email">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-envelope fa-fw"></i></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3 text-right">
Password:
</div>
<div class="col-8">
<div class="input mb-3">
<input type="password" name="password" class="form-control" placeholder="Password">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key fa-fw"></i></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">&nbsp;</div>
<div class="col-8">
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
</div>
<div class="row">
<!-- /.col -->
<div class="col-12"> <div class="col-12">
<button type="submit" name="submit" class="btn btn-lg btn-success mr-0 float-right">Sign In</button> <label for="email" class="form-label">Email</label>
<a href="{{ url('/') }}" class="btn btn-lg btn-primary float-right">Cancel</a> <div class="input-group has-validation">
<span class="input-group-text"><i class="bi bi-person-badge"></i></span>
<input type="text" class="form-control" id="email" placeholder="Email" name="email" required>
<div class="invalid-feedback">
Your email is required.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<label for="password" class="form-label">Password</label>
<div class="input-group has-validation">
<span class="input-group-text"><i class="bi bi-key-fill"></i></span>
<input type="password" class="form-control" id="password" placeholder="Password" name="password" required>
<div class="invalid-feedback">
Your password is required.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<label><input type="checkbox" name="remember"> Remember Me</label>
</div>
</div>
<div class="row">
<div class="col-12">
<a href="{{ url('/') }}" class="btn btn-danger">Cancel</a>
<button type="submit" name="submit" class="btn btn-success mr-0 float-end">Sign In</button>
</div> </div>
<!-- /.col -->
</div> </div>
</form> </form>
<p class="mb-2"> <div class="row pt-4">
<a name="reset" href="{{ url('password/reset') }}">Forgot Password</a> <div class="col-12">
</p> <a class="link-danger" href="{{ url('password/reset') }}">Forgot Password</a>
</div>
</div>
<p class="mb-0"> <div class="row pt-1 pb-3">
<a href="{{ url('register') }}" class="text-center">Register</a> <div class="col-12">
</p> <a class="link-danger" href="{{ url('register') }}">Register</a>
</div> </div>
<!-- /.login-card-body --> </div>
</div>
</div> </div>
</div> </div>
<!-- /.login-box -->
@endsection @endsection

View File

@ -10,7 +10,6 @@
</div> </div>
<div id="content" class="with-sidebar"> <div id="content" class="with-sidebar">
<a class="anchor" id="top"></a>
@yield('main-content') @yield('main-content')
</div> </div>

View File

@ -1,16 +1,23 @@
<!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <html lang="en">
@section('htmlheader') @section('htmlheader')
@include('layouts.partials.htmlheader') @include('layouts.partials.htmlheader')
@show @show
<body class="hold-transition login-page"> <body>
<div id="app"> <div id="content">
@yield('content') @yield('content')
</div> </div>
<div id="footer" class="shifted">
@include('layouts.partials.footer')
</div>
{{-- Scripts --}}
@section('scripts') @section('scripts')
@include('auth.partials.scripts') @include('layouts.partials.scripts')
@yield('page-scripts')
@show @show
</body> </body>
</html> </html>

View File

@ -1 +1 @@
<a href="/" id="getback">{{ request()->getHost() }}</a> &copy {{ \Carbon\Carbon::now()->year }} Alterego <a href="/" class="goback">{{ request()->getHost() }}</a> &copy {{ \Carbon\Carbon::now()->year }} Alterego

View File

@ -5,6 +5,10 @@
<meta name="description" content="{{ $decription ?? '' }}"> <meta name="description" content="{{ $decription ?? '' }}">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link href="{{ asset('oldschool/css/main.css') }}" rel="stylesheet" media="screen" type="text/css"> <link href="{{ asset('oldschool/css/main.css') }}" rel="stylesheet" media="screen" type="text/css">
<link rel="icon" type="image/png" href="{{ asset('favicon.ico') }}"> <link rel="icon" type="image/png" href="{{ asset('favicon.ico') }}">

View File

@ -0,0 +1,29 @@
<!-- Bootstrap & Jquery App -->
<script type="text/javascript" src="{{ asset('//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js') }}" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js') }}" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>