User: Recovery

<div class="l-boxed">
    <div class="l-boxed__header u-z-undercover">
        <div class="u-p-base">
            <a class="u-block" href="/">

                <style>
                    @font-face {
                        font-family: 'NovecentoNarrow';
                        src: url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff2"),
                            url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff");
                        font-style: normal;
                        font-display: swap;
                    }
                </style>

                <div class="c-brand c-brand__text u-uppercase u-no-underline c-brand--resize-small  ">
                    <span class="c-brand__edition">agrigento</span><span class="c-brand__network">notizie</span>
                </div>

            </a>
        </div>
    </div>
    <div class="l-boxed__sidebar" style="backgrond-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('/assets/images/site/cities/roma_desktop.jpg')">
    </div>
    <div class="l-boxed__content u-z-cover">
        <div class="l-boxed__inner u-my-large">

            <div class="c-tab u-p-none">
                <!-- tabs module -->
                <input type="radio" value="intro" id="intro-form-radio" class="u-none" name="c-tabs__choice" checked>
                <div id="intro-form-tab" class="c-tab__content u-size-full u-pl-base u-pr-base u-pl-none@md u-pr-none@md">
                    <!-- email form -->

                    <div class="u-mb-base">

                    </div>

                    <form id="email-recovery-form" action="" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post" novalidate>
                        <fieldset data-toggle="email-recovery-fw__step" class="fw__inputs o-divider email-recovery-fw__step u-pl-none u-pr-none u-mb-medium">
                            <!-- page hgroup -->
                            <div class="u-text-center u-mb-large">
                                <h1 class="u-heading-03">Recupera la password del tuo profilo personale</h1>
                                <p class="u-mb-large u-color-secondary">Ti invieremo un link per il recupero della tua password di sicurezza per
                                    accedere al tuo profilo.</p>
                            </div>
                            <!-- end page hgroup -->
                            <!-- form recovery -->
                            <div class="u-mb-base ">
                                <div class="">

                                    <label class="u-label-04 u-color-base" for="">Email</label>

                                    <input class=" u-block u-size-full" type="text" placeholder="">

                                </div>

                                <!-- TODO: REVIEW ICON POSITION -->

                            </div>
                            <div class="u-mt-large">

                                <div class="u-flex u-items-center">

                                    <div class="u-size-full u-size-1-2 u-text-right">
                                        <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="Recupera password" />
                                    </div>

                                </div>

                            </div>
                            <!-- form recovery -->
                            <div class="u-text-center u-mt-large u-pl-large u-pr-large u-pl-none@md u-pr-none@md">
                                <span class="u-label-07 u-color-secondary u-block u-mb-small">
                                    Non sei registrato?
                                    <a class="o-link-primary" href="user--signup2021">Crea un account</a>
                                </span>
                                <span class="u-label-07 u-color-secondary u-block u-mb-small">
                                    Non hai ricevuto il codice di attivazione?
                                    <a class="o-link-primary" href="user--recovery2021">Richiedi il codice di attivazione</a>
                                </span>
                            </div>
                        </fieldset>
                        <section data-toggle="email-recovery-fw__step" class="fw__inputs o-divider email-recovery-fw__step u-pl-none u-pr-none u-mb-medium">
                            <div class="u-mb-large">
                                <h2 class="u-heading-03 u-text-center">Nuova password inviata...</h2>
                                <p class="u-mb-large u-text-center">Ti abbiamo inviato una mail con la nuova password di sicurezza per
                                    accedere al tuo profilo.</p>
                                <div class="u-mb-base">
                                    <a href="user--login2021" class="c-btn c-btn--primary u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Accedi
                                        al tuo profilo</a>
                                </div>
                            </div>
                            <div id="results" class="u-mb-large u-mt-large"></div>
                        </section>
                    </form>

                    <script>
                        window.onload = function() {
                            var stepIndex = 0;
                        }
                        // var modeToggle = document.getElementsByClassName("input:radio[name=c-tabs__choice]:checked");
                        // const stepElements = document.querySelector('[data-toggle-step]');
                        var stepElements = document.getElementsByClassName("email-recovery-fw__step");
                        var form = document.getElementById("email-recovery-form");
                        var breadcrumbsItems = document.getElementsByClassName("c-stepper__element");
                        // Initialise the form
                        function init() {
                            // Reset the step
                            stepIndex = 0;
                            // Clear all fields
                            form.reset();
                            toggleBreadcrumbsStep();
                            showCurrentStep();
                            breadcrumbsItems.classList.add("c-stepper__element--active");
                        }
                        // Indicate the current step with breadcrumbs
                        function toggleBreadcrumbsStep() {
                            Array.from(breadcrumbsItems).forEach(function(el, index) {
                                if (index <= stepIndex) {
                                    el.classList.add("c-stepper__element--active");
                                } else {
                                    el.classList.remove("c-stepper__element--active");
                                }
                            });
                        }
                        // Show the current step and hide the rest
                        function showCurrentStep() {
                            Array.from(stepElements).forEach(function(el, index) {
                                if (index !== stepIndex) {
                                    el.classList.add("u-none");
                                } else {
                                    el.classList.remove("u-none");
                                }
                            });
                        }
                        // Next step action, all fields in current step must be validated before proceed to next step.
                        function next() {
                            const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
                            // Increment step
                            stepIndex++;
                            toggleBreadcrumbsStep();
                            showCurrentStep();
                        }
                        // Back button action to navigate 1 step back
                        function back() {
                            // Clear all fields in current step
                            const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
                            Array.from(fields).forEach(function(field) {
                                const tagName = field.tagName;
                                if (tagName.localeCompare("INPUT") === 0) {
                                    field.value = '';
                                } else if (tagName.localeCompare("SELECT") === 0) {
                                    field.selectedIndex = 0;
                                }
                            });
                            // Decrement step
                            stepIndex--;
                            toggleBreadcrumbsStep();
                            showCurrentStep();
                        }
                        form.addEventListener('submit', function(e) {
                            e.preventDefault();
                            const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
                            // all fields in current step must be validated before submission.
                            // Prepare the result in next view
                            showResult();
                            // Navigate to result
                            stepIndex++;
                            // toggleBreadcrumbsStep();
                            showCurrentStep();
                        }, false);

                        function showResult() {
                            const resultsContainer = document.getElementById("results");
                            // Make sure the result page is empty
                            resultsContainer.innerHTML = "";
                            const fields = form.querySelectorAll("input:not([type=button]):not([type=submit]), select");
                            // List out all data
                            fields.forEach(field => {
                                const fieldLabel = field.getAttribute("data-label");
                                const fieldValue = field.value;
                                const resultItem = document.createElement("li");
                                resultItem.setAttribute("class", "fw__result__item");
                                resultItem.innerHTML = '<span class="fw__result__label">' + fieldLabel + ':</span> <strong class="fw__result__value">' + fieldValue + '</strong>';
                                resultsContainer.append(resultItem);
                            });
                        }
                        init();
                    </script>
                    <!-- end email form -->
                </div>
                <!-- end tabs module -->
            </div>

        </div>
    </div>
    <div class="l-boxed__footer u-z-undercover">
        <!-- -->
        <div class="u-mt-xlarge@md u-p-base">
            <a href="www.citynews.it" class="c-footer-brand">

                <svg class="o-icon--fill" width="91" height="24">
                    <use xlink:href="#brand-citynews"></use>
                </svg>
            </a>
            <p class="u-label-07">
                © Copyright 2009-2021 RomaToday <br />
                plurisettimanale telematico reg. tribunale di Roma n. 93/2010 <br />
                P.iva 10786801000 <br />
                Testata iscritta all'USPI
            </p>
            <ul class="u-list-none u-list-reset u-label-07">
                <li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/privacy#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Cookie & Privacy policy</a></li>
                <li class="u-size-full"><a class="o-link-primary" href="https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359" targhet="_blank">Termini e condizioni</a></li>
            </ul>
        </div>
        <!-- -->
    </div>
</div>