<div style="margin: 10px;">
  <div class="container">
    <div class="row">
      <div class="offset-md-2 col-md-8 offset-lg-3 col-lg-6">

        <!-- Title -->
        <h1>Sign Up</h1>

        <!-- Form -->
        <div class="card">
          <div class="card-body">
            <form [formGroup]="form" (ngSubmit)="signUp()" *ngIf="form.getRawValue() as f">

              <!-- First Name -->
              <div class="form-group">
                <label for="inputFirstName">
                  First Name
                </label>
                <input
                  type="text"
                  class="form-control"
                  id="inputFirstName"
                  placeholder="Enter First Name"
                  formControlName="firstName">
              </div>

              <!-- Last Name -->
              <div class="form-group">
                <label for="inputLastName">
                  Last Name
                </label>
                <input
                  type="text"
                  class="form-control"
                  id="inputLastName"
                  placeholder="Enter Last Name"
                  formControlName="lastName">
              </div>

              <!-- Email Address -->
              <div class="form-group">
                <label for="inputEmail">
                  Email Address <i style="color: red;">*</i>
                </label>
                <input
                  type="email"
                  class="form-control"
                  id="inputEmail"
                  placeholder="Enter email"
                  formControlName="email">
              </div>

              <!-- Username -->
              <div class="form-group">
                <label for="inputUsername">
                  Username <i style="color: red;">*</i>
                </label>
                <input
                  type="text"
                  class="form-control"
                  id="inputUsername"
                  placeholder="Enter username"
                  formControlName="userName">
              </div>

              <!-- Gender -->
              <div class="form-group">
                <label for="inputGender">
                  Gender
                </label>
                <input
                  type="text"
                  class="form-control"
                  id="inputGender"
                  placeholder="Enter Gender"
                  formControlName="gender">
              </div>

              <!-- Address -->
              <div class="form-group">
                <label for="inputAddress">
                  Address
                </label>
                <input
                  type="text"
                  class="form-control"
                  id="inputAddress"
                  placeholder="Enter Address"
                  formControlName="address">
              </div>

              <!-- Birth Date -->
              <div class="form-group">
                <label for="inputBirthDate">
                  Birth Date
                </label>
                <input
                  type="date"
                  class="form-control"
                  id="inputBirthDate"
                  placeholder="Enter Birth Date"
                  formControlName="birthDate">
              </div>

              <!-- Phone number -->
              <div class="form-group">
                <label for="inputPhoneNumber">
                  Phone number
                </label>
                <input
                  type="text"
                  class="form-control"
                  id="inputPhoneNumber"
                  placeholder="Enter Phone Number"
                  formControlName="phoneNumber">
              </div>

              <!-- Profile picture -->
              <div class="form-group">

                <!-- Image Input -->
                <label for="inputImage">
                  Profile picture
                </label>
                <div class="custom-file" id="inputImage">
                  <input
                    type="file"
                    class="custom-file-input"
                    id="customFile"
                    (change)="fileSelected($event)">
                  <label class="custom-file-label" for="customFile">
                    {{fileName ? fileName : 'Choose Image'}}
                  </label>
                </div>

                <!-- Display selected Image -->
                <div *ngIf="imgSrc" style="display: flex;justify-content: center;">
                  <img style="width: 200px;height: 200px;border-radius: 50%;" [src]="imgSrc">
                </div>

                <!-- Remove Image Button -->
                <button
                  *ngIf="imgSrc"
                  type="button"
                  class="btn btn-outline-danger btn-block"
                  (click)="imgSrc = null">
                    Remove picture
                </button>

                <!-- Image Error -->
                <small *ngIf="imgError" class="form-text">
                  <i style="color: red;">{{imgError}}</i>
                </small>

              </div>

              <!-- Password -->
              <div class="form-group">
                <label for="inputPassword">
                  Password <i style="color: red;">*</i>
                </label>
                <input
                  type="password"
                  class="form-control"
                  id="inputPassword"
                  placeholder="Password"
                  formControlName="password">

                <!-- Password strength -->
                <small *ngIf="f.password" class="form-text">
                  <i
                    *ngIf="user.passwordStrength(f.password) as strength"
                    [style]="'color: ' + ['red', 'red', 'orange', 'green'][strength - 1]">
                      {{'•'.repeat(strength) + " " + ['Very weak', 'Weak', 'Medium', 'Strong'][strength -1]}}
                  </i>
                </small>

              </div>

              <!-- Password Confirmation -->
              <div class="form-group">

                <label for="inputRepeatPassword">
                  Repeat Password <i style="color: red;">*</i>
                </label>
                <input
                  type="password"
                  class="form-control"
                  id="inputRepeatPassword"
                  placeholder="Repeat Password"
                  formControlName="repeatPassword">

                <!-- Repeated password errors -->
                <small *ngIf="f.password && f.repeatPassword && f.password !== f.repeatPassword" class="form-text">
                  <i style="color: red;">Passwords don't match</i>
                </small>
              </div>


              <small class="form-text">
                <i style="color: red;">*</i> Required
              </small>
              <!-- Sign Up Button -->
              <button
                type="submit"
                class="btn btn-primary btn-block"
                [disabled]="!(f.userName && f.email && f.password && f.repeatPassword && f.password === f.repeatPassword)">
                  SIGN UP
              </button>

              <!-- Sign up errors-->
              <small *ngIf="error" class="form-text">
                <i style="color: red;">{{error}}</i>
              </small>

              <!-- Link to login page -->
              <a routerLink="/login">
                Already have an account? Log In
              </a>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

./signup.component.scss