Skip to content

Commit 3810106

Browse files
Aaron-Detrebreity
Aaron-Detre
and
breity
authored
feat(ContactForm): Share units for community library (#2183)
Co-authored-by: Jonathan Lim-Breitbart <[email protected]>
1 parent 9ae436a commit 3810106

13 files changed

+368
-281
lines changed

‎src/app/contact/contact-form/contact-form.component.html‎

Lines changed: 151 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -6,136 +6,160 @@
66
</div>
77
<mat-card appearance="outlined" class="standalone__content mat-elevation-z4">
88
<mat-card-content>
9-
<div *ngIf="complete" class="center">
10-
<p class="mat-subtitle-2" i18n>Thank you for contacting WISE!</p>
11-
<p i18n>Your message has been sent. We will get back to you as soon as possible.</p>
12-
<br />
13-
<div>
14-
<a mat-flat-button color="accent" routerLink="/" i18n>Return to WISE Home</a>
9+
@if (complete) {
10+
<div class="center">
11+
<p class="mat-subtitle-2" i18n>Thank you for contacting WISE!</p>
12+
<p i18n>Your message has been sent. We will get back to you as soon as possible.</p>
13+
<br />
14+
<div>
15+
<a mat-flat-button color="accent" routerLink="/" i18n>Return to WISE Home</a>
16+
</div>
1517
</div>
16-
</div>
17-
<form
18-
*ngIf="!complete"
19-
role="form"
20-
(submit)="submit()"
21-
[formGroup]="contactFormGroup"
22-
class="flex flex-col"
23-
>
24-
<h2 class="accent center" i18n>Contact WISE</h2>
25-
<p>
26-
<mat-form-field appearance="fill" class="w-full">
27-
<mat-label i18n>Name</mat-label>
28-
<input matInput id="name" name="name" formControlName="name" />
29-
<mat-error *ngIf="contactFormGroup.controls['name'].hasError('required')" i18n
30-
>Name required</mat-error
31-
>
32-
</mat-form-field>
33-
</p>
34-
<p *ngIf="!isStudent">
35-
<mat-form-field appearance="fill" class="w-full">
36-
<mat-label i18n>Email</mat-label>
37-
<input matInput id="email" name="email" formControlName="email" />
38-
<mat-error *ngIf="contactFormGroup.controls['email'].hasError('required')" i18n
39-
>Email required</mat-error
40-
>
41-
<mat-error *ngIf="contactFormGroup.controls['email'].hasError('email')" i18n
42-
>Invalid Email</mat-error
43-
>
44-
</mat-form-field>
45-
</p>
46-
<p *ngIf="isStudent && teachers.length > 0">
47-
<mat-form-field appearance="fill" class="w-full">
48-
<mat-label i18n>Teacher</mat-label>
49-
<mat-select formControlName="teacher">
50-
<mat-option *ngFor="let teacher of teachers" [value]="teacher.username">
51-
{{ teacher.displayName }}
52-
</mat-option>
53-
</mat-select>
54-
<mat-error *ngIf="contactFormGroup.controls['teacher'].hasError('required')" i18n
55-
>Teacher required</mat-error
56-
>
57-
</mat-form-field>
58-
</p>
59-
<p>
60-
<mat-form-field appearance="fill" class="w-full">
61-
<mat-label i18n>Issue Type</mat-label>
62-
<mat-select formControlName="issueType">
63-
<mat-option *ngFor="let issueType of issueTypes" [value]="issueType.key">
64-
{{ issueType.value }}
65-
</mat-option>
66-
</mat-select>
67-
<mat-error *ngIf="contactFormGroup.controls['issueType'].hasError('required')" i18n
68-
>Issue Type required</mat-error
69-
>
70-
</mat-form-field>
71-
</p>
72-
<p *ngIf="projectName">
73-
<mat-form-field appearance="fill" class="w-full">
74-
<mat-label i18n>Project Name</mat-label>
75-
<input matInput name="projectName" [value]="projectName" disabled />
76-
</mat-form-field>
77-
</p>
78-
<p>
79-
<mat-form-field appearance="fill" class="w-full">
80-
<mat-label i18n>Summary</mat-label>
81-
<input matInput id="summary" name="summary" formControlName="summary" />
82-
<mat-error *ngIf="contactFormGroup.controls['summary'].hasError('required')" i18n
83-
>Summary required</mat-error
84-
>
85-
</mat-form-field>
86-
</p>
87-
<p>
88-
<mat-form-field appearance="fill" class="w-full">
89-
<mat-label i18n>Description</mat-label>
90-
<textarea
91-
matInput
92-
id="description"
93-
name="description"
94-
formControlName="description"
95-
rows="10"
96-
cols="10"
97-
>
98-
</textarea>
99-
<mat-error *ngIf="contactFormGroup.controls['description'].hasError('required')" i18n
100-
>Description required</mat-error
101-
>
102-
</mat-form-field>
103-
</p>
104-
<p *ngIf="isRecaptchaEnabled" i18n>
105-
This site is protected by reCAPTCHA and the Google
106-
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
107-
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
108-
</p>
109-
<ng-container *ngIf="!isError; else error">
110-
<div>&nbsp;</div>
111-
</ng-container>
112-
<ng-template #error>
113-
<p
114-
*ngIf="isRecaptchaEnabled && isRecaptchaError; else genericError"
115-
class="center warn"
116-
i18n
117-
>
118-
Recaptcha failed. Please reload the page and try again!
18+
} @else {
19+
<form role="form" (submit)="submit()" [formGroup]="contactFormGroup" class="flex flex-col">
20+
<h2 class="accent center" i18n>Contact WISE</h2>
21+
<p>
22+
<mat-form-field appearance="fill" class="w-full">
23+
<mat-label i18n>Name</mat-label>
24+
<input matInput id="name" name="name" formControlName="name" />
25+
@if (contactFormGroup.controls['name'].hasError('required')) {
26+
<mat-error i18n>Name required</mat-error>
27+
}
28+
</mat-form-field>
29+
</p>
30+
@if (!isStudent) {
31+
<p>
32+
<mat-form-field appearance="fill" class="w-full">
33+
<mat-label i18n>Email</mat-label>
34+
<input matInput id="email" name="email" formControlName="email" />
35+
@if (contactFormGroup.controls['email'].hasError('required')) {
36+
<mat-error i18n>Email required</mat-error>
37+
}
38+
@if (contactFormGroup.controls['email'].hasError('email')) {
39+
<mat-error i18n>Invalid Email</mat-error>
40+
}
41+
</mat-form-field>
42+
</p>
43+
} @else {
44+
@if (teachers.length > 0) {
45+
<p>
46+
<mat-form-field appearance="fill" class="w-full">
47+
<mat-label i18n>Teacher</mat-label>
48+
<mat-select formControlName="teacher">
49+
@for (teacher of teachers; track teacher.username) {
50+
<mat-option [value]="teacher.username">
51+
{{ teacher.displayName }}
52+
</mat-option>
53+
}
54+
</mat-select>
55+
@if (contactFormGroup.controls['teacher'].hasError('required')) {
56+
<mat-error i18n>Teacher required</mat-error>
57+
}
58+
</mat-form-field>
59+
</p>
60+
}
61+
}
62+
<p>
63+
<mat-form-field appearance="fill" class="w-full">
64+
<mat-label i18n>Issue Type</mat-label>
65+
<mat-select formControlName="issueType">
66+
@for (issueType of issueTypes; track issueType.key) {
67+
<mat-option [value]="issueType.key">
68+
{{ issueType.value }}
69+
</mat-option>
70+
}
71+
</mat-select>
72+
@if (contactFormGroup.controls['issueType'].hasError('required')) {
73+
<mat-error i18n>Issue Type required</mat-error>
74+
}
75+
</mat-form-field>
11976
</p>
120-
</ng-template>
121-
<ng-template #genericError>
122-
<p class="center warn" i18n>
123-
Sorry, there was a problem submitting the form. Please try again.
77+
@if (projectName) {
78+
<p>
79+
<mat-form-field appearance="fill" class="w-full">
80+
<mat-label i18n>Project Name</mat-label>
81+
<input matInput name="projectName" [value]="projectName" disabled />
82+
</mat-form-field>
83+
</p>
84+
}
85+
<p>
86+
<mat-form-field appearance="fill" class="w-full">
87+
<mat-label i18n>Summary</mat-label>
88+
<input matInput id="summary" name="summary" formControlName="summary" value="test" />
89+
@if (contactFormGroup.controls['summary'].hasError('required')) {
90+
<mat-error i18n>Summary required</mat-error>
91+
}
92+
</mat-form-field>
93+
</p>
94+
<p>
95+
<mat-form-field appearance="fill" class="w-full">
96+
<mat-label i18n>Description</mat-label>
97+
<textarea
98+
matInput
99+
id="description"
100+
name="description"
101+
formControlName="description"
102+
rows="10"
103+
cols="10"
104+
[placeholder]="
105+
isPublishIssueType()
106+
? 'Why do you want to share this unit with the WISE community?'
107+
: ''
108+
"
109+
>
110+
</textarea>
111+
@if (contactFormGroup.controls['description'].hasError('required')) {
112+
<mat-error i18n>Description required</mat-error>
113+
}
114+
</mat-form-field>
115+
</p>
116+
@if (isRecaptchaEnabled) {
117+
<p i18n>
118+
This site is protected by reCAPTCHA and the Google
119+
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
120+
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
121+
</p>
122+
}
123+
@if (isError) {
124+
@if (isRecaptchaEnabled && isRecaptchaError) {
125+
<p class="center warn" i18n>
126+
Recaptcha failed. Please reload the page and try again!
127+
</p>
128+
} @else {
129+
<p class="center warn" i18n>
130+
Sorry, there was a problem submitting the form. Please try again.
131+
</p>
132+
}
133+
}
134+
@if (isPublishIssueType()) {
135+
<p class="center mat-caption" i18n>
136+
By submitting, you will be sending your unit to be reviewed. If approved, it will be
137+
added to the Community Built library. Make sure you have filled out all appropriate
138+
fields in the Unit Info page in the authoring tool. We will be in touch if we require
139+
any more information.
140+
</p>
141+
<p class="center mat-caption" i18n>Thank you!</p>
142+
}
143+
<p>
144+
<button
145+
mat-flat-button
146+
color="primary"
147+
type="submit"
148+
[disabled]="!contactFormGroup.valid || isSendingRequest"
149+
class="button--progress w-full"
150+
>
151+
@if (isSendingRequest) {
152+
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
153+
}
154+
@if (isPublishIssueType()) {
155+
<ng-container i18n>Submit for Review</ng-container>
156+
} @else {
157+
<ng-container i18n>Submit</ng-container>
158+
}
159+
</button>
124160
</p>
125-
</ng-template>
126-
<p>
127-
<button
128-
mat-flat-button
129-
color="primary"
130-
type="submit"
131-
[disabled]="!contactFormGroup.valid || isSendingRequest"
132-
class="button--progress w-full"
133-
>
134-
<mat-progress-bar *ngIf="isSendingRequest" mode="indeterminate"></mat-progress-bar>
135-
<ng-container i18n>Submit</ng-container>
136-
</button>
137-
</p>
138-
</form>
161+
</form>
162+
}
139163
</mat-card-content>
140164
</mat-card>
141165
</div>

0 commit comments

Comments
 (0)