feature[TW25954]: MVP - validation
diff --git a/web/apps/osee/src/app/api-key-management/api-key-form/api-key-form.component.html b/web/apps/osee/src/app/api-key-management/api-key-form/api-key-form.component.html
index 6a257a9..a0d160c 100644
--- a/web/apps/osee/src/app/api-key-management/api-key-form/api-key-form.component.html
+++ b/web/apps/osee/src/app/api-key-management/api-key-form/api-key-form.component.html
@@ -3,26 +3,37 @@
<form class="tw-max-w-lg" [formGroup]="apiKeyForm" (ngSubmit)="submitForm()">
<div class="tw-mb-4">
<label for="apiKeyName" class="tw-mb-2 tw-block tw-font-bold tw-text-white">API Key Name:</label>
- <input type="text" maxlength="20" formControlName="apiKeyName" class="tw-focus:tw-outline-none tw-focus:tw-shadow-outline tw-w-full tw-rounded-md tw-border-2 tw-px-3 tw-py-2 tw-leading-tight tw-text-gray-700" required>
+ <input type="text" maxlength="20" formControlName="apiKeyName" class="tw-w-full tw-rounded-md tw-border-2 tw-px-3 tw-py-2 tw-leading-tight tw-text-gray-700" required>
+
+ @if (apiKeyName?.invalid && (apiKeyName?.dirty || apiKeyName?.touched)) {
+ <div class="tw-text-sm tw-text-red-500">
+ @if (apiKeyName?.errors?.required) {<div>API Key Name is required.</div>}
+ </div>
+ }
</div>
<div class="tw-mb-4">
<label for="expirationDate" class="tw-mb-2 tw-block tw-font-bold tw-text-white">Expiration Date:</label>
- <input type="date" formControlName="expirationDate" class="tw-focus:tw-outline-none tw-focus:tw-shadow-outline tw-w-full tw-rounded-md tw-border-2 tw-px-3 tw-py-2 tw-leading-tight tw-text-gray-700" required>
+ <input type="date" formControlName="expirationDate" class="tw-w-full tw-rounded-md tw-border-2 tw-px-3 tw-py-2 tw-leading-tight tw-text-gray-700" required>
+ @if (expirationDate?.invalid && expirationDate?.dirty || expirationDate?.touched) {
+ <div class="tw-text-sm tw-text-red-500">
+ @if (expirationDate?.errors?.required) {<div>Expiration Date is required.</div>}
+ </div>
+ }
+
</div>
<div class="tw-mb-4">
<label class="tw-mb-2 tw-block tw-font-bold tw-text-white">API Key Scopes:</label>
- @for (scope of scopes; track scope)
- {
- <div>
- <input type="checkbox" [id]="scope" [formControlName]="scope" class="tw-mr-2 tw-leading-tight">
- <label [for]="scope" class="tw-text-white">{{ scope }}</label>
- </div>
- }
- </div>
- <!-- <div class="tw-flex tw-justify-between"> -->
- <div class="tw-flex tw-w-full tw-justify-center tw-space-x-2">
- <button type="button" (click)="closeForm()" class="focus:tw-shadow-outline tw-rounded tw-bg-warning-500 tw-px-4 tw-py-2 tw-font-bold tw-text-white hover:tw-bg-warning-700 focus:tw-outline-none">Cancel</button>
- <button type="submit" [disabled]="apiKeyForm.invalid" class="focus:tw-shadow-outline tw-rounded tw-bg-primary-500 tw-px-4 tw-py-2 tw-font-bold tw-text-white hover:tw-bg-primary-700 focus:tw-outline-none">Create</button>
- </div>
+ @for (scope of scopes; track scope)
+ {
+ <div>
+ <input type="checkbox" [id]="scope" [formControlName]="scope" class="tw-mr-2 tw-leading-tight">
+ <label [for]="scope" class="tw-text-white">{{ scope }}</label>
+ </div>
+ }
+ </div>
+ <div class="tw-flex tw-w-full tw-justify-center tw-space-x-2">
+ <button type="button" (click)="closeForm()" class="tw-rounded tw-bg-warning-500 tw-px-4 tw-py-2 tw-font-bold tw-text-white hover:tw-bg-warning-700 focus:tw-outline-none">Cancel</button>
+ <button type="submit" [disabled]="apiKeyForm.invalid" class="tw-rounded tw-bg-primary-500 tw-px-4 tw-py-2 tw-font-bold tw-text-white hover:tw-bg-primary-700 focus:tw-outline-none">Create</button>
+ </div>
</form>
</div>
diff --git a/web/apps/osee/src/app/api-key-management/api-key-form/api-key-form.component.ts b/web/apps/osee/src/app/api-key-management/api-key-form/api-key-form.component.ts
index 6689754..abe79a2 100644
--- a/web/apps/osee/src/app/api-key-management/api-key-form/api-key-form.component.ts
+++ b/web/apps/osee/src/app/api-key-management/api-key-form/api-key-form.component.ts
@@ -22,7 +22,7 @@
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.apiKeyForm = this.fb.group({
- apiKeyName: ['', [Validators.required, Validators.maxLength(10)]],
+ apiKeyName: ['', Validators.required],
expirationDate: ['', Validators.required]
});
@@ -31,6 +31,10 @@
});
}
+ get expirationDate() {
+ return this.apiKeyForm.get('expirationDate');
+ }
+
get apiKeyName() {
return this.apiKeyForm.get('apiKeyName');
}
