Adds support for mobile views

Improves readability of password

Author: ryannewington

src/Lithnet.Laps.Web/Lithnet.Laps.Web/Content/Site.css

@@ -1,4 +1,9 @@
-body {
+@font-face {
+    font-family: Inconsolata;
+    src: url('webfonts/Inconsolata-Regular.ttf');
+}
+
+body {
     color: #666;
     /*font-family: "Open Sans",Arial,Helvetica,sans-serif;*/
     font-size: 13px;
@@ -28,8 +33,8 @@
     font-weight: 400;
 }
 
-body {
-    width: 400px;
+.content {
+    width: 500px;
     margin-left: auto;
     margin-right: auto;
     padding: 10px;
@@ -157,7 +162,7 @@ body {
         display: block;
     }
 
-input.resultsText {
+.resultsText {
     border-color: #f0f0f0;
     height: 32px;
     padding: 5px 10px;
@@ -188,3 +193,63 @@ input.resultsText {
         width: 32px;
         height: 32px;
     }
+
+.password-field {
+    font-family: Inconsolata, Consolas, Courier New, Courier, monospace;
+    font-size: large;
+    font-weight: bold;
+}
+
+#copy-button {
+    margin-left: 10px;
+}
+
+.password-char-digit {
+    color: darkblue;
+    display: inline-block;
+}
+
+.password-char-letter {
+    color: slategray;
+    display: inline-block;
+}
+
+.password-char-other {
+    color: darkred;
+    display: inline-block;
+}
+
+@media only screen and (max-width: 600px) {
+    .form-container {
+        width: auto;
+        margin-right: 0;
+        margin-left: 0;
+        border: 0;
+        margin-top: 0;
+        box-shadow: none;
+    }
+
+    /*.auth-container .auth-content {
+        max-width: 316px;
+        margin: 0 auto;
+    }*/
+}
+
+@media only screen and (max-device-width: 480px) {
+    .content {
+        margin-top: 0;
+        width: 100%;
+    }
+}
+
+@media only screen and (max-width: 400px) {
+    .content {
+        width: 100%;
+    }
+}
+
+@media only screen and (max-height: 750px) {
+    .content {
+        margin-top: 0;
+    }
+}

src/Lithnet.Laps.Web/Lithnet.Laps.Web/Content/webfonts/Inconsolata-Regular.ttf

@@ -6,6 +6,7 @@
 using System.DirectoryServices.AccountManagement;
 using System.Linq;
 using System.Security.Claims;
+using System.Text;
 using System.Web;
 using System.Web.Caching;
 using System.Web.Mvc;
@@ -226,12 +227,39 @@ private UserPrincipal GetCurrentUser()
 
         private static LapEntryModel CreateLapEntryModel(SearchResult result)
         {
-            return new LapEntryModel
+            LapEntryModel m = new LapEntryModel
             {
                 ComputerName = result.Properties[Directory.AttrSamAccountName][0].ToString(),
                 Password = result.GetPropertyString(Directory.AttrMsMcsAdmPwd) ?? UIMessages.NoLapsPasswordPlaceholder,
-                ValidUntil = result.GetPropertyDateTimeFromLong(Directory.AttrMsMcsAdmPwdExpirationTime)
+                ValidUntil = result.GetPropertyDateTimeFromLong(Directory.AttrMsMcsAdmPwdExpirationTime),
             };
+
+            m.HtmlPassword = BuildHtmlPassword(m.Password);
+
+            return m;
+        }
+
+        private static string BuildHtmlPassword(string password)
+        {
+            StringBuilder builder = new StringBuilder();
+
+            foreach (char s in password)
+            {
+                if (char.IsDigit(s))
+                {
+                    builder.AppendFormat(@"<span class=""password-char-digit"">{0}</span>", s);
+                }
+                else if (char.IsLetter(s))
+                {
+                    builder.AppendFormat(@"<span class=""password-char-letter"">{0}</span>", s);
+                }
+                else
+                {
+                    builder.AppendFormat(@"<span class=""password-char-other"">{0}</span>", s);
+                }
+            }
+
+            return builder.ToString();
         }
 
         [Localizable(false)]

src/Lithnet.Laps.Web/Lithnet.Laps.Web/Controllers/LapController.cs

@@ -353,6 +353,7 @@
     <Content Include="Content\webfonts\fa-solid-900.ttf" />
     <Content Include="Content\webfonts\fa-solid-900.woff" />
     <Content Include="Content\webfonts\fa-solid-900.woff2" />
+    <Content Include="Content\webfonts\Inconsolata-Regular.ttf" />
     <None Include="Properties\PublishProfiles\FolderProfile.pubxml" />
     <None Include="Properties\PublishProfiles\Publish to local IIS.pubxml" />
     <None Include="Scripts\jquery-3.3.1.intellisense.js" />

src/Lithnet.Laps.Web/Lithnet.Laps.Web/Lithnet.Laps.Web.csproj

@@ -13,6 +13,8 @@ public class LapEntryModel
 
         public string Password { get; set; }
 
+        public string HtmlPassword { get; set; }
+        
         public DateTime? ValidUntil { get; set; }
 
         public string FailureReason { get; set; }

src/Lithnet.Laps.Web/Lithnet.Laps.Web/Models/LapEntryModel.cs

@@ -20,7 +20,9 @@
         <section>
             <label class="title">@UIMessages.Password</label>
             <div class="input-group">
-                <input class="resultsText" id="pwd" type="text" value="@Model.Password" readonly="readonly" />
+                <div class="resultsText password-field" id="pwd" >
+                    @Html.Raw(Model.HtmlPassword)
+                </div>
                 <span id="inputGroupAppend" class="input-group-append">
                     <button id="copy-button" type="button" data-clipboard-target="#pwd">
                         <i class="far fa-copy"></i>

src/Lithnet.Laps.Web/Lithnet.Laps.Web/Views/Lap/Show.cshtml

@@ -7,14 +7,17 @@
     <title>@ConfigurationManager.AppSettings["app:Title"]</title>
     @Styles.Render("~/Content/css")
     <script src="@Url.Content("~/Scripts/clipboard.min.js")"></script>
-    <link href="@Url.Content("~/Content/fontawesome/fontawesome-all.css")" type="text/css" rel="stylesheet"/>
+    <link href="@Url.Content("~/Content/fontawesome/fontawesome-all.css")" type="text/css" rel="stylesheet" />
 </head>
 <body>
-    <div class="app-header">
-        <img class="app-logo" alt="@ConfigurationManager.AppSettings["app:Title"]" src="~/images/logo.png" />
-        <div class="app-title">@ConfigurationManager.AppSettings["app:Title"]</div>
+    <div class="content">
+        <div class="app-header">
+            <img class="app-logo" alt="@ConfigurationManager.AppSettings["app:Title"]" src="~/images/logo.png" />
+            <div class="app-title">@ConfigurationManager.AppSettings["app:Title"]</div>
+        </div>
+        @RenderBody()
+
     </div>
-    @RenderBody()
 
     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/bootstrap")