aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+login
diff options
context:
space:
mode:
authorWicklow <wicklow@framasoft.org>2023-02-17 14:41:17 +0100
committerChocobozzz <chocobozzz@cpy.re>2023-02-20 13:52:22 +0100
commit4e082e78d020e13f3a76eb043be295f5593c065b (patch)
tree0cbfb948ec8d1752a11baf5ee83ab371aecd8fee /client/src/app/+login
parent75034888a65cc5840b4cb97d54c302b033110bb0 (diff)
downloadPeerTube-4e082e78d020e13f3a76eb043be295f5593c065b.tar.gz
PeerTube-4e082e78d020e13f3a76eb043be295f5593c065b.tar.zst
PeerTube-4e082e78d020e13f3a76eb043be295f5593c065b.zip
Refactoring login component style
Diffstat (limited to 'client/src/app/+login')
-rw-r--r--client/src/app/+login/login.component.html20
-rw-r--r--client/src/app/+login/login.component.scss119
2 files changed, 40 insertions, 99 deletions
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html
index 49b443a20..40049390e 100644
--- a/client/src/app/+login/login.component.html
+++ b/client/src/app/+login/login.component.html
@@ -13,7 +13,7 @@
13 </h5> 13 </h5>
14 14
15 <p *ngIf="signupAllowed" i18n> 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. 16 This instance allows registration. However, be careful to check the <a class="link-orange terms-anchor d-inline" (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>. 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> 18 </p>
19 19
@@ -38,7 +38,7 @@
38 <div class="wrapper"> 38 <div class="wrapper">
39 <div class="login-form-and-externals"> 39 <div class="login-form-and-externals">
40 40
41 <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form"> 41 <form class="w-100 m-0" myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
42 <ng-container *ngIf="!otpStep"> 42 <ng-container *ngIf="!otpStep">
43 <div class="form-group"> 43 <div class="form-group">
44 <div> 44 <div>
@@ -78,20 +78,20 @@
78 ></my-input-text> 78 ></my-input-text>
79 </div> 79 </div>
80 80
81 <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid"> 81 <input type="submit" class="peertube-button orange-button w-100" i18n-value value="Login" [disabled]="!form.valid">
82 82
83 <div *ngIf="!otpStep" class="additional-links"> 83 <div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5">
84 <a i18n role="button" class="link-orange" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a> 84 <a i18n role="button" class="link-orange mx-3" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
85 85
86 <ng-container *ngIf="signupAllowed"> 86 <ng-container *ngIf="signupAllowed">
87 <span>·</span> 87 <span>·</span>
88 <a i18n routerLink="/signup" class="link-orange">Create an account</a> 88 <a i18n routerLink="/signup" class="link-orange mx-3">Create an account</a>
89 </ng-container> 89 </ng-container>
90 </div> 90 </div>
91 </form> 91 </form>
92 92
93 <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0"> 93 <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
94 <div class="block-title" i18n>Or sign in with</div> 94 <div class="fw-semibold" i18n>Or sign in with</div>
95 95
96 <div> 96 <div>
97 <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button"> 97 <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
@@ -119,13 +119,13 @@
119 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon> 119 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
120 </div> 120 </div>
121 121
122 <div class="modal-body"> 122 <div class="modal-body text-start">
123 123
124 <div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n> 124 <div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n>
125 We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system. 125 We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
126 </div> 126 </div>
127 127
128 <div *ngIf="!isEmailDisabled()" class="forgot-password-instructions" i18n> 128 <div *ngIf="!isEmailDisabled()" class="mb-4" i18n>
129 Enter your email address and we will send you a link to reset your password. 129 Enter your email address and we will send you a link to reset your password.
130 </div> 130 </div>
131 131
@@ -140,7 +140,7 @@
140 140
141 <div class="modal-footer inputs"> 141 <div class="modal-footer inputs">
142 <input 142 <input
143 type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button" 143 type="button" role="button" i18n-value value="Cancel" class="peertube-button d-none d-sm-block"
144 (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()" 144 (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
145 > 145 >
146 146
diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss
index 17e151fd8..f5c909bdb 100644
--- a/client/src/app/+login/login.component.scss
+++ b/client/src/app/+login/login.component.scss
@@ -1,12 +1,10 @@
1@use '_variables' as *; 1@use '_variables' as *;
2@use '_mixins' as *; 2@use '_mixins' as *;
3 3
4@import 'bootstrap/scss/functions';
5@import 'bootstrap/scss/variables';
6
7label { 4label {
5 @include font-size(1.125rem);
6
8 display: block; 7 display: block;
9 font-size: 18px;
10 margin-bottom: 5px; 8 margin-bottom: 5px;
11} 9}
12 10
@@ -15,39 +13,16 @@ input[type=email] {
15 @include peertube-input-text(100%); 13 @include peertube-input-text(100%);
16} 14}
17 15
18.modal-body { 16//garder ça ou deux flex-grow-1 flex-shrink-1 lignes 39 et 104
19 text-align: start;
20
21 .forgot-password-instructions {
22 margin-bottom: 20px;
23 }
24}
25
26@media screen and (max-width: $small-view) {
27 .modal-body {
28 #forgot-password-email {
29 width: 100%;
30 }
31 }
32
33 .modal-footer .grey-button {
34 display: none;
35 }
36}
37
38.wrapper { 17.wrapper {
39 display: flex; 18 display: flex;
40 justify-content: space-between; 19 justify-content: space-between;
41 flex-wrap: wrap; 20 flex-wrap: wrap;
42 margin: auto; 21 margin: auto;
43 22
44 > div { 23 >div {
45 flex: 1 1; 24 flex: 1 1;
46 } 25 }
47
48 form {
49 width: 100%;
50 }
51} 26}
52 27
53.wrapper, 28.wrapper,
@@ -56,46 +31,24 @@ input[type=email] {
56} 31}
57 32
58.alert { 33.alert {
59 margin: 0 auto 30px; 34 @include rfs(0 auto 2rem, margin);
60} 35}
61 36
62.login-form-and-externals { 37.login-form-and-externals {
63 @include margin-left(10px); 38 @include margin-left(10px);
64 @include margin-right(10px); 39 @include margin-right(10px);
40 @include margin-bottom(2.5rem);
65 41
66 display: flex; 42 display: flex;
67 flex-wrap: wrap; 43 flex-wrap: wrap;
68 justify-content: center; 44 justify-content: center;
69 max-width: 450px; 45 max-width: 450px;
70 margin-bottom: 40px;
71
72 form {
73 margin: 0;
74
75 input[type=submit] {
76 width: 100%;
77 }
78
79 .additional-links {
80 display: flex;
81 justify-content: center;
82 margin: 20px 0 30px;
83
84 .link-orange {
85 margin: 0 15px;
86 }
87 }
88 }
89} 46}
90 47
91.external-login-blocks { 48.external-login-blocks {
92 min-width: 200px; 49 min-width: 200px;
93 text-align: center; 50 text-align: center;
94 51
95 .block-title {
96 font-weight: $font-semibold;
97 }
98
99 .external-login-block { 52 .external-login-block {
100 @include disable-default-a-behaviour; 53 @include disable-default-a-behaviour;
101 54
@@ -119,10 +72,10 @@ input[type=email] {
119.instance-information { 72.instance-information {
120 @include margin-left(10px); 73 @include margin-left(10px);
121 @include margin-right(10px); 74 @include margin-right(10px);
75 @include margin-bottom(2.5rem);
76 @include rfs (22rem, min-width);
122 77
123 max-width: 600px; 78 max-width: 600px;
124 min-width: 350px;
125 margin-bottom: 40px;
126} 79}
127 80
128.terms-anchor { 81.terms-anchor {
@@ -133,45 +86,33 @@ input[type=email] {
133 display: none; 86 display: none;
134} 87}
135 88
136@mixin column-reverse-display { 89@include on-small-main-col {
137 flex-direction: column-reverse; 90 .wrapper {
91 flex-direction: column-reverse;
138 92
139 .login-form-and-externals, 93 .login-form-and-externals,
140 .instance-information { 94 .instance-information {
141 @include margin-left(0); 95 @include margin-left(0);
142 @include margin-right(0); 96 @include margin-right(0);
143 97
144 width: 100%; 98 width: 100%;
145 max-width: 450px; 99 max-width: 450px;
146 min-width: unset; 100 min-width: unset;
147 align-self: center; 101 align-self: center;
148 }
149
150 .instance-information {
151 ::ng-deep .accordion {
152 display: none;
153 } 102 }
154 }
155
156 .terms-anchor {
157 display: none;
158 }
159 103
160 .terms-link { 104 .instance-information {
161 display: inline; 105 ::ng-deep .accordion {
162 } 106 display: none;
163} 107 }
108 }
164 109
165@media screen and (max-width: breakpoint(md)) { 110 .terms-anchor {
166 .wrapper { 111 display: none;
167 @include column-reverse-display(); 112 }
168 }
169}
170 113
171@media screen and (max-width: breakpoint(md) + $menu-width) { 114 .terms-link {
172 :host-context(.main-col:not(.expanded)) { 115 display: inline;
173 .wrapper {
174 @include column-reverse-display();
175 } 116 }
176 } 117 }
177} 118} \ No newline at end of file