@using Microsoft.AspNetCore.Mvc.Localization

@model gehGassi.Web.Models.EnableTwoFactorVm
@inject IViewLocalizer Localizer
@{
    ViewData["Title"] = Localizer["TwoFactorEnable_Title"];
}
@section pageTitle
{
    <div>@ViewData["Title"]</div>
}
<section id="enableTwoFactorContainer">
    <div>
        <div class="pageDesc">@Localizer["TwoFactorEnable_Desc"]</div>
        <form cb-preventsubmit id="frmEnableTwoFactor" class="form" asp-controller="Manage" asp-action="TwoFactorEnable" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#enableTwoFactorContainer">
            <input type="hidden" asp-for="SharedKey" />
            <input type="hidden" asp-for="AuthenticatorUri" />
            <div asp-validation-summary="ModelOnly"></div>

            <p cb->Um eine Authentifikator-App zu verwenden, führen Sie die folgenden Schritte durch:</p>
            <ol class="list">
                <li>
                    <p>
                        Laden Sie eine Zwei-Faktor-Authentifikations-App wie Microsoft Authenticator herunter für
                        <a href="https://go.microsoft.com/fwlink/?Linkid=825072" target="_blank">Android</a> und
                        <a href="https://go.microsoft.com/fwlink/?Linkid=825073" target="_blank">iOS</a> oder
                        Google Authenticator für
                        <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en" target="_blank">Android</a> und
                        <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8" target="_blank">iOS</a>.
                    </p>
                </li>
                <li>
                    <p>Scannen Sie den QR-Code oder geben Sie den folgenden Schlüssel in Ihre Zwei-Faktor-Authentifikator-App ein. Abstände und Großschreibung spielen keine Rolle.</p>
                    <div class="alert alert-info"><kbd>@Model.SharedKey</kbd></div>
                    <div id="qrCode"></div>
                    <div id="qrCodeData" data-url=""></div>
                </li>
                <li>
                    <p style="margin-top: 25px;">
                        Nachdem Sie den QR-Code gescannt oder den obigen Schlüssel eingegeben haben, erhalten Sie von Ihrer Zwei-Faktor-Authentifizierungsanwendung
                        einen eindeutigen Code. Geben Sie den Code in das untenstehende Bestätigungsfeld ein.
                    </p>
                    <div class="row mb-2">
                        <div class="col-md-6 offset-md-3">
                            <label class="form-label" asp-for="Code"></label>
                            <div class="input-group">
	                            <span class="input-group-text"><i class="fa fa-fw fa-credit-card"></i></span>
                                <input asp-for="Code" class="form-control" />
                                <span asp-validation-for="Code" class="invalid-feedback"></span>
                            </div>
                        </div>
                    </div>
                </li>
            </ol>
            <div class="row button-row">
                <div class="col-md-6 offset-md-3">
                    <div class="">
                        <button type="button" id="btnActivate" class="btn btn-primary">@Localizer["Button_Activate"]</button>
                        <button type="button" id="btnCancel" class="btn btn-primary">@Localizer["Button_Cancel"]</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <system-js url="~/scripts/Views/Manage/twoFactorEnable.js" fresh-import="true"></system-js>
</section>