Update setting layouts

resources/views/settings/password.blade.php

@@ -1,38 +1,66 @@
-@extends('settings.template')
+@extends('layouts.app')
 
-@section('section')
-
-  <div class="title">
-    <h3 class="font-weight-bold">Update Password</h3>
-  </div>
-  <hr>
-  <form method="post">
-    @csrf
-    <div class="form-group row">
-      <label for="existing" class="col-sm-3 col-form-label font-weight-bold">Current</label>
-      <div class="col-sm-9">
-        <input type="password" class="form-control" name="current" placeholder="Your current password">
-      </div>
+@section('content')
+@if (session('status'))
+    <div class="alert alert-primary px-3 h6 text-center">
+        {{ session('status') }}
     </div>
-    <hr>
-    <div class="form-group row">
-      <label for="new" class="col-sm-3 col-form-label font-weight-bold">New</label>
-      <div class="col-sm-9">
-        <input type="password" class="form-control" name="password" placeholder="Enter new password here">
-      </div>
+@endif
+@if ($errors->any())
+    <div class="alert alert-danger px-3 h6 text-center">
+            @foreach($errors->all() as $error)
+                <p class="font-weight-bold mb-1">{{ $error }}</li>
+            @endforeach
     </div>
-    <div class="form-group row">
-      <label for="confirm" class="col-sm-3 col-form-label font-weight-bold">Confirm</label>
-      <div class="col-sm-9">
-        <input type="password" class="form-control" name="password_confirmation" placeholder="Confirm new password">
-      </div>
+@endif
+@if (session('error'))
+    <div class="alert alert-danger px-3 h6 text-center">
+        {{ session('error') }}
     </div>
-    <hr>
-    <div class="form-group row">
-      <div class="col-12 text-right">
-        <button type="submit" class="btn btn-primary font-weight-bold py-0 px-5">Submit</button>
+@endif
+
+<div class="container">
+  <div class="col-12">
+    <div class="card shadow-none border mt-5">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-12 p-3 p-md-5">
+			  <div class="title">
+			    <h3 class="font-weight-bold">Update Password</h3>
+			  </div>
+			  <hr>
+			  <form method="post">
+			    @csrf
+			    <div class="form-group row">
+			      <label for="existing" class="col-sm-3 col-form-label font-weight-bold">Current</label>
+			      <div class="col-sm-9">
+			        <input type="password" class="form-control" name="current" placeholder="Your current password">
+			      </div>
+			    </div>
+			    <hr>
+			    <div class="form-group row">
+			      <label for="new" class="col-sm-3 col-form-label font-weight-bold">New</label>
+			      <div class="col-sm-9">
+			        <input type="password" class="form-control" name="password" placeholder="Enter new password here">
+			      </div>
+			    </div>
+			    <div class="form-group row">
+			      <label for="confirm" class="col-sm-3 col-form-label font-weight-bold">Confirm</label>
+			      <div class="col-sm-9">
+			        <input type="password" class="form-control" name="password_confirmation" placeholder="Confirm new password">
+			      </div>
+			    </div>
+			    <div class="form-group row">
+			      <div class="col-12 text-right">
+			        <button type="submit" class="btn btn-primary font-weight-bold py-0 px-5">Submit</button>
+			      </div>
+			    </div>
+			  </form>
+			</div>
+        </div>
       </div>
     </div>
-  </form>
+  </div>
+</div>
 
-@endsection
+@endsection

resources/views/settings/security/2fa/edit.blade.php

@@ -1,33 +1,42 @@
-@extends('settings.template')
+@extends('layouts.app')
 
-@section('section')
+@section('content')
+<div class="container">
+  <div class="col-12">
+    <div class="card shadow-none border mt-5">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-12 p-3 p-md-5">
+			  <div class="title">
+			    <h3 class="font-weight-bold">Edit Two-Factor Authentication</h3>
+			  </div>
 
-  <div class="title">
-    <h3 class="font-weight-bold">Edit Two-Factor Authentication</h3>
-  </div>
-  
-  <hr>
+			  <hr>
 
-  <p class="lead pb-3">
-  	To register a new device, you have to remove any active devices.
-  </p>
+			  <p class="lead pb-3">
+			  	To register a new device, you have to remove any active devices.
+			  </p>
 
