aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+login/login.component.html
blob: 8ccc7361797292c720dd35a5d310c23438e4e00e (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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<h1 i18n class="title-page-v2">
  <strong class="underline-orange">{{ instanceName }}</strong>
  >
  Login
</h1>

<div class="margin-content">
  <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">

    <div class="alert pt-alert-primary" role="alert">
      <h5 class="alert-heading" i18n>
        Logging into an account lets you publish content
      </h5>

      <p *ngIf="signupAllowed" i18n>
        This instance allows registration. However, be careful to check the <a class="link-orange terms-anchor d-inline" (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: <a class="link-orange" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
      </p>

      <p *ngIf="!signupAllowed" i18n>
        Currently this instance doesn't allow for user registration, you may check the <a class="link-orange" (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: <a class="link-orange" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
      </p>
    </div>

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

    <div *ngIf="error" class="alert alert-danger">
      {{ error }}

      <a *ngIf="error === 'User email is not verified.'" class="ms-1 link-orange" i18n routerLink="/verify-account/ask-send-email">
        Request new verification email
      </a>
    </div>

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

        <form class="w-100 m-0" myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
          <ng-container *ngIf="!otpStep">
            <div class="form-group">
              <div>
                <label i18n for="username">Username or email address</label>
                <input
                  type="text" id="username" i18n-placeholder placeholder="Example: john@example.com" required tabindex="1"
                  formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
                >
              </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-text
                formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
                [formError]="formErrors['password']" autocomplete="current-password" [tabindex]="2"
              ></my-input-text>
            </div>
          </ng-container>

          <div *ngIf="otpStep" class="form-group">
            <p i18n>Enter the two-factor code generated by your phone app:</p>

            <label i18n for="otp-token">Two factor authentication token</label>

            <my-input-text
              #otpTokenInput
              [show]="true" formControlName="otp-token" inputId="otp-token"
              [formError]="formErrors['otp-token']" autocomplete="otp-token"
            ></my-input-text>
          </div>

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

          <div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5">
            <button i18n class="button-unstyle link-orange mx-3" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">
              I forgot my password
            </button>

            <ng-container *ngIf="signupAllowed">
              <span class="lh-1">·</span>
              <a i18n routerLink="/signup" class="link-orange mx-3">Create an account</a>
            </ng-container>
          </div>
        </form>

        <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
          <div class="fw-semibold" 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
          [displayInstanceName]="false"
          (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
          pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"
        ></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 text-start">

    <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="mb-4" 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 d-none d-sm-block"
      (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>