Enabled new login page

2021-06-13 13:56:27 +10:00 · 2021-06-13 13:56:27 +10:00 · 182f877701
parent d7f3ab4130
commit 182f877701
10 changed files with 300 additions and 121 deletions
--- a/app/Http/Controllers/Auth/ResetPasswordController.php
+++ b/app/Http/Controllers/Auth/ResetPasswordController.php
@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Auth;

 use App\Http\Controllers\Controller;
+use App\Providers\RouteServiceProvider;
 use Illuminate\Foundation\Auth\ResetsPasswords;

 class ResetPasswordController extends Controller
@ -25,7 +26,7 @@ class ResetPasswordController extends Controller
     *
     * @var string
     */
-    protected $redirectTo = '/home';
+    protected $redirectTo = RouteServiceProvider::HOME;

    /**
     * Create a new controller instance.
--- a/app/Http/Middleware/RedirectIfAuthenticated.php
+++ b/app/Http/Middleware/RedirectIfAuthenticated.php
@ -2,6 +2,7 @@

 namespace App\Http\Middleware;

+use App\Providers\RouteServiceProvider;
 use Closure;
 use Illuminate\Support\Facades\Auth;

@ -18,7 +19,7 @@ class RedirectIfAuthenticated
    public function handle($request, Closure $next, $guard = null)
    {
        if (Auth::guard($guard)->check()) {
-            return redirect('/home');
+            return redirect(RouteServiceProvider::HOME);
        }

        return $next($request);
--- a/app/Providers/RouteServiceProvider.php
+++ b/app/Providers/RouteServiceProvider.php
@ -17,7 +17,7 @@ class RouteServiceProvider extends ServiceProvider
     *
     * @var string
     */
