2022-06-15 14:29:28 +02:00
< h1 i18n class = "title-page-v2" >
< strong class = "underline-orange" > {{ instanceName }}< / strong >
>
Login
< / h1 >
2016-06-04 13:31:23 +02:00
2022-06-15 14:29:28 +02:00
< div class = "margin-content" >
2020-04-30 15:03:09 +02:00
< ng-container * ngIf = "!externalAuthError && !isAuthenticatedWithExternalAuth" >
2022-06-15 14:29:28 +02:00
< 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" ( 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 >
2022-06-21 11:28:46 +02:00
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.
2022-06-15 14:29:28 +02:00
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 >
2020-04-28 14:49:03 +02:00
< / div >
2016-03-22 15:51:54 +01:00
2022-06-16 16:10:12 +02:00
< 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 >
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 " >
2022-10-07 11:06:28 +02:00
< 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 >
2020-12-07 16:34:07 +01:00
< / div >
2022-10-07 11:06:28 +02:00
< div class = "form-group" >
< label i18n for = "password" > Password< / label >
2021-07-20 13:47:49 +02:00
2022-10-07 11:06:28 +02:00
< my-input-text
formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
[formError]="formErrors['password']" autocomplete="current-password" [tabindex]="2"
>< / my-input-text >
2021-07-20 13:47:49 +02:00
< / div >
2022-10-07 11:06:28 +02:00
< / ng-container >
< div * ngIf = "otpStep" class = "form-group" >
< p i18n > Enter the two-factor code generated by your phone app:< / p >
2018-03-28 18:22:59 +02:00
2022-10-07 11:06:28 +02:00
< label i18n for = "otp-token" > Two factor authentication token< / label >
2022-06-15 14:29:28 +02:00
2022-06-20 16:42:21 +02:00
< my-input-text
2022-10-07 11:06:28 +02:00
#otpTokenInput
[show]="true" formControlName="otp-token" inputId="otp-token"
[formError]="formErrors['otp-token']" autocomplete="otp-token"
2022-06-20 16:42:21 +02:00
>< / my-input-text >
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
2022-10-07 11:06:28 +02:00
< div * ngIf = "!otpStep" class = "additional-links" >
2022-06-15 14:29:28 +02:00
< a i18n role = "button" class = "link-orange" ( click ) = " openForgotPasswordModal ( ) " i18n-title title = "Click here to reset your password" > I forgot my password< / a >
2021-12-02 14:34:00 +01:00
2022-06-15 14:29:28 +02:00
< ng-container * ngIf = "signupAllowed" >
2020-12-07 16:34:07 +01:00
< span > ·< / span >
2022-06-15 14:29:28 +02:00
< a i18n routerLink = "/signup" class = "link-orange" > Create an account< / a >
< / ng-container >
2020-12-07 16:34:07 +01:00
< / 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" >
2022-01-20 09:35:06 +01:00
< my-instance-about-accordion
2022-06-15 14:29:28 +02:00
[displayInstanceName]="false"
2022-01-20 09:35:06 +01:00
(init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"
>< / my-instance-about-accordion >
2020-12-07 16:34:07 +01:00
< / 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 >