Update MFA screens

auth/assets/templates/mfa-totp-disable.html.tpl

@@ -10,7 +10,7 @@
 		Disable by entering existing code.
 
 		{{ if .form.error }}
-		<div class="alert alert-danger" role="alert">
+		<div class="pt-3 text-danger font-weight-bold" role="alert">
 			{{ .form.error }}
 		</div>
 		{{ end }}
@@ -27,6 +27,7 @@
 				aria-required="true"
 				placeholder="000 000"
 				autocomplete="off"
+				style="letter-spacing:5px;font-size:20px;"
 				aria-label="Code">
 		</div>
 

auth/assets/templates/mfa-totp.html.tpl

@@ -3,7 +3,7 @@
 	<h4 class="card-title p-3 border-bottom">Configure two-factor authentication with TOTP</h4>
 
 	{{ if .enforced }}
-	<p class="p-3 text-danger">
+	<p class="p-3 text-danger mb-0 font-weight-bold">
 		TOTP multi factor authentication is enforced by Corteza administrator.
 		Please configure it right away.
 	</p>
@@ -12,9 +12,9 @@
 
 	<div class="container p-3 m-0">
 		<div class="row">
-			<div class="col-6 p-0">
+			<div class="col-12 col-sm-6 p-0 mb-3">
 				<pre class="h5 px-4">{{ .secret }}</pre>
-				<img style="width: 280px" src="{{ links.MfaTotpQRImage }}" />
+				<img style="width: 280px" class="d-block m-auto pb-2" src="{{ if .devQRImage }}{{ .devQRImage }}{{ else }}{{ links.MfaTotpQRImage }}{{ end }}" />
 
 				<form
 					class="px-3"
@@ -41,6 +41,7 @@
 							aria-required="true"
 							placeholder="000 000"
 							autocomplete="off"
+							style="letter-spacing:5px;font-size:20px;"
 							aria-label="Code">
 					</div>
 
@@ -54,8 +55,8 @@
 					</button>
 				</form>
 			</div>
-			<div class="col-6 p-0">
-				<p>
+			<div class="col-12 col-sm-6">
+				<p class="text-justify">
 					Corteza uses time based one time passwords (TOTP) as one of the
 					underlying technologies for two-factor authentication.
 					Use one of the applications listed below and type in the secret or scan the QR code.

auth/assets/templates/mfa.html.tpl

@@ -1,5 +1,5 @@
 {{ template "inc_header.html.tpl" set . "hideNav" true }}
-<div class="card-body p-0">
+<div class="card-body p-0 mb-2">
 	<h4 class="card-title p-3 border-bottom">Multi-factor authentication</h4>
 
 	{{ if .emailOtpPending }}
@@ -11,7 +11,7 @@
 		<h5>Check your inbox and enter the received code</h5>
 
 		{{ if .form.emailOtpError }}
-		<div class="alert alert-danger" role="alert">
+		<div class="text-danger my-4 font-weiUpdate MFAght-bold" role="alert">
 			{{ .form.emailOtpError }}
 		</div>
 		{{ end }}
@@ -29,6 +29,7 @@
 				aria-required="true"
 				placeholder="000 000"
 				autocomplete="off"
+				style="letter-spacing:5px;font-size:20px;"
 				aria-label="Code">
 		</div>
 
@@ -43,7 +44,7 @@
 
 		<a
 			href="{{ links.Mfa }}?action=resendEmailOtp"
-			class="btn btn-link btn-block btn-lg"
+			class="btn btn-light btn-block btn-lg text-dark"
 			name="action"
 			value="resendEmailOtp"
 		>
@@ -51,8 +52,8 @@
 		</a>
 	</form>
 	{{ else if not .emailOtpDisabled }}
-		<p class="p-3">
-			<i class="bi bi-check text-primary"></i> Email OTP confirmed
+		<p class="p-3 mb-0">
+			<i class="bi bi-check-circle text-success h5"></i> Email OTP confirmed
 		</p>
 	{{ end }}
 
@@ -62,7 +63,7 @@
 		method="POST"
 		action="{{ links.Mfa }}"
 	>
-		<h5>Check your TOTP application and enter the received code</h5>
+		<h5>Check your TOTP application and enter the code you received</h5>
 
 		{{ if .form.totpError }}
 		<div class="alert alert-danger" role="alert">
@@ -83,6 +84,7 @@
 				aria-required="true"
 				placeholder="000 000"
 				autocomplete="off"
+				style="letter-spacing:5px;font-size:20px;"
 				aria-label="Code">
 		</div>
 
@@ -96,8 +98,8 @@
 		</button>
 	</form>
 	{{ else if not .totpDisabled }}
-		<p class="p-3">
-			<i class="bi bi-check text-primary"></i> TOTP confirmed
+		<p class="p-3 mb-0">
+			<i class="bi bi-check-circle text-success h5"></i> TOTP confirmed
 		</p>
 	{{ end }}
 </div>

auth/assets/templates/scenarios.yaml

@@ -70,8 +70,29 @@ security:
         EmailOTP: { Enabled: true }
 
 mfa:
+  Defautl: {}
   MFA pending:
     emailOtpPending: true
+    totpDisabled: true
+  TOTP pending:
+    totpPending: true
+  With error:
+    emailOtpPending: true
+    form:
+      emailOtpError: "There was an error..."
+
+mfa-totp:
+  Default:
+    devQRImage: https://awgsalesservices.com/wp-content/uploads/2019/02/QR-code-example.jpg
+  TOTP enforced:
+    enforced: true
+    devQRImage: https://awgsalesservices.com/wp-content/uploads/2019/02/QR-code-example.jpg
+
+mfa-totp-disable:
+  Default: {}
+  With error:
+    form:
+      error: "There was an error..."
 
 logout:
   Default: {}