Revamp login screens by moving login icons to the left,

due to issues with browser plugins like LastPass which place buttons on the right.
And added a TOTP icon

dev/Styles/@Admin.less

@@ -32,6 +32,4 @@
 @import "Admin/Plugin.less";
 @import "Admin/About.less";
 
-@import "Animations.less";
-
 @import "_End.less";

dev/Styles/@Main.less

@@ -53,6 +53,5 @@
 @import "User/SquireUI.less";
 
 @import "User/Animations.less";
-@import "Animations.less";
 
 @import "_End.less";

dev/Styles/Admin/Layout.less

@@ -15,6 +15,7 @@
 	flex-shrink: 0;
 	overflow: auto;
 	padding-top: 50px + @rlLowMargin + 10px;
+	transition: width 0.3s ease-out;
 	width: @rlLeftWidth;
 
 	nav {
@@ -42,6 +43,7 @@
 
 #rl-right {
 	flex-grow: 1;
+	transition: left 0.3s ease-out, right 0.3s ease-out;
 	z-index: 1;
 }
 

dev/Styles/Animations.less

@@ -1,36 +0,0 @@
-
-@keyframes login-form-shake  {
-  0% {transform: translateX(0);}
-  12.5% {transform: translateX(-6px)}
-  37.5% {transform: translateX(5px)}
-  62.5% {transform: translateX(-3px)}
-  87.5% {transform: translateX(2px)}
-  100% {transform: translateX(0)}
-}
-
-#rl-left {
-	transition: width 0.3s ease-out;
-}
-
-#rl-right {
-	transition: left 0.3s ease-out, right 0.3s ease-out;
-}
-
-html.rl-started-trigger .LoginView {
-	/*transform: scale(1.1);*/
-	transform: translateY(-20px);
-	opacity: 0.5;
-}
-
-.LoginView .errorAnimated {
-	animation: login-form-shake 400ms ease-in-out;
-}
-
-.LoginView .errorAnimated .buttonLogin {
-	color: #b94a48;
-	font-weight: bold;
-}
-
-.LoginView {
-	transition: all 0.3s ease-out;
-}

dev/Styles/Components.less

@@ -50,10 +50,6 @@
 			outline: 1px dotted;
 		}
 
-		.e-checkbox-icon {
-			padding: 1px 0 0 1px;
-		}
-
 		&.disabled {
 			cursor: not-allowed;
 			opacity: 0.5;

dev/Styles/Login.less

@@ -6,6 +6,7 @@
 	width: 100%;
 	min-width: 250px;
 	max-width: 600px;
+	transition: all 0.3s ease-out;
 	z-index: 5;
 }
 
