OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve login page UI

pull/5067/head
Chocobozzz 2022-06-15 14:29:28 +02:00
parent 428025432b
commit 1105696623
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
7 changed files with 146 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
client/src/app/+login/login.component.html
View File

@ -1,15 +1,37 @@
<div class="margin-content"> <h1 i18n class="title-page-v2">
<div i18n class="title-page title-page-single"> <strong class="underline-orange">{{ instanceName }}</strong>
Login >
</div> Login
</h1>
<div class="margin-content">
<div class="alert alert-danger" i18n *ngIf="externalAuthError"> <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>. Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
</div> </div>
<ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth"> <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
<div *ngIf="error" class="alert alert-danger">{{ error }} <div *ngIf="error" class="alert alert-danger">
<span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span> {{ 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="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>
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: <a class="link-orange" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
</p>
</div> </div>
<div class="wrapper"> <div class="wrapper">
@ -18,16 +40,14 @@
<form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form"> <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
<div class="form-group"> <div class="form-group">
<div> <div>
<label i18n for="username">User</label> <label i18n for="username">Username or email address</label>
<input <input
type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1" 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 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
> >
</div> </div>
<div *ngIf="formErrors.username" class="form-error"> <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div>
{{ formErrors.username }}
</div>
<div *ngIf="hasUsernameUppercase()" i18n class="form-warning"> <div *ngIf="hasUsernameUppercase()" i18n class="form-warning">
⚠️ Most email addresses do not include capital letters. ⚠️ Most email addresses do not include capital letters.
@ -36,40 +56,24 @@
<div class="form-group"> <div class="form-group">
<label i18n for="password">Password</label> <label i18n for="password">Password</label>
<my-input-text formControlName="password" inputId="password" <my-input-text formControlName="password" inputId="password"
i18n-placeholder placeholder="Password" i18n-placeholder placeholder="Password"
[ngClass]="{ 'input-error': formErrors['password'] }" [ngClass]="{ 'input-error': formErrors['password'] }"
autocomplete="current-password" [tabindex]="2"></my-input-text> autocomplete="current-password" [tabindex]="2"></my-input-text>
<div *ngIf="formErrors.password" class="form-error">
{{ formErrors.password }} <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
</div>
</div> </div>
<input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid"> <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
<div class="additionnal-links"> <div class="additional-links">
<a i18n role="button" class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a> <a i18n role="button" class="link-orange" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
<div *ngIf="signupAllowed" class="signup-link"> <ng-container *ngIf="signupAllowed">
<span>·</span> <span>·</span>
<a i18n routerLink="/signup" class="create-an-account">Create an account</a> <a i18n routerLink="/signup" class="link-orange">Create an account</a>
</div> </ng-container>
</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> </div>
</form> </form>
@ -86,6 +90,7 @@
<div #instanceInformation class="instance-information"> <div #instanceInformation class="instance-information">
<my-instance-about-accordion <my-instance-about-accordion
[displayInstanceName]="false"
(init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels" (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result" pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"
></my-instance-about-accordion> ></my-instance-about-accordion>

175
client/src/app/+login/login.component.scss
View File

@ -6,6 +6,8 @@
label { label {
display: block; display: block;
font-size: 18px;
margin-bottom: 5px;
} }
input[type=text], input[type=text],
@ -21,7 +23,7 @@ input[type=email] {
} }
} }
@media screen and (max-width: #{map-get($container-max-widths, sm)}) { @media screen and (max-width: $small-view) {
.modal-body { .modal-body {
#forgot-password-email { #forgot-password-email {
width: 100%; width: 100%;
@ -33,114 +35,103 @@ input[type=email] {
} }
} }
.create-an-account,
.forgot-password-button {
color: pvar(--mainForegroundColor);
cursor: pointer;
transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
&:hover {
text-decoration: none !important;
opacity: .7 !important;
}
}
.wrapper { .wrapper {
display: flex; display: flex;
justify-content: space-around; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
margin: auto;
> div { > div {
flex: 1 1; flex: 1 1;
} }
.login-form-and-externals { form {
@include margin-left(10px); width: 100%;
@include margin-right(10px); }
}
.wrapper,
.pt-alert-primary {
max-width: 1200px;
}
.pt-alert-primary {
margin: 0 auto 30px;
}
.login-form-and-externals {
@include margin-left(10px);
@include margin-right(10px);
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 15px;
max-width: 450px;
margin-bottom: 40px;
form {
margin: 0;
input[type=submit] {
width: 100%;
}
.additional-links {
display: flex;
justify-content: center;
margin: 20px 0 30px;
.link-orange {
margin: 0 15px;
}
}
}
}
.external-login-blocks {
min-width: 200px;
text-align: center;
.block-title {
font-weight: $font-semibold;
}
.external-login-block {
@include disable-default-a-behaviour;
cursor: pointer;
border: 1px solid #d1d7e0;
border-radius: 5px;
color: pvar(--mainForegroundColor);
margin: 10px 10px 0 0;
display: flex; display: flex;
flex-wrap: wrap; justify-content: center;
font-size: 15px; align-items: center;
max-width: 450px; min-height: 35px;
margin-bottom: 40px; min-width: 100px;
form { &:hover {
margin: 0; background-color: rgba(209, 215, 224, 0.5);
&,
input {
width: 100%;
}
.additionnal-links {
display: block;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
.forgot-password-button,
.create-an-account {
padding: 4px;
display: inline-block;
color: var(--mainColor);
&:hover,
&:active {
color: var(--mainHoverColor);
}
}
}
}
.external-login-blocks {
min-width: 200px;
.block-title {
font-weight: $font-semibold;
}
.external-login-block {
@include disable-default-a-behaviour;
cursor: pointer;
border: 1px solid #d1d7e0;
border-radius: 5px;
color: pvar(--mainForegroundColor);
margin: 10px 10px 0 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 35px;
min-width: 100px;
&:hover {
background-color: rgba(209, 215, 224, 0.5);
}
}
}
.signup-link {
display: inline-block;
} }
} }
}
.instance-information { .instance-information {
@include margin-left(10px); @include margin-left(10px);
@include margin-right(10px); @include margin-right(10px);
max-width: 600px; max-width: 600px;
min-width: 350px; min-width: 350px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.terms-anchor { .terms-anchor {
display: inline; display: inline;
} }
.terms-link { .terms-link {
display: none; display: none;
}
} }
@mixin column-reverse-display { @mixin column-reverse-display {

4
client/src/app/+login/login.component.ts
View File

@ -59,6 +59,10 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
return this.serverConfig.signup.allowed === true return this.serverConfig.signup.allowed === true
} }
get instanceName () {
return this.serverConfig.instance.name
}
onTermsClick (event: Event, instanceInformation: HTMLElement) { onTermsClick (event: Event, instanceInformation: HTMLElement) {
event.preventDefault() event.preventDefault()

4
client/src/app/+signup/+register/register.component.html
View File

@ -1,11 +1,11 @@
<div> <div>
<div class="signup-disabled" *ngIf="signupDisabled"> <div class="margin-content signup-disabled" *ngIf="signupDisabled">
<div class="alert alert-warning" i18n>Signup is not enabled on this instance.</div> <div class="alert alert-warning" i18n>Signup is not enabled on this instance.</div>
</div> </div>
<ng-container *ngIf="!signupDisabled"> <ng-container *ngIf="!signupDisabled">
<h1 i18n class="header-title"> <h1 i18n class="title-page-v2">
<strong class="underline-orange">{{ instanceName }}</strong> <strong class="underline-orange">{{ instanceName }}</strong>
> >
Create an account Create an account

5
client/src/app/+signup/+register/register.component.scss
View File

@ -10,11 +10,8 @@
padding-top: 30vh; padding-top: 30vh;
} }
.header-title { .title-page-v2 {
font-weight: normal;
font-size: 15px;
background-color: pvar(--mainColorVeryLight); background-color: pvar(--mainColorVeryLight);
padding: 35px 25px 15px;
margin: 0; margin: 0;
} }

8
client/src/index.html
View File

@ -50,8 +50,8 @@
<ul> <ul>
<li>Allow JavaScript in your browser</li> <li>Allow JavaScript in your browser</li>
<li>Use one of the <a class="alert-link" href="https://framagit.org/framasoft/peertube/documentation/-/raw/master/use-third-party-application.md" target="_blank">third-party applications</a> to browse this instance</li> <li>Use one of the <a class="link-orange" href="https://framagit.org/framasoft/peertube/documentation/-/raw/master/use-third-party-application.md" target="_blank">third-party applications</a> to browse this instance</li>
<li>Review the source code on <a class="alert-link" href="https://github.com/Chocobozzz/PeerTube" target="_blank">GitHub</a> or <a class="alert-link" href="https://framagit.org/framasoft/peertube/PeerTube" target="_blank">Framasoft's GitLab</a>, and ask for eventual modifications to the instance owner. <li>Review the source code on <a class="link-orange" href="https://github.com/Chocobozzz/PeerTube" target="_blank">GitHub</a> or <a class="link-orange" href="https://framagit.org/framasoft/peertube/PeerTube" target="_blank">Framasoft's GitLab</a>, and ask for eventual modifications to the instance owner.
</ul> </ul>
</noscript> </noscript>
@ -62,8 +62,8 @@
<p>We are sorry but it seems that PeerTube is not compatible with your web browser.</p> <p>We are sorry but it seems that PeerTube is not compatible with your web browser.</p>
<hr> <hr>
<p>Please try with the latest version of <a class="alert-link" href="https://www.mozilla.org" target="_blank">Mozilla Firefox</a>.</p> <p>Please try with the latest version of <a class="link-orange" href="https://www.mozilla.org" target="_blank">Mozilla Firefox</a>.</p>
<p class="mb-0">If you think this is a mistake, please <a class="alert-link" href="https://github.com/Chocobozzz/PeerTube/issues/new" target="_blank">report it</a>.</p> <p class="mb-0">If you think this is a mistake, please <a class="link-orange" href="https://github.com/Chocobozzz/PeerTube/issues/new" target="_blank">report it</a>.</p>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">

14
client/src/sass/class-helpers.scss
View File

@ -6,7 +6,7 @@
.link-orange { .link-orange {
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
font-weight: $font-bold; font-weight: $font-bold;
border-bottom: 3px solid pvar(--mainColor); border-bottom: 0.20em solid pvar(--mainColor);
&:hover { &:hover {
color: pvar(--mainForegroundColor); color: pvar(--mainForegroundColor);
@ -16,7 +16,7 @@
.underline-orange { .underline-orange {
display: inline-block; display: inline-block;
border-bottom: 3px solid pvar(--mainColor); border-bottom: 0.20em solid pvar(--mainColor);
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@ -140,6 +140,12 @@ label + .form-group-description {
} }
} }
.title-page-v2 {
font-weight: normal;
font-size: 15px;
padding: 35px 25px;
}
.title-page-about, .title-page-about,
.title-page-settings { .title-page-settings {
white-space: nowrap; white-space: nowrap;
@ -240,6 +246,10 @@ label + .form-group-description {
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
.alert { .alert {
p {
font-size: 16px;
}
p:last-child { p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }