aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-06-20 15:56:16 +0200
committerChocobozzz <me@florianbigard.com>2022-06-20 15:56:16 +0200
commit9bc3622320dc43474ce4b60c222ec25e6e657b97 (patch)
tree081aadbe0c3e69425dbe1946d98fd890785c1aef /client/src/app
parent3031971ec21ed6400d3b73d1f7e00b44d1617667 (diff)
downloadPeerTube-9bc3622320dc43474ce4b60c222ec25e6e657b97.tar.gz
PeerTube-9bc3622320dc43474ce4b60c222ec25e6e657b97.tar.zst
PeerTube-9bc3622320dc43474ce4b60c222ec25e6e657b97.zip
Handle input error in markdown textarea
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html4
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss13
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html6
-rw-r--r--client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html54
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.html2
-rw-r--r--client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss5
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html8
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-edit.component.html15
-rw-r--r--client/src/app/shared/shared-forms/dynamic-form-field.component.html10
-rw-r--r--client/src/app/shared/shared-forms/dynamic-form-field.component.scss5
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.html3
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.ts4
12 files changed, 58 insertions, 71 deletions
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 68126281f..315cd1749 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -132,8 +132,8 @@
132 <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help> 132 <label i18n for="broadcastMessageMessage">Message</label><my-help helpType="markdownText"></my-help>
133 133
134 <my-markdown-textarea 134 <my-markdown-textarea
135 name="broadcastMessageMessage" formControlName="message" textareaMaxWidth="500px" 135 name="broadcastMessageMessage" formControlName="message"
136 [classes]="{ 'input-error': formErrors['broadcastMessage.message'] }" 136 [formError]="formErrors['broadcastMessage.message']"
137 ></my-markdown-textarea> 137 ></my-markdown-textarea>
138 138
139 <div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div> 139 <div *ngIf="formErrors.broadcastMessage.message" class="form-error">{{ formErrors.broadcastMessage.message }}</div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index f3bce8ee0..df523cedc 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -7,12 +7,21 @@ form {
7 padding-bottom: 1.5rem; 7 padding-bottom: 1.5rem;
8} 8}
9 9
10input[type=text] { 10my-markdown-textarea {
11 @include peertube-input-text($form-base-input-width); 11 display: block;
12 max-width: 500px;
13}
12 14
15.homepage my-markdown-textarea {
13 display: block; 16 display: block;
17 max-width: 90%;
18
19 ::ng-deep textarea {
20 height: 300px !important;
21 }
14} 22}
15 23
24input[type=text],
16input[type=number] { 25input[type=number] {
17 @include peertube-input-text($form-base-input-width); 26 @include peertube-input-text($form-base-input-width);
18 27
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
index 701c3c0c1..5339240bb 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -2,7 +2,7 @@
2 2
3 <ng-container formGroupName="instanceCustomHomepage"> 3 <ng-container formGroupName="instanceCustomHomepage">
4 4
5 <div class="row mt-5"> <!-- homepage grid --> 5 <div class="homepage row mt-5"> <!-- homepage grid -->
6 <div class="col-12 col-lg-4 col-xl-3"> 6 <div class="col-12 col-lg-4 col-xl-3">
7 <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div> 7 <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
8 </div> 8 </div>
@@ -16,9 +16,9 @@
16 </div> 16 </div>
17 17
18 <my-markdown-textarea 18 <my-markdown-textarea
19 name="instanceCustomHomepageContent" formControlName="content" textareaMaxWidth="90%" textareaHeight="300px" 19 name="instanceCustomHomepageContent" formControlName="content"
20 [customMarkdownRenderer]="getCustomMarkdownRenderer()" 20 [customMarkdownRenderer]="getCustomMarkdownRenderer()"
21 [classes]="{ 'input-error': formErrors['instanceCustomHomepage.content'] }" 21 [formError]="formErrors['instanceCustomHomepage.content']"
22 ></my-markdown-textarea> 22 ></my-markdown-textarea>
23 23
24 <div *ngIf="formErrors.instanceCustomHomepage.content" class="form-error">{{ formErrors.instanceCustomHomepage.content }}</div> 24 <div *ngIf="formErrors.instanceCustomHomepage.content" class="form-error">{{ formErrors.instanceCustomHomepage.content }}</div>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index 5931cb459..b54733327 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -37,12 +37,10 @@
37 </div> 37 </div>
38 38
39 <my-markdown-textarea 39 <my-markdown-textarea
40 name="instanceDescription" formControlName="description" textareaMaxWidth="500px" 40 name="instanceDescription" formControlName="description"
41 [customMarkdownRenderer]="getCustomMarkdownRenderer()" 41 [customMarkdownRenderer]="getCustomMarkdownRenderer()"
42 [classes]="{ 'input-error': formErrors['instance.description'] }" 42 [formError]="formErrors['instance.description']"
43 ></my-markdown-textarea> 43 ></my-markdown-textarea>
44
45 <div *ngIf="formErrors.instance.description" class="form-error">{{ formErrors.instance.description }}</div>
46 </div> 44 </div>
47 45
48 <div class="form-group"> 46 <div class="form-group">
@@ -127,22 +125,18 @@
127 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help> 125 <label i18n for="instanceTerms">Terms</label><my-help helpType="markdownText"></my-help>
128 126
129 <my-markdown-textarea 127 <my-markdown-textarea
130 name="instanceTerms" formControlName="terms" textareaMaxWidth="500px" 128 name="instanceTerms" formControlName="terms"
131 [ngClass]="{ 'input-error': formErrors['instance.terms'] }" 129 [formError]="formErrors['instance.terms']"
132 ></my-markdown-textarea> 130 ></my-markdown-textarea>
133
134 <div *ngIf="formErrors.instance.terms" class="form-error">{{ formErrors.instance.terms }}</div>
135 </div> 131 </div>
136 132
137 <div class="form-group"> 133 <div class="form-group">
138 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help> 134 <label i18n for="instanceCodeOfConduct">Code of conduct</label><my-help helpType="markdownText"></my-help>
139 135
140 <my-markdown-textarea 136 <my-markdown-textarea
141 name="instanceCodeOfConduct" formControlName="codeOfConduct" textareaMaxWidth="500px" 137 name="instanceCodeOfConduct" formControlName="codeOfConduct"
142 [ngClass]="{ 'input-error': formErrors['instance.codeOfConduct'] }" 138 [formError]="formErrors['instance.codeOfConduct']"
143 ></my-markdown-textarea> 139 ></my-markdown-textarea>
144
145 <div *ngIf="formErrors.instance.codeOfConduct" class="form-error">{{ formErrors.instance.codeOfConduct }}</div>
146 </div> 140 </div>
147 141
148 <div class="form-group"> 142 <div class="form-group">
@@ -150,11 +144,9 @@
150 <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div> 144 <div i18n class="label-small-info">Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc</div>
151 145
152 <my-markdown-textarea 146 <my-markdown-textarea
153 name="instanceModerationInformation" formControlName="moderationInformation" textareaMaxWidth="500px" 147 name="instanceModerationInformation" formControlName="moderationInformation"
154 [ngClass]="{ 'input-error': formErrors['instance.moderationInformation'] }" 148 [formError]="formErrors['instance.moderationInformation']"
155 ></my-markdown-textarea> 149 ></my-markdown-textarea>
156
157 <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
158 </div> 150 </div>
159 151
160 </div> 152 </div>
@@ -172,11 +164,9 @@
172 <div i18n class="label-small-info">A single person? A non-profit? A company?</div> 164 <div i18n class="label-small-info">A single person? A non-profit? A company?</div>
173 165
174 <my-markdown-textarea 166 <my-markdown-textarea
175 name="instanceAdministrator" formControlName="administrator" textareaMaxWidth="500px" 167 name="instanceAdministrator" formControlName="administrator"
176 [classes]="{ 'input-error': formErrors['instance.administrator'] }" 168 [formError]="formErrors['instance.administrator']"
177 ></my-markdown-textarea> 169 ></my-markdown-textarea>
178
179 <div *ngIf="formErrors.instance.administrator" class="form-error">{{ formErrors.instance.administrator }}</div>
180 </div> 170 </div>
181 171
182 <div class="form-group"> 172 <div class="form-group">
@@ -184,11 +174,9 @@
184 <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div> 174 <div i18n class="label-small-info">To share your personal videos? To open registrations and allow people to upload what they want?</div>
185 175
186 <my-markdown-textarea 176 <my-markdown-textarea
187 name="instanceCreationReason" formControlName="creationReason" textareaMaxWidth="500px" 177 name="instanceCreationReason" formControlName="creationReason"
188 [ngClass]="{ 'input-error': formErrors['instance.creationReason'] }" 178 [formError]="formErrors['instance.creationReason']"
189 ></my-markdown-textarea> 179 ></my-markdown-textarea>
190
191 <div *ngIf="formErrors.instance.creationReason" class="form-error">{{ formErrors.instance.creationReason }}</div>
192 </div> 180 </div>
193 181
194 <div class="form-group"> 182 <div class="form-group">
@@ -196,11 +184,9 @@
196 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div> 184 <div i18n class="label-small-info">It's important to know for users who want to register on your instance</div>
197 185
198 <my-markdown-textarea 186 <my-markdown-textarea
199 name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime" textareaMaxWidth="500px" 187 name="instanceMaintenanceLifetime" formControlName="maintenanceLifetime"
200 [ngClass]="{ 'input-error': formErrors['instance.maintenanceLifetime'] }" 188 [formError]="formErrors['instance.maintenanceLifetime']"
201 ></my-markdown-textarea> 189 ></my-markdown-textarea>
202
203 <div *ngIf="formErrors.instance.maintenanceLifetime" class="form-error">{{ formErrors.instance.maintenanceLifetime }}</div>
204 </div> 190 </div>
205 191
206 <div class="form-group"> 192 <div class="form-group">
@@ -208,11 +194,9 @@
208 <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div> 194 <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
209 195
210 <my-markdown-textarea 196 <my-markdown-textarea
211 name="instanceBusinessModel" formControlName="businessModel" textareaMaxWidth="500px" 197 name="instanceBusinessModel" formControlName="businessModel"
212 [ngClass]="{ 'input-error': formErrors['instance.businessModel'] }" 198 [formError]="formErrors['instance.businessModel']"
213 ></my-markdown-textarea> 199 ></my-markdown-textarea>
214
215 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
216 </div> 200 </div>
217 201
218 </div> 202 </div>
@@ -230,11 +214,9 @@
230 <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div> 214 <div i18n class="label-small-info">i.e. 2vCore 2GB RAM, a direct the link to the server you rent, etc.</div>
231 215
232 <my-markdown-textarea 216 <my-markdown-textarea
233 name="instanceHardwareInformation" formControlName="hardwareInformation" textareaMaxWidth="500px" 217 name="instanceHardwareInformation" formControlName="hardwareInformation"
234 [classes]="{ 'input-error': formErrors['instance.hardwareInformation'] }" 218 [formError]="formErrors['instance.hardwareInformation']"
235 ></my-markdown-textarea> 219 ></my-markdown-textarea>
236
237 <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
238 </div> 220 </div>
239 221
240 </div> 222 </div>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index 420881f5a..b557fb011 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -68,7 +68,7 @@
68 ></my-help> 68 ></my-help>
69 69
70 <my-markdown-textarea 70 <my-markdown-textarea
71 id="support" formControlName="support" textareaMaxWidth="500px" markdownType="enhanced" 71 id="support" formControlName="support" markdownType="enhanced"
72 [formError]="formErrors['support']" 72 [formError]="formErrors['support']"
73 ></my-markdown-textarea> 73 ></my-markdown-textarea>
74 </div> 74 </div>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
index 008397a7a..cde848da6 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -42,6 +42,11 @@ textarea {
42 display: block; 42 display: block;
43} 43}
44 44
45my-markdown-textarea {
46 display: block;
47 max-width: 500px;
48}
49
45.peertube-select-container { 50.peertube-select-container {
46 @include peertube-select-container(340px); 51 @include peertube-select-container(340px);
47} 52}
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
index 35682cf81..e867f63b8 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
@@ -42,13 +42,7 @@
42 42
43 <div class="form-group"> 43 <div class="form-group">
44 <label i18n for="description">Description</label><my-help helpType="markdownText"></my-help> 44 <label i18n for="description">Description</label><my-help helpType="markdownText"></my-help>
45 <my-markdown-textarea 45 <my-markdown-textarea id="description" formControlName="description" [formError]="formErrors['description']"></my-markdown-textarea>
46 id="description" formControlName="description"
47 [ngClass]="{ 'input-error': formErrors['description'] }"
48 ></my-markdown-textarea>
49 <div *ngIf="formErrors.description" class="form-error">
50 {{ formErrors.description }}
51 </div>
52 </div> 46 </div>
53 </div> 47 </div>
54 48
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index b99e430dd..595200c3b 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -51,11 +51,10 @@
51 </ng-template> 51 </ng-template>
52 </my-help> 52 </my-help>
53 53
54 <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="videoToUpdate"></my-markdown-textarea> 54 <my-markdown-textarea
55 55 formControlName="description" [markdownVideo]="videoToUpdate"
56 <div *ngIf="formErrors.description" class="form-error"> 56 [formError]="formErrors.description" [truncate]="250"
57 {{ formErrors.description }} 57 ></my-markdown-textarea>
58 </div>
59 </div> 58 </div>
60 </div> 59 </div>
61 60
@@ -332,13 +331,11 @@
332 </ng-container> 331 </ng-container>
333 </ng-template> 332 </ng-template>
334 </my-help> 333 </my-help>
334
335 <my-markdown-textarea 335 <my-markdown-textarea
336 id="support" formControlName="support" markdownType="enhanced" 336 id="support" formControlName="support" markdownType="enhanced"
337 [classes]="{ 'input-error': formErrors['support'] }" 337 [formError]="formErrors['support']"
338 ></my-markdown-textarea> 338 ></my-markdown-textarea>
339 <div *ngIf="formErrors.support" class="form-error">
340 {{ formErrors.support }}
341 </div>
342 </div> 339 </div>
343 </div> 340 </div>
344 341
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index 2ec436ac6..61f9ae8ff 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -28,19 +28,19 @@
28 28
29 <my-markdown-textarea 29 <my-markdown-textarea
30 *ngIf="setting.type === 'markdown-text'" 30 *ngIf="setting.type === 'markdown-text'"
31 markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" 31 markdownType="text" [id]="setting.name" [formControlName]="setting.name"
32 [classes]="{ 'input-error': formErrors['settings.name'] }" 32 [formError]="formErrors['settings.name']"
33 ></my-markdown-textarea> 33 ></my-markdown-textarea>
34 34
35 <my-markdown-textarea 35 <my-markdown-textarea
36 *ngIf="setting.type === 'markdown-enhanced'" 36 *ngIf="setting.type === 'markdown-enhanced'"
37 markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px" 37 markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name"
38 [classes]="{ 'input-error': formErrors['settings.name'] }" 38 [formError]="formErrors['settings.name']"
39 ></my-markdown-textarea> 39 ></my-markdown-textarea>
40 40
41 <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div> 41 <div *ngIf="setting.type === 'html'" [innerHTML]="setting.html"></div>
42 42
43 <div *ngIf="formErrors[setting.name]" class="form-error"> 43 <div *ngIf="setting.type !== 'markdown-text' && setting.type !== 'markdown-enhanced' && formErrors[setting.name]" class="form-error">
44 {{ formErrors[setting.name] }} 44 {{ formErrors[setting.name] }}
45 </div> 45 </div>
46 46
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
index 31bf59edb..0737f372a 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
@@ -26,3 +26,8 @@ textarea {
26my-peertube-checkbox + .label-small-info { 26my-peertube-checkbox + .label-small-info {
27 margin-top: 5px; 27 margin-top: 5px;
28} 28}
29
30my-markdown-textarea {
31 display: block;
32 max-width: 500px;
33}
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.html b/client/src/app/shared/shared-forms/markdown-textarea.component.html
index afb046c7f..5a9ff1a15 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.html
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.html
@@ -1,10 +1,9 @@
1<div class="root" [ngClass]="{ 'maximized': isMaximized }" [ngStyle]="{ 'max-width': textareaMaxWidth }"> 1<div class="root" [ngClass]="{ 'maximized': isMaximized }">
2 2
3 <textarea #textarea 3 <textarea #textarea
4 [(ngModel)]="content" (ngModelChange)="onModelChange()" 4 [(ngModel)]="content" (ngModelChange)="onModelChange()"
5 class="form-control" [ngClass]="{ 'input-error': formError }" 5 class="form-control" [ngClass]="{ 'input-error': formError }"
6 [attr.disabled]="disabled || null" 6 [attr.disabled]="disabled || null"
7 [ngStyle]="{ height: textareaHeight }"
8 [id]="name" [name]="name"> 7 [id]="name" [name]="name">
9 </textarea> 8 </textarea>
10 9
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.ts b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
index 5a603c157..089991884 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.ts
@@ -25,10 +25,6 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
25 @Input() content = '' 25 @Input() content = ''
26 26
27 @Input() formError: string 27 @Input() formError: string
28 @Input() classes: string[] | { [klass: string]: any[] | any } = []
29
30 @Input() textareaMaxWidth = '100%'
31 @Input() textareaHeight = '150px'
32 28
33 @Input() truncate: number 29 @Input() truncate: number
34 30