<%--
 ~
 ~ Copyright (c) 2021, WSO2 Inc. (http://www.wso2.com). All Rights Reserved.
 ~
 ~ This software is the property of WSO2 Inc. and its suppliers, if any.
 ~ Dissemination of any information or reproduction of any material contained
 ~ herein in any form is strictly forbidden, unless permitted by WSO2 expressly.
 ~ You may not alter or remove any copyright or other notice from copies of this content."
 ~
--%>

<%@ page import="org.owasp.encoder.Encode" %>
<%@ page import="org.wso2.carbon.identity.application.authentication.endpoint.util.Constants" %>
<%@ page import="java.io.File" %>
<%@ page import="java.util.Map" %>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="layout" uri="org.wso2.identity.apps.taglibs.layout.controller" %>
<%@ include file="includes/localize.jsp" %>
<jsp:directive.include file="includes/init-url.jsp"/>

<%-- Branding Preferences --%>
<jsp:directive.include file="extensions/branding-preferences.jsp"/>

<%
    request.getSession().invalidate();
    String queryString = request.getQueryString();
    Map<String, String> idpAuthenticatorMapping = null;
    if (request.getAttribute(Constants.IDP_AUTHENTICATOR_MAP) != null) {
        idpAuthenticatorMapping = (Map<String, String>) request.getAttribute(Constants.IDP_AUTHENTICATOR_MAP);
    }

    String errorMessage = AuthenticationEndpointUtil.i18n(resourceBundle,"error.retry");
    String authenticationFailed = "false";

    if (Boolean.parseBoolean(request.getParameter(Constants.AUTH_FAILURE))) {
        authenticationFailed = "true";

        if (request.getParameter(Constants.AUTH_FAILURE_MSG) != null) {
            errorMessage = Encode.forHtmlAttribute(request.getParameter(Constants.AUTH_FAILURE_MSG));

             if (errorMessage.equalsIgnoreCase("authentication.fail.message")) {
                errorMessage = AuthenticationEndpointUtil.i18n(resourceBundle,"error.retry");
            }
        }
    }
%>

<%-- Data for the layout from the page --%>
<%
    layoutData.put("isSuperTenant", StringUtils.equals(tenantForTheming, IdentityManagementEndpointConstants.SUPER_TENANT));
%>

<html lang="en-US">
    <head>
        <%-- header --%>
        <%
            File headerFile = new File(getServletContext().getRealPath("extensions/header.jsp"));
            if (headerFile.exists()) {
        %>
        <jsp:include page="extensions/header.jsp"/>
        <% } else { %>
        <jsp:include page="includes/header.jsp"/>
        <% } %>
        <script src="js/gadget.js"></script>
        <script src="js/qrCodeGenerator.js"></script>
        <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
    </head>

    <body class="login-portal layout totp-portal-layout">
        <layout:main layoutName="<%= layout %>" layoutFileRelativePath="<%= layoutFileRelativePath %>" data="<%= layoutData %>" >
            <layout:component componentName="ProductHeader" >
                <%-- product-title --%>
                <%
                    File productTitleFile = new File(getServletContext().getRealPath("extensions/product-title.jsp"));
                    if (productTitleFile.exists()) {
                %>
                    <%
                        if (StringUtils.equals(tenantForTheming, IdentityManagementEndpointConstants.SUPER_TENANT)) {
                    %>
                        <div class="product-title">
                            <jsp:include page="extensions/product-title.jsp"/>
                        </div>
                    <% } else { %>
                        <jsp:include page="extensions/product-title.jsp"/>
                    <% } %>
                <% } else { %>
                    <jsp:include page="includes/product-title.jsp"/>
                <% } %>
            </layout:component>
            <layout:component componentName="MainSection" >
                <div class="ui segment attached segment-with-attached mt-3">
                    <%-- page content --%>
                    <h3 class="ui header text-center">
                        <%=AuthenticationEndpointUtil.i18n(resourceBundle, "enable.totp")%>
                    </h3>
                    <%
                        if ("true".equals(authenticationFailed)) {
                    %>
                        <div class="ui negative message" id="failed-msg"><%=errorMessage%></div>
                        <div class="ui divider hidden"></div>
                    <% } %>
                    <div class="segment-form">
                        <form class="ui large form mb-0" id="pin_form" name="pin_form" action="<%=commonauthURL%>"  method="POST">
                            <%
                                String loginFailed = request.getParameter("authFailure");
                                if (loginFailed != null && "true".equals(loginFailed)) {
                                    String authFailureMsg = request.getParameter("authFailureMsg");
                                    if (authFailureMsg != null && "login.fail.message".equals(authFailureMsg)) {
                            %>
                                        <div class="ui negative message"><%=AuthenticationEndpointUtil.i18n(resourceBundle, "error.retry")%></div>
                                        <div class="ui divider hidden"></div>
                            <% } }  %>

                            <p class="text-center">Scan the QR code using an authenticator app</p>

                            <input type="hidden" id="ENABLE_TOTP" name="ENABLE_TOTP" value="false"/>
                            <input type="hidden" name='ske' id='ske' value='<%=Encode.forHtmlAttribute(request.getParameter("ske"))%>'/>
                            <input type="hidden" name="sessionDataKey" id="sessionDataKey"
                                value='<%=Encode.forHtmlAttribute(request.getParameter("sessionDataKey"))%>'/>

                            <div class="ui center aligned basic segment middle aligned pl-6">
                                <form name="qrinp">
                                    <input type="numeric" name="ECC" value="1" size="1" style="Display:none" id="ecc">
                                    <canvas id="qrcanv">
                                </form>
                            </div>

                            <div>
                                <div id="checkboxField" class="field mb-5">
                                    <div class="ui checkbox">
                                        <input id="checkbox" type="checkbox"/>
                                        <label for="checkbox"><%=AuthenticationEndpointUtil.i18n(resourceBundle,
                                            "confirm.you.have.scanned.the.qr.code")%></label>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-0">
                                <input type="button" name="continue" id="continue"
                                        value="<%=AuthenticationEndpointUtil.i18n(resourceBundle, "continue")%>"
                                        class="ui primary fluid large button" disabled>
                            </div>
                            <div class="mt-1 align-center">
                                <input type="button" name="cancel" id="cancel"
                                        value="<%=AuthenticationEndpointUtil.i18n(resourceBundle, "cancel")%>"
                                        class="ui large fluid button secondary login-portal-app-font">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="ui warning bottom attached message text-left display-flex" style="font-size: small;">
                    <i aria-hidden="true" class="warning circle icon"></i>
                    <div class="message-content">
                        Don't have an app? Download an authenticator application like Google Authenticator from
                        <a href="https://www.apple.com/us/search/totp?src=globalnav">App Store</a> or
                        <a href="https://play.google.com/store/search?q=totp">Google Play</a>
                    </div>
                </div>
            </layout:component>
            <layout:component componentName="ProductFooter" >
                <%-- product-footer --%>
                <%
                    File productFooterFile = new File(getServletContext().getRealPath("extensions/product-footer.jsp"));
                    if (productFooterFile.exists()) {
                %>
                    <jsp:include page="extensions/product-footer.jsp"/>
                <% } else { %>
                    <jsp:include page="includes/product-footer.jsp"/>
                <% } %>
            </layout:component>
            <layout:dynamicComponent filePathStoringVariableName="pathOfDynamicComponent">
                <jsp:include page="${pathOfDynamicComponent}" />
            </layout:dynamicComponent>
        </layout:main>

        <%-- footer --%>
        <%
            File footerFile = new File(getServletContext().getRealPath("extensions/footer.jsp"));
            if (footerFile.exists()) {
        %>
            <jsp:include page="extensions/footer.jsp"/>
        <% } else { %>
            <jsp:include page="includes/footer.jsp"/>
        <% } %>

        <script type="text/javascript">
            var checkbox = $("#checkbox");
            var continueBtn = $("#continue");
            var cancelBtn = $("#cancel");
            var pinForm = $("#pin_form");

            checkbox.click(function () {
                if ($(this).is(":checked")) {
                    continueBtn.prop("disabled", false).removeClass("disabled");
                } else {
                    continueBtn.prop("disabled", true).addClass("disabled");
                }
            });

            $(document).ready(function() {
                checkbox.prop('checked',false);
                continueBtn.click(function() {
                    document.getElementById("ENABLE_TOTP").value = 'true';
                    pinForm.submit();
                });
                cancelBtn.click(function() {
                    document.getElementById("ENABLE_TOTP").value = 'false';
                    pinForm.submit();
                });
                initiateTOTP();
            });

            function initiateTOTP(){
                var key =  document.getElementById("ske").value;
                if(key != null) {
                    loadQRCode(key);
                }
            }
        </script>
    </body>
</html>