-  <div class="card">
-  	<div class="card-header bg-light font-weight-bold">
-  		Authenticator App
-  	</div>
-  	<div class="card-body d-flex justify-content-between align-items-center">
-  		<i class="fas fa-lock fa-3x text-success"></i>
-  		<p class="font-weight-bold mb-0">
-  			Added {{$user->{'2fa_setup_at'}->diffForHumans()}}
-  		</p>
-  	</div>
-  	<div class="card-footer bg-white text-right">
-  		<a class="btn btn-outline-secondary btn-sm px-4 font-weight-bold mr-3" href="{{route('settings.security.2fa.recovery')}}">View Recovery Codes</a>
-  		<a class="btn btn-outline-danger btn-sm px-4 font-weight-bold remove-device" href="#">Remove</a>
-  	</div>
+			  <div class="card">
+			  	<div class="card-header bg-light font-weight-bold">
+			  		Authenticator App
+			  	</div>
+			  	<div class="card-body d-flex justify-content-between align-items-center">
+			  		<i class="fas fa-lock fa-3x text-success"></i>
+			  		<p class="font-weight-bold mb-0">
+			  			Added {{$user->{'2fa_setup_at'}->diffForHumans()}}
+			  		</p>
+			  	</div>
+			  	<div class="card-footer bg-white text-right">
+			  		<a class="btn btn-outline-secondary btn-sm px-4 font-weight-bold mr-3" href="{{route('settings.security.2fa.recovery')}}">View Recovery Codes</a>
+			  		<a class="btn btn-outline-danger btn-sm px-4 font-weight-bold remove-device" href="#">Remove</a>
+			  	</div>
+			  </div>
+        </div>
+      </div>
+    </div>
   </div>
-
+</div>
 @endsection
 
 @push('scripts')
@@ -79,4 +88,4 @@ $(document).ready(function() {
 });
 
 </script>
-@endpush
+@endpush

resources/views/settings/security/2fa/recovery-codes.blade.php

@@ -1,32 +1,42 @@
-@extends('settings.template')
+@extends('layouts.app')
 
-@section('section')
+@section('content')
+<div class="container">
+  <div class="col-12">
+    <div class="card shadow-none border mt-5">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-12 p-3 p-md-5">
+			  <div class="title">
+			    <h3 class="font-weight-bold">Two-Factor Authentication Recovery Codes</h3>
+			  </div>
 
-  <div class="title">
-    <h3 class="font-weight-bold">Two-Factor Authentication Recovery Codes</h3>
-  </div>
-
-  <hr>
-    @if(count($codes) > 0)
-      <p class="lead pb-3">
-      	Each code can only be used once.
-      </p>
-      <ul class="list-group">
-      	@foreach($codes as $code)
-      	<li class="list-group-item"><code>{{$code}}</code></li>
-      	@endforeach
-      </ul>
-    @else
-    <div class="pt-5">
-      <h4 class="font-weight-bold">You are out of recovery codes</h4>
-      <p class="lead">Generate more recovery codes and store them in a safe place.</p>
-      <p>
-        <form method="post">
-          @csrf
-          <button type="submit" class="btn btn-primary font-weight-bold">Generate Recovery Codes</button>
-        </form>
-      </p>
+			  <hr>
+			    @if(count($codes) > 0)
+			      <p class="lead pb-3">
+			      	Each code can only be used once.
+			      </p>
+			      <ul class="list-group">
+			      	@foreach($codes as $code)
+			      	<li class="list-group-item"><code>{{$code}}</code></li>
+			      	@endforeach
+			      </ul>
+			    @else
+			    <div class="pt-5">
+			      <h4 class="font-weight-bold">You are out of recovery codes</h4>
+			      <p class="lead">Generate more recovery codes and store them in a safe place.</p>
+			      <p>
+			        <form method="post">
+			          @csrf
+			          <button type="submit" class="btn btn-primary font-weight-bold">Generate Recovery Codes</button>
+			        </form>
+			      </p>
+			    </div>
+			    @endif
+            </div>
+        </div>
+      </div>
     </div>
-    @endif
-
-@endsection
+  </div>
+</div>
+@endsection

resources/views/settings/security/2fa/setup.blade.php

@@ -1,85 +1,97 @@
-@extends('settings.template')
+@extends('layouts.app')
 
-@section('section')
+@section('content')
+<div class="container">
+  <div class="col-12">
+    <div class="card shadow-none border mt-5">
+      <div class="card-body">
+        <div class="row">
+          <div class="col-12 p-3 p-md-5">
+			  <div class="title">
+			    <h3 class="font-weight-bold">Setup Two-Factor Authentication</h3>
+			  </div>
+			  <hr>
+			  <div class="alert alert-info font-weight-light mb-3">
+			  	We only support Two-Factor Authentication via TOTP mobile apps.
+			  </div>
+			  <section class="step-one pb-5">
+			  	<div class="sub-title font-weight-bold h5" data-toggle="collapse" data-target="#step1" aria-expanded="true" aria-controls="step1" data-step="1">
+			  		Step 1: Install compatible 2FA mobile app <i class="float-right fas fa-chevron-down"></i>
+			  	</div>
+			  	<hr>
+			  	<div class="collapse show" id="step1">
+				  	<p>You will need to install a compatible mobile app, we recommend the following apps:</p>
+				  	<ul>
+				  		<li><a href="https://1password.com/downloads/" rel="nooopener nofollow">1Password</a></li>
+				  		<li><a href="https://authy.com/download/" rel="nooopener nofollow">Authy</a></li>
+				  		<li><a href="https://lastpass.com/auth/" rel="nooopener nofollow">LastPass Authenticator</a></li>
+				  		<li>
+				  			Google Authenticator
+				  			<a class="small" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_CA" rel="nooopener nofollow">
+				  				(android)
+				  			</a>
+				  			<a class="small" href="https://itunes.apple.com/ca/app/google-authenticator/id388497605?mt=8" rel="nooopener nofollow">
+				  				(iOS)
+				  			</a>
+				  		</li>
+				  		<li><a href="https://www.microsoft.com/en-us/account/authenticator" rel="nooopener nofollow">Microsoft Authenticator</a></li>
+				  	</ul>
+			  	</div>
+			  </section>
 
-  <div class="title">
-    <h3 class="font-weight-bold">Setup Two-Factor Authentication</h3>
-  </div>
-  <hr>
-  <div class="alert alert-info font-weight-light mb-3">
-  	We only support Two-Factor Authentication via TOTP mobile apps.
-  </div>
-  <section class="step-one pb-5">
-  	<div class="sub-title font-weight-bold h5" data-toggle="collapse" data-target="#step1" aria-expanded="true" aria-controls="step1" data-step="1">
-  		Step 1: Install compatible 2FA mobile app <i class="float-right fas fa-chevron-down"></i>
-  	</div>
-  	<hr>
-  	<div class="collapse show" id="step1">
-	  	<p>You will need to install a compatible mobile app, we recommend the following apps:</p>
-	  	<ul>
-	  		<li><a href="https://1password.com/downloads/" rel="nooopener nofollow">1Password</a></li>
-	  		<li><a href="https://authy.com/download/" rel="nooopener nofollow">Authy</a></li>
-	  		<li><a href="https://lastpass.com/auth/" rel="nooopener nofollow">LastPass Authenticator</a></li>
-	  		<li>
-	  			Google Authenticator 
-	  			<a class="small" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_CA" rel="nooopener nofollow">
-	  				(android)
-	  			</a>
-	  			<a class="small" href="https://itunes.apple.com/ca/app/google-authenticator/id388497605?mt=8" rel="nooopener nofollow">
-	  				(iOS)
-	  			</a>
-	  		</li>
-	  		<li><a href="https://www.microsoft.com/en-us/account/authenticator" rel="nooopener nofollow">Microsoft Authenticator</a></li>
-	  	</ul>
-  	</div>
-  </section>
+			  <section class="step-two pb-5">
+			  	<div class="sub-title font-weight-bold h5" data-toggle="collapse" data-target="#step2" aria-expanded="false" aria-controls="step2" data-step="2">
+			  		Step 2: Scan QR Code and confirm <i class="float-right fas fa-chevron-down"></i>
+			  	</div>
+			  	<hr>
+			  	<div class="collapse" id="step2">
+				  	<p>Please scan the QR code and then enter the 6 digit code in the form below. Keep in mind the code changes every 30 seconds, and is only good for 1 minute.</p>
+				  	<div class="card">
+				  		<div class="card-body text-center">
+				  			<div class="pb-3">
+				  				<p class="font-weight-bold">QR Code</p>
+				  				<img src="data:image/png;base64,{{$qrcode}}" class="img-fluid" width="200px">
+				  			</div>
+				  			<div>
+				  				<p class="font-weight-bold">OTP Secret</p>
+				  				<input type="text" class="form-control" value="{{ $user->{'2fa_secret'} }}" disabled>
+				  			</div>
+				  		</div>
+				  		<div class="card-body">
+				  			<form id="confirm-code">
+					  			<div class="form-group">
+					  				<label class="font-weight-bold small">Code</label>
+					  				<input type="text" name="code" id="verifyCode" class="form-control" placeholder="Code" autocomplete="off">
+					  			</div>
+					  			<button type="submit" class="btn btn-primary font-weight-bold">Submit</button>
+				  			</form>
+				  		</div>
+				  	</div>
+			  	</div>
+			  </section>
 
