RegistrationWithCaptchaDemoV2.cshtml

@model Progress.Sitefinity.AspNetCore.Widgets.Models.Registration.RegistrationViewModel
@using Progress.Sitefinity.AspNetCore.Widgets.Models.Registration
@using Progress.Sitefinity.AspNetCore.Mvc.Rendering

@using Progress.Sitefinity.AspNetCore.ViewComponents;
@using Progress.Sitefinity.AspNetCore.Web
@inject IRenderContext renderContext;

@{
    var lbls = Model.Labels;
}

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        section-name="Bottom"
        async defer></script>
<script type="text/javascript">
    (function () {
        var responseKey = "sf_captcha_response";
        var siteKey = '<your_site_key>';

        window.onloadCallback = renderCaptcha;

        function responseCallback(response) {
            var form = document.querySelector('form');

            var responseInput = form.querySelector('input[name="' + responseKey + '"]');
            if (!responseInput) {
                responseInput = document.createElement('input');
                responseInput.type = 'hidden';
                responseInput.name = responseKey;
                form.appendChild(responseInput);
            }

            responseInput.value = response;
        }

        function renderCaptcha() {
            grecaptcha.render('captchav2', {
                'sitekey': siteKey,
                'callback': responseCallback
            });
        }
    })();

</script>

