aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-15 14:29:28 +0200
committerChocobozzz <me@florianbigard.com>2022-06-15 14:32:30 +0200
commit1105696623c4b691bf2d44489ad25a752cbd8cc7 (patch)
treedea539b64cd3aab542444a4905146bbe72355d5e
parent428025432b111dcee90ba4a47eeaac8b03f4c4f6 (diff)
downloadPeerTube-1105696623c4b691bf2d44489ad25a752cbd8cc7.tar.gz
PeerTube-1105696623c4b691bf2d44489ad25a752cbd8cc7.tar.zst
PeerTube-1105696623c4b691bf2d44489ad25a752cbd8cc7.zip
Improve login page UI
-rw-r--r--client/src/app/+login/login.component.html75
-rw-r--r--client/src/app/+login/login.component.scss155
-rw-r--r--client/src/app/+login/login.component.ts4
-rw-r--r--client/src/app/+signup/+register/register.component.html4
-rw-r--r--client/src/app/+signup/+register/register.component.scss5
-rw-r--r--client/src/index.html8
-rw-r--r--client/src/sass/class-helpers.scss14
7 files changed, 136 insertions, 129 deletions
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index a2d8dae2a..10e25a936 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -1,15 +1,37 @@
1<div class="margin-content"> 1<h1 i18n class="title-page-v2">
2 <div i18n class="title-page title-page-single"> 2 <strong class="underline-orange">{{ instanceName }}</strong>
3 Login 3 >
4 </div> 4 Login
5</h1>
5 6
7<div class="margin-content">
6 <div class="alert alert-danger" i18n *ngIf="externalAuthError"> 8 <div class="alert alert-danger" i18n *ngIf="externalAuthError">
7 Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>. 9 Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
8 </div> 10 </div>
9 11
10 <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth"> 12 <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
11 <div *ngIf="error" class="alert alert-danger">{{ error }} 13 <div *ngIf="error" class="alert alert-danger">
12 <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span> 14 {{ error }}
15
16 <span *ngIf="error === 'User email is not verified.'">
17 <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a>
18 </span>
19 </div>
20
21 <div class="alert pt-alert-primary" role="alert">
22 <h5 class="alert-heading" i18n>
23 Logging into an account lets you publish content
24 </h5>
25
26 <p *ngIf="signupAllowed" i18n>
27 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.
28 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>.
29 </p>
30
31 <p *ngIf="!signupAllowed" i18n>
32 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.
33 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>.
34 </p>
13 </div> 35 </div>
14 36
15 <div class="wrapper"> 37 <div class="wrapper">
@@ -18,16 +40,14 @@
18 <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form"> 40 <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
19 <div class="form-group"> 41 <div class="form-group">
20 <div> 42 <div>
21 <label i18n for="username">User</label> 43 <label i18n for="username">Username or email address</label>
22 <input 44 <input
23 type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1" 45 type="text" id="username" i18n-placeholder placeholder="Example: john@example.com" required tabindex="1"
24 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus 46 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
25 > 47 >
26 </div> 48 </div>
27 49
28 <div *ngIf="formErrors.username" class="form-error"> 50 <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div>
29 {{ formErrors.username }}
30 </div>
31 51
32 <div *ngIf="hasUsernameUppercase()" i18n class="form-warning"> 52 <div *ngIf="hasUsernameUppercase()" i18n class="form-warning">
33 ⚠️ Most email addresses do not include capital letters. 53 ⚠️ Most email addresses do not include capital letters.
@@ -36,40 +56,24 @@
36 56
37 <div class="form-group"> 57 <div class="form-group">
38 <label i18n for="password">Password</label> 58 <label i18n for="password">Password</label>
59
39 <my-input-text formControlName="password" inputId="password" 60 <my-input-text formControlName="password" inputId="password"
40 i18n-placeholder placeholder="Password" 61 i18n-placeholder placeholder="Password"
41 [ngClass]="{ 'input-error': formErrors['password'] }" 62 [ngClass]="{ 'input-error': formErrors['password'] }"
42 autocomplete="current-password" [tabindex]="2"></my-input-text> 63 autocomplete="current-password" [tabindex]="2"></my-input-text>
43 <div *ngIf="formErrors.password" class="form-error"> 64
44 {{ formErrors.password }} 65 <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
45 </div>
46 </div> 66 </div>
47 67
48 <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid"> 68 <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
49 69
50 <div class="additionnal-links"> 70 <div class="additional-links">
51 <a i18n role="button" class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a> 71 <a i18n role="button" class="link-orange" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
52 72
53 <div *ngIf="signupAllowed" class="signup-link"> 73 <ng-container *ngIf="signupAllowed">
54 <span>·</span> 74 <span>·</span>
55 <a i18n routerLink="/signup" class="create-an-account">Create an account</a> 75 <a i18n routerLink="/signup" class="link-orange">Create an account</a>
56 </div> 76 </ng-container>
57 </div>
58
59 <div class="looking-for-account alert alert-info" role="alert">
60 <h6 class="alert-heading" i18n>
61 Logging into an account lets you publish content
62 </h6>
63
64 <div *ngIf="signupAllowed" i18n>
65 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.
66 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>.
67 </div>
68
69 <div *ngIf="!signupAllowed" i18n>
70 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.
71 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>.
72 </div>
73 </div> 77 </div>
74 </form> 78 </form>
75 79
@@ -86,6 +90,7 @@
86 90
87 <div #instanceInformation class="instance-information"> 91 <div #instanceInformation class="instance-information">
88 <my-instance-about-accordion 92 <my-instance-about-accordion
93 [displayInstanceName]="false"
89 (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels" 94 (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
90 pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result" 95 pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"
91 ></my-instance-about-accordion> 96 ></my-instance-about-accordion>
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index e59ae10f8..f46cbf2bc 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -6,6 +6,8 @@
6 6
7label { 7label {
8 display: block; 8 display: block;
9 font-size: 18px;
10 margin-bottom: 5px;
9} 11}
10 12
11input[type=text], 13input[type=text],
@@ -21,7 +23,7 @@ input[type=email] {
21 } 23 }
22} 24}
23 25
24@media screen and (max-width: #{map-get($container-max-widths, sm)}) { 26@media screen and (max-width: $small-view) {
25 .modal-body { 27 .modal-body {
26 #forgot-password-email { 28 #forgot-password-email {
27 width: 100%; 29 width: 100%;
@@ -33,114 +35,103 @@ input[type=email] {
33 } 35 }
34} 36}
35 37
36.create-an-account,
37.forgot-password-button {
38 color: pvar(--mainForegroundColor);
39 cursor: pointer;
40 transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
41
42 &:hover {
43 text-decoration: none !important;
44 opacity: .7 !important;
45 }
46}
47
48.wrapper { 38.wrapper {
49 display: flex; 39 display: flex;
50 justify-content: space-around; 40 justify-content: space-between;
51 flex-wrap: wrap; 41 flex-wrap: wrap;
42 margin: auto;
52 43
53 > div { 44 > div {
54 flex: 1 1; 45 flex: 1 1;
55 } 46 }
56 47
57 .login-form-and-externals { 48 form {
58 @include margin-left(10px); 49 width: 100%;
59 @include margin-right(10px); 50 }
51}
60 52
61 display: flex; 53.wrapper,
62 flex-wrap: wrap; 54.pt-alert-primary {
63 font-size: 15px; 55 max-width: 1200px;
64 max-width: 450px; 56}
65 margin-bottom: 40px;
66 57
67 form { 58.pt-alert-primary {
68 margin: 0; 59 margin: 0 auto 30px;
60}
69 61
70 &, 62.login-form-and-externals {
71 input { 63 @include margin-left(10px);
72 width: 100%; 64 @include margin-right(10px);
73 }
74 65
75 .additionnal-links { 66 display: flex;
76 display: block; 67 flex-wrap: wrap;
77 text-align: center; 68 justify-content: center;
78 margin-top: 20px; 69 font-size: 15px;
79 margin-bottom: 20px; 70 max-width: 450px;
71 margin-bottom: 40px;
80 72
81 .forgot-password-button, 73 form {
82 .create-an-account { 74 margin: 0;
83 padding: 4px;
84 display: inline-block;
85 75
86 color: var(--mainColor); 76 input[type=submit] {
77 width: 100%;
78 }
87 79
88 &:hover, 80 .additional-links {
89 &:active { 81 display: flex;
90 color: var(--mainHoverColor); 82 justify-content: center;
91 } 83 margin: 20px 0 30px;
92 } 84
85 .link-orange {
86 margin: 0 15px;
93 } 87 }
94 } 88 }
89 }
90}
95 91
96 .external-login-blocks { 92.external-login-blocks {
97 min-width: 200px; 93 min-width: 200px;
94 text-align: center;
98 95
99 .block-title { 96 .block-title {
100 font-weight: $font-semibold; 97 font-weight: $font-semibold;
101 } 98 }
102 99
103 .external-login-block { 100 .external-login-block {
104 @include disable-default-a-behaviour; 101 @include disable-default-a-behaviour;
105
106 cursor: pointer;
107 border: 1px solid #d1d7e0;
108 border-radius: 5px;
109 color: pvar(--mainForegroundColor);
110 margin: 10px 10px 0 0;
111 display: flex;
112 justify-content: center;
113 align-items: center;
114 min-height: 35px;
115 min-width: 100px;
116
117 &:hover {
118 background-color: rgba(209, 215, 224, 0.5);
119 }
120 }
121 }
122 102
123 .signup-link { 103 cursor: pointer;
124 display: inline-block; 104 border: 1px solid #d1d7e0;
105 border-radius: 5px;
106 color: pvar(--mainForegroundColor);
107 margin: 10px 10px 0 0;
108 display: flex;
109 justify-content: center;
110 align-items: center;
111 min-height: 35px;
112 min-width: 100px;
113
114 &:hover {
115 background-color: rgba(209, 215, 224, 0.5);
125 } 116 }
126 } 117 }
118}
127 119
128 .instance-information { 120.instance-information {
129 @include margin-left(10px); 121 @include margin-left(10px);
130 @include margin-right(10px); 122 @include margin-right(10px);
131 123
132 max-width: 600px; 124 max-width: 600px;
133 min-width: 350px; 125 min-width: 350px;
134 margin-bottom: 40px; 126 margin-bottom: 40px;
135 } 127}
136 128
137 .terms-anchor { 129.terms-anchor {
138 display: inline; 130 display: inline;
139 } 131}
140 132
141 .terms-link { 133.terms-link {
142 display: none; 134 display: none;
143 }
144} 135}
145 136
146@mixin column-reverse-display { 137@mixin column-reverse-display {
diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts
index 96754b782..2ed9be16c 100644
--- a/client/src/app/+login/login.component.ts
+++ b/client/src/app/+login/login.component.ts
@@ -59,6 +59,10 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
59 return this.serverConfig.signup.allowed === true 59 return this.serverConfig.signup.allowed === true
60 } 60 }
61 61
62 get instanceName () {
63 return this.serverConfig.instance.name
64 }
65
62 onTermsClick (event: Event, instanceInformation: HTMLElement) { 66 onTermsClick (event: Event, instanceInformation: HTMLElement) {
63 event.preventDefault() 67 event.preventDefault()
64 68
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index 76b145604..442c65e2d 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -1,11 +1,11 @@
1<div> 1<div>
2 2
3 <div class="signup-disabled" *ngIf="signupDisabled"> 3 <div class="margin-content signup-disabled" *ngIf="signupDisabled">
4 <div class="alert alert-warning" i18n>Signup is not enabled on this instance.</div> 4 <div class="alert alert-warning" i18n>Signup is not enabled on this instance.</div>
5 </div> 5 </div>
6 6
7 <ng-container *ngIf="!signupDisabled"> 7 <ng-container *ngIf="!signupDisabled">
8 <h1 i18n class="header-title"> 8 <h1 i18n class="title-page-v2">
9 <strong class="underline-orange">{{ instanceName }}</strong> 9 <strong class="underline-orange">{{ instanceName }}</strong>
10 > 10 >
11 Create an account 11 Create an account
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index af277d182..8388bed7d 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -10,11 +10,8 @@
10 padding-top: 30vh; 10 padding-top: 30vh;
11} 11}
12 12
13.header-title { 13.title-page-v2 {
14 font-weight: normal;
15 font-size: 15px;
16 background-color: pvar(--mainColorVeryLight); 14 background-color: pvar(--mainColorVeryLight);
17 padding: 35px 25px 15px;
18 margin: 0; 15 margin: 0;
19} 16}
20 17
diff --git a/client/src/index.html b/client/src/index.html
index 28667cdd0..5446fdfcd 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -50,8 +50,8 @@
50 50
51 <ul> 51 <ul>
52 <li>Allow JavaScript in your browser</li> 52 <li>Allow JavaScript in your browser</li>
53 <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> 53 <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>
54 <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. 54 <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.
55 </ul> 55 </ul>
56 </noscript> 56 </noscript>
57 57
@@ -62,8 +62,8 @@
62 <p>We are sorry but it seems that PeerTube is not compatible with your web browser.</p> 62 <p>We are sorry but it seems that PeerTube is not compatible with your web browser.</p>
63 63
64 <hr> 64 <hr>
65 <p>Please try with the latest version of <a class="alert-link" href="https://www.mozilla.org" target="_blank">Mozilla Firefox</a>.</p> 65 <p>Please try with the latest version of <a class="link-orange" href="https://www.mozilla.org" target="_blank">Mozilla Firefox</a>.</p>
66 <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> 66 <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>
67 </div> 67 </div>
68 68
69 <script type="text/javascript"> 69 <script type="text/javascript">
diff --git a/client/src/sass/class-helpers.scss b/client/src/sass/class-helpers.scss
index 0b2e6176a..218ca3e76 100644
--- a/client/src/sass/class-helpers.scss
+++ b/client/src/sass/class-helpers.scss
@@ -6,7 +6,7 @@
6.link-orange { 6.link-orange {
7 color: pvar(--mainForegroundColor); 7 color: pvar(--mainForegroundColor);
8 font-weight: $font-bold; 8 font-weight: $font-bold;
9 border-bottom: 3px solid pvar(--mainColor); 9 border-bottom: 0.20em solid pvar(--mainColor);
10 10
11 &:hover { 11 &:hover {
12 color: pvar(--mainForegroundColor); 12 color: pvar(--mainForegroundColor);
@@ -16,7 +16,7 @@
16 16
17.underline-orange { 17.underline-orange {
18 display: inline-block; 18 display: inline-block;
19 border-bottom: 3px solid pvar(--mainColor); 19 border-bottom: 0.20em solid pvar(--mainColor);
20} 20}
21 21
22// --------------------------------------------------------------------------- 22// ---------------------------------------------------------------------------
@@ -140,6 +140,12 @@ label + .form-group-description {
140 } 140 }
141} 141}
142 142
143.title-page-v2 {
144 font-weight: normal;
145 font-size: 15px;
146 padding: 35px 25px;
147}
148
143.title-page-about, 149.title-page-about,
144.title-page-settings { 150.title-page-settings {
145 white-space: nowrap; 151 white-space: nowrap;
@@ -240,6 +246,10 @@ label + .form-group-description {
240// --------------------------------------------------------------------------- 246// ---------------------------------------------------------------------------
241 247
242.alert { 248.alert {
249 p {
250 font-size: 16px;
251 }
252
243 p:last-child { 253 p:last-child {
244 margin-bottom: 0; 254 margin-bottom: 0;
245 } 255 }