diff options
Diffstat (limited to 'client')
-rw-r--r-- | client/src/app/login/login.component.scss | 4 | ||||
-rw-r--r-- | client/src/app/signup/signup.component.html | 91 | ||||
-rw-r--r-- | client/src/app/signup/signup.component.scss | 8 |
3 files changed, 60 insertions, 43 deletions
diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss index 900b2467a..7978c5891 100644 --- a/client/src/app/login/login.component.scss +++ b/client/src/app/login/login.component.scss | |||
@@ -20,4 +20,8 @@ input[type=submit] { | |||
20 | .create-an-account, .forgot-password-button { | 20 | .create-an-account, .forgot-password-button { |
21 | color: #000; | 21 | color: #000; |
22 | cursor: pointer; | 22 | cursor: pointer; |
23 | |||
24 | &:hover { | ||
25 | text-decoration: underline !important; | ||
26 | } | ||
23 | } | 27 | } |
diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html index f7b8f587b..aad4b5be3 100644 --- a/client/src/app/signup/signup.component.html +++ b/client/src/app/signup/signup.component.html | |||
@@ -4,63 +4,68 @@ | |||
4 | Create an account | 4 | Create an account |
5 | </div> | 5 | </div> |
6 | 6 | ||
7 | <my-instance-features-table></my-instance-features-table> | ||
8 | |||
9 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | 7 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> |
10 | 8 | ||
11 | <form role="form" (ngSubmit)="signup()" [formGroup]="form"> | 9 | <div class="d-flex justify-content-left flex-wrap"> |
12 | <div class="form-group"> | 10 | <form role="form" (ngSubmit)="signup()" [formGroup]="form"> |
13 | <label for="username" i18n>Username</label> | 11 | <div class="form-group"> |
12 | <label for="username" i18n>Username</label> | ||
13 | |||
14 | <div class="input-group"> | ||
15 | <input | ||
16 | type="text" id="username" i18n-placeholder placeholder="Example: jane_doe" | ||
17 | formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" | ||
18 | > | ||
19 | <div class="input-group-append"> | ||
20 | <span class="input-group-text">@{{ instanceHost }}</span> | ||
21 | </div> | ||
22 | </div> | ||
14 | 23 | ||
15 | <div class="input-group"> | 24 | <div *ngIf="formErrors.username" class="form-error"> |
25 | {{ formErrors.username }} | ||
26 | </div> | ||
27 | </div> | ||
28 | |||
29 | <div class="form-group"> | ||
30 | <label for="email" i18n>Email</label> | ||
16 | <input | 31 | <input |
17 | type="text" id="username" i18n-placeholder placeholder="Example: neil_amstrong" | 32 | type="text" id="email" i18n-placeholder placeholder="Email" |
18 | formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" | 33 | formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" |
19 | > | 34 | > |
20 | <div class="input-group-append"> | 35 | <div *ngIf="formErrors.email" class="form-error"> |
21 | <span class="input-group-text">@{{ instanceHost }}</span> | 36 | {{ formErrors.email }} |
22 | </div> | 37 | </div> |
23 | </div> | 38 | </div> |
24 | 39 | ||
25 | <div *ngIf="formErrors.username" class="form-error"> | 40 | <div class="form-group"> |
26 | {{ formErrors.username }} | 41 | <label for="password" i18n>Password</label> |
42 | <input | ||
43 | type="password" id="password" i18n-placeholder placeholder="Password" | ||
44 | formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" | ||
45 | > | ||
46 | <div *ngIf="formErrors.password" class="form-error"> | ||
47 | {{ formErrors.password }} | ||
48 | </div> | ||
27 | </div> | 49 | </div> |
28 | </div> | ||
29 | 50 | ||
30 | <div class="form-group"> | 51 | <div class="form-group form-group-terms"> |
31 | <label for="email" i18n>Email</label> | 52 | <my-peertube-checkbox |
32 | <input | 53 | inputName="terms" formControlName="terms" |
33 | type="text" id="email" i18n-placeholder placeholder="Email" | 54 | i18n-labelHtml labelHtml="I have read and agree to the <a href='/about/instance#terms-section' target='_blank'rel='noopener noreferrer'>Terms</a> of this instance" |
34 | formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" | 55 | ></my-peertube-checkbox> |
35 | > | ||
36 | <div *ngIf="formErrors.email" class="form-error"> | ||
37 | {{ formErrors.email }} | ||
38 | </div> | ||
39 | </div> | ||
40 | 56 | ||
41 | <div class="form-group"> | 57 | <div *ngIf="formErrors.terms" class="form-error"> |
42 | <label for="password" i18n>Password</label> | 58 | {{ formErrors.terms }} |
43 | <input | 59 | </div> |
44 | type="password" id="password" i18n-placeholder placeholder="Password" | ||
45 | formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" | ||
46 | > | ||
47 | <div *ngIf="formErrors.password" class="form-error"> | ||
48 | {{ formErrors.password }} | ||
49 | </div> | 60 | </div> |
50 | </div> | ||
51 | 61 | ||
52 | <div class="form-group form-group-terms"> | 62 | <input type="submit" i18n-value value="Signup" [disabled]="!form.valid"> |
53 | <my-peertube-checkbox | 63 | </form> |
54 | inputName="terms" formControlName="terms" | ||
55 | i18n-labelHtml labelHtml="I have read and agree to the <a href='/about/instance#terms-section' target='_blank'rel='noopener noreferrer'>Terms</a> of this instance" | ||
56 | ></my-peertube-checkbox> | ||
57 | 64 | ||
58 | <div *ngIf="formErrors.terms" class="form-error"> | 65 | <div> |
59 | {{ formErrors.terms }} | 66 | <label for="email" i18n>Features found on this instance</label> |
60 | </div> | 67 | <my-instance-features-table></my-instance-features-table> |
61 | </div> | 68 | </div> |
62 | 69 | </div> | |
63 | <input type="submit" i18n-value value="Signup" [disabled]="!form.valid"> | ||
64 | </form> | ||
65 | 70 | ||
66 | </div> | 71 | </div> |
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss index a98c3c732..90e1e8e74 100644 --- a/client/src/app/signup/signup.component.scss +++ b/client/src/app/signup/signup.component.scss | |||
@@ -7,6 +7,10 @@ my-instance-features-table { | |||
7 | margin-bottom: 40px; | 7 | margin-bottom: 40px; |
8 | } | 8 | } |
9 | 9 | ||
10 | form { | ||
11 | margin: 0 60px 40px 0; | ||
12 | } | ||
13 | |||
10 | .form-group-terms { | 14 | .form-group-terms { |
11 | margin: 30px 0; | 15 | margin: 30px 0; |
12 | } | 16 | } |
@@ -15,6 +19,10 @@ my-instance-features-table { | |||
15 | @include peertube-input-group(400px); | 19 | @include peertube-input-group(400px); |
16 | } | 20 | } |
17 | 21 | ||
22 | .input-group-append { | ||
23 | height: 30px; | ||
24 | } | ||
25 | |||
18 | input:not([type=submit]) { | 26 | input:not([type=submit]) { |
19 | @include peertube-input-text(400px); | 27 | @include peertube-input-text(400px); |
20 | display: block; | 28 | display: block; |