Sup_File/src/app/home/home.component.html

<!--Main Navigation-->


  <!--Navbar-->
  <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
    <logo>
      <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
    </logo>
    <links>
      <ul class="navbar-nav mr-auto">
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" mdbPageScroll href="#introSection" [pageScrollDuration]="600">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" mdbPageScroll href="#featuresSection" [pageScrollDuration]="600">Features</a>
        </li>
        <li class="nav-item waves-light" mdbWavesEffect>
          <a class="nav-link" mdbPageScroll href="#teamSection" [pageScrollDuration]="600">Team</a>
        </li>
      </ul>
    </links>
  </mdb-navbar>

  <!--Intro Section-->
  <section class="view intro-2 mask rgba-gradient" id="introSection">
    <div class="full-bg-img mask rgba-gradient">
      <div class="container flex-center">
        <div class="d-flex align-items-center content-height w-100">
          <div class="row flex-center pt-5 mt-3 w-100">
            <div class="col-md-6 text-center text-md-left mb-5">
              <div class="white-text">
                <h1 class="h1-responsive font-bold wow fadeInLeft" data-wow-delay="0.3s">Sign up right now! </h1>
                <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
                <h6 class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</h6>
                <br>
                <a class="btn btn-outline-white wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbWavesEffect>Learn more</a>
              </div>
            </div>

            <div class="col-md-6 col-xl-5 offset-xl-1">
              <!--Form-->
              <div *ngIf="registerbool===false" class="card wow flipInY" data-wow-delay="0.3s">
                <div class="card-body">
                  <!--Header-->
                  <div class="text-center">
                    <h3 class="white-text"><i class="fa fa-user white-text"></i> Log in:</h3>

                    <hr class="hr-light">
                  </div>

                  <!--Body-->
                  <div class="md-form">
                    <i class="fa fa-envelope prefix white-text"></i>
                    <input type="email" id="form2" class="form-control" [(ngModel)]="loginData.username" data-error=" " data-success=" " mdbInputDirective>
                    <label for="form2">Email</label>
                  </div>

                  <div class="md-form">
                    <i class="fa fa-lock prefix white-text"></i>
                    <input type="password" id="form4" class="form-control" [(ngModel)]="loginData.password" data-error=" " data-success=" " mdbInputDirective>
                    <label for="form4">Password</label>
                  </div>

                  <div class="text-center">
                    <button class="btn btn-primary waves-light" mdbWavesEffect (click)="login()">Log In</button>
                    <button class="btn btn-secondary waves-light" mdbWavesEffect (click)="showregister()">Sign up</button>
                    <hr class="hr-light mb-3 mt-4">
                    <div class="inline-ul text-center d-flex justify-content-center">
                      <a class="icons-sm fb-ic px-4"><i class="fa fa-facebook white-text"> </i></a>
                      <a class="icons-sm gplus-ic px-4"><i class="fa fa-google white-text"> </i></a>
                      <a class="icons-sm px-4"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
                    </div>
                  </div>

                </div>
              </div>
              <!--/.Form-->



              <!--Form-->
              <div *ngIf="registerbool" class="card wow flipInY" data-wow-delay="0.3s">
                <div class="card-body">
                  <!--Header-->
                  <div class="text-center">
                    <h3 class="white-text"><i class="fa fa-user white-text"></i> Register:</h3>
                    <hr class="hr-light">
                  </div>

                  <!--Body-->
                  <!--<div class="md-form">-->
                    <!--<i class="fa fa-user prefix white-text"></i>-->
                    <!--<input type="text" id="form3" class="form-control" data-success=" " data-error=" " mdbInputDirective>-->
                    <!--<label for="form3">Your name</label>-->
                  <!--</div>-->
                  <div class="md-form">
                    <i class="fa fa-envelope prefix white-text"></i>
                    <input type="email" id="form2" data-error="wrong email" data-success=" " data-error=" " [(ngModel)]="signupData.username" class="form-control" mdbInputDirective>
                    <label for="form2">Your email</label>
                  </div>

                  <div class="md-form">
                    <i class="fa fa-lock prefix white-text"></i>
                    <input type="password" id="form4" data-success=" " data-error=" " [(ngModel)]="signupData.password" class="form-control"  mdbInputDirective>
                    <label for="form4">Your password</label>
                  </div>

                  <div class="text-center">
                    <button class="btn btn-primary waves-light" (click)="signup()" mdbWavesEffect>Sign up</button>
                    <button class="btn btn-secondary waves-light" mdbWavesEffect (click)="showregister()">Log In</button>
                    <hr class="hr-light mb-3 mt-4">

                    <div class="inline-ul text-center d-flex justify-content-center">
                      <a class="icons-sm fb-ic px-4" (click)="facebook()"><i class="fa fa-facebook white-text"> </i></a>
                      <a class="icons-sm gplus-ic px-4" onclick="location.href='/api/github'" ><i class="fa fa-google white-text"> </i></a>
                      <a class="icons-sm px-4" onclick="location.href='/api/google'"><i class="fa fa-github white-text" aria-hidden="true"></i></a>
                    </div>
                  </div>

                </div>
              </div>
              <!--/.Form-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>


