user-registration-component/user-registration.template.html

WCG -- AngularJS Component Library

<form>
    <div class="form-group">
        <label class="sr-only"  for="inputUsername">Username</label>
        <input class="form-control" autocomplete="username" type="text" placeholder="Username" />
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="form-group">
                <input class="form-control" autocomplete="new-password" type="password" ng-model="$ctrl.pwd" ng-change="$ctrl.checkStrength()" id="inputPassword"
                    placeholder="Password" />
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="form-group">
                <input class="form-control" autocomplete="new-password" type="password" id="inputConfirmPassword" placeholder="Confirm Password" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <label>Password Strength</label>
            <div class="gradient">
                <div ng-style="{ 'width': $ctrl.strength }"></div>
            </div>
        </div>
    </div>
    <div>
        <ul>
            <li>Password cannot be empty</li>
            <li>Must contain atleast one Uppercase character</li>
            <li>Must contain atleast one number</li>
            <li>Must contain one of these characters * @ _ .</li>
            <li>Must be of 8 characters in length</li>

        </ul>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6">
            <div class="form-group">
                <button  type="button" class="form-control btn btn-success">
                    Register
                </button>
            </div>
        </div>
    </div>
</form>