aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+login/login.component.html
blob: 27793ff0cc9345447614f5f8914aff1bd2e440ac (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<div class="margin-content">
  <div i18n class="title-page title-page-single">
    Login
  </div>

  <div class="alert alert-danger" i18n *ngIf="externalAuthError">
    Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
  </div>

  <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
    <div *ngIf="error" class="alert alert-danger">{{ error }}
      <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span>
    </div>

    <div class="wrapper">
      <div class="login-form-and-externals">

        <form role="form" (ngSubmit)="login()" [formGroup]="form">
          <div class="form-group">
            <div>
              <label i18n for="username">User</label>
              <input
                type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
                formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" autofocus
              >
            </div>

            <div *ngIf="formErrors.username" class="form-error">
              {{ formErrors.username }}
            </div>

            <div *ngIf="hasUsernameUppercase()" i18n class="form-warning">
              ⚠️ Most email addresses do not include capital letters.
            </div>
          </div>

          <div class="form-group">
            <label i18n for="password">Password</label>
            <my-input-toggle-hidden formControlName="password" inputId="password"
                                    i18n-placeholder placeholder="Password"
                                    [ngClass]="{ 'input-error': formErrors['password'] }"
                                    autocomplete="current-password" [tabindex]="2"></my-input-toggle-hidden>
            <div *ngIf="formErrors.password" class="form-error">
              {{ formErrors.password }}
            </div>
          </div>

          <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">

          <div class="additionnal-links">
            <a i18n class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
            <div *ngIf="signupAllowed" class="signup-link">
              <span>·</span>
              <a i18n routerLink="/signup" class="create-an-account">Create an account</a>
            </div>
          </div>

          <div class="looking-for-account alert alert-info"  role="alert">
            <h6 class="alert-heading" i18n>
              Logging into an account lets you publish content
            </h6>

            <div *ngIf="signupAllowed" i18n>
              This instance allows registration. However, be careful to check the <a class="terms-anchor" (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a><a class="terms-link" target="_blank" routerLink="/about/instance" fragment="terms">Terms</a> before creating an account.
              You may also search for another instance to match your exact needs at: <br /><a class="alert-link" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
            </div>

            <div *ngIf="!signupAllowed" i18n>
              Currently this instance doesn't allow for user registration, you may check the <a (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a> for more details or find an instance that gives you the possibility to sign up for an account and upload your videos there.
              Find yours among multiple instances at: <br /> <a class="alert-link" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
            </div>
          </div>
        </form>

        <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
          <div class="block-title" i18n>Or sign in with</div>

          <div>
            <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
              {{ auth.authDisplayName }}
            </a>
          </div>
        </div>
      </div>

      <div #instanceInformation class="instance-information">
        <my-instance-about-accordion (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"></my-instance-about-accordion>
      </div>
    </div>
  </ng-container>
</div>

<ng-template #forgotPasswordModal>
  <div class="modal-header">
    <h4 i18n class="modal-title">Forgot your password</h4>

    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
  </div>

  <div class="modal-body">

    <div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n>
      We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
    </div>

    <div *ngIf="!isEmailDisabled()" class="forgot-password-instructions" i18n>
      Enter your email address and we will send you a link to reset your password.
    </div>

    <div class="form-group" [hidden]="isEmailDisabled()">
      <label i18n for="forgot-password-email">Email</label>
      <input
        type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
        [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
      >
    </div>
  </div>

  <div class="modal-footer inputs">
    <input
      type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
      (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
    >

    <input
      type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
      (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
    >
  </div>
</ng-template>