feat(ContactForm): Share units for community library

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

@@ -6,136 +6,160 @@
   </div>
   <mat-card appearance="outlined" class="standalone__content mat-elevation-z4">
     <mat-card-content>
-      <div *ngIf="complete" class="center">
-        <p class="mat-subtitle-2" i18n>Thank you for contacting WISE!</p>
-        <p i18n>Your message has been sent. We will get back to you as soon as possible.</p>
-        <br />
-        <div>
-          <a mat-flat-button color="accent" routerLink="/" i18n>Return to WISE Home</a>
+      @if (complete) {
+        <div class="center">
+          <p class="mat-subtitle-2" i18n>Thank you for contacting WISE!</p>
+          <p i18n>Your message has been sent. We will get back to you as soon as possible.</p>
+          <br />
+          <div>
+            <a mat-flat-button color="accent" routerLink="/" i18n>Return to WISE Home</a>
+          </div>
         </div>
-      </div>
-      <form
-        *ngIf="!complete"
-        role="form"
-        (submit)="submit()"
-        [formGroup]="contactFormGroup"
-        class="flex flex-col"
-      >
-        <h2 class="accent center" i18n>Contact WISE</h2>
-        <p>
-          <mat-form-field appearance="fill" class="w-full">
-            <mat-label i18n>Name</mat-label>
-            <input matInput id="name" name="name" formControlName="name" />
-            <mat-error *ngIf="contactFormGroup.controls['name'].hasError('required')" i18n
-              >Name required</mat-error
-            >
-          </mat-form-field>
-        </p>
-        <p *ngIf="!isStudent">
-          <mat-form-field appearance="fill" class="w-full">
-            <mat-label i18n>Email</mat-label>
-            <input matInput id="email" name="email" formControlName="email" />
-            <mat-error *ngIf="contactFormGroup.controls['email'].hasError('required')" i18n
-              >Email required</mat-error
-            >
-            <mat-error *ngIf="contactFormGroup.controls['email'].hasError('email')" i18n
-              >Invalid Email</mat-error
-            >
-          </mat-form-field>
-        </p>
-        <p *ngIf="isStudent && teachers.length > 0">
-          <mat-form-field appearance="fill" class="w-full">
-            <mat-label i18n>Teacher</mat-label>
-            <mat-select formControlName="teacher">
-              <mat-option *ngFor="let teacher of teachers" [value]="teacher.username">
-                {{ teacher.displayName }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="contactFormGroup.controls['teacher'].hasError('required')" i18n
-              >Teacher required</mat-error
-            >
-          </mat-form-field>
-        </p>
-        <p>
-          <mat-form-field appearance="fill" class="w-full">
-            <mat-label i18n>Issue Type</mat-label>
-            <mat-select formControlName="issueType">
-              <mat-option *ngFor="let issueType of issueTypes" [value]="issueType.key">
-                {{ issueType.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="contactFormGroup.controls['issueType'].hasError('required')" i18n
-              >Issue Type required</mat-error
-            >
-          </mat-form-field>
-        </p>
-        <p *ngIf="projectName">
-          <mat-form-field appearance="fill" class="w-full">
-            <mat-label i18n>Project Name</mat-label>
-            <input matInput name="projectName" [value]="projectName" disabled />
-          </mat-form-field>
-        </p>
-        <p>
-          <mat-form-field appearance="fill" class="w-full">
-            <mat-label i18n>Summary</mat-label>
-            <input matInput id="summary" name="summary" formControlName="summary" />
-            <mat-error *ngIf="contactFormGroup.controls['summary'].hasError('required')" i18n
-              >Summary required</mat-error
-            >
-          </mat-form-field>
-        </p>
-        <p>
-          <mat-form-field appearance="fill" class="w-full">
-            <mat-label i18n>Description</mat-label>
-            <textarea
-              matInput
-              id="description"
-              name="description"
-              formControlName="description"
-              rows="10"
-              cols="10"
-            >
-            </textarea>
-            <mat-error *ngIf="contactFormGroup.controls['description'].hasError('required')" i18n
-              >Description required</mat-error
-            >
-          </mat-form-field>
-        </p>
-        <p *ngIf="isRecaptchaEnabled" i18n>
-          This site is protected by reCAPTCHA and the Google
-          <a href="https://policies.google.com/privacy">Privacy Policy</a> and
-          <a href="https://policies.google.com/terms">Terms of Service</a> apply.
-        </p>
-        <ng-container *ngIf="!isError; else error">
-          <div>&nbsp;</div>
-        </ng-container>
-        <ng-template #error>
-          <p
-            *ngIf="isRecaptchaEnabled && isRecaptchaError; else genericError"
-            class="center warn"
-            i18n
-          >
-            Recaptcha failed. Please reload the page and try again!
+      } @else {
+        <form role="form" (submit)="submit()" [formGroup]="contactFormGroup" class="flex flex-col">
+          <h2 class="accent center" i18n>Contact WISE</h2>
+          <p>
+            <mat-form-field appearance="fill" class="w-full">
+              <mat-label i18n>Name</mat-label>
+              <input matInput id="name" name="name" formControlName="name" />
+              @if (contactFormGroup.controls['name'].hasError('required')) {
+                <mat-error i18n>Name required</mat-error>
+              }
+            </mat-form-field>
+          </p>
+          @if (!isStudent) {
+            <p>
+              <mat-form-field appearance="fill" class="w-full">
+                <mat-label i18n>Email</mat-label>
+                <input matInput id="email" name="email" formControlName="email" />
+                @if (contactFormGroup.controls['email'].hasError('required')) {
+                  <mat-error i18n>Email required</mat-error>
+                }
+                @if (contactFormGroup.controls['email'].hasError('email')) {
+                  <mat-error i18n>Invalid Email</mat-error>
+                }
+              </mat-form-field>
+            </p>
+          } @else {
+            @if (teachers.length > 0) {
+              <p>
+                <mat-form-field appearance="fill" class="w-full">
+                  <mat-label i18n>Teacher</mat-label>
+                  <mat-select formControlName="teacher">
+                    @for (teacher of teachers; track teacher.username) {
+                      <mat-option [value]="teacher.username">
+                        {{ teacher.displayName }}
+                      </mat-option>
+                    }
+                  </mat-select>
+                  @if (contactFormGroup.controls['teacher'].hasError('required')) {
+                    <mat-error i18n>Teacher required</mat-error>
+                  }
+                </mat-form-field>
+              </p>
+            }
+          }
+          <p>
+            <mat-form-field appearance="fill" class="w-full">
+              <mat-label i18n>Issue Type</mat-label>
+              <mat-select formControlName="issueType">
+                @for (issueType of issueTypes; track issueType.key) {
+                  <mat-option [value]="issueType.key">
+                    {{ issueType.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (contactFormGroup.controls['issueType'].hasError('required')) {
+                <mat-error i18n>Issue Type required</mat-error>
+              }
+            </mat-form-field>
           </p>
-        </ng-template>
-        <ng-template #genericError>
-          <p class="center warn" i18n>
-            Sorry, there was a problem submitting the form. Please try again.
+          @if (projectName) {
+            <p>
+              <mat-form-field appearance="fill" class="w-full">
+                <mat-label i18n>Project Name</mat-label>
+                <input matInput name="projectName" [value]="projectName" disabled />
+              </mat-form-field>
+            </p>
+          }
+          <p>
+            <mat-form-field appearance="fill" class="w-full">
+              <mat-label i18n>Summary</mat-label>
+              <input matInput id="summary" name="summary" formControlName="summary" value="test" />
+              @if (contactFormGroup.controls['summary'].hasError('required')) {
+                <mat-error i18n>Summary required</mat-error>
+              }
+            </mat-form-field>
+          </p>
+          <p>
+            <mat-form-field appearance="fill" class="w-full">
+              <mat-label i18n>Description</mat-label>
+              <textarea
+                matInput
+                id="description"
+                name="description"
+                formControlName="description"
+                rows="10"
+                cols="10"
+                [placeholder]="
+                  isPublishIssueType()
+                    ? 'Why do you want to share this unit with the WISE community?'
+                    : ''
+                "
+              >
+              </textarea>
+              @if (contactFormGroup.controls['description'].hasError('required')) {
+                <mat-error i18n>Description required</mat-error>
+              }
+            </mat-form-field>
+          </p>
+          @if (isRecaptchaEnabled) {
+            <p i18n>
+              This site is protected by reCAPTCHA and the Google
+              <a href="https://policies.google.com/privacy">Privacy Policy</a> and
+              <a href="https://policies.google.com/terms">Terms of Service</a> apply.
+            </p>
+          }
+          @if (isError) {
+            @if (isRecaptchaEnabled && isRecaptchaError) {
+              <p class="center warn" i18n>
+                Recaptcha failed. Please reload the page and try again!
+              </p>
+            } @else {
+              <p class="center warn" i18n>
+                Sorry, there was a problem submitting the form. Please try again.
+              </p>
+            }
+          }
+          @if (isPublishIssueType()) {
+            <p class="center mat-caption" i18n>
+              By submitting, you will be sending your unit to be reviewed. If approved, it will be
+              added to the Community Built library. Make sure you have filled out all appropriate
+              fields in the Unit Info page in the authoring tool. We will be in touch if we require
+              any more information.
+            </p>
+            <p class="center mat-caption" i18n>Thank you!</p>
+          }
+          <p>
+            <button
+              mat-flat-button
+              color="primary"
+              type="submit"
+              [disabled]="!contactFormGroup.valid || isSendingRequest"
+              class="button--progress w-full"
+            >
+              @if (isSendingRequest) {
+                <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+              }
+              @if (isPublishIssueType()) {
+                <ng-container i18n>Submit for Review</ng-container>
+              } @else {
+                <ng-container i18n>Submit</ng-container>
+              }
+            </button>
           </p>
-        </ng-template>
-        <p>
-          <button
-            mat-flat-button
-            color="primary"
-            type="submit"
-            [disabled]="!contactFormGroup.valid || isSendingRequest"
-            class="button--progress w-full"
-          >
-            <mat-progress-bar *ngIf="isSendingRequest" mode="indeterminate"></mat-progress-bar>
-            <ng-container i18n>Submit</ng-container>
-          </button>
-        </p>
-      </form>
+        </form>
+      }
     </mat-card-content>
   </mat-card>
 </div>