mobile view for otp, xss check

Author: eisbilir

web-assets/css/otp.css

@@ -48,10 +48,13 @@ body {
     flex-direction: column;
     align-items: center;
     padding: 0;
-    gap: 8px;
     margin-bottom: 51px;
 }
 
+.topcoder-logo {
+    margin-bottom: 8px;
+}
+
 .header-text {
     font-family: 'Barlow Condensed';
     font-weight: 500;
@@ -78,7 +81,6 @@ body {
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 12px;
 }
 
 .message-wrapper {
@@ -126,20 +128,23 @@ body {
 .digit-group {
     display: flex;
     flex-direction: row;
-    gap: 12px;
     margin-bottom: 51px;
 }
 
+.digit-group :not(:last-child) {
+    margin-right: 12px;
+}
+
 .digit-group input {
-    width: 44px;
-    height: 40px;
+    width: 38px;
+    height: 36px;
     background-color: #FFFFFF;
     border: 1px solid #AAAAAA;
     line-height: 22px;
     text-align: center;
     font-size: 14px;
     font-weight: 400;
-    color: #767676;
+    color: #2A2A2A;
     border-radius: 4px;
 }
 
@@ -184,14 +189,57 @@ body {
     background-clip: text;
 }
 
+@media (min-width: 1157px) {
+    .info-mobile {
+        display: none;
+    }
+}
+
 @media (max-width: 1156px) {
+    body {
+        background-color: #ffffff;
+    }
+
+    .page-wrapper {
+        margin-top: 0;
+    }
+
     .row {
         background: white;
-        width: 500px;
+        width: 375px;
         min-height: auto;
     }
 
+    .left-column {
+        width: 375px;
+    }
+
     .logo-column {
         display: none;
     }
+
+    .signin-column {
+        padding: 0px 32px 48px 32px;
+    }
+
+    .signin-header {
+        padding-top: 110px;
+        margin-bottom: 88px;
+    }
+
+    .info {
+        padding: 112px 0 0 0;
+        margin-bottom: 34px;
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    .digit-group {
+        margin-bottom: 34px;
+    }
+
+    .digit-group input {
+        width: 35px;
+        height: 36px;
+    }
 }

web-assets/js/check_email.js

@@ -1,8 +1,8 @@
-var qs = (function (a) {
+const qs = (function (a) {
   if (a == "") return {};
-  var b = {};
-  for (var i = 0; i < a.length; ++i) {
-    var p = a[i].split("=", 2);
+  let b = {};
+  for (let i = 0; i < a.length; ++i) {
+    let p = a[i].split("=", 2);
     if (p.length == 1) b[p[0]] = "";
     else b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
   }

web-assets/js/otp.js

@@ -1,14 +1,21 @@
-var qs = (function (a) {
+const qs = (function (a) {
   if (a == "") return {};
-  var b = {};
-  for (var i = 0; i < a.length; ++i) {
-    var p = a[i].split("=", 2);
+  let b = {};
+  for (let i = 0; i < a.length; ++i) {
+    let p = a[i].split("=", 2);
     if (p.length == 1) b[p[0]] = "";
     else b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
   }
   return b;
 })(window.location.search.substr(1).split("&"));
 
+const encode = function (str) {
+  str = str.replace(/[\x26\x0A\<>'"]/g, function (str) { return "&#" + str.charCodeAt(0) + ";" })
+  return String(str).replace(/[^\w. ]/gi, function (c) {
+    return '&#' + c.charCodeAt(0) + ';';
+  });
+}
+
 $(document).ready(function () {
   window.history.forward();
   let formAction = qs["formAction"] || "#";
@@ -57,7 +64,7 @@ $(document).ready(function () {
   }
   const errorMessage = qs["message"];
   if (errorMessage) {
-    $("#error").html(errorMessage);
+    $("#error").html(encode(errorMessage));
     $("#error").closest(".message-wrapper").fadeIn();
   }
 

web-assets/static-pages/otp.html

@@ -36,9 +36,9 @@
             <img class="topcoder-logo" src="./images/topcoderlogo-black.png">
             <div class="header-text">Topcoder login</div>
           </div>
-          <div class="info">Please check the email you used to register your
-            Topcoder account for an email with a <span class="black">6 digit code</span>.
-            Enter the code below to login</div>
+          <div class="info">Please check the email you used to register your<br>
+            Topcoder account for an email <br class="info-mobile">with a <span class="black">6 digit code</span>.<br>
+            <br class="info-mobile">Enter the code below to login</div>
           <div class="messages">
             <div class="message-wrapper">
               <div role="alert" class="message error">