gaf-mobile/app/views/signup.html

GAF mobile Web site

<div class="signup scroll-container" fl-analytics-section="Signup" ng-switch="ctrl.state">

    <!--   PAGE VIEW   -->
    <!-- User create account form -->
    <section class="signup-facebook" ng-switch-when="signup">
        <div class="section-inner">
            <fl-button type="submit" class="btn btn-facebook" action="ctrl.loadFacebookSignup(false, true)" ng-disabled="ctrl.processing" fl-analytics="FacebookSignup">Connect with Facebook</fl-button>
            <div ng-messages="ctrl.error">
                <span class="validation validation-error" ng-if="ctrl.error.facebookEmailTaken">
                    <span class="icon-notification"> </span>
                    Your email is already associated with a Freelancer account.
                    Click <a ng-click="ctrl.goToLogin()">here</a> to login.
                </span>
                <span class="validation validation-error" ng-message="facebookNotAuthorized">
                    <span class="icon-notification"> </span>
                    Please authorize Freelancer to access your Facebook account in order sign up with Facebook
                </span>
                <span class="validation validation-error" ng-message="facebookNotConnected">
                    <span class="icon-notification"> </span>
                    Please connect with your Facebook account or sign up below
                </span>
                <span class="validation validation-error" ng-message="facebookAccessDenied">
                    <span class="icon-notification"> </span>
                    There was a problem logging in with your account. Please contact <a href="https://www.freelancer.com/support">support</a>.
                </span>
                <span class="validation validation-error" ng-if="ctrl.error.facebookUnknownError">
                    <span class="icon-notification"> </span>
                    Failed to connect with Facebook: {{ ctrl.error.facebookUnknownError }}
                </span>
            </div>
        </div>
    </section>
    <section class="signup-freelancer section-inner" ng-switch-when="signup">

        <!-- When the signup form is hidden -->
        <div ng-if="!ctrl.showSignupForm">
            <button class="btn btn-primary signup-freelancer-button" ng-click="ctrl.showSignupForm = true" fl-analytics="GoToSignup" fl-analytics-label="EmailSignup" fl-smooth-scroll="#signupform" fl-smooth-scroll-offset="10">Sign Up with Email</button>
            <aside class="signup-freelancer-login-link">
                <span class="icon-info"> </span>
                Already a member? <a ng-click="ctrl.goToLogin()" fl-analytics="GoToLogin">Log In</a>
            </aside>
        </div>

        <!-- Standard Form -->
        <fl-form ng-if="ctrl.showSignupForm" id="signupform" name="signupform" class="form" action="ctrl.signup(ctrl.user, ctrl.password.original)" fl-analytics-subsection="EmailSignup">
            <fieldset>

            <!-- Email input -->
            <div class="input-prepend">
                <span class="icon-email input-prepend-icon"></span>
                <input name="email" type="email" placeholder="yourname@email.com" required ng-model="ctrl.user.email" ng-change="ctrl.error.emailTaken = false" fl-guardpost fl-ensure-unique="email" fl-ensure-unique-recommend-username="ctrl.user.username" fl-invalid-if="ctrl.error.emailTaken" fl-analytics="ChangedEmail" fl-analytics-label="Signup">
            </div>
            <div ng-if="signupform.$submitted || signupform.email.$touched" ng-messages="signupform.email.$error">
                <span class="validation validation-error" ng-message="required">
                    <span class="icon-notification"> </span>
                    Please input your email
                </span>
                <span class="validation validation-error" ng-message="email">
                    <span class="icon-notification"> </span>
                    Invalid email
                </span>
                <span class="validation validation-info" ng-message="uniqueCheck">
                  Checking email validity...
                </span>
                <span class="validation validation-error" ng-message="uniqueInvalid">
                    <span class="icon-notification"> </span>
                    Invalid email
                </span>
                <span class="validation validation-error" ng-message="unique">
                    <span class="icon-notification"> </span>
                    This email is already registered. <a href="/reset-password">Forgot your password?</a>
                </span>
                <span class="validation validation-info" ng-message="guardpostCheck">
                  Checking email validity...
                </span>
                <span class="validation validation-error" ng-message="guardpost">
                  <span ng-if="ctrl.signupform.email.suggestion">
                    <span class="icon-notification"> </span>
                    Invalid email. Did you mean: <a ng-click="user.email = ctrl.signupform.email.suggestion">{{ ctrl.signupform.email.suggestion }}</a>?
                  </span>
                  <span ng-if="!ctrl.signupform.email.suggestion">
                    <span class="icon-notification"> </span>
                    Invalid email
                  </span>
                </span>
            </div>
            <span class="validation validation-error" ng-if="ctrl.error.emailTaken">
                <span class="icon-notification"> </span>
                This email is already registered. <a href="/reset-password">Forgot your password?</a>
            </span>

                <!-- Username input -->
                <div class="input-prepend">
                    <span class="icon-user input-prepend-icon"></span>
                    <input name="username" type="text" placeholder="Username" required ng-model="ctrl.user.username" ng-change="ctrl.error.usernameTaken = false" ng-minlength="3" ng-maxlength="16" ng-pattern="/^[a-z][a-z0-9]*$/i" fl-ensure-unique="username" fl-analytics="ChangedUsername" fl-analytics-label="Signup">
                </div>
                <div ng-if="signupform.$submitted || signupform.username.$touched" ng-messages="signupform.username.$error">
                    <span class="validation validation-error" ng-message="required">
                        <span class="icon-notification"> </span>
                        Please input a username
                    </span>
                    <span class="validation validation-error" ng-message="minlength">
                        <span class="icon-notification"> </span>
                        Your username is required to be at least 3 characters
                    </span>
                    <span class="validation validation-error" ng-message="maxlength">
                        <span class="icon-notification"> </span>
                        Your username cannot be longer than 16 characters
                    </span>
                    <span class="validation validation-error" ng-message="pattern">
                        <span class="icon-notification"> </span>
                        Your username must be alphanumeric starting with a letter
                    </span>
                <span class="validation validation-info" ng-message="uniqueCheck">
                    Checking username availability...
                </span>
                    <span class="validation validation-error" ng-message="unique">
                        <span class="icon-notification"> </span>
                        That username is taken, please try another
                    </span>
            </div>
            <span class="validation validation-error" ng-if="ctrl.error.usernameTaken">
                <span class="icon-notification"> </span>
                This user is already registered. Please pick another one.
            </span>

            <!-- Password input -->
            <div class="input-prepend">
                <span class="icon-password input-prepend-icon"></span>
                    <input name="password" type="password" placeholder="Password" required ng-model="ctrl.password.original" ng-minlength="6" ng-maxlength="16" ng-pattern="/(?:(?=.*\d)(?:(?=.*[a-z])|(?=.*[A-Z]))|(?=.*[a-z])(?=.*[A-Z]))/" fl-different-from="username" fl-analytics="ChangedPassword" fl-analytics-label="Signup" fl-show-password="showPassword">
            </div>
            <div ng-if="signupform.$submitted || signupform.password.$touched" ng-messages="signupform.password.$error">
                <span class="validation validation-error" ng-message="required">
                    <span class="icon-notification"> </span>
                    Please input a password
                </span>
                <span class="validation validation-error" ng-message="minlength">
                    <span class="icon-notification"> </span>
                    Your password is required to be at least 6 characters
                </span>
                <span class="validation validation-error" ng-message="maxlength">
                    <span class="icon-notification"> </span>
                    Your password cannot be longer than 16 characters
                </span>
                <span class="validation validation-error" ng-message="pattern">
                    <span class="icon-notification"> </span>
                    Please provide a stronger password
                </span>
                <span class="validation validation-error" ng-message="different">
                    <span class="icon-notification"> </span>
                    Your password must be different from your username
                </span>
            </div>

            <!-- Show Password -->
            <label class="inline-label signup-show-password" for="show-password">
                <input type="checkbox" id="show-password" name="show-password" ng-model="showPassword" fl-analytics="ChangedShowPassword" fl-analytics-label="ShowPassword" fl-analytics-value="showPassword">Show Password
            </label>

            <!-- Role selection -->
            <div class="signup-role" ng-if="!ctrl.project.title">
                <div ng-if="!selectRole">
                    <span class="signup-role-label">I am looking to:</span>
                    <label class="inline-label" for="role-employer">
                        <input type="radio" id="role-employer" name="role" ng-model="ctrl.user.role" value="employer" required fl-analytics="ChangedHireWork" fl-analytics-label="HireWork" fl-analytics-value="ctrl.user.role">Hire
                    </label>
                    <label class="inline-label" for="role-freelancer">
                        <input type="radio" id="role-freelancer" name="role" ng-model="ctrl.user.role" value="freelancer" required fl-analytics="ChangedHireWork" fl-analytics-label="HireWork" fl-analytics-value="ctrl.user.role">Work
                    </label>
                    <span class="validation validation-error" ng-if="signupform.$submitted && signupform.role.$error.required">
                        <span class="icon-notification"> </span>
                        Do you want to hire or work?
                    </span>
                </div>
            </div>

        </fieldset>
        <div ng-if="ctrl.captcha">
            <div class="alert-form" ng-hide="ctrl.error.invalidCaptcha">
                <span class="icon-notification"> </span>
                Please type the words displayed below:
            </div>
            <div class="alert-form" ng-show="ctrl.error.invalidCaptcha">
                <span class="icon-notification"> </span>
                The words didn't match, please try again:
            </div>
            <fl-captcha></fl-captcha>
        </div>


        <!-- General error -->
        <div class="validation alert-form" ng-if="ctrl.error.accessDenied">
            <span class="icon-notification"> </span>
            There was a problem logging in with your account. Please contact <a href="https://www.freelancer.com/support">support</a>.
        </div>
        <span class="validation validation-error" ng-if="ctrl.error.internalError">
            <span class="icon-notification"> </span>
            Internal error: {{ ctrl.error.internalError }}
        </span>

            <fl-button ng-if="!ctrl.project.title && ctrl.user.role === 'employer'" type="submit" class="btn btn-primary create-account-button" fl-analytics="CreateAccount">Start Hiring!</fl-button>
            <fl-button ng-if="!ctrl.project.title && ctrl.user.role !== 'employer'" type="submit" class="btn btn-primary create-account-button" fl-analytics="CreateAccount">Start Working!</fl-button>
            <fl-button ng-if="ctrl.project.title" type="submit" class="btn btn-primary create-account-button" fl-analytics="GoToPostProject" fl-analytics-label="PostProject">Post project</fl-button>
            <aside>
                <span class="icon-info"> </span>
                Already a member? <a ng-click="ctrl.goToLogin()" fl-analytics="GoToLogin">Log In</a>
            </aside>
            <small>By registering you confirm that you accept the <a href="https://www.freelancer.com/page.php?p=info/terms" fl-gaf-link target="_blank" fl-analytics="GoToTermsAndConditions">Terms and Conditions</a> and <a href="https://www.freelancer.com/page.php?p=info/privacy" fl-gaf-link target="_blank" fl-analytics="GoToPrivacyPolicy">Privacy Policy</a>.</small>
        </fl-form>

    </section>

    <section class="signup-facebook-linked section-inner" ng-switch-when="facebookSignup" fl-analytics-subsection="FacebookSignup">
        <!-- Facebook Form -->
        <h1>Connect with Facebook</h1>
        <div class="signup-facebook-linked-user">
            <img class="facebook-profile-image profile-img" ng-src="{{ ctrl.facebookPictureUrl }}" width="30" height="30" alt="Facebook Profile image">
            <h3>Welcome {{ ctrl.facebookUser.first_name }}</h3>
        </div>
        <span>Please select a username:</span>

            <fl-form name="facebooksignupform" class="form signup-facebook-linked-form" action="ctrl.facebookSignup(ctrl.user, ctrl.facebookAuthParams)">
                <fieldset>

                    <!-- Username input -->
                    <div class="input-prepend">
                        <span class="icon-user input-prepend-icon"></span>
                        <input name="username" type="text" placeholder="Username" required ng-model="ctrl.user.username" ng-change="ctrl.error.usernameTaken = false" ng-minlength="3" ng-maxlength="16" ng-pattern="/^[a-z][a-z0-9]*$/i" fl-ensure-unique="username" fl-invalid-if="ctrl.error.usernameTaken" fl-analytics="ChangedUsername" fl-analytics-label="FacebookSignup">
                    </div>
                    <div ng-if="facebooksignupform.$submitted || facebooksignupform.username.$touched" ng-messages="facebooksignupform.username.$error">
                        <span class="validation validation-error" ng-message="required">
                            <span class="icon-notification"> </span>
                            Please input a username
                        </span>
                        <span class="validation validation-error" ng-message="minlength">
                            <span class="icon-notification"> </span>
                            Your username is required to be at least 3 characters
                        </span>
                        <span class="validation validation-error" ng-message="maxlength">
                            <span class="icon-notification"> </span>
                            Your username cannot be longer than 16 characters
                        </span>
                        <span class="validation validation-error" ng-message="pattern">
                            <span class="icon-notification"> </span>
                            Your username must be alphanumeric starting with a letter
                        </span>
                        <span class="validation validation-info" ng-message="uniqueCheck">
                            Checking username availability...
                        </span>
                        <span class="validation validation-error" ng-message="unique">
                            <span class="icon-notification"> </span>
                            That username is taken, please try another
                        </span>
                    </div>
                    <span class="validation validation-error" ng-if="ctrl.error.accessDenied">
                        <span class="icon-notification"> </span>
                        There was a problem logging in with your account. Please contact <a href="https://www.freelancer.com/support">support</a>.
                    </span>
                    <span class="validation validation-error" ng-if="ctrl.error.usernameTaken">
                        <span class="icon-notification"> </span>
                        This user is already registered. Please pick another one.
                    </span>
                    <span class="validation validation-error" ng-if="ctrl.error.facebookEmailTaken">
                        <span class="icon-notification"> </span>
                        Your email is already associated with a Freelancer account.
                        Click <a ng-click="ctrl.goToLogin(true)">here</a> to login
                    </span>

                    <!-- Role selection -->
                    <div class="signup-role" ng-if="!ctrl.project.title">
                        <div ng-if="!selectRole">
                            <span class="signup-role-label">I am looking to:</span>
                            <label class="inline-label" for="role-employer">
                                <input type="radio" id="role-employer" name="role" ng-model="ctrl.user.role" value="employer" required fl-analytics="ChangedHireWork" fl-analytics-label="HireWork" fl-analytics-value="ctrl.user.role">Hire
                            </label>
                            <label class="inline-label" for="role-freelancer">
                                <input type="radio" id="role-freelancer" name="role" ng-model="ctrl.user.role" value="freelancer" required fl-analytics="ChangedHirework" fl-analytics-label="HireWork" fl-analytics-value="user.role">Work
                            </label>
                            <span class="validation validation-error" ng-if="facebooksignupform.$submitted && facebooksignupform.role.$error.required">
                                <span class="icon-notification"> </span>
                                Do you want to hire or work?
                            </span>
                        </div>
                    </div>

                </fieldset>

                <!-- General error -->
                <span class="validation validation-error" ng-if="ctrl.error.internalError">
                    <span class="icon-notification"> </span>
                    Internal error: {{ ctrl.error.internalError }}
                </span>

                <fl-button ng-if="!ctrl.project.title && ctrl.user.role === 'employer'" type="submit" class="btn btn-primary create-account-button" fl-analytics="CreateAccount">Start Hiring!</fl-button>
                <fl-button ng-if="!ctrl.project.title && ctrl.user.role !== 'employer'" type="submit" class="btn btn-primary create-account-button" fl-analytics="CreateAccount">Start Working!</fl-button>
                <fl-button ng-if="ctrl.project.title" type="submit" class="btn btn-primary create-account-button" fl-analytics="GoToPostProject" fl-analytics-label="PostProject">Post project</fl-button>
            <aside>
                <span class="icon-info"> </span>
                Already a member? <a ng-click="ctrl.goToLogin()" fl-analytics="GoToLogin">Log In</a>
            </aside>
            <small>By registering you confirm that you accept the <a href="https://www.freelancer.com/page.php?p=info/terms" fl-gaf-link target="_blank" fl-analytics="GoToTermsAndConditions">Terms and Conditions</a> and <a href="https://www.freelancer.com/page.php?p=info/privacy" fl-gaf-link target="_blank" fl-analytics="GoToPrivacyPolicy">Privacy Policy</a>.</small>
        </fl-form>
    </section>

    <!-- Displayed on success -->
    <section class="signup-success section-inner" ng-switch-when="success" fl-analytics-subsection="Success">
        <!--   PAGE VIEW   -->
        <!--  Employer login success -->
        <div class="first-project" ng-if="ctrl.user.role === 'employer'">
            <div class="icon-roundy-square large-icon">
                <span class="icon-file-powerpoint large-icon-inner"></span>
            </div>
            <h1>Post your first project</h1>
            <a href="/post-project" class="btn btn-primary post-project-button" fl-analytics="GoToPostProject" fl-analytics-label="PostProject">Post a Project</a>
            <p>Prepare your briefing - a catchy title, the right budget, and get ready to work with top-notch freelancers on your project.</p>
        </div>
        <!--   PAGE VIEW   -->
        <!--  Freelancer login success -->
        <div ng-if="ctrl.user.role === 'freelancer'">
            <div class="icon-roundy-square large-icon">
                <span class="icon-star large-icon-inner"></span>
            </div>
            <h1>What are your skills and expertise?</h1>
            <p>Select your skills on the full site and start bidding on projects relevant to you.</p>
            <a href="https://www.freelancer.com/sellers/skill-select.php" gaf-link class="btn btn-secondary select-skills-button" fl-analytics="GoToSelectSkills" fl-analytics-label="SelectSkills">
                <span class="icon-external-link"></span>
                Select your skills
            </a>
        </div>
    </section>

</div>