-  <section class="step-two pb-5">
-  	<div class="sub-title font-weight-bold h5" data-toggle="collapse" data-target="#step2" aria-expanded="false" aria-controls="step2" data-step="2">
-  		Step 2: Scan QR Code and confirm <i class="float-right fas fa-chevron-down"></i>
-  	</div>
-  	<hr>
-  	<div class="collapse" id="step2">
-	  	<p>Please scan the QR code and then enter the 6 digit code in the form below. Keep in mind the code changes every 30 seconds, and is only good for 1 minute.</p>
-	  	<div class="card">
-	  		<div class="card-body text-center">
-	  			<div class="pb-3">
-	  				<p class="font-weight-bold">QR Code</p>
-	  				<img src="data:image/png;base64,{{$qrcode}}" class="img-fluid" width="200px">
-	  			</div>
-	  			<div>
-	  				<p class="font-weight-bold">OTP Secret</p>
-	  				<input type="text" class="form-control" value="{{ $user->{'2fa_secret'} }}" disabled>
-	  			</div>
-	  		</div>
-	  		<div class="card-body">
-	  			<form id="confirm-code">
-		  			<div class="form-group">
-		  				<label class="font-weight-bold small">Code</label>
-		  				<input type="text" name="code" id="verifyCode" class="form-control" placeholder="Code" autocomplete="off">
-		  			</div>
-		  			<button type="submit" class="btn btn-primary font-weight-bold">Submit</button>
-	  			</form>
-	  		</div>
-	  	</div>
-  	</div>
-  </section>
+			  <section class="step-three pb-5">
+			  	<div class="sub-title font-weight-bold h5" data-toggle="collapse" data-target="#step3" aria-expanded="true" aria-controls="step3" data-step="3">
+			  		Step 3: Download Backup Codes <i class="float-right fas fa-chevron-down"></i>
+			  	</div>
+			  	<hr>
+			  	<div class="collapse" id="step3">
+				  	<p>Please store the following codes in a safe place, each backup code can be used only once if you do not have access to your 2FA mobile app.</p>
 
-  <section class="step-three pb-5">
-  	<div class="sub-title font-weight-bold h5" data-toggle="collapse" data-target="#step3" aria-expanded="true" aria-controls="step3" data-step="3">
-  		Step 3: Download Backup Codes <i class="float-right fas fa-chevron-down"></i>
-  	</div>
-  	<hr>
-  	<div class="collapse" id="step3">
-	  	<p>Please store the following codes in a safe place, each backup code can be used only once if you do not have access to your 2FA mobile app.</p>
+				  	<code>
+				  	@foreach($backups as $code)
+				  	<p class="mb-0">{{$code}}</p>
+				  	@endforeach
+				  	</code>
+			  	</div>
+			  </section>
 
-	  	<code>
-	  	@foreach($backups as $code)
-	  	<p class="mb-0">{{$code}}</p>
-	  	@endforeach
-	  	</code>
-  	</div>
-  </section>
+            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 @endsection
 
 @push('scripts')
@@ -138,4 +150,4 @@ $(document).ready(function() {
 	});
 });
 </script>
-@endpush
+@endpush