Aligns form styles and reverts project autocomplete (#3989)

* Aligns form styles and reverts project autocomplete * Adding cases * Update src/dispatch/static/dispatch/src/auth/Register.vue Co-authored-by: Marc Vilanova <[email protected]> --------- Co-authored-by: Marc Vilanova <[email protected]>
Netflix · Nov 16, 2023 · 8da4442 · 8da4442
1 parent df8d102
commit 8da4442
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 131 deletions.
diff --git a/src/dispatch/static/dispatch/src/auth/Login.vue b/src/dispatch/static/dispatch/src/auth/Login.vue
@@ -1,6 +1,6 @@
 <template>
   <v-form @submit.prevent="basicLogin({ email, password })" v-slot="{ isValid }">
-    <v-card class="mx-auto ma-4" max-width="600" flat :loading="loading">
+    <v-card class="mx-auto ma-4" max-width="600" variant="outlined" :loading="loading">
       <v-card-title> Login </v-card-title>
       <v-card-text>
         <v-container>

diff --git a/src/dispatch/static/dispatch/src/auth/Register.vue b/src/dispatch/static/dispatch/src/auth/Register.vue
@@ -1,6 +1,6 @@
 <template>
   <v-form @submit.prevent="register({ email, password })" v-slot="{ isValid }">
-    <v-card class="mx-auto ma-4" max-width="600" flat :loading="loading">
+    <v-card class="mx-auto ma-4" variant="outlined" max-width="600" flat :loading="loading">
       <v-card-title> Register </v-card-title>
       <v-card-text>
         <v-container>
@@ -26,20 +26,22 @@
         </v-container>
       </v-card-text>
       <v-card-actions>
-        <v-list-item lines="two">
-          <v-list-item-subtitle>
-            Have a account? <router-link :to="{ name: 'BasicLogin' }"> Login </router-link>
-          </v-list-item-subtitle>
-
-          <template #append>
-            <v-btn type="submit" color="info" :loading="loading" :disabled="!isValid.value">
-              Register
-              <template #loader>
-                <v-progress-linear indeterminate color="white" />
-              </template>
-            </v-btn>
+        <div class="text-subheader-2 pl-4 text-medium-emphasis">
+          Have an account? <router-link :to="{ name: 'BasicLogin' }"> Login </router-link>
+        </div>
+        <v-spacer />
+        <v-btn
+          type="submit"
+          variant="elevated"
+          color="info"
+          :loading="loading"
+          :disabled="!isValid.value"
+        >
+          Register
+          <template #loader>
+            <v-progress-linear indeterminate color="white" />
           </template>
-        </v-list-item>
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-form>

diff --git a/src/dispatch/static/dispatch/src/case/DetailsTab.vue b/src/dispatch/static/dispatch/src/case/DetailsTab.vue
@@ -58,7 +58,7 @@
         />
       </v-col>
       <v-col cols="6">
-        <project-auto-complete v-model="project" />
+        <project-select v-model="project" />
       </v-col>
       <v-col cols="6">
         <case-type-select v-model="case_type" :project="project" />
@@ -82,7 +82,7 @@
           v-model="visibility"
           label="Visibility"
           :items="visibilities"
-          hint="The visibilty of the case."
+          hint="The visibility of the case."
         />
       </v-col>
       <v-col cols="12">
@@ -131,7 +131,7 @@ import CaseSeveritySelect from "@/case/severity/CaseSeveritySelect.vue"
 import CaseTypeSelect from "@/case/type/CaseTypeSelect.vue"
 import DateTimePickerMenu from "@/components/DateTimePickerMenu.vue"
 import IncidentFilterCombobox from "@/incident/IncidentFilterCombobox.vue"
-import ProjectAutoComplete from "@/project/ProjectAutoComplete.vue"
+import ProjectSelect from "@/project/ProjectSelect.vue"
 import ParticipantSelect from "@/components/ParticipantSelect.vue"
 import TagFilterAutoComplete from "@/tag/TagFilterAutoComplete.vue"
 
@@ -151,7 +151,7 @@ export default {
     DateTimePickerMenu,
     IncidentFilterCombobox,
     ParticipantSelect,
-    ProjectAutoComplete,
+    ProjectSelect,
     TagFilterAutoComplete,
   },
 

diff --git a/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue b/src/dispatch/static/dispatch/src/case/ReportReceiptCard.vue
@@ -1,7 +1,6 @@
 <template>
-  <v-card class="mx-auto ma-4" max-width="600">
+  <v-card class="mx-auto ma-4" title="Case Report" max-width="600">
     <v-card-text>
-      <p class="text-h3 text--primary">Issue Report</p>
       <p>
         This page will be populated with case resources as they are created (if available). If you
         have any questions, please feel free to review the Frequently Asked Questions (FAQ) document
@@ -134,12 +133,13 @@
           </span>
         </v-list-group>
       </v-list>
-      <v-container>
-        <v-col cols="12">
-          <v-btn color="info" variant="flat" @click="resetSelected()"> Report another issue </v-btn>
-        </v-col>
-      </v-container>
     </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="info" block variant="flat" @click="resetSelected()">
+        Report Another Issue
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 

diff --git a/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue b/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
@@ -1,18 +1,24 @@
 <template>
   <v-form @submit.prevent v-slot="{ isValid }">
-    <v-card class="mx-auto ma-4" max-width="600" flat :loading="loading">
+    <v-card
+      class="mx-auto ma-4"
+      max-width="600"
+      variant="outlined"
+      title="          Open a Case
+"
+      :loading="loading"
+    >
+      <template v-slot:append>
+        <v-tooltip location="bottom">
+          <template #activator="{ props }">
+            <v-btn icon variant="text" v-bind="props" @click="copyView">
+              <v-icon>mdi-content-copy</v-icon>
+            </v-btn>
+          </template>
+          <span>Copy current fields as template.</span>
+        </v-tooltip>
+      </template>
       <v-card-text>
-        <p class="text-h4 text--primary">
-          Open a Case
-          <v-tooltip location="bottom">
-            <template #activator="{ props }">
-              <v-btn icon variant="text" v-bind="props" @click="copyView">
-                <v-icon>mdi-content-copy</v-icon>
-              </v-btn>
-            </template>
-            <span>Copy current fields as template.</span>
-          </v-tooltip>
-        </p>
         <p>
           Cases are meant to triage events that do not raise to the level of incidents, but can be
           escalated to incidents if necessary. If you suspect a security issue and need help, please
@@ -68,23 +74,25 @@
                 <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
               </v-col>
             </v-row>
-            <template>
-              <v-btn
-                color="info"
-                variant="flat"
-                :loading="loading"
-                :disabled="!isValid.value"
-                @click="report()"
-              >
-                Submit
-                <template #loader>
-                  <v-progress-linear indeterminate color="white" />
-                </template>
-              </v-btn>
-            </template>
           </v-container>
         </v-form>
       </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="info"
+          variant="flat"
+          block
+          :loading="loading"
+          :disabled="!isValid.value"
+          @click="report()"
+        >
+          Submit
+          <template #loader>
+            <v-progress-linear indeterminate color="white" />
+          </template>
+        </v-btn>
+      </v-card-actions>
     </v-card>
   </v-form>
 </template>

diff --git a/src/dispatch/static/dispatch/src/components/layouts/BasicLayout.vue b/src/dispatch/static/dispatch/src/components/layouts/BasicLayout.vue
@@ -10,9 +10,7 @@
           </router-link>
         </template>
       </v-app-bar>
-      <v-card>
-        <router-view :key="$route.path" />
-      </v-card>
+      <router-view :key="$route.path" />
     </v-main>
   </v-app>
 </template>

diff --git a/src/dispatch/static/dispatch/src/incident/ReportForm.vue b/src/dispatch/static/dispatch/src/incident/ReportForm.vue
@@ -1,7 +1,6 @@
 <template>
   <v-app>
     <notification-snackbars-wrapper />
-
     <v-main>
       <v-app-bar flat style="border-bottom: 1px solid #d2d2d2 !important" color="background0">
         <template #prepend>

diff --git a/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue b/src/dispatch/static/dispatch/src/incident/ReportReceiptCard.vue
@@ -1,7 +1,6 @@
 <template>
-  <v-card class="mx-auto ma-4" max-width="600">
+  <v-card class="mx-auto ma-4" variant="outlined" title="Incident Report" max-width="600">
     <v-card-text>
-      <p class="text-h3 text--primary">Incident Report</p>
       <p>
         This page will be populated with incident resources as they are created (if available). If
         you have any questions, please feel free to review the Frequently Asked Questions (FAQ)
@@ -171,14 +170,13 @@
           </span>
         </v-list-group>
       </v-list>
-      <v-container>
-        <v-col cols="12">
-          <v-btn color="info" variant="flat" @click="resetSelected()">
-            Report another incident
-          </v-btn>
-        </v-col>
-      </v-container>
     </v-card-text>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="info" block variant="flat" @click="resetSelected()">
+        Report Another Incident
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 

diff --git a/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue b/src/dispatch/static/dispatch/src/incident/ReportSubmissionCard.vue
@@ -1,18 +1,23 @@
 <template>
   <v-form @submit.prevent="report()" v-slot="{ isValid }">
-    <v-card class="mx-auto ma-4" max-width="600" flat :loading="loading">
+    <v-card
+      class="mx-auto ma-4"
+      title="Report Incident"
+      max-width="600"
+      variant="outlined"
+      :loading="loading"
+    >
+      <template v-slot:append>
+        <v-tooltip location="bottom">
+          <template #activator="{ props }">
+            <v-btn icon variant="text" v-bind="props" @click="copyView">
+              <v-icon>mdi-content-copy</v-icon>
+            </v-btn>
+          </template>
+          <span>Copy current fields as template.</span>
+        </v-tooltip>
+      </template>
       <v-card-text>
-        <p class="text-h4 text--primary">
-          Report Incident
-          <v-tooltip location="bottom">
-            <template #activator="{ props }">
-              <v-btn icon variant="text" v-bind="props" @click="copyView">
-                <v-icon>mdi-content-copy</v-icon>
-              </v-btn>
-            </template>
-            <span>Copy current fields as template.</span>
-          </v-tooltip>
-        </p>
         <p>
           If you suspect an incident and need help, please fill out this form to the best of your
           abilities.
@@ -24,61 +29,64 @@
             <v-icon size="small">mdi-open-in-new</v-icon>
           </a>
         </p>
-        <v-container>
-          <v-row>
-            <v-col cols="12">
-              <v-textarea
-                v-model="title"
-                label="Title"
-                hint="A brief explanatory title. You can change this later."
-                clearable
-                auto-grow
-                rows="2"
-                required
-                name="Title"
-                :rules="[rules.required]"
-              />
-            </v-col>
-            <v-col cols="12">
-              <v-textarea
-                v-model="description"
-                label="Description"
-                hint="A summary of what you know so far. It's all right if this is incomplete."
-                clearable
-                auto-grow
-                rows="3"
-                required
-                name="Description"
-                :rules="[rules.required]"
-              />
-            </v-col>
-            <v-col cols="12">
-              <project-select v-model="project" />
-            </v-col>
-            <v-col cols="12">
-              <incident-type-select :project="project" v-model="incident_type" />
-            </v-col>
-            <v-col cols="12">
-              <incident-priority-select :project="project" v-model="incident_priority" />
-            </v-col>
-            <v-col cols="12">
-              <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
-            </v-col>
-          </v-row>
-          <v-btn
-            color="info"
-            variant="flat"
-            :loading="loading"
-            :disabled="!isValid.value"
-            type="submit"
-          >
-            Submit
-            <template #loader>
-              <v-progress-linear indeterminate color="white" />
-            </template>
-          </v-btn>
-        </v-container>
+        <v-row>
+          <v-col cols="12">
+            <v-textarea
+              v-model="title"
+              label="Title"
+              hint="A brief explanatory title. You can change this later."
+              clearable
+              auto-grow
+              rows="2"
+              required
+              name="Title"
+              :rules="[rules.required]"
+            />
+          </v-col>
+          <v-col cols="12">
+            <v-textarea
+              v-model="description"
+              label="Description"
+              hint="A summary of what you know so far. It's all right if this is incomplete."
+              clearable
+              auto-grow
+              rows="3"
+              required
+              name="Description"
+              :rules="[rules.required]"
+            />
+          </v-col>
+          <v-col cols="12">
+            <project-select v-model="project" />
+          </v-col>
+          <v-col cols="12">
+            <incident-type-select :project="project" v-model="incident_type" />
+          </v-col>
+          <v-col cols="12">
+            <incident-priority-select :project="project" v-model="incident_priority" />
+          </v-col>
+          <v-col cols="12">
+            <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
+          </v-col>
+        </v-row>
       </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+
+        <v-btn
+          color="info"
+          block
+          variant="flat"
+          :loading="loading"
+          :disabled="!isValid.value"
+          type="submit"
+        >
+          Submit
+          <template #loader>
+            <v-progress-linear indeterminate color="white" />
+          </template>
+        </v-btn>
+      </v-card-actions>
     </v-card>
   </v-form>
 </template>