HOSN-app/app/src/pages/mock-login/mock-login.html

<ion-header>
    <ion-icon name="close" style="margin-top: 11px; margin-left: 9px;"></ion-icon>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <ion-icon name="lock"></ion-icon>&nbsp;
    <small><b>api.twitter.com</b></small>
    <ion-icon name="more" class="icon-more" style="float: right; margin-right: 31px; margin-top: 11px;"></ion-icon>
</ion-header>

<ion-content>
<div class="Register-twitter">
    <ion-icon name="logo-twitter" class="icon-twitterlogo" style="color: #1DA1F2; size: 5px; margin-top: 11px; margin-left: 11px;"></ion-icon>
    <small class="register">Register on twitter ></small>
</div>

<div style="margin-left: 15px;">
<h1>HOSN Twitter(TU Darmstadt) grant access to your account?</h1>    
</div>

<div class="twitter-api-logo">
    <img src="assets/imgs/twitter-api.PNG" alt="Logo">
    <div class="second_header"><span class="sh_header">HOSN Twitter(TU Darmstadt)</span>
    www.tk.informatik.tu-darmstadt.de/de/telecooperation-group/</div>
</div>


<form [formGroup]="loginForm" class="login" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
            <div *ngIf="f.username.errors.required">Username is required
            </div>
        </div>
        <input type="text" formControlName="username" placeholder="Nutzername oder E-mail" class="form-control username1" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />

    </div>
    <div class="form-group">
      <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
            <div *ngIf="f.password.errors.required">Password is required</div>
        </div>
        <input type="password" formControlName="password" placeholder="Passwort"  class="form-control password1" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
        
    </div>

    <div>
        <input type="checkbox" name="remember" value="Bike"> Remember me . <span class="forgot_pass" style="color: #1DA1F2;">Forgot your password?</span>
    </div>

    <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary login-btn">Log In</button>
        <button [disabled]="loading" class="btn btn-primary close-btn">Cancel</button>       
    </div>
</form>

<div>
    <p style="color: #1DA1F2; margin-left: 15px;">This application can:</p>
    <ul>
      <li>See tweets (including protected tweets) from your timeline, as well as your lists and collections.</li>
      <li>See your Twitter profile information and account settings.</li>
      <li>See accounts that you are following or that you have muted and blocked.</li>
      <li>Follow and unroll accounts for you.</li>
      <li>Update your profile and account settings.</li>
      <li>Post and delete tweets for you, and interact with tweets that others have posted for you (e.g., like and un-like, like, reply to a tweet, or send a retweet).</li>
      <li>Create, manage and delete lists and collections for you.</li>
      <li>Mute, block and report accounts for you.</li>
      <li>You can find out more about permissions for third-party apps in the Help Center.</li>
    </ul> 
</div>
</ion-content>