gaf-mobile/app/views/verify-phone.html

GAF mobile Web site

<div class="scroll-container section-inner phone-verification" fl-analytics-section="VerifyPhone">
    <h2>Verify your phone</h2>

    <section ng-switch="ctrl.viewState">
        <section ng-switch-when="notVerified">
            <span>Keep your account secure and get instant notification of when you get new bids on your project.</span>
            <fl-form name="sendverificationform" class="form" action="ctrl.sendVerificationCode()">
                <div class="number-input">
                    <select name="country" ng-model="ctrl.country" ng-options="country as country + ' (+' + countryCode.phone_code + ')' for (country, countryCode) in ctrl.countries" required fl-analytics="ChangedCountry" fl-analytics-value="ctrl.country">
                        <option value="">Select a country...</option>
                    </select>
                    <div ng-if="sendverificationform.$submitted || sendverificationform.country.$touched" ng-messages="sendverificationform.country.$error">
                        <span class="validation validation-error" ng-message="required">
                            <span class="icon-notification"> </span>
                            Please select a country.
                        </span>
                    </div>

                    <input name="phonenumber" type="number" placeholder="Phone number" required ng-change="ctrl.sendError.error = false" fl-invalid-if="ctrl.sendError.error" ng-model="ctrl.phoneNumber" min="0">
                    <div ng-if="sendverificationform.$submitted || sendverificationform.phonenumber.$touched" ng-messages="sendverificationform.phonenumber.$error">
                        <span class="validation validation-error" ng-message="required">
                            <span class="icon-notification"> </span>
                            Please enter your phone number.
                        </span>
                        <span class="validation validation-error" ng-message="min">
                            <span class="icon-notification"> </span>
                            Please enter a valid phone number.
                        </span>
                        <span class="validation validation-error" ng-message="number">
                            <span class="icon-notification"> </span>
                            Please enter a valid phone number.
                        </span>
                        <span class="validation validation-error" ng-message="flInvalidIf">
                            <span class="icon-notification"> </span>
                            {{ ctrl.sendError.message }}
                        </span>
                    </div>
                </div>
                <fl-button class="btn btn-primary verify-phone-button" fl-analytics="SendPhoneNumber" fl-analytics-label="VerifyMyPhone">Send code</fl-button>
            </fl-form>
        </section>

        <section ng-switch-when="codeSent">
            <span>We've sent a five digit code to your phone. Enter it below to complete your verification.</span>
            <fl-form name="submitverificationform" class="form" action="ctrl.submitVerificationCode()">
                <div class="number-input">
                    <input name="code" type="number" placeholder="Verification code" required minlength="5" maxlength="5" ng-change="ctrl.submitError.error = false" fl-invalid-if="ctrl.submitError.error" ng-model="ctrl.verificationCode">
                    <div ng-if="submitverificationform.code.$touched" ng-messages="submitverificationform.code.$error">
                        <span class="validation validation-error" ng-message="required">
                            <span class="icon-notification"> </span>
                            Please enter the code we sent you.
                        </span>
                        <span class="validation validation-error" ng-message="minlength">
                            <span class="icon-notification"> </span>
                            Please enter a valid verification code.
                        </span>
                        <span class="validation validation-error" ng-message="maxlength">
                            <span class="icon-notification"> </span>
                            Please enter a valid verification code.
                        </span>
                        <span class="validation validation-error" ng-message="number">
                            <span class="icon-notification"> </span>
                            Please enter a valid phone number.
                        </span>
                        <span class="validation validation-error" ng-message="flInvalidIf">
                            <span class="icon-notification"> </span>
                            {{ ctrl.submitError.message }}
                        </span>
                    </div>
                </div>
                <fl-button class="btn btn-primary verify-phone-button" fl-analytics="SubmitCode" fl-analytics-label="VerifyMyPhone">Verify my phone</fl-button>
            </fl-form>
        </section>

        <section ng-switch-when="verified">
            <span>You have successfully verified your phone number. Thanks!</span>
        </section>
    </section>
</div>