<!--Main Navigation-->

<!--Section: Features v.1-->
<section class="features text-center" id="featuresSection">

  <div class="container-fluid wow fadeInDown">
    <!--Section heading-->
    <h2 class="h1 py-5 font-weight-bold">Why is it so great?</h2>
    <!--Section description-->
    <p class="px-5 mb-5 pb-3 lead grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam.</p>
  </div>

  <!--Grid row-->
  <div class="row">

    <!--Grid column-->
    <div class="col-md-4 wow fadeInLeft">
      <i class="fa fa-area-chart fa-3x red-text"></i>
      <h5 class="font-weight-bold mt-3">Analytics</h5>
      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
        deleniti hic.
      </p>
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-md-4 wow fadeInUp">
      <i class="fa fa-book fa-3x cyan-text"></i>
      <h5 class="font-weight-bold mt-3">Tutorials</h5>
      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
        deleniti hic.
      </p>
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-md-4 wow fadeInRight">
      <i class="fa fa-comments-o fa-3x orange-text"></i>
      <h5 class="font-weight-bold mt-3">Support</h5>
      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda
        deleniti hic.
      </p>
    </div>
    <!--Grid column-->

  </div>
  <!--Grid row-->

</section>
<!--Section: Features v.1-->

<hr id="teamSection">

<!-- Section: Team v.3 -->
<section class="team-section my-5">

  <div class="container-fluid wow fadeInDown">
    <!-- Section heading -->
    <h2 class="h1-responsive font-weight-bold text-center my-5">Our amazing team</h2>
    <!-- Section description -->
    <p class="grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,
      veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>
  </div>
  <!-- Grid row-->
  <div class="row text-center text-md-left wow fadeInLeft">

    <!-- Grid column -->
    <div class="col-lg-6 col-md-12 mb-5">
      <div class="col-md-4 col-lg-6 float-left">
        <div class="avatar mx-auto mb-md-0 mb-4">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
        </div>
      </div>
      <div class="col-md-8 col-lg-6 float-right">
        <h4 class="font-weight-bold mb-3">John Doe</h4>
        <h6 class="font-weight-bold grey-text mb-3">Web Designer</h6>
        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
        <!-- Facebook-->
        <a class="p-2 fa-lg fb-ic">
          <i class="fa fa-facebook"> </i>
        </a>
        <!-- Twitter -->
        <a class="p-2 fa-lg tw-ic">
          <i class="fa fa-twitter"> </i>
        </a>
        <!-- GitHub-->
        <a class="p-2 fa-lg git-ic">
          <i class="fa fa-github"> </i>
        </a>
      </div>
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-6 col-md-12 mb-5">
      <div class="col-md-4 col-lg-6 float-left">
        <div class="avatar mx-auto mb-md-0 mb-4">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded z-depth-1" alt="Sample avatar">
        </div>
      </div>
      <div class="col-md-8 col-lg-6 float-right">
        <h4 class="font-weight-bold mb-3">Maria Kate</h4>
        <h6 class="font-weight-bold grey-text mb-3">Photographer</h6>
        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
        <!-- Facebook-->
        <a class="p-2 fa-lg fb-ic">
          <i class="fa fa-facebook"> </i>
        </a>
        <!-- Twitter -->
        <a class="p-2 fa-lg tw-ic">
          <i class="fa fa-twitter"> </i>
        </a>
        <!-- GitHub-->
        <a class="p-2 fa-lg git-ic">
          <i class="fa fa-github"> </i>
        </a>
      </div>
    </div>
    <!-- Grid column -->

  </div>
  <!-- Grid row-->

  <!-- Grid row-->
  <div class="row text-center text-md-left wow fadeInRight">

    <!-- Grid column -->
    <div class="col-lg-6 col-md-12 mb-lg-0 mb-5">
      <div class="col-md-4 col-lg-6 float-left">
        <div class="avatar mx-auto mb-md-0 mb-4">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
        </div>
      </div>
      <div class="col-md-8 col-lg-6 float-right">
        <h4 class="font-weight-bold mb-3">Anna Deynah</h4>
        <h6 class="font-weight-bold grey-text mb-3">Web Developer</h6>
        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
        <!-- Facebook-->
        <a class="p-2 fa-lg fb-ic">
          <i class="fa fa-facebook"> </i>
        </a>
        <!-- Twitter -->
        <a class="p-2 fa-lg tw-ic">
          <i class="fa fa-twitter"> </i>
        </a>
        <!-- GitHub-->
        <a class="p-2 fa-lg git-ic">
          <i class="fa fa-github"> </i>
        </a>
      </div>
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-6 col-md-12">
      <div class="col-md-4 col-lg-6 float-left">
        <div class="avatar mx-auto mb-md-0 mb-4">
          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" class="rounded z-depth-1" alt="Sample avatar">
        </div>
      </div>
      <div class="col-md-8 col-lg-6 float-right">
        <h4 class="font-weight-bold mb-3">Sarah Melyah</h4>
        <h6 class="font-weight-bold grey-text mb-3">Front-end Developer</h6>
        <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur.</p>
        <!-- Facebook-->
        <a class="p-2 fa-lg fb-ic">
          <i class="fa fa-facebook"> </i>
        </a>
        <!-- Twitter -->
        <a class="p-2 fa-lg tw-ic">
          <i class="fa fa-twitter"> </i>
        </a>
        <!-- GitHub-->
        <a class="p-2 fa-lg git-ic">
          <i class="fa fa-github"> </i>
        </a>
      </div>
    </div>
    <!-- Grid column -->

  </div>
  <!-- Grid row-->

</section>
<!-- Section: Team v.3 -->

<!--Footer-->
<footer class="page-footer mdb-color text-center text-md-left pt-4 mt-4">

  <!--Social buttons-->
  <div class="text-center mb-3">

    <a class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
      <i class="fa fa-facebook"> </i>
    </a>
    <a class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
      <i class="fa fa-twitter"> </i>
    </a>
    <a class="btn-floating btn-small btn-gplus waves-light" mdbWavesEffect>
      <i class="fa fa-google-plus"> </i>
    </a>

  </div>
  <!--/.Social buttons-->

  <!--Copyright-->
  <div class="footer-copyright text-center py-3">
    <div class="container-fluid">
      © 2018 Copyright:
      <a href="https://www.MDBootstrap.com"> Nom </a>

    </div>
  </div>
  <!--/.Copyright-->

</footer>
<!--/.Footer-->

<button (click)="facebook()" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></button>
<a onclick="location.href='/api/facebook'">Login with face</a>