2017-12-05 16:48:26 +01:00
< div class = "margin-content" >
2018-06-04 16:21:17 +02:00
< div i18n class = "title-page title-page-single" >
2017-12-05 16:48:26 +01:00
Login
< / div >
2016-06-04 13:31:23 +02:00
2020-04-30 15:03:09 +02:00
< 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" >
2020-04-28 14:49:03 +02:00
< 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 >
2016-03-22 15:51:54 +01:00
2020-12-07 16:34:07 +01:00
< div class = "wrapper" >
< div class = "login-form-and-externals" >
2021-11-26 17:36:44 +01:00
< form myPluginSelector pluginSelectorId = "login-form" role = "form" ( ngSubmit ) = " login ( ) " [ formGroup ] = " form " >
2020-12-07 16:34:07 +01:00
< 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"
2021-08-17 14:42:53 +02:00
formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
2020-12-07 16:34:07 +01:00
>
< / div >
< div * ngIf = "formErrors.username" class = "form-error" >
{{ formErrors.username }}
< / div >
2021-07-20 13:47:49 +02:00
< div * ngIf = "hasUsernameUppercase()" i18n class = "form-warning" >
⚠️ Most email addresses do not include capital letters.
< / div >
2020-04-29 10:42:35 +02:00
< / div >
2018-03-28 18:22:59 +02:00
2020-12-07 16:34:07 +01:00
< div class = "form-group" >
< label i18n for = "password" > Password< / label >
2020-12-22 12:05:32 +01:00
< my-input-toggle-hidden formControlName = "password" inputId = "password"
2020-12-04 15:58:55 +01:00
i18n-placeholder placeholder="Password"
[ngClass]="{ 'input-error': formErrors['password'] }"
2020-12-09 13:01:00 +01:00
autocomplete="current-password" [tabindex]="2">< / my-input-toggle-hidden >
2020-12-07 16:34:07 +01:00
< div * ngIf = "formErrors.password" class = "form-error" >
{{ formErrors.password }}
< / div >
2020-04-29 10:42:35 +02:00
< / div >
2020-12-07 16:34:07 +01:00
2021-04-14 16:39:37 +02:00
< input type = "submit" class = "peertube-button orange-button" i18n-value value = "Login" [ disabled ] = " ! form . valid " >
2020-12-22 12:05:32 +01:00
2020-12-07 16:34:07 +01:00
< div class = "additionnal-links" >
2021-12-02 14:34:00 +01:00
< a i18n role = "button" class = "forgot-password-button" ( click ) = " openForgotPasswordModal ( ) " i18n-title title = "Click here to reset your password" > I forgot my password< / a >
2020-12-07 16:34:07 +01:00
< div * ngIf = "signupAllowed" class = "signup-link" >
< span > ·< / span >
< a i18n routerLink = "/signup" class = "create-an-account" > Create an account< / a >
< / div >
2020-04-29 10:42:35 +02:00
< / div >
2020-12-07 16:34:07 +01:00
< 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 >
2020-04-29 10:42:35 +02:00
2020-12-07 16:34:07 +01:00
< div class = "external-login-blocks" * ngIf = "getExternalLogins().length !== 0" >
< div class = "block-title" i18n > Or sign in with< / div >
2020-04-29 10:42:35 +02:00
2020-12-07 16:34:07 +01:00
< div >
< a class = "external-login-block" * ngFor = "let auth of getExternalLogins()" [ href ] = " getAuthHref ( auth ) " role = "button" >
{{ auth.authDisplayName }}
< / a >
< / div >
2020-04-28 14:49:03 +02:00
< / div >
2018-01-30 13:27:07 +01:00
< / div >
2017-04-21 18:26:09 +02:00
2020-12-07 16:34:07 +01:00
< div # instanceInformation class = "instance-information" >
< my-instance-about-accordion ( init ) = " onInstanceAboutAccordionInit ( $ event ) " [ panels ] = " instanceInformationPanels " > < / my-instance-about-accordion >
< / div >
< / div >
2020-04-28 14:49:03 +02:00
< / ng-container >
2017-04-21 18:26:09 +02:00
< / div >
2018-01-30 13:27:07 +01:00
2018-08-09 14:55:06 +02:00
< ng-template # forgotPasswordModal >
< div class = "modal-header" >
< h4 i18n class = "modal-title" > Forgot your password< / h4 >
2019-01-16 16:05:40 +01:00
< my-global-icon iconName = "cross" aria-label = "Close" role = "button" ( click ) = " hideForgotPasswordModal ( ) " > < / my-global-icon >
2018-08-09 14:55:06 +02:00
< / div >
2018-01-30 13:27:07 +01:00
2018-08-09 14:55:06 +02:00
< div class = "modal-body" >
2018-12-05 15:10:45 +01:00
< div * ngIf = "isEmailDisabled()" class = "alert alert-danger" i18n >
2019-09-23 08:17:42 +02:00
We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
2018-12-05 15:10:45 +01:00
< / div >
2020-11-24 13:47:24 +01:00
< div * ngIf = "!isEmailDisabled()" class = "forgot-password-instructions" i18n >
Enter your email address and we will send you a link to reset your password.
< / div >
2018-12-05 15:10:45 +01:00
< div class = "form-group" [ hidden ] = " isEmailDisabled ( ) " >
2018-08-09 14:55:06 +02:00
< 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 >
2018-01-30 13:27:07 +01:00
2018-08-09 14:55:06 +02:00
< div class = "modal-footer inputs" >
2020-04-02 11:39:14 +02:00
< input
2021-04-14 16:39:37 +02:00
type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
2020-04-02 11:39:14 +02:00
(click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
>
2018-01-30 13:27:07 +01:00
2018-08-09 14:55:06 +02:00
< input
2021-04-14 16:39:37 +02:00
type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
2018-08-09 14:55:06 +02:00
(click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
>
2018-01-30 13:27:07 +01:00
< / div >
2018-08-09 14:55:06 +02:00
< / ng-template >