]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - client/src/app/+login/login.component.html
Fix missing link orange
[github/Chocobozzz/PeerTube.git] / client / src / app / +login / login.component.html
1 <h1 i18n class="title-page-v2">
2 <strong class="underline-orange">{{ instanceName }}</strong>
3 >
4 Login
5 </h1>
6
7 <div class="margin-content">
8 <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
9
10 <div class="alert pt-alert-primary" role="alert">
11 <h5 class="alert-heading" i18n>
12 Logging into an account lets you publish content
13 </h5>
14
15 <p *ngIf="signupAllowed" i18n>
16 This instance allows registration. However, be careful to check the <a class="link-orange 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.
17 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>.
18 </p>
19
20 <p *ngIf="!signupAllowed" i18n>
21 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.
22 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>.
23 </p>
24 </div>
25
26 <div class="alert alert-danger" i18n *ngIf="externalAuthError">
27 Sorry but there was an issue with the external login process. Please <a class="link-orange" routerLink="/about">contact an administrator</a>.
28 </div>
29
30 <div *ngIf="error" class="alert alert-danger">
31 {{ error }}
32
33 <a *ngIf="error === 'User email is not verified.'" class="ms-1 link-orange" i18n routerLink="/verify-account/ask-send-email">
34 Request new verification email
35 </a>
36 </div>
37
38 <div class="wrapper">
39 <div class="login-form-and-externals">
40
41 <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
42 <div class="form-group">
43 <div>
44 <label i18n for="username">Username or email address</label>
45 <input
46 type="text" id="username" i18n-placeholder placeholder="Example: john@example.com" required tabindex="1"
47 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
48 >
49 </div>
50
51 <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div>
52
53 <div *ngIf="hasUsernameUppercase()" i18n class="form-warning">
54 ⚠️ Most email addresses do not include capital letters.
55 </div>
56 </div>
57
58 <div class="form-group">
59 <label i18n for="password">Password</label>
60
61 <my-input-text
62 formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
63 [formError]="formErrors['password']" autocomplete="current-password" [tabindex]="2"
64 ></my-input-text>
65 </div>
66
67 <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
68
69 <div class="additional-links">
70 <a i18n role="button" class="link-orange" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
71
72 <ng-container *ngIf="signupAllowed">
73 <span>·</span>
74 <a i18n routerLink="/signup" class="link-orange">Create an account</a>
75 </ng-container>
76 </div>
77 </form>
78
79 <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
80 <div class="block-title" i18n>Or sign in with</div>
81
82 <div>
83 <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
84 {{ auth.authDisplayName }}
85 </a>
86 </div>
87 </div>
88 </div>
89
90 <div #instanceInformation class="instance-information">
91 <my-instance-about-accordion
92 [displayInstanceName]="false"
93 (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
94 pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"
95 ></my-instance-about-accordion>
96 </div>
97 </div>
98 </ng-container>
99 </div>
100
101 <ng-template #forgotPasswordModal>
102 <div class="modal-header">
103 <h4 i18n class="modal-title">Forgot your password</h4>
104
105 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
106 </div>
107
108 <div class="modal-body">
109
110 <div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n>
111 We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
112 </div>
113
114 <div *ngIf="!isEmailDisabled()" class="forgot-password-instructions" i18n>
115 Enter your email address and we will send you a link to reset your password.
116 </div>
117
118 <div class="form-group" [hidden]="isEmailDisabled()">
119 <label i18n for="forgot-password-email">Email</label>
120 <input
121 type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
122 [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
123 >
124 </div>
125 </div>
126
127 <div class="modal-footer inputs">
128 <input
129 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
130 (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
131 >
132
133 <input
134 type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
135 (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
136 >
137 </div>
138 </ng-template>