@@ -15,8 +16,6 @@
 
 .LoginView {
 
-	position: relative;
-
 	.descWrapper {
 		color: var(--loading-color, #000);
 		font-size: 30px;
@@ -25,10 +24,6 @@
 		text-shadow: var(--loading-text-shadow);
 	}
 
-	.controls, .control-group {
-		margin-bottom: 25px;
-	}
-
 	form {
 		background-color: var(--login-bg-color, rgba(0, 0, 0, .5));
 		border: var(--login-border, 1px solid rgba(255, 255, 255, .2));
@@ -43,16 +38,9 @@
 			color: var(--login-color, @glass-m-color);
 		}
 
-		.controls.error {
-			.input-append .add-on,
-			.input-append .add-on * {
-				color: @glass-error-color;
-			}
-
-			input {
-				color: @glass-error-color;
-				border-color: @glass-error-color;
-			}
+		.controls.error * {
+			color: @glass-error-color;
+			border-color: @glass-error-color;
 		}
 
 		&.submitting > * {
@@ -78,61 +66,64 @@
 		}
 	}
 
-	.controls {
-		.input-block-level {
-			font-size: 18px;
-			height: 40px;
-			padding-left: 12px;
-		}
-		.inputIcon {
-			padding-right: 35px;
-		}
+	.controls, .control-group {
+		margin-bottom: 25px;
+		position: relative;
+	}
 
-		input, .btn {
-			background: none !important;
-			border: 1px solid @glass-m-color;
+	input {
+		font-size: 18px;
+		height: 40px;
+		padding-right: 30px;
+
+		&:placeholder {
 			color: @glass-color;
 		}
 
-		input {
-
-			&:placeholder {
-				color: @glass-color;
-			}
-
-			&:focus, &:hover {
-				border-color: @glass-color;
-			}
-		}
-
-		.btn {
-
-			text-transform: uppercase;
-			font-size: 13px;
-
-			&:hover, &:active {
-				border-color: @glass-color;
-			}
+		&:focus, &:hover {
+			border-color: @glass-color;
 		}
 	}
 
-	.signMeLabel .e-checkbox {
-		margin-top: 5px;
+	input, .btn {
+		background: none !important;
+		border: 1px solid @glass-m-color;
+		color: @glass-color;
 	}
 
-	.input-append .add-on {
-		margin-left: -1.5em;
+	.fontastic + input {
+		padding-left: 30px;
+	}
+
+	.controls > .fontastic:first-child {
 		position: absolute;
 		font-size: 17px;
-		line-height: 29px;
-		right: 6px;
-		top: 6px;
-		z-index: 6;
+		line-height: 38px;
+		left: 6px;
 	}
 
-	.input-append .add-on * {
+	input + button {
+		border: none;
+		background: none;
+		cursor: pointer;
+		display: inline-block;
 		font-size: 17px;
-		line-height: 29px;
+		line-height: 38px;
+		margin: 0;
+		padding: 0;
+		position: absolute;
+		right: 6px;
+		top: 0;
+	}
+
+	.btn {
+
+		text-transform: uppercase;
+		font-size: 13px;
+
+		&:hover, &:active {
+			border-color: @glass-color;
+		}
 	}
 
 	.buttonLogin {
@@ -162,6 +153,15 @@
 		padding: 5px;
 		text-decoration: none;
 	}
+
+	.errorAnimated {
+		animation: login-form-shake 400ms ease-in-out;
+	}
+
+	.errorAnimated .buttonLogin {
+		color: #b94a48;
+		font-weight: bold;
+	}
 }
 
 @media screen and (max-width: 480px) {
@@ -176,11 +176,17 @@
 	to   {transform: rotate(1turn);}
 }
 
-.btn-submit-icon-wrp {
-	border: none;
-	background: none;
-	display: inline-block;
-	margin: 0;
-	padding: 0;
-	cursor: pointer;
+@keyframes login-form-shake  {
+  0% {transform: translateX(0);}
+  12.5% {transform: translateX(-6px)}
+  37.5% {transform: translateX(5px)}
+  62.5% {transform: translateX(-3px)}
+  87.5% {transform: translateX(2px)}
+  100% {transform: translateX(0)}
+}
+
+html.rl-started-trigger .LoginView {
+	/*transform: scale(1.1);*/
+	transform: translateY(-20px);
+	opacity: 0.5;
 }

plugins/two-factor-auth/js/TwoFactorAuthLogin.js

@@ -7,14 +7,12 @@
 				placeholder = 'LOGIN/LABEL_TWO_FACTOR_CODE';
 			if (container) {
 				container.prepend(Element.fromHTML('<div class="controls">'
-					+ '<div class="input-append">'
-						+ '<input name="totp_code" type="text" class="input-block-level inputIcon"'
-						+ ' pattern="[0-9]*" inputmode="numeric"'
-						+ ' autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"'
-						+ ' data-bind="textInput: totp, disable: submitRequest" data-i18n="[placeholder]'+placeholder
-						+ '" placeholder="'+rl.i18n(placeholder)+'">'
-						+ '<i class="add-on fontastic">🔑</i>'
-					+ '</div>'
+					+ '<span class="fontastic">⏱</span>'
+					+ '<input name="totp_code" type="text" class="input-block-level"'
+					+ ' pattern="[0-9]*" inputmode="numeric"'
+					+ ' autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"'
+					+ ' data-bind="textInput: totp, disable: submitRequest" data-i18n="[placeholder]'+placeholder
+					+ '" placeholder="'+rl.i18n(placeholder)+'">'
 				+ '</div>'));
 			}
 		}

snappymail/v/0.0.0/app/templates/Views/Admin/AdminLogin.html

@@ -4,35 +4,30 @@
 </div>
 <form action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
 	<div class="controls" data-bind="css: {'error': loginError}">
-		<div class="input-append">
-			<input required="" type="text" class="input-block-level inputIcon"
-				autofocus="" autocomplete="username" autocorrect="off" autocapitalize="off" spellcheck="false"
-				data-bind="textInput: login, disable: submitRequest"
-				data-i18n="[placeholder]LOGIN/LABEL_LOGIN" />
-			<span class="add-on fontastic">👤</span>
-		</div>
+		<span class="fontastic">👤</span>
+		<input required="" type="text" class="input-block-level"
+			autofocus="" autocomplete="username" autocorrect="off" autocapitalize="off" spellcheck="false"
+			data-bind="textInput: login, disable: submitRequest"
+			data-i18n="[placeholder]LOGIN/LABEL_LOGIN" />
 	</div>
 	<div class="controls" data-bind="css: {'error': passwordError}">
-		<div class="input-append">
-			<input required="" type="password" class="input-block-level inputIcon"
-				autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
-				data-bind="textInput: password, disable: submitRequest"
-				data-i18n="[placeholder]LOGIN/LABEL_PASSWORD" />
-			<span class="add-on fontastic">🔑</span>
-		</div>
+		<span class="fontastic">🔑</span>
+		<input required="" type="password" class="input-block-level"
+			autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
+			data-bind="textInput: password, disable: submitRequest"
+			data-i18n="[placeholder]LOGIN/LABEL_PASSWORD" />
 	</div>
 	<div class="controls">
-		<div class="input-append">
-			<input type="text" pattern="[0-9]*" inputmode="numeric" class="input-block-level inputIcon"
-				autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-				data-bind="textInput: totp, disable: submitRequest"
-				data-i18n="[placeholder]LOGIN/LABEL_TOTP" />
-			<button type="submit" class="add-on btn-submit-icon-wrp login-submit-icon fontastic" data-bind="command: submitCommand" data-i18n="[title]LOGIN/BUTTON_LOGIN">❯</button>
-		</div>
+		<span class="fontastic">⏱</span>
+		<input type="text" pattern="[0-9]*" inputmode="numeric" class="input-block-level"
+			autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+			data-bind="textInput: totp, disable: submitRequest"
+			data-i18n="[placeholder]LOGIN/LABEL_TOTP" />
+		<button class="fontastic" data-bind="command: submitCommand" data-i18n="[title]LOGIN/BUTTON_LOGIN">❯</button>
 	</div>
 	<div id="plugin-Login-BottomControlGroup"></div>
 	<div class="controls" data-bind="hidden: hideSubmitButton">
-		<button type="submit" class="btn btn-large btn-block buttonLogin"
+		<button class="btn btn-large btn-block"
 			data-bind="command: submitCommand"
 			data-i18n="LOGIN/BUTTON_LOGIN"></button>
 	</div>

snappymail/v/0.0.0/app/templates/Views/User/Login.html

@@ -7,30 +7,23 @@
 <form action="#/"
 	data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
 	<div class="controls" data-bind="css: {'error': emailError}">
-		<div class="input-append">
-			<input name="Email" required="" type="text" class="input-block-level inputIcon" pattern="[^@\s]+(@[^\s]+)?" inputmode="email"
-				autofocus="" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false"
-				data-bind="textInput: email, disable: submitRequest"
-				data-i18n="[placeholder]GLOBAL/EMAIL" />
-			<span class="add-on icon-mail"></span>
-		</div>
+		<span class="fontastic">✉</span>
+		<input name="Email" required="" type="text" class="input-block-level" pattern="[^@\s]+(@[^\s]+)?" inputmode="email"
+			autofocus="" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false"
+			data-bind="textInput: email, disable: submitRequest"
+			data-i18n="[placeholder]GLOBAL/EMAIL" />
 	</div>
 	<div class="controls" data-bind="css: {'error': passwordError}">
-		<div class="input-append">
-			<input name="Password" required="" type="password" class="input-block-level inputIcon"
-				autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
-				data-bind="textInput: password, disable: submitRequest"
-				data-i18n="[placeholder]GLOBAL/PASSWORD" />
-			<span class="add-on" tabindex="-1"
-				data-bind="command: submitCommand" data-i18n="[title]LOGIN/BUTTON_SIGN_IN">
-				<i class="fontastic" data-bind="visible: '' === password()">🔑</i>
-				<button type="submit" class="btn-submit-icon-wrp login-submit-icon fontastic" data-bind="visible: '' !== password()">❯</button>
-			</span>
-		</div>
+		<span class="fontastic">🔑</span>
+		<input name="Password" required="" type="password" class="input-block-level"
+			autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
+			data-bind="textInput: password, disable: submitRequest"
+			data-i18n="[placeholder]GLOBAL/PASSWORD" />
+		<button class="fontastic" data-bind="command: submitCommand, visible: '' !== password()" data-i18n="[title]LOGIN/BUTTON_SIGN_IN">❯</button>
 	</div>
 	<div id="plugin-Login-BottomControlGroup"></div>
 	<div class="controls" data-bind="hidden: hideSubmitButton">
-		<button type="submit" class="btn btn-large btn-block buttonLogin"
+		<button class="btn btn-large btn-block buttonLogin"
 			data-bind="command: submitCommand"
 			data-i18n="LOGIN/BUTTON_SIGN_IN"></button>
 	</div>

snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -219,7 +219,7 @@
 
 			</div>
 		</div>
-		<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail"></i></div>
+		<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="fontastic">✉</i></div>
 	</div>
 	<div class="b-footer thm-message-list-bottom-toolbar">
 		<!-- ko if: userUsageProc() -->

snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -32,7 +32,7 @@
 		</div>
 		<div class="b-message-view-checked-helper" data-bind="visible: !message() && '' === messageError() && hasCheckedMessages()">
 			<span data-bind="text: printableCheckedMessageCount()"></span>
-			<i class="icon-mail"></i>
+			<i class="fontastic">✉</i>
 		</div>
 
 		<div class="b-message-view-desc error" data-bind="visible: !message() && '' !== messageError() && !hasCheckedMessages(), text: messageError()">
@@ -258,7 +258,7 @@
 								<span class="text" data-i18n="MESSAGE/BUTTON_SHOW_IMAGES"></span>
 							</div>
 							<div class="readReceipt" data-bind="visible: message() && !isDraftOrSentFolder() && '' !== message().readReceipt() && !message().isReadReceipt(), click: readReceipt">
-								<i class="icon-mail"></i>
+								<i class="fontastic">✉</i>
 								<span class="text" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></span>
 							</div>
 							<div class="attachmentsPlace" data-bind="visible: message() && message().attachments().hasVisible(),

tasks/config.js

@@ -30,9 +30,6 @@ config.paths.less = {
 		options: {
 			paths: [path.join(__dirname, 'dev', 'Styles'), path.join(__dirname, 'vendors', 'bootstrap', 'less')]
 		}
-	},
-	admin: {
-		src: 'dev/Styles/@Admin.less'
 	}
 };
 
@@ -45,7 +42,11 @@ config.paths.css = {
 		]
 	},
 	admin: {
-		name: 'admin.css'
+		name: 'admin.css',
+		src: [
+			'vendors/fontastic/styles.css',
+			'dev/Styles/@Admin.less'
+		]
 	},
 	boot: {
 		name: 'boot.css',

tasks/css.js

@@ -53,7 +53,7 @@ const cssAdminBuild = () => {
 	const
 		less = require('gulp-less'),
 		lessFilter = filter('**/*.less', { restore: true }),
-		src = config.paths.css.main.src.concat([config.paths.less.admin.src]);
+		src = config.paths.css.admin.src;
 
 	return gulp
 		.src(src)

vendors/bootstrap/less/buttons.less

@@ -12,7 +12,6 @@
 
   display: inline-block;
   padding: 4px 13px;
-  margin-bottom: 0; // For input.btn
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
   text-align: center;

vendors/bootstrap/less/forms.less

@@ -124,10 +124,6 @@ select[class*="span"],
 textarea[class*="span"] {
   margin-left: 0;
 }
-// Ensure input-prepend/append never wraps
-.input-append input[class*="span"] {
-  display: inline-block;
-}
 
 
 
@@ -163,60 +159,21 @@ input[type="checkbox"][readonly] {
   .formFieldState(@errorText, @errorText, @errorBackground);
 }
 
-// INPUT GROUPS
-// ------------
-
-// Allow us to put symbols and text within the input field for a cleaner look
-.input-append {
-  margin-bottom: 5px;
-  font-size: 0;
-  white-space: nowrap; // Prevent span and input from separating
-  position: relative;
-
-  input,
-  select {
-    margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
-    font-size: @baseFontSize;
-    vertical-align: top;
-    border-radius: @inputBorderRadius;
-  }
-  .btn {
-    margin-left: -1px;
-    vertical-align: top;
-    border-radius: 0;
-  }
-  .btn:last-child {
-    border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
-  }
-}
-
-
-
-// HORIZONTAL & VERTICAL FORMS
+// HORIZONTAL FORMS
 // ---------------------------
 
 // Common properties
 // -----------------
 
-.form-inline,
 .form-horizontal {
   input,
   textarea,
-  select,
-  .input-append {
+  select {
     display: inline-block;
     margin-bottom: 0;
     vertical-align: middle;
   }
 }
-.form-inline label,
-.form-inline .btn-group {
-  display: inline-block;
-}
-// Remove margin for input-prepend/-append
-.form-inline .input-append {
-  margin-bottom: 0;
-}
 
 
 // Margin to space out fieldsets
@@ -241,8 +198,6 @@ input[type="checkbox"][readonly] {
   }
   // Move over all input controls and content
   .controls {
-    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
-    // don't inherit the margin of the parent, in this case .controls
     display: inline-block;
     margin-left: 20px;
     vertical-align: top;