-    public const HOME = '/home';
+    public const HOME = '/';

    /**
     * The controller namespace for the application.
--- a/public/oldschool/css/main.css
+++ b/public/oldschool/css/main.css
@ -29,6 +29,7 @@ img::-moz-selection {
 img::selection {
 	background-color:rgba(0,172,0,.5)
 }
+
 a,
 a:before,
 a:after,
@ -40,9 +41,9 @@ textarea {
 a:link {
 	text-decoration:none
 }
-:not(dt)>a:link,
-:not(dt)>a:visited {
-	color:#0aa
+
+.cap {
+	text-transform:uppercase
 }

 div p:last-child {
@ -50,27 +51,23 @@ div p:last-child {
 }

 body {
+	font-family:ibmbios2y,monospace;
+	font-size:16px;
 	background-color: #000;
 	color: #aaa;
 	overflow-x: hidden;
 	overflow-y: scroll;
 	margin: 0;
-	line-height: 20px
-}
-
-body {
-	font-family:ibmbios2y,monospace;
-	font-size:16px
-}
-
-body {
+	line-height: 20px;
 	position:relative;
 	padding-bottom:68px;
-	min-height:100%
+	min-height:100%;
 }

 sup {
 	color: #530000;
+	vertical-align: unset !important;
+	top: -.3em;
 }
 sup:before {
 	content: '[';
@ -112,7 +109,7 @@ sup:after {
 	width: 216px;
 	font-size: 1.5em;
 	font-weight:400;
-	padding: 0;
+	padding: 12px 0 0 0;
 	color: #fff;
 	display: inline-block;
 	text-transform:uppercase;
@ -203,7 +200,7 @@ ul#navlist-desktop {
 	height:calc(100vh - 3em + 8px);
 	width:22ch;
 	overflow:hidden;
-	padding-top:.5em;
+	padding-top:1.5em;
 	color:#c60;
 	background-color:#000;
 	box-sizing:border-box;
@ -280,7 +277,7 @@ ul#navlist-desktop {
 	margin-top:8px
 }
 #content h3,
-#content h4 {
+#content h4:not(.alert-heading) {
 	font-size:100%;
 	font-weight:400;
 	text-align:left
@ -291,7 +288,7 @@ ul#navlist-desktop {
 	color:#c60;
 	border-bottom:1px solid #b00
 }
-#content h4 {
+#content h4:not(.alert-heading) {
 	box-sizing:border-box;
 	margin:0 0 1em -.3px;
 	color:#b00;
@ -344,8 +341,9 @@ dt a:active {
 	background-color:#0aa
 }
 dd {
-	margin-left:0;
-	text-align:left
+	margin-left: 0;
+	margin-bottom: 0;
+	text-align: left;
 }
 dd a::before {
 	content:"\BB\a0";
@ -363,6 +361,53 @@ dd a:active {
 	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 {
 	margin:0 0 1em;
 	padding:0;
@ -370,6 +415,62 @@ p {
 	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 {
 	text-align:left
 }
@ -383,33 +484,51 @@ ul {
 	height:48px;
 	width:100%
 }
-a#getback,
-a#getback:link,
-a#getback:visited {
+
+a.goback,
+a.goback:link,
+a.goback:visited {
 	display:inline-block;
 	text-decoration:none;
 	color:#0a0;
 	padding:.5em 1ch;
 	margin:0 3ch 0 0
 }
-a#getback:active,
-a#getback:hover {
+a.goback:active,
+a.goback:hover {
 	color:#5f5;
 	background-color:#333
 }
-a#getback:focus {
+a.goback:focus {
 	color:#5ff;
 	background-color:#333;
 	outline:0
 }
-a#getback:before {
+a.goback:before {
 	color:#a00;
 	content:"\25C4\25C4\a0"
 }
-a#getback:active:before,
-a#getback:hover:before {
+a.goback:active:before,
+a.goback:hover:before {
 	color:#f55
 }
-a#getback:focus:before {
+a.goback:focus:before {
 	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
 }
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@ -5,107 +5,126 @@
@endsection

@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)
-		<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 class="row">
+			<div class="col-8 m-auto">
+				<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 !!}
+				</div>
+			</div>
 		</div>
-		<br>
 	@endisset

-	<div class="col-6 pt-2 pb-2 m-auto bg-blue">
-		<div class="login-logo">
-			<a>{!! config('app.name_html_long') !!}</a>
+	@if (Session::has('error'))
+		<div class="row">
+			<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>
+	@endif

-		@if (count($errors) > 0)
-			<div class="alert alert-danger">
-				<strong>Whoops!</strong> {{ trans('message.someproblems') }}<br><br>
-				<ul>
-					@foreach ($errors->all() as $error)
-						<li>{{ $error }}</li>
-					@endforeach
-				</ul>
+	@if (count($errors) > 0)
+		<div class="row">
+			<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>
+						@foreach ($errors->all() as $error)
+							<li>{{ $error }}</li>
+						@endforeach
+					</ul>
+				</div>
 			</div>
-		@endif
+		</div>
+	@endif

-		@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>
-		@endif
+	<div class="row">
+		<div class="col-6 m-auto">
+			<div class="greyframe titledbox shadow0xb0 text-center">
+				<h2 class="cap">Login</h2>

-		<!-- /.login-logo -->
-		<div class="">
-			<div class="xcard-body">
-				<div class="text-light text-center p-3 pb-4"><h4>Login</h4></div>
-
-				<form method="post">
+				<form class="row g-0 needs-validation" method="post" novalidate>
 					{{ csrf_field() }}

 					<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">
-							<button type="submit" name="submit" class="btn btn-lg btn-success mr-0 float-right">Sign In</button>
-							<a href="{{ url('/') }}" class="btn btn-lg btn-primary float-right">Cancel</a>
+							<label for="email" class="form-label">Email</label>
+							<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>
-						<!-- /.col -->
 					</div>
 				</form>

-				<p class="mb-2">
-					<a name="reset" href="{{ url('password/reset') }}">Forgot Password</a>
-				</p>
+				<div class="row pt-4">
+					<div class="col-12">
+						<a class="link-danger" href="{{ url('password/reset') }}">Forgot Password</a>
+					</div>
+				</div>

-				<p class="mb-0">
-					<a href="{{ url('register') }}" class="text-center">Register</a>
-				</p>
+				<div class="row pt-1 pb-3">
+					<div class="col-12">
+						<a class="link-danger" href="{{ url('register') }}">Register</a>
+					</div>
+				</div>
 			</div>
-			<!-- /.login-card-body -->
 		</div>
 	</div>
-	<!-- /.login-box -->
@endsection
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@ -10,7 +10,6 @@
 		</div>

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

--- a/resources/views/layouts/auth.blade.php
+++ b/resources/views/layouts/auth.blade.php
@ -1,16 +1,23 @@
-<!DOCTYPE html>
-<html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en">
 	@section('htmlheader')
 		@include('layouts.partials.htmlheader')
 	@show

-	<body class="hold-transition login-page">
-		<div id="app">
+	<body>
+		<div id="content">
 			@yield('content')
 		</div>

+		<div id="footer" class="shifted">
+			@include('layouts.partials.footer')
+		</div>
+
+		{{-- Scripts --}}
 		@section('scripts')
-			@include('auth.partials.scripts')
+			@include('layouts.partials.scripts')
+
+			@yield('page-scripts')
 		@show
 	</body>
 </html>
--- a/resources/views/layouts/partials/footer.blade.php
+++ b/resources/views/layouts/partials/footer.blade.php
@ -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
--- a/resources/views/layouts/partials/htmlheader.blade.php
+++ b/resources/views/layouts/partials/htmlheader.blade.php
@ -5,6 +5,10 @@
 	<meta name="description" content="{{ $decription ?? '' }}">
 	<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 rel="icon" type="image/png" href="{{ asset('favicon.ico') }}">
--- a/resources/views/layouts/partials/scripts.blade.php
+++ b/resources/views/layouts/partials/scripts.blade.php
@ -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>