@if (Model.IsAccountActivationRequest)
{
    <div class="@(string.IsNullOrEmpty(Model.CssClass) ? null : Model.CssClass)" @Html.BuildAttributes(Model.Attributes)>
        <h2 class="mb-3">
            @lbls.ActivationMessage
        </h2>
    </div>
}
else
{
    <div data-sf-role="sf-registration-container"
         data-sf-visibility-hidden="@Model.VisibilityClasses[Progress.Sitefinity.AspNetCore.Configuration.VisibilityStyle.Hidden]"
         data-sf-invalid="@Model.InvalidClass"
         class="@(string.IsNullOrEmpty(Model.CssClass) ? null : Model.CssClass)" @Html.BuildAttributes(Model.Attributes)>
        @if (Model.ShowSuccessMessage(Context))
        {
            <h3>@lbls.SuccessHeader</h3>
            <p>@lbls.SuccessLabel</p>
        }
        else
        {
            var firstNameInputId = Html.GetUniqueId("sf-first-name-");
            var lastNameInputId = Html.GetUniqueId("sf-last-name-");
            var emailInputId = Html.GetUniqueId("sf-email-");
            var passwordInputId = Html.GetUniqueId("sf-new-password-");
            var repeatPasswordInputId = Html.GetUniqueId("sf-repeat-password-");
            var questionInputId = Html.GetUniqueId("sf-secret-question-");
            var answerInputId = Html.GetUniqueId("sf-secret-answer-");

            <environment include="Development">
                <script src="Scripts/LoginWidgets/registration.js" section-name="Bottom" assembly-ref="Progress.Sitefinity.AspNetCore.Widgets"></script>
            </environment>
            <environment exclude="Development">
                <script src="Scripts/LoginWidgets/registration.min.js" section-name="Bottom" assembly-ref="Progress.Sitefinity.AspNetCore.Widgets"></script>
            </environment>
            <div data-sf-role="form-container">
                <h2 class="mb-3">@lbls.Header</h2>
                <div data-sf-role="error-message-container" class="alert alert-danger d-none my-3" role="alert" aria-live="assertive"></div>
                <form method="post" action="@Model.RegistrationHandlerPath" role="form" novalidate>
                    <div class="mb-3">
                        <label for="@firstNameInputId" class="form-label">@lbls.FirstNameLabel</label>
                        <input id="@firstNameInputId" type="text" class="form-control" name="FirstName" data-sf-role="required">
                    </div>
                    <div class="mb-3">
                        <label for="@lastNameInputId" class="form-label">@lbls.LastNameLabel</label>
                        <input id="@lastNameInputId" type="text" class="form-control" name="LastName" data-sf-role="required">
                    </div>
                    <div class="mb-3">
                        <label for="@emailInputId" class="form-label">@lbls.EmailLabel</label>
                        <input id="@emailInputId" type="email" class="form-control" name="Email" data-sf-role="required">
                    </div>
                    <div class="mb-3">
                        <label for="@passwordInputId" class="form-label">@lbls.PasswordLabel</label>
                        <input id="@passwordInputId" type="password" class="form-control" name="Password" data-sf-role="required">
                    </div>
                    <div class="mb-3">
                        <label for="@repeatPasswordInputId" class="form-label">@lbls.RepeatPasswordLabel</label>
                        <input id="@repeatPasswordInputId" type="password" class="form-control" name="RepeatPassword" data-sf-role="required">
                    </div>
                    <div class="mb-3">
                        <div>
                            <div id="captchav2" class="@("mb-3 " + (renderContext.IsEdit ? "pe-none" : ""))"></div>
                        </div>
                    </div>

                    @if (Model.RequiresQuestionAndAnswer)
                    {
                        <div class="mb-3">
                            <label for="@questionInputId" class="form-label">@lbls.SecretQuestionLabel</label>
                            <input id="@questionInputId" type="text" class="form-control" name="Question" data-sf-role="required">
                        </div>
                        <div class="mb-3">
                            <label for="@answerInputId" class="form-label">@lbls.SecretAnswerLabel</label>
                            <input id="@answerInputId" type="text" class="form-control" name="Answer" data-sf-role="required">
                        </div>
                    }

                    <input class="btn btn-primary w-100" type="submit" value="@lbls.RegisterButtonLabel" />

                    <input type="hidden" name="ActivationPageUrl" value="@Model.ActivationPageUrl" />
                    <input type="hidden" value="" name="sf_antiforgery" />
                </form>

                @if (!string.IsNullOrEmpty(Model.LoginPageUrl))
                {
                    <div class="mt-3">@lbls.LoginLabel</div>
                    <a href="@Model.LoginPageUrl" class="text-decoration-none">@lbls.LoginLink</a>
                }

                @if (Model.ExternalProviders != null && Model.ExternalProviders.Any())
                {
                    <h3 class="mt-3">@lbls.ExternalProvidersHeader</h3>
                    @foreach (var provider in Model.ExternalProviders)
                    {
                        <a data-sf-test="extPrv" class="btn border fs-5 w-100 mt-2 @Model.GetExternalLoginButtonCssClass(provider.Name)" href="@Model.GetExternalLoginPath(Context, provider.Name)">@provider.Title</a>
                    }
                }

                <input type="hidden" name="RedirectUrl" value="@Model.RedirectUrl" />
                <input type="hidden" name="PostRegistrationAction" value="@Model.PostRegistrationAction" />
                <input type="hidden" name="ActivationMethod" value="@Model.ActivationMethod" />
                <input type="hidden" name="ValidationRequiredMessage" value="@lbls.ValidationRequiredMessage" />
                <input type="hidden" name="ValidationMismatchMessage" value="@lbls.ValidationMismatchMessage" />
                <input type="hidden" name="ValidationInvalidEmailMessage" value="@lbls.ValidationInvalidEmailMessage" />
            </div>

            <div data-sf-role="success-registration-message-container" class="d-none">
                <h3>@lbls.SuccessHeader</h3>
                <p>@lbls.SuccessLabel</p>
            </div>

            <div data-sf-role="confirm-registration-message-container" class="d-none">
                <h3>@lbls.ActivationLinkHeader</h3>
                <p data-sf-role="activation-link-message-container"></p>

                <a href="javascript:void(0)" data-sf-role="sendAgainLink" class="btn btn-primary">
                    @lbls.SendAgainLink
                </a>

                <input type="hidden" name="ResendConfirmationEmailUrl" value="@Model.ResendConfirmationEmailHandlerPath" />
                <input type="hidden" name="ActivationLinkLabel" value="@lbls.ActivationLinkLabel" />
                <input type="hidden" name="SendAgainLink" value="@lbls.SendAgainLink" />
                <input type="hidden" name="SendAgainLabel" value="@lbls.SendAgainLabel" />
            </div>
        }
    </div>
}