Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @{
- ViewData["Title"] = "First Time Verification";
- }
- <head>
- <meta name="viewport" content="width=device-width" />
- <link rel="stylesheet" href="~/Stylesheet/Stylesheet.css">
- <link rel="icon" href="~/favicon.png" />
- <title>@ViewData["Title"]</title>
- </head>
- <script src="~/Scripts/jquery-3.4.0.min.js"></script>
- <script src="~/Scripts/jquery-pincode-autotab.js"></script>
- <style>
- body {
- padding-top: 1vw;
- padding-left: 5vw;
- padding-right: 5vw;
- font-family: Bahnschrift;
- }
- #backButton {
- font-size: 1.2vw;
- font-weight: 600;
- color: #666060;
- border: none;
- background: none;
- float: left;
- position: absolute;
- }
- #contentBody {
- /*Position*/
- margin-top: 0.5vw;
- text-align: center;
- /*Font*/
- }
- .headerBox {
- margin-top: 4vw;
- text-align: center;
- }
- .headerText {
- /*Font*/
- font-size: 2.6vw;
- font-weight: bold;
- color: #007ae2;
- }
- .subHeaderText {
- /*Font*/
- color: gray;
- font-size: 1.2vw;
- }
- #microsoftAuthenticatorText a {
- text-decoration: none;
- /*Font*/
- color: #007ae2;
- }
- #microsoftAuthenticatorText a:hover {
- color: #005faa;
- }
- #firstTimeVerificationContentBox {
- /*Position*/
- margin-top: 0.2vw;
- /*Font*/
- }
- #setupBox {
- width: 50vw;
- height: 30vw;
- box-shadow: 0 0.2vw 0.2vw 0 rgba(0, 0, 0, 0.25);
- background-color: #ffffff;
- margin: auto;
- }
- #leftBox {
- width: 25vw;
- height: 30vw;
- float: left;
- padding-bottom: 3vw;
- }
- #scanQRCodeTitle {
- color: #0078d7;
- font-size: 1.2vw;
- font-weight: bold;
- }
- .circles {
- position: absolute;
- width: 2.5vw;
- height: 2.5vw;
- object-fit: contain;
- background-color: #0078d7;
- border-radius: 50%;
- margin-top: 2vw;
- margin-left: 2vw;
- }
- .stepNumber {
- color: white;
- text-align: center;
- margin: 0.45vw 0 0 0;
- font-size: 1.2vw;
- }
- #QRCodeBox {
- text-align: center;
- margin: auto 0;
- padding-top: 2.6vw;
- }
- #QRCode {
- margin: 0 auto;
- width: 8vw;
- }
- #QRCode img {
- width: 7.875vw;
- }
- #divider {
- width: 23vw;
- height: 2vw;
- display: flex;
- padding-top: 2vw;
- margin: 0 auto;
- padding-left: 0.6vw;
- padding-right: 0.3vw;
- }
- #dividerLeft {
- width: 8vw;
- height: 0.07vw;
- object-fit: contain;
- background-color: #c4c4c4;
- margin-left: 1vw;
- }
- #codeBox {
- text-align: center;
- width: 26vw;
- height: 8vw;
- margin: 0 auto;
- }
- #codeInstruction {
- height: 1.1vw;
- color: #0078d7;
- font-weight: bold;
- font-size: 1.2vw;
- }
- #boxBorder {
- min-width: 20vw;
- height: 2.6vw;
- border: solid 0.1vw #a8a8a8;
- background-color: rgba(203, 203, 203, 0);
- margin: 0 auto;
- }
- #code {
- padding-top: 0.75vw;
- height: 1.75vw;
- font-size: 1vw;
- color: #666060;
- margin: 0 auto;
- text-align: center;
- }
- #separatorLine {
- width: 0.09vw;
- height: 24vw;
- background-color: lightgray;
- position: absolute;
- left: 50vw;
- top: 16vw;
- margin: 0 auto;
- }
- #rightBox {
- width: 25vw;
- height: 30vw;
- float: right;
- }
- #microsoftIcon {
- width: 5vw;
- height: 7vw;
- display: block;
- margin: 0 auto;
- }
- .verificationHeading {
- font-size: 1.2vw;
- font-weight: bold;
- color: #0078d7;
- text-align: center;
- padding-top: 2.6vw;
- }
- #verificationInstruction {
- color: #666060;
- font-size: 0.9vw;
- font-weight: 600;
- text-align: center;
- padding-top: 1vw;
- }
- #Verification2FA input {
- /*Position*/
- margin-top: 0.5vw;
- margin-left: 0.2vw;
- margin-right: 0.2vw;
- width: 2vw;
- height: 3.0vw;
- border-radius: 5px;
- border: solid 0 #0078d7;
- background-color: #e5e5e5;
- outline: none; /* prevents textbox highlight in chrome */
- /*Font*/
- text-align: center;
- font-size: 1.3vw;
- font-weight: bold;
- }
- .verifyBtn {
- width: 8vw;
- height: 2.5vw;
- border-radius: 5px;
- background-color: #0078d7;
- color: white;
- margin: 0 auto;
- display: block;
- border: 0;
- margin-top: 2.4vw;
- cursor: pointer;
- font-size: 1vw;
- font-weight: bold;
- }
- .verifyBtn:hover {
- background-color: #0058a4;
- }
- /*Success/Error modal*/
- .modal {
- display: none; /* Hidden by default */
- position: fixed; /* Stay in place */
- z-index: 1; /* Sit on top */
- padding-top: 10vw; /* Location of the box */
- left: 0;
- top: 0;
- width: 100%; /* Full width */
- height: 100%; /* Full height */
- overflow: auto; /* Enable scroll if needed */
- background-color: rgb(0,0,0); /* Fallback color */
- background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
- }
- /* Modal Content */
- .tokenmodal-content {
- position: relative;
- background-color: #fefefe;
- margin: auto;
- width: 30vw;
- height: 28vw;
- border-radius: 10px;
- box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
- -webkit-animation-name: animatetop;
- -webkit-animation-duration: 0.4s;
- animation-name: animatetop;
- animation-duration: 0.4s;
- }
- #verificationCompletedIcon {
- width: 10vw;
- height: 10vw;
- padding-top: 2vw;
- margin-left: 10vw;
- display: inline-block;
- }
- #verificationIncompleteIcon {
- width: 10vw;
- height: 10vw;
- padding-top: 2vw;
- margin-left: 10vw;
- display: inline-block;
- }
- .tokenModalTitle {
- font-size: 1.5vw;
- font-weight: 600;
- color: #666060;
- text-align: center;
- }
- .tokenModalMessage {
- font-size: 1vw;
- color: #ffffff;
- font-weight: 100;
- text-align: center;
- margin-top: 2vw;
- }
- .modalFooter {
- background-color: #4593d0;
- color: white;
- height: 45%;
- border-radius: 0px 0px 10px 10px;
- }
- .triangle {
- width: 0;
- height: 0;
- border-left: 28px solid transparent;
- border-right: 28px solid transparent;
- border-bottom: 25px solid white;
- transform: rotate(180deg);
- margin: 0 auto;
- display: block;
- }
- .successMessage {
- font-size: 1vw;
- color: #ffffff;
- font-weight: 100;
- text-align: center;
- margin-top: 2vw;
- }
- /* The Close Button */
- .close {
- color: #aaaaaa;
- float: right;
- margin-right: 1.5vw;
- padding-top: 1vw;
- font-size: 28px;
- font-weight: bold;
- }
- .close:hover,
- .close:focus {
- color: #000;
- text-decoration: none;
- cursor: pointer;
- }
- </style>
- <body>
- <div class="contentBody">
- <div class="headerBox">
- <p class="headerText">Setup Two-Factor <br/>Authentication (2FA) on <br/>Smartphone</p>
- <p class="subHeaderText">Keep your data safe and secured with 2FA</p>
- </div>
- <div>
- <p class="verificationHeading">Verification Pin</p>
- <img id="microsoftIcon" src="~/Images/Mircosoft.png" />
- <p id="verificationInstruction">Check Microsoft Authenticator<br />for auto-generated pin</p>
- <form id="Verification2FA" name="Verification2FA">
- <input id="tokenOne" name="tokenOne" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
- <input id="tokenTwo" name="tokenTwo" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
- <input id="tokenThree" name="tokenThree" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
- <input id="tokenFour" name="tokenFour" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
- <input id="tokenFive" name="tokenFive" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
- <input id="tokenSix" name="tokenSix" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
- <button id="verifyBtn" class="verifyBtn" type="button" onclick="verifyFields()">Verify</button>
- <!--Hidden Inputs-->
- <input type="hidden" id="transactionID" name="transactionID" />
- <input type="hidden" id="userEmail" name="userEmail" />
- <input type="hidden" id="clientID" name="clientID" value="123456789">
- <input type="hidden" id="requestTimestamp" name="requestTimestamp">
- <input type="hidden" id="redirectURL" name="redirectURL">
- <input type="hidden" id="digitalSignature" name="digitalSignature">
- <input type="hidden" id="isFirstTime" name="isFirstTime" value="true">
- </form>
- <!-- Success Modal -->
- <div id="successModal" class="modal">
- <!-- Modal content -->
- <div class="tokenmodal-content">
- <span class="close" onclick="">×</span>
- <img id="verificationCompletedIcon" src="~/Images/success.png" />
- <p class="tokenModalTitle">You have successfully set up <br />your 2FA!</p>
- <div class="modalFooter"> <div class="triangle"></div> <p class="tokenModalMessage"> Upon closing the pop-up, <br /> you'll be redirected back.</p></div>
- </div>
- </div>
- <!-- Error Modal -->
- <div id="errorModal" class="modal">
- <!-- Modal content -->
- <div class="tokenmodal-content">
- <span class="close" onclick="">×</span>
- <img id="verificationIncompleteIcon" src="~/Images/error.png" />
- <p class="tokenModalTitle">You entered an incorrect pin <br /> Please try again!</p>
- <div class="modalFooter"> <div class="triangle"></div> <p class="tokenModalMessage">You will be prompt to re-enter your <br /> 6-digit pin.</p></div>
- </div>
- </div>
- </div>
- </div>
- @await Html.PartialAsync("_Loader")
- <script>
- var body = $('body');
- // Get the success modal
- var successModal = document.getElementById("successModal");
- //Get the error modal
- var errorModal = document.getElementById("errorModal");
- // Get the button that opens the modal
- var btn = document.getElementById("verifyBtn");
- // Get the <span> element that closes the modal
- var successSpan = document.getElementsByClassName("close")[0];
- var errorSpan = document.getElementsByClassName("close")[1];
- var getUrlParameter = function getUrlParameter(sParam) {
- var sPageURL = window.location.search.substring(1),
- sURLVariables = sPageURL.split('&'),
- sParameterName,
- i;
- for (i = 0; i < sURLVariables.length; i++) {
- sParameterName = sURLVariables[i].split('=');
- if (sParameterName[0] === sParam) {
- return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
- }
- }
- };
- // When the user clicks the button, open the modal
- btn.onclick = function () {
- var transactionID = getUrlParameter("tid");
- var userEmail = getUrlParameter('user_id');
- var clientID = getUrlParameter('client_id');
- var requestTimestamp = getUrlParameter('request_time_stamp');
- var redirectURL = getUrlParameter('redirect_url');
- var digitalSignature = getUrlParameter('digital_signature');
- $('#transactionID').val(transactionID);
- $('#userEmail').val(userEmail);
- $('#clientID').val(clientID);
- $('#requestTimestamp').val(requestTimestamp);
- $('#redirectURL').val(redirectURL);
- $('#digitalSignature').val(digitalSignature);
- //$("#Verification2FA").submit();
- var tokenObject = {
- 'tokenOne': $("#tokenOne").val(),
- 'tokenTwo': $("#tokenTwo").val(),
- 'tokenThree': $("#tokenThree").val(),
- 'tokenFour': $("#tokenFour").val(),
- 'tokenFive': $("#tokenFive").val(),
- 'tokenSix': $("#tokenSix").val(),
- 'transactionID': $("#transactionID").val(),
- 'userEmail': $("#userEmail").val(),
- 'clientID': $("#clientID").val(),
- 'requestTimestamp': $("#requestTimestamp").val(),
- 'redirectURL': $("#redirectURL").val(),
- 'digitalSignature': $("#digitalSignature").val(),
- 'isFirstTime': $("#isFirstTime").val()
- };
- $.ajax({
- url: "@Url.Action("VerifyingTokens", "TwoFactorAuthAPI")",
- type: "POST",
- data: JSON.stringify(tokenObject),
- dataType: "json",
- contentType: "application/json",
- success: function (data) {
- successModal.style.display = "block";
- // When the user clicks on <span> (x), close the modal
- successSpan.onclick = function () {
- window.location.href = data.successfulRedirect;
- }
- // When the user clicks anywhere outside of the modal, close it
- window.onclick = function (event) {
- if (event.target == successModal) {
- window.location.href = data.successfulRedirect;
- }
- }
- },
- error: function (data) {
- errorModal.style.display = "block";
- // When the user clicks on <span> (x), close the modal
- errorSpan.onclick = function () {
- errorModal.style.display = "none";
- }
- // When the user clicks anywhere outside of the modal, close it
- window.onclick = function (event) {
- if (event.target == Error) {
- errorModal.style.display = "none";
- }
- }
- }
- })
- };
- // IsTokenSuccess/failure
- $(document).ready(
- function () {
- $("#Verification2FA input").jqueryPincodeAutotab();
- }
- );
- </script>
- <script src="~/Scripts/qrcode.js"></script>
- <script type="text/javascript">
- new QRCode(document.getElementById("QRcode"),
- {
- text: "@Html.Raw(Model.AuthenticatorUri)",
- width: 120,
- height: 120,
- });
- </script>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement