SHARE
TWEET

Untitled

a guest Mar 26th, 2020 78 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @{
  2.     ViewData["Title"] = "First Time Verification";
  3. }
  4.  
  5.  
  6. <head>
  7.     <meta name="viewport" content="width=device-width" />
  8.     <link rel="stylesheet" href="~/Stylesheet/Stylesheet.css">
  9.     <link rel="icon" href="~/favicon.png" />
  10.     <title>@ViewData["Title"]</title>
  11. </head>
  12. <script src="~/Scripts/jquery-3.4.0.min.js"></script>
  13. <script src="~/Scripts/jquery-pincode-autotab.js"></script>
  14. <style>
  15.     body {
  16.         padding-top: 1vw;
  17.         padding-left: 5vw;
  18.         padding-right: 5vw;
  19.         font-family: Bahnschrift;
  20.     }
  21.  
  22.     #backButton {
  23.         font-size: 1.2vw;
  24.         font-weight: 600;
  25.         color: #666060;
  26.         border: none;
  27.         background: none;
  28.         float: left;
  29.         position: absolute;
  30.     }
  31.  
  32.     #contentBody {
  33.         /*Position*/
  34.         margin-top: 0.5vw;
  35.         text-align: center;
  36.         /*Font*/
  37.     }
  38.  
  39.     .headerBox {
  40.         margin-top: 4vw;
  41.         text-align: center;
  42.     }
  43.  
  44.     .headerText {
  45.         /*Font*/
  46.         font-size: 2.6vw;
  47.         font-weight: bold;
  48.         color: #007ae2;
  49.     }
  50.  
  51.     .subHeaderText {
  52.         /*Font*/
  53.         color: gray;
  54.         font-size: 1.2vw;
  55.     }
  56.  
  57.     #microsoftAuthenticatorText a {
  58.         text-decoration: none;
  59.         /*Font*/
  60.         color: #007ae2;
  61.     }
  62.  
  63.         #microsoftAuthenticatorText a:hover {
  64.             color: #005faa;
  65.         }
  66.  
  67.  
  68.     #firstTimeVerificationContentBox {
  69.         /*Position*/
  70.         margin-top: 0.2vw;
  71.         /*Font*/
  72.     }
  73.  
  74.     #setupBox {
  75.         width: 50vw;
  76.         height: 30vw;
  77.         box-shadow: 0 0.2vw 0.2vw 0 rgba(0, 0, 0, 0.25);
  78.         background-color: #ffffff;
  79.         margin: auto;
  80.     }
  81.  
  82.     #leftBox {
  83.         width: 25vw;
  84.         height: 30vw;
  85.         float: left;
  86.         padding-bottom: 3vw;
  87.     }
  88.  
  89.     #scanQRCodeTitle {
  90.         color: #0078d7;
  91.         font-size: 1.2vw;
  92.         font-weight: bold;
  93.     }
  94.  
  95.     .circles {
  96.         position: absolute;
  97.         width: 2.5vw;
  98.         height: 2.5vw;
  99.         object-fit: contain;
  100.         background-color: #0078d7;
  101.         border-radius: 50%;
  102.         margin-top: 2vw;
  103.         margin-left: 2vw;
  104.     }
  105.  
  106.     .stepNumber {
  107.         color: white;
  108.         text-align: center;
  109.         margin: 0.45vw 0 0 0;
  110.         font-size: 1.2vw;
  111.     }
  112.  
  113.     #QRCodeBox {
  114.         text-align: center;
  115.         margin: auto 0;
  116.         padding-top: 2.6vw;
  117.     }
  118.  
  119.     #QRCode {
  120.         margin: 0 auto;
  121.         width: 8vw;
  122.     }
  123.  
  124.         #QRCode img {
  125.             width: 7.875vw;
  126.         }
  127.  
  128.     #divider {
  129.         width: 23vw;
  130.         height: 2vw;
  131.         display: flex;
  132.         padding-top: 2vw;
  133.         margin: 0 auto;
  134.         padding-left: 0.6vw;
  135.         padding-right: 0.3vw;
  136.     }
  137.  
  138.     #dividerLeft {
  139.         width: 8vw;
  140.         height: 0.07vw;
  141.         object-fit: contain;
  142.         background-color: #c4c4c4;
  143.         margin-left: 1vw;
  144.     }
  145.  
  146.     #codeBox {
  147.         text-align: center;
  148.         width: 26vw;
  149.         height: 8vw;
  150.         margin: 0 auto;
  151.     }
  152.  
  153.     #codeInstruction {
  154.         height: 1.1vw;
  155.         color: #0078d7;
  156.         font-weight: bold;
  157.         font-size: 1.2vw;
  158.     }
  159.  
  160.     #boxBorder {
  161.         min-width: 20vw;
  162.         height: 2.6vw;
  163.         border: solid 0.1vw #a8a8a8;
  164.         background-color: rgba(203, 203, 203, 0);
  165.         margin: 0 auto;
  166.     }
  167.  
  168.     #code {
  169.         padding-top: 0.75vw;
  170.         height: 1.75vw;
  171.         font-size: 1vw;
  172.         color: #666060;
  173.         margin: 0 auto;
  174.         text-align: center;
  175.     }
  176.  
  177.     #separatorLine {
  178.         width: 0.09vw;
  179.         height: 24vw;
  180.         background-color: lightgray;
  181.         position: absolute;
  182.         left: 50vw;
  183.         top: 16vw;
  184.         margin: 0 auto;
  185.     }
  186.  
  187.     #rightBox {
  188.         width: 25vw;
  189.         height: 30vw;
  190.         float: right;
  191.     }
  192.  
  193.     #microsoftIcon {
  194.         width: 5vw;
  195.         height: 7vw;
  196.         display: block;
  197.         margin: 0 auto;
  198.     }
  199.  
  200.     .verificationHeading {
  201.         font-size: 1.2vw;
  202.         font-weight: bold;
  203.         color: #0078d7;
  204.         text-align: center;
  205.         padding-top: 2.6vw;
  206.     }
  207.  
  208.     #verificationInstruction {
  209.         color: #666060;
  210.         font-size: 0.9vw;
  211.         font-weight: 600;
  212.         text-align: center;
  213.         padding-top: 1vw;
  214.     }
  215.  
  216.     #Verification2FA input {
  217.         /*Position*/
  218.         margin-top: 0.5vw;
  219.         margin-left: 0.2vw;
  220.         margin-right: 0.2vw;
  221.         width: 2vw;
  222.         height: 3.0vw;
  223.         border-radius: 5px;
  224.         border: solid 0 #0078d7;
  225.         background-color: #e5e5e5;
  226.         outline: none; /* prevents textbox highlight in chrome */
  227.         /*Font*/
  228.         text-align: center;
  229.         font-size: 1.3vw;
  230.         font-weight: bold;
  231.     }
  232.  
  233.     .verifyBtn {
  234.         width: 8vw;
  235.         height: 2.5vw;
  236.         border-radius: 5px;
  237.         background-color: #0078d7;
  238.         color: white;
  239.         margin: 0 auto;
  240.         display: block;
  241.         border: 0;
  242.         margin-top: 2.4vw;
  243.         cursor: pointer;
  244.         font-size: 1vw;
  245.         font-weight: bold;
  246.     }
  247.  
  248.         .verifyBtn:hover {
  249.             background-color: #0058a4;
  250.         }
  251.  
  252.     /*Success/Error modal*/
  253.     .modal {
  254.         display: none; /* Hidden by default */
  255.         position: fixed; /* Stay in place */
  256.         z-index: 1; /* Sit on top */
  257.         padding-top: 10vw; /* Location of the box */
  258.         left: 0;
  259.         top: 0;
  260.         width: 100%; /* Full width */
  261.         height: 100%; /* Full height */
  262.         overflow: auto; /* Enable scroll if needed */
  263.         background-color: rgb(0,0,0); /* Fallback color */
  264.         background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  265.     }
  266.  
  267.     /* Modal Content */
  268.     .tokenmodal-content {
  269.         position: relative;
  270.         background-color: #fefefe;
  271.         margin: auto;
  272.         width: 30vw;
  273.         height: 28vw;
  274.         border-radius: 10px;
  275.         box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  276.         -webkit-animation-name: animatetop;
  277.         -webkit-animation-duration: 0.4s;
  278.         animation-name: animatetop;
  279.         animation-duration: 0.4s;
  280.     }
  281.  
  282.     #verificationCompletedIcon {
  283.         width: 10vw;
  284.         height: 10vw;
  285.         padding-top: 2vw;
  286.         margin-left: 10vw;
  287.         display: inline-block;
  288.     }
  289.  
  290.     #verificationIncompleteIcon {
  291.         width: 10vw;
  292.         height: 10vw;
  293.         padding-top: 2vw;
  294.         margin-left: 10vw;
  295.         display: inline-block;
  296.     }
  297.  
  298.     .tokenModalTitle {
  299.         font-size: 1.5vw;
  300.         font-weight: 600;
  301.         color: #666060;
  302.         text-align: center;
  303.     }
  304.  
  305.     .tokenModalMessage {
  306.         font-size: 1vw;
  307.         color: #ffffff;
  308.         font-weight: 100;
  309.         text-align: center;
  310.         margin-top: 2vw;
  311.     }
  312.  
  313.     .modalFooter {
  314.         background-color: #4593d0;
  315.         color: white;
  316.         height: 45%;
  317.         border-radius: 0px 0px 10px 10px;
  318.     }
  319.  
  320.     .triangle {
  321.         width: 0;
  322.         height: 0;
  323.         border-left: 28px solid transparent;
  324.         border-right: 28px solid transparent;
  325.         border-bottom: 25px solid white;
  326.         transform: rotate(180deg);
  327.         margin: 0 auto;
  328.         display: block;
  329.     }
  330.  
  331.     .successMessage {
  332.         font-size: 1vw;
  333.         color: #ffffff;
  334.         font-weight: 100;
  335.         text-align: center;
  336.         margin-top: 2vw;
  337.     }
  338.  
  339.     /* The Close Button */
  340.     .close {
  341.         color: #aaaaaa;
  342.         float: right;
  343.         margin-right: 1.5vw;
  344.         padding-top: 1vw;
  345.         font-size: 28px;
  346.         font-weight: bold;
  347.     }
  348.  
  349.         .close:hover,
  350.         .close:focus {
  351.             color: #000;
  352.             text-decoration: none;
  353.             cursor: pointer;
  354.         }
  355. </style>
  356. <body>
  357.     <div class="contentBody">
  358.         <div class="headerBox">
  359.                 <p class="headerText">Setup Two-Factor <br/>Authentication (2FA) on <br/>Smartphone</p>
  360.             <p class="subHeaderText">Keep your data safe and secured with 2FA</p>
  361.         </div>
  362.         <div>
  363.             <p class="verificationHeading">Verification Pin</p>
  364.             <img id="microsoftIcon" src="~/Images/Mircosoft.png" />
  365.             <p id="verificationInstruction">Check Microsoft Authenticator<br />for auto-generated pin</p>
  366.             <form id="Verification2FA" name="Verification2FA">
  367.  
  368.                 <input id="tokenOne" name="tokenOne" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
  369.                 <input id="tokenTwo" name="tokenTwo" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
  370.                 <input id="tokenThree" name="tokenThree" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
  371.                 <input id="tokenFour" name="tokenFour" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
  372.                 <input id="tokenFive" name="tokenFive" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
  373.                 <input id="tokenSix" name="tokenSix" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
  374.                 <button id="verifyBtn" class="verifyBtn" type="button" onclick="verifyFields()">Verify</button>
  375.  
  376.                 <!--Hidden Inputs-->
  377.                 <input type="hidden" id="transactionID" name="transactionID" />
  378.                 <input type="hidden" id="userEmail" name="userEmail" />
  379.                 <input type="hidden" id="clientID" name="clientID" value="123456789">
  380.                 <input type="hidden" id="requestTimestamp" name="requestTimestamp">
  381.                 <input type="hidden" id="redirectURL" name="redirectURL">
  382.                 <input type="hidden" id="digitalSignature" name="digitalSignature">
  383.                 <input type="hidden" id="isFirstTime" name="isFirstTime" value="true">
  384.             </form>
  385.  
  386.             <!-- Success Modal -->
  387.             <div id="successModal" class="modal">
  388.                 <!-- Modal content -->
  389.                 <div class="tokenmodal-content">
  390.                     <span class="close" onclick="">&times;</span>
  391.                     <img id="verificationCompletedIcon" src="~/Images/success.png" />
  392.                     <p class="tokenModalTitle">You have successfully set up <br />your 2FA!</p>
  393.                     <div class="modalFooter"> <div class="triangle"></div> <p class="tokenModalMessage"> Upon closing the pop-up, <br /> you'll be  redirected back.</p></div>
  394.                 </div>
  395.             </div>
  396.  
  397.             <!-- Error Modal -->
  398.             <div id="errorModal" class="modal">
  399.                 <!-- Modal content -->
  400.                 <div class="tokenmodal-content">
  401.                     <span class="close" onclick="">&times;</span>
  402.                     <img id="verificationIncompleteIcon" src="~/Images/error.png" />
  403.                     <p class="tokenModalTitle">You entered an incorrect pin <br /> Please try again!</p>
  404.                     <div class="modalFooter"> <div class="triangle"></div> <p class="tokenModalMessage">You will be prompt to re-enter your <br /> 6-digit pin.</p></div>
  405.                 </div>
  406.             </div>
  407.         </div>
  408.     </div>
  409.  
  410.     @await Html.PartialAsync("_Loader")
  411.     <script>
  412.  
  413.     var body = $('body');
  414.  
  415.     // Get the success modal
  416.     var successModal = document.getElementById("successModal");
  417.  
  418.     //Get the error modal
  419.     var errorModal = document.getElementById("errorModal");
  420.  
  421.  
  422.     // Get the button that opens the modal
  423.     var btn = document.getElementById("verifyBtn");
  424.  
  425.     // Get the <span> element that closes the modal
  426.     var successSpan = document.getElementsByClassName("close")[0];
  427.     var errorSpan = document.getElementsByClassName("close")[1];
  428.  
  429.     var getUrlParameter = function getUrlParameter(sParam) {
  430.         var sPageURL = window.location.search.substring(1),
  431.             sURLVariables = sPageURL.split('&'),
  432.             sParameterName,
  433.             i;
  434.  
  435.         for (i = 0; i < sURLVariables.length; i++) {
  436.             sParameterName = sURLVariables[i].split('=');
  437.  
  438.             if (sParameterName[0] === sParam) {
  439.                 return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
  440.             }
  441.         }
  442.     };
  443.  
  444.     // When the user clicks the button, open the modal
  445.     btn.onclick = function () {
  446.         var transactionID = getUrlParameter("tid");
  447.         var userEmail = getUrlParameter('user_id');
  448.         var clientID = getUrlParameter('client_id');
  449.         var requestTimestamp = getUrlParameter('request_time_stamp');
  450.         var redirectURL = getUrlParameter('redirect_url');
  451.         var digitalSignature = getUrlParameter('digital_signature');
  452.  
  453.         $('#transactionID').val(transactionID);
  454.         $('#userEmail').val(userEmail);
  455.         $('#clientID').val(clientID);
  456.         $('#requestTimestamp').val(requestTimestamp);
  457.         $('#redirectURL').val(redirectURL);
  458.         $('#digitalSignature').val(digitalSignature);
  459.         //$("#Verification2FA").submit();
  460.  
  461.         var tokenObject = {
  462.             'tokenOne': $("#tokenOne").val(),
  463.             'tokenTwo': $("#tokenTwo").val(),
  464.             'tokenThree': $("#tokenThree").val(),
  465.             'tokenFour': $("#tokenFour").val(),
  466.             'tokenFive': $("#tokenFive").val(),
  467.             'tokenSix': $("#tokenSix").val(),
  468.  
  469.             'transactionID': $("#transactionID").val(),
  470.             'userEmail': $("#userEmail").val(),
  471.             'clientID': $("#clientID").val(),
  472.             'requestTimestamp': $("#requestTimestamp").val(),
  473.             'redirectURL': $("#redirectURL").val(),
  474.             'digitalSignature': $("#digitalSignature").val(),
  475.  
  476.             'isFirstTime': $("#isFirstTime").val()
  477.         };
  478.  
  479.         $.ajax({
  480.             url: "@Url.Action("VerifyingTokens", "TwoFactorAuthAPI")",
  481.             type: "POST",
  482.             data: JSON.stringify(tokenObject),
  483.             dataType: "json",
  484.             contentType: "application/json",
  485.             success: function (data) {
  486.  
  487.                 successModal.style.display = "block";
  488.  
  489.                 // When the user clicks on <span> (x), close the modal
  490.                 successSpan.onclick = function () {
  491.                     window.location.href = data.successfulRedirect;
  492.                 }
  493.  
  494.                 // When the user clicks anywhere outside of the modal, close it
  495.                 window.onclick = function (event) {
  496.                     if (event.target == successModal) {
  497.                         window.location.href = data.successfulRedirect;
  498.                     }
  499.                 }
  500.  
  501.             },
  502.             error: function (data) {
  503.  
  504.                 errorModal.style.display = "block";
  505.  
  506.                 // When the user clicks on <span> (x), close the modal
  507.                 errorSpan.onclick = function () {
  508.                     errorModal.style.display = "none";
  509.                 }
  510.  
  511.                 // When the user clicks anywhere outside of the modal, close it
  512.                 window.onclick = function (event) {
  513.                     if (event.target == Error) {
  514.                         errorModal.style.display = "none";
  515.                     }
  516.                 }
  517.  
  518.             }
  519.         })
  520.     };
  521.  
  522.     // IsTokenSuccess/failure
  523.     $(document).ready(
  524.         function () {
  525.             $("#Verification2FA input").jqueryPincodeAutotab();
  526.         }
  527.     );
  528.     </script>
  529.  
  530.     <script src="~/Scripts/qrcode.js"></script>
  531.     <script type="text/javascript">
  532.  
  533.     new QRCode(document.getElementById("QRcode"),
  534.             {
  535.                 text: "@Html.Raw(Model.AuthenticatorUri)",
  536.                 width: 120,
  537.                 height: 120,
  538.             });
  539.     </script>
  540. </body>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top