From cb4b01c310b5b9f8cbe8caf9a25c7ac967ea62fb Mon Sep 17 00:00:00 2001
From: Abel Soares Siqueira <abel.s.siqueira@gmail.com>
Date: Thu, 18 Aug 2022 13:38:17 +0200
Subject: [PATCH] Refactor LayoutStepper and all Screens

---
 src/components/LayoutStepper.vue          |  19 ++-
 src/components/ScreenAbstract.vue         |  59 +++-----
 src/components/ScreenAuthors.vue          | 120 +++++++---------
 src/components/ScreenFinishAdvanced.vue   |  90 +++++-------
 src/components/ScreenFinishMinimum.vue    |  91 +++++-------
 src/components/ScreenIdentifiers.vue      | 122 +++++++---------
 src/components/ScreenKeywords.vue         | 104 ++++++--------
 src/components/ScreenLicense.vue          |  82 +++++------
 src/components/ScreenRelatedResources.vue | 148 +++++++++----------
 src/components/ScreenStart.vue            | 108 +++++++-------
 src/components/ScreenVersionSpecific.vue  | 164 ++++++++++------------
 11 files changed, 491 insertions(+), 616 deletions(-)

diff --git a/src/components/LayoutStepper.vue b/src/components/LayoutStepper.vue
index f471af4f..586b400f 100644
--- a/src/components/LayoutStepper.vue
+++ b/src/components/LayoutStepper.vue
@@ -36,7 +36,17 @@
                     id="middle"
                     class="row"
                 >
-                    <router-view />
+                    <Stepper />
+                    <div
+                        id="form"
+                        class="col-12 col-lg-5 col-sm-10"
+                    >
+                        <router-view />
+
+                        <div id="form-button-bar">
+                            <StepperActions />
+                        </div>
+                    </div>
                     <div
                         id="preview-static"
                         class="col-12 col-lg-5 gt-md"
@@ -51,6 +61,7 @@
                     </div>
                 </q-page>
             </q-page-container>
+
             <q-footer id="footer-inner">
                 <Footer />
             </q-footer>
@@ -64,6 +75,8 @@ import DownloadButton from 'components/DownloadButton.vue'
 import Footer from 'components/Footer.vue'
 import Header from 'components/Header.vue'
 import Preview from 'components/Preview.vue'
+import Stepper from 'components/Stepper.vue'
+import StepperActions from 'components/StepperActions.vue'
 import { useRoute } from 'vue-router'
 
 export default defineComponent({
@@ -72,7 +85,9 @@ export default defineComponent({
         Header,
         Preview,
         DownloadButton,
-        Footer
+        Footer,
+        Stepper,
+        StepperActions
     },
     setup () {
         const isPreviewDrawerEnabled = ref(false)
diff --git a/src/components/ScreenAbstract.vue b/src/components/ScreenAbstract.vue
index 6fbad59c..f34e3e94 100644
--- a/src/components/ScreenAbstract.vue
+++ b/src/components/ScreenAbstract.vue
@@ -1,53 +1,38 @@
 <template>
-    <Stepper />
-
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1 class="page-title">
-                Abstract
-            </h1>
-        </div>
-
-        <div id="form-content">
-            <h2 class="question">
-                Please provide a description of the work
-                <SchemaGuideLink anchor="#abstract" />
-            </h2>
-            <q-input
-                autogrow
-                bg-color="white"
-                input-style="min-height: 100px; max-height: 444px"
-                label="abstract"
-                outlined
-                standout
-                type="textarea"
-                v-bind:model-value="abstract"
-                v-on:update:modelValue="setAbstract"
-            />
-        </div>
+    <div id="form-title">
+        <h1 class="page-title">
+            Abstract
+        </h1>
+    </div>
 
-        <div id="form-button-bar">
-            <StepperActions />
-        </div>
+    <div id="form-content">
+        <h2 class="question">
+            Please provide a description of the work
+            <SchemaGuideLink anchor="#abstract" />
+        </h2>
+        <q-input
+            autogrow
+            bg-color="white"
+            input-style="min-height: 100px; max-height: 444px"
+            label="abstract"
+            outlined
+            standout
+            type="textarea"
+            v-bind:model-value="abstract"
+            v-on:update:modelValue="setAbstract"
+        />
     </div>
 </template>
 
 <script lang="ts">
 import SchemaGuideLink from 'components/SchemaGuideLink.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import { defineComponent } from 'vue'
 import { useCff } from 'src/store/cff'
 
 export default defineComponent({
     name: 'ScreenAbstract',
     components: {
-        SchemaGuideLink,
-        Stepper,
-        StepperActions
+        SchemaGuideLink
     },
     setup () {
         const { abstract, setAbstract } = useCff()
diff --git a/src/components/ScreenAuthors.vue b/src/components/ScreenAuthors.vue
index 5300541d..d3acfdc0 100644
--- a/src/components/ScreenAuthors.vue
+++ b/src/components/ScreenAuthors.vue
@@ -1,74 +1,64 @@
 <template>
-    <Stepper />
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1 class="page-title">
-                Authors
-            </h1>
-        </div>
-
-        <div id="form-content">
-            <h2 class="question">
-                Who are the author(s) of the work?
-                <SchemaGuideLink anchor="#authors" />
-            </h2>
-            <div class="scroll-to-bottom-container">
-                <span class="bottom" />
-                <div>
-                    <div
-                        class="q-mb-md q-mr-lg"
-                        v-bind:key="index"
-                        v-for="(author, index) in authors"
-                    >
-                        <AuthorCardViewing
-                            v-if="editingId !== index"
-                            v-bind:index="index"
-                            v-bind:author="author"
-                            v-bind:num-authors="authors.length"
-                            v-on:editPressed="() => (editingId = index)"
-                            v-on:moveDown="moveAuthorDown(index)"
-                            v-on:moveUp="moveAuthorUp(index)"
-                        />
-                        <AuthorCardEditing
-                            v-else
-                            v-bind:index="index"
-                            v-bind="author"
-                            v-on:update="setAuthorField"
-                            v-on:closePressed="() => (editingId = -1)"
-                            v-on:removePressed="removeAuthor"
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <q-btn
-                class="q-mt-md q-mb-md"
-                color="primary"
-                no-caps
-                v-on:click="addAuthor"
-            >
-                Add author
-            </q-btn>
+    <div id="form-title">
+        <h1 class="page-title">
+            Authors
+        </h1>
+    </div>
 
-            <q-banner
-                v-if="authorsErrors.length > 0"
-                v-bind:class="['bg-warning', 'text-negative', authorsErrors.length > 0 ? 'has-error' : '']"
-            >
+    <div id="form-content">
+        <h2 class="question">
+            Who are the author(s) of the work?
+            <SchemaGuideLink anchor="#authors" />
+        </h2>
+        <div class="scroll-to-bottom-container">
+            <span class="bottom" />
+            <div>
                 <div
+                    class="q-mb-md q-mr-lg"
                     v-bind:key="index"
-                    v-for="(screenMessage, index) in authorsErrors"
+                    v-for="(author, index) in authors"
                 >
-                    {{ screenMessage }}
+                    <AuthorCardViewing
+                        v-if="editingId !== index"
+                        v-bind:index="index"
+                        v-bind:author="author"
+                        v-bind:num-authors="authors.length"
+                        v-on:editPressed="() => (editingId = index)"
+                        v-on:moveDown="moveAuthorDown(index)"
+                        v-on:moveUp="moveAuthorUp(index)"
+                    />
+                    <AuthorCardEditing
+                        v-else
+                        v-bind:index="index"
+                        v-bind="author"
+                        v-on:update="setAuthorField"
+                        v-on:closePressed="() => (editingId = -1)"
+                        v-on:removePressed="removeAuthor"
+                    />
                 </div>
-            </q-banner>
+            </div>
         </div>
 
-        <div id="form-button-bar">
-            <StepperActions />
-        </div>
+        <q-btn
+            class="q-mt-md q-mb-md"
+            color="primary"
+            no-caps
+            v-on:click="addAuthor"
+        >
+            Add author
+        </q-btn>
+
+        <q-banner
+            v-if="authorsErrors.length > 0"
+            v-bind:class="['bg-warning', 'text-negative', authorsErrors.length > 0 ? 'has-error' : '']"
+        >
+            <div
+                v-bind:key="index"
+                v-for="(screenMessage, index) in authorsErrors"
+            >
+                {{ screenMessage }}
+            </div>
+        </q-banner>
     </div>
 </template>
 
@@ -80,8 +70,6 @@ import AuthorCardEditing from 'components/AuthorCardEditing.vue'
 import AuthorCardViewing from 'components/AuthorCardViewing.vue'
 import { AuthorType } from 'src/types'
 import SchemaGuideLink from 'components/SchemaGuideLink.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import { scrollToBottom } from 'src/scroll-to-bottom'
 import { useCff } from 'src/store/cff'
 import { useStepperErrors } from 'src/store/stepper-errors'
@@ -91,8 +79,6 @@ export default defineComponent({
     name: 'ScreenAuthors',
     components: {
         SchemaGuideLink,
-        Stepper,
-        StepperActions,
         AuthorCardEditing,
         AuthorCardViewing
     },
diff --git a/src/components/ScreenFinishAdvanced.vue b/src/components/ScreenFinishAdvanced.vue
index 7e3831e4..ccf15c19 100644
--- a/src/components/ScreenFinishAdvanced.vue
+++ b/src/components/ScreenFinishAdvanced.vue
@@ -1,54 +1,44 @@
 <template>
-    <Stepper />
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1
-                class="finish-title"
-                v-if="isValidCFF"
-            >
-                Congratulations
-            </h1>
-            <h1
-                class="finish-title"
-                v-else
-            >
-                Uh-oh!
-            </h1>
-        </div>
+    <div id="form-title">
+        <h1
+            class="finish-title"
+            v-if="isValidCFF"
+        >
+            Congratulations
+        </h1>
+        <h1
+            class="finish-title"
+            v-else
+        >
+            Uh-oh!
+        </h1>
+    </div>
 
-        <div id="form-content">
-            <div v-if="isValidCFF">
-                <p class="finish-paragraph">
-                    Use the buttons below to download your CITATION.cff file, or reset the form to start over.
-                </p>
-                <p class="finish-paragraph">
-                    Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
-                </p>
-                <div class="row">
-                    <q-btn
-                        class="col-4 q-ma-lg"
-                        color="primary"
-                        icon="refresh"
-                        label="Reset form"
-                        no-caps
-                        size="xl"
-                        v-on:click="createAnother"
-                    />
-                    <DownloadButton class="col-4 q-ma-lg" />
-                </div>
-            </div>
-            <div v-else>
-                <p class="finish-paragraph">
-                    Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
-                </p>
+    <div id="form-content">
+        <div v-if="isValidCFF">
+            <p class="finish-paragraph">
+                Use the buttons below to download your CITATION.cff file, or reset the form to start over.
+            </p>
+            <p class="finish-paragraph">
+                Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
+            </p>
+            <div class="row">
+                <q-btn
+                    class="col-4 q-ma-lg"
+                    color="primary"
+                    icon="refresh"
+                    label="Reset form"
+                    no-caps
+                    size="xl"
+                    v-on:click="createAnother"
+                />
+                <DownloadButton class="col-4 q-ma-lg" />
             </div>
         </div>
-
-        <div id="form-button-bar">
-            <StepperActions />
+        <div v-else>
+            <p class="finish-paragraph">
+                Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
+            </p>
         </div>
     </div>
 </template>
@@ -56,8 +46,6 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import DownloadButton from 'components/DownloadButton.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import { useApp } from 'src/store/app'
 import { useCff } from 'src/store/cff'
 import { useStepperErrors } from 'src/store/stepper-errors'
@@ -66,9 +54,7 @@ import { useValidation } from 'src/store/validation'
 export default defineComponent({
     name: 'ScreenFinishAdvanced',
     components: {
-        DownloadButton,
-        Stepper,
-        StepperActions
+        DownloadButton
     },
     setup () {
         const { setStepName, setShowAdvanced } = useApp()
diff --git a/src/components/ScreenFinishMinimum.vue b/src/components/ScreenFinishMinimum.vue
index 5e37fc3e..b2146d68 100644
--- a/src/components/ScreenFinishMinimum.vue
+++ b/src/components/ScreenFinishMinimum.vue
@@ -1,54 +1,45 @@
 <template>
-    <Stepper />
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1
-                class="finish-title"
-                v-if="isValidCFF"
-            >
-                Congratulations
-            </h1>
-            <h1
-                class="finish-title"
-                v-else
-            >
-                Uh-oh!
-            </h1>
-        </div>
+    <div id="form-title">
+        <h1
+            class="finish-title"
+            v-if="isValidCFF"
+        >
+            Congratulations
+        </h1>
+        <h1
+            class="finish-title"
+            v-else
+        >
+            Uh-oh!
+        </h1>
+    </div>
 
-        <div id="form-content">
-            <div v-if="isValidCFF">
-                <p class="finish-paragraph">
-                    You now have a minimal CITATION.cff file. Use the buttons below to download your CITATION.cff file, or continue adding more properties.
-                </p>
-                <p class="finish-paragraph">
-                    Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
-                </p>
-                <div class="row">
-                    <DownloadButton class="col-4 q-ma-lg" />
-                    <q-btn
-                        class="col-4 q-ma-lg"
-                        color="primary"
-                        icon="workspace_premium"
-                        label="Add more"
-                        no-caps
-                        size="xl"
-                        to="/identifiers"
-                        v-on:click="showAdvanced"
-                    />
-                </div>
-            </div>
-            <div v-else>
-                <p class="finish-paragraph">
-                    Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
-                </p>
+    <div id="form-content">
+        <div v-if="isValidCFF">
+            <p class="finish-paragraph">
+                You now have a minimal CITATION.cff file. Use the buttons below to download your CITATION.cff file, or continue adding more properties.
+            </p>
+            <p class="finish-paragraph">
+                Distribute the CITATION.cff with your project, for instance, by adding it to the root of your GitHub repository.
+            </p>
+            <div class="row">
+                <DownloadButton class="col-4 q-ma-lg" />
+                <q-btn
+                    class="col-4 q-ma-lg"
+                    color="primary"
+                    icon="workspace_premium"
+                    label="Add more"
+                    no-caps
+                    size="xl"
+                    to="/identifiers"
+                    v-on:click="showAdvanced"
+                />
             </div>
         </div>
-        <div id="form-button-bar">
-            <StepperActions />
+        <div v-else>
+            <p class="finish-paragraph">
+                Your CITATION.cff is not valid just yet. Go back to the form to make some changes.
+            </p>
         </div>
     </div>
 </template>
@@ -56,17 +47,13 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import DownloadButton from 'components/DownloadButton.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import { useApp } from 'src/store/app'
 import { useValidation } from 'src/store/validation'
 
 export default defineComponent({
     name: 'ScreenFinishMinimum',
     components: {
-        DownloadButton,
-        Stepper,
-        StepperActions
+        DownloadButton
     },
     setup () {
         const { setShowAdvanced, setStepName } = useApp()
diff --git a/src/components/ScreenIdentifiers.vue b/src/components/ScreenIdentifiers.vue
index f2cc6b0e..735d078e 100644
--- a/src/components/ScreenIdentifiers.vue
+++ b/src/components/ScreenIdentifiers.vue
@@ -1,75 +1,65 @@
 <template>
-    <Stepper />
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1 class="page-title">
-                Identifiers
-            </h1>
-        </div>
-
-        <div id="form-content">
-            <h2 class="question">
-                What persistent identifiers are available for the work?
-                <SchemaGuideLink anchor="#identifiers" />
-            </h2>
-            <div class="scroll-to-bottom-container">
-                <span class="bottom" />
-                <div>
-                    <div
-                        class="q-mb-md q-mr-lg"
-                        v-bind:key="index"
-                        v-for="(identifier, index) in identifiers"
-                    >
-                        <IdentifierCardViewing
-                            v-if="editingId !== index"
-                            v-bind:index="index"
-                            v-bind:identifier="identifier"
-                            v-bind:num-identifiers="identifiers.length"
-                            v-on:editPressed="() => (editingId = index)"
-                            v-on:moveDown="moveIdentifierDown(index)"
-                            v-on:moveUp="moveIdentifierUp(index)"
-                        />
-                        <IdentifierCardEditing
-                            v-else
-                            v-bind:index="index"
-                            v-bind="identifier"
-                            v-on:updateType="setIdentifierTypeField"
-                            v-on:updateValue="setIdentifierValueField"
-                            v-on:updateDescription="setIdentifierDescriptionField"
-                            v-on:closePressed="() => (editingId = -1)"
-                            v-on:removePressed="removeIdentifier"
-                        />
-                    </div>
-                </div>
-            </div>
-            <q-btn
-                class="q-mt-md q-mb-md"
-                color="primary"
-                no-caps
-                v-on:click="addIdentifier"
-            >
-                Add identifier
-            </q-btn>
+    <div id="form-title">
+        <h1 class="page-title">
+            Identifiers
+        </h1>
+    </div>
 
-            <q-banner
-                v-if="identifiersErrors.length > 0"
-                v-bind:class="['bg-warning', 'text-negative', identifiersErrors.length > 0 ? 'has-error' : '']"
-            >
+    <div id="form-content">
+        <h2 class="question">
+            What persistent identifiers are available for the work?
+            <SchemaGuideLink anchor="#identifiers" />
+        </h2>
+        <div class="scroll-to-bottom-container">
+            <span class="bottom" />
+            <div>
                 <div
+                    class="q-mb-md q-mr-lg"
                     v-bind:key="index"
-                    v-for="(screenMessage, index) in identifiersErrors"
+                    v-for="(identifier, index) in identifiers"
                 >
-                    {{ screenMessage }}
+                    <IdentifierCardViewing
+                        v-if="editingId !== index"
+                        v-bind:index="index"
+                        v-bind:identifier="identifier"
+                        v-bind:num-identifiers="identifiers.length"
+                        v-on:editPressed="() => (editingId = index)"
+                        v-on:moveDown="moveIdentifierDown(index)"
+                        v-on:moveUp="moveIdentifierUp(index)"
+                    />
+                    <IdentifierCardEditing
+                        v-else
+                        v-bind:index="index"
+                        v-bind="identifier"
+                        v-on:updateType="setIdentifierTypeField"
+                        v-on:updateValue="setIdentifierValueField"
+                        v-on:updateDescription="setIdentifierDescriptionField"
+                        v-on:closePressed="() => (editingId = -1)"
+                        v-on:removePressed="removeIdentifier"
+                    />
                 </div>
-            </q-banner>
+            </div>
         </div>
+        <q-btn
+            class="q-mt-md q-mb-md"
+            color="primary"
+            no-caps
+            v-on:click="addIdentifier"
+        >
+            Add identifier
+        </q-btn>
 
-        <div id="form-button-bar">
-            <StepperActions />
-        </div>
+        <q-banner
+            v-if="identifiersErrors.length > 0"
+            v-bind:class="['bg-warning', 'text-negative', identifiersErrors.length > 0 ? 'has-error' : '']"
+        >
+            <div
+                v-bind:key="index"
+                v-for="(screenMessage, index) in identifiersErrors"
+            >
+                {{ screenMessage }}
+            </div>
+        </q-banner>
     </div>
 </template>
 
@@ -81,8 +71,6 @@ import { moveDown, moveUp } from 'src/updown'
 import IdentifierCardEditing from 'components/IdentifierCardEditing.vue'
 import IdentifierCardViewing from 'components/IdentifierCardViewing.vue'
 import SchemaGuideLink from 'components/SchemaGuideLink.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import { scrollToBottom } from 'src/scroll-to-bottom'
 import { useCff } from 'src/store/cff'
 import { useStepperErrors } from 'src/store/stepper-errors'
@@ -92,8 +80,6 @@ export default defineComponent({
     name: 'ScreenIdentifiers',
     components: {
         SchemaGuideLink,
-        Stepper,
-        StepperActions,
         IdentifierCardEditing,
         IdentifierCardViewing
     },
diff --git a/src/components/ScreenKeywords.vue b/src/components/ScreenKeywords.vue
index 161d56de..c420630b 100644
--- a/src/components/ScreenKeywords.vue
+++ b/src/components/ScreenKeywords.vue
@@ -1,63 +1,53 @@
 <template>
-    <Stepper />
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1 class="page-title">
-                Keywords
-            </h1>
-        </div>
-
-        <div id="form-content">
-            <h2 class="question">
-                What keywords describe the work?
-                <SchemaGuideLink anchor="#keywords" />
-            </h2>
-            <div class="scroll-to-bottom-container">
-                <span class="bottom" />
-                <div>
-                    <Keyword
-                        class="q-mr-lg"
-                        v-bind:key="index"
-                        v-bind:keyword="keyword"
-                        v-bind:index="index"
-                        v-bind:num-keywords="keywords.length"
-                        v-for="(keyword, index) in keywords"
-                        v-on:moveDown="moveDown(index, keywords, setKeywords)"
-                        v-on:moveUp="moveUp(index, keywords, setKeywords)"
-                        v-on:removePressed="removeKeyword(index)"
-                        v-on:update="setKeyword(index, $event)"
-                    />
-                </div>
-            </div>
-            <q-btn
-                class="q-mt-md q-mb-md"
-                color="primary"
-                no-caps
-                style="width: max-content"
-                v-on:click="addKeyword"
-            >
-                Add keyword
-            </q-btn>
+    <div id="form-title">
+        <h1 class="page-title">
+            Keywords
+        </h1>
+    </div>
 
-            <q-banner
-                v-if="keywordsErrors.length > 0"
-                v-bind:class="['bg-warning', 'text-negative', keywordsErrors.length > 0 ? 'has-error' : '']"
-            >
-                <div
+    <div id="form-content">
+        <h2 class="question">
+            What keywords describe the work?
+            <SchemaGuideLink anchor="#keywords" />
+        </h2>
+        <div class="scroll-to-bottom-container">
+            <span class="bottom" />
+            <div>
+                <Keyword
+                    class="q-mr-lg"
                     v-bind:key="index"
-                    v-for="(screenMessage, index) in keywordsErrors"
-                >
-                    {{ screenMessage }}
-                </div>
-            </q-banner>
+                    v-bind:keyword="keyword"
+                    v-bind:index="index"
+                    v-bind:num-keywords="keywords.length"
+                    v-for="(keyword, index) in keywords"
+                    v-on:moveDown="moveDown(index, keywords, setKeywords)"
+                    v-on:moveUp="moveUp(index, keywords, setKeywords)"
+                    v-on:removePressed="removeKeyword(index)"
+                    v-on:update="setKeyword(index, $event)"
+                />
+            </div>
         </div>
+        <q-btn
+            class="q-mt-md q-mb-md"
+            color="primary"
+            no-caps
+            style="width: max-content"
+            v-on:click="addKeyword"
+        >
+            Add keyword
+        </q-btn>
 
-        <div id="form-button-bar">
-            <StepperActions />
-        </div>
+        <q-banner
+            v-if="keywordsErrors.length > 0"
+            v-bind:class="['bg-warning', 'text-negative', keywordsErrors.length > 0 ? 'has-error' : '']"
+        >
+            <div
+                v-bind:key="index"
+                v-for="(screenMessage, index) in keywordsErrors"
+            >
+                {{ screenMessage }}
+            </div>
+        </q-banner>
     </div>
 </template>
 
@@ -67,8 +57,6 @@ import { computed, defineComponent, nextTick, onUpdated } from 'vue'
 import { moveDown, moveUp } from 'src/updown'
 import Keyword from 'components/Keyword.vue'
 import SchemaGuideLink from 'components/SchemaGuideLink.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import { scrollToBottom } from 'src/scroll-to-bottom'
 import { useCff } from 'src/store/cff'
 import { useStepperErrors } from 'src/store/stepper-errors'
@@ -78,8 +66,6 @@ export default defineComponent({
     name: 'ScreenKeywords',
     components: {
         SchemaGuideLink,
-        Stepper,
-        StepperActions,
         Keyword
     },
     setup () {
diff --git a/src/components/ScreenLicense.vue b/src/components/ScreenLicense.vue
index c3f5c72a..0abdf1df 100644
--- a/src/components/ScreenLicense.vue
+++ b/src/components/ScreenLicense.vue
@@ -1,48 +1,38 @@
 <template>
-    <Stepper />
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1 class="page-title">
-                License
-            </h1>
-        </div>
-
-        <div id="form-content">
-            <h2 class="question">
-                What is the license of the work?
-                <SchemaGuideLink anchor="#license" />
-            </h2>
-            <q-select
-                bg-color="white"
-                label="license"
-                clearable
-                fill-input
-                hide-selected
-                input-debounce="0"
-                outlined
-                standout
-                use-input
-                v-bind:model-value="license"
-                v-bind:options="options"
-                v-on:filter="licenseFilterFunction"
-                v-on:update:model-value="setLicense"
-            >
-                <template v-slot:no-option>
-                    <q-item>
-                        <q-item-section class="text-grey">
-                            No results
-                        </q-item-section>
-                    </q-item>
-                </template>
-            </q-select>
-        </div>
+    <div id="form-title">
+        <h1 class="page-title">
+            License
+        </h1>
+    </div>
 
-        <div id="form-button-bar">
-            <StepperActions />
-        </div>
+    <div id="form-content">
+        <h2 class="question">
+            What is the license of the work?
+            <SchemaGuideLink anchor="#license" />
+        </h2>
+        <q-select
+            bg-color="white"
+            label="license"
+            clearable
+            fill-input
+            hide-selected
+            input-debounce="0"
+            outlined
+            standout
+            use-input
+            v-bind:model-value="license"
+            v-bind:options="options"
+            v-on:filter="licenseFilterFunction"
+            v-on:update:model-value="setLicense"
+        >
+            <template v-slot:no-option>
+                <q-item>
+                    <q-item-section class="text-grey">
+                        No results
+                    </q-item-section>
+                </q-item>
+            </template>
+        </q-select>
     </div>
 </template>
 
@@ -50,17 +40,13 @@
 import { defineComponent, ref } from 'vue'
 import { QSelect } from 'quasar'
 import SchemaGuideLink from 'components/SchemaGuideLink.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import schema from 'src/schemas/1.2.0/schema.json'
 import { useCff } from 'src/store/cff'
 
 export default defineComponent({
     name: 'ScreenLicense',
     components: {
-        SchemaGuideLink,
-        Stepper,
-        StepperActions
+        SchemaGuideLink
     },
     setup () {
         const { license, setLicense } = useCff()
diff --git a/src/components/ScreenRelatedResources.vue b/src/components/ScreenRelatedResources.vue
index 79b0e179..7a297ed7 100644
--- a/src/components/ScreenRelatedResources.vue
+++ b/src/components/ScreenRelatedResources.vue
@@ -1,84 +1,74 @@
 <template>
-    <Stepper />
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1 class="page-title">
-                Related resources
-            </h1>
-        </div>
-
-        <div id="form-content">
-            <h2 class="question">
-                What is the URL of the work in a source code repository?
-                <SchemaGuideLink anchor="#repository-code" />
-            </h2>
-            <q-input
-                bg-color="white"
-                label="repository-code"
-                outlined
-                standout
-                v-bind:class="repositoryCodeErrors.length > 0 ? 'has-error' : ''"
-                v-bind:model-value="repositoryCode"
-                v-bind:error="repositoryCodeErrors.length > 0"
-                v-bind:error-message="repositoryCodeErrors.join(', ')"
-                v-on:update:modelValue="setRepositoryCode"
-            />
+    <div id="form-title">
+        <h1 class="page-title">
+            Related resources
+        </h1>
+    </div>
 
-            <h2 class="question">
-                What is the URL of a landing page/website for the work?
-                <SchemaGuideLink anchor="#url" />
-            </h2>
-            <q-input
-                bg-color="white"
-                label="url"
-                outlined
-                standout
-                v-bind:class="urlErrors.length > 0 ? 'has-error' : ''"
-                v-bind:model-value="url"
-                v-bind:error="urlErrors.length > 0"
-                v-bind:error-message="urlErrors.join(', ')"
-                v-on:update:modelValue="setUrl"
-            />
+    <div id="form-content">
+        <h2 class="question">
+            What is the URL of the work in a source code repository?
+            <SchemaGuideLink anchor="#repository-code" />
+        </h2>
+        <q-input
+            bg-color="white"
+            label="repository-code"
+            outlined
+            standout
+            v-bind:class="repositoryCodeErrors.length > 0 ? 'has-error' : ''"
+            v-bind:model-value="repositoryCode"
+            v-bind:error="repositoryCodeErrors.length > 0"
+            v-bind:error-message="repositoryCodeErrors.join(', ')"
+            v-on:update:modelValue="setRepositoryCode"
+        />
 
-            <h2 class="question">
-                What is the URL of the work in a repository?
-                <SchemaGuideLink anchor="#repository" />
-            </h2>
-            <q-input
-                bg-color="white"
-                label="repository"
-                outlined
-                standout
-                v-bind:class="repositoryErrors.length > 0 ? 'has-error' : ''"
-                v-bind:model-value="repository"
-                v-bind:error="repositoryErrors.length > 0"
-                v-bind:error-message="repositoryErrors.join(', ')"
-                v-on:update:modelValue="setRepository"
-            />
+        <h2 class="question">
+            What is the URL of a landing page/website for the work?
+            <SchemaGuideLink anchor="#url" />
+        </h2>
+        <q-input
+            bg-color="white"
+            label="url"
+            outlined
+            standout
+            v-bind:class="urlErrors.length > 0 ? 'has-error' : ''"
+            v-bind:model-value="url"
+            v-bind:error="urlErrors.length > 0"
+            v-bind:error-message="urlErrors.join(', ')"
+            v-on:update:modelValue="setUrl"
+        />
 
-            <h2 class="question">
-                What is the URL of the work in a build artifact/binary repository?
-                <SchemaGuideLink anchor="#repository-artifact" />
-            </h2>
-            <q-input
-                bg-color="white"
-                label="repository-artifact"
-                outlined
-                standout
-                v-bind:class="repositoryArtifactErrors.length > 0 ? 'has-error' : ''"
-                v-bind:model-value="repositoryArtifact"
-                v-bind:error="repositoryArtifactErrors.length > 0"
-                v-bind:error-message="repositoryArtifactErrors.join(', ')"
-                v-on:update:modelValue="setRepositoryArtifact"
-            />
-        </div>
+        <h2 class="question">
+            What is the URL of the work in a repository?
+            <SchemaGuideLink anchor="#repository" />
+        </h2>
+        <q-input
+            bg-color="white"
+            label="repository"
+            outlined
+            standout
+            v-bind:class="repositoryErrors.length > 0 ? 'has-error' : ''"
+            v-bind:model-value="repository"
+            v-bind:error="repositoryErrors.length > 0"
+            v-bind:error-message="repositoryErrors.join(', ')"
+            v-on:update:modelValue="setRepository"
+        />
 
-        <div id="form-button-bar">
-            <StepperActions />
-        </div>
+        <h2 class="question">
+            What is the URL of the work in a build artifact/binary repository?
+            <SchemaGuideLink anchor="#repository-artifact" />
+        </h2>
+        <q-input
+            bg-color="white"
+            label="repository-artifact"
+            outlined
+            standout
+            v-bind:class="repositoryArtifactErrors.length > 0 ? 'has-error' : ''"
+            v-bind:model-value="repositoryArtifact"
+            v-bind:error="repositoryArtifactErrors.length > 0"
+            v-bind:error-message="repositoryArtifactErrors.join(', ')"
+            v-on:update:modelValue="setRepositoryArtifact"
+        />
     </div>
 </template>
 
@@ -86,8 +76,6 @@
 import { byError, repositoryArtifactQueries, repositoryCodeQueries, repositoryQueries, urlQueries } from 'src/error-filtering'
 import { computed, defineComponent, onUpdated } from 'vue'
 import SchemaGuideLink from 'components/SchemaGuideLink.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import { useCff } from 'src/store/cff'
 import { useStepperErrors } from 'src/store/stepper-errors'
 import { useValidation } from 'src/store/validation'
@@ -95,9 +83,7 @@ import { useValidation } from 'src/store/validation'
 export default defineComponent({
     name: 'ScreenRelatedResources',
     components: {
-        SchemaGuideLink,
-        Stepper,
-        StepperActions
+        SchemaGuideLink
     },
     setup () {
         onUpdated(() => {
diff --git a/src/components/ScreenStart.vue b/src/components/ScreenStart.vue
index 9d0182ae..17f70a74 100644
--- a/src/components/ScreenStart.vue
+++ b/src/components/ScreenStart.vue
@@ -1,61 +1,51 @@
 <template>
-    <Stepper />
-
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1 class="page-title">
-                Start
-            </h1>
-        </div>
+    <div id="form-title">
+        <h1 class="page-title">
+            Start
+        </h1>
+    </div>
 
-        <div id="form-content">
-            <h2 class="question">
-                What type of work does this CITATION.cff describe?
-                <SchemaGuideLink anchor="#type" />
-            </h2>
-            <q-option-group
-                type="radio"
-                v-bind:model-value="type"
-                v-bind:options="typeOptions"
-                v-on:update:modelValue="[setType, setMessagePlaceHolder]"
-            />
-            <h2 class="question">
-                What is the title of the work?
-                <SchemaGuideLink anchor="#title" />
-            </h2>
-            <q-input
-                bg-color="white"
-                label="title"
-                outlined
-                standout
-                v-bind:class="[titleErrors.length > 0 ? 'has-error' : '']"
-                v-bind:model-value="title"
-                v-bind:error="titleErrors.length > 0"
-                v-bind:error-message="titleErrors.join(', ')"
-                v-on:update:modelValue="setTitle"
-            />
-            <h2 class="question">
-                What do you want citers to do with the information provided in your CITATION.cff file?
-                <SchemaGuideLink anchor="#message" />
-            </h2>
-            <q-input
-                bg-color="white"
-                label="message"
-                outlined
-                standout
-                v-bind:class="[messageErrors.length > 0 ? 'has-error' : '']"
-                v-bind:model-value="message"
-                v-bind:error="messageErrors.length > 0"
-                v-bind:error-message="messageErrors.join(', ')"
-                v-on:update:modelValue="setMessage"
-            />
-        </div>
-        <div id="form-button-bar">
-            <StepperActions />
-        </div>
+    <div id="form-content">
+        <h2 class="question">
+            What type of work does this CITATION.cff describe?
+            <SchemaGuideLink anchor="#type" />
+        </h2>
+        <q-option-group
+            type="radio"
+            v-bind:model-value="type"
+            v-bind:options="typeOptions"
+            v-on:update:modelValue="[setType, setMessagePlaceHolder]"
+        />
+        <h2 class="question">
+            What is the title of the work?
+            <SchemaGuideLink anchor="#title" />
+        </h2>
+        <q-input
+            bg-color="white"
+            label="title"
+            outlined
+            standout
+            v-bind:class="[titleErrors.length > 0 ? 'has-error' : '']"
+            v-bind:model-value="title"
+            v-bind:error="titleErrors.length > 0"
+            v-bind:error-message="titleErrors.join(', ')"
+            v-on:update:modelValue="setTitle"
+        />
+        <h2 class="question">
+            What do you want citers to do with the information provided in your CITATION.cff file?
+            <SchemaGuideLink anchor="#message" />
+        </h2>
+        <q-input
+            bg-color="white"
+            label="message"
+            outlined
+            standout
+            v-bind:class="[messageErrors.length > 0 ? 'has-error' : '']"
+            v-bind:model-value="message"
+            v-bind:error="messageErrors.length > 0"
+            v-bind:error-message="messageErrors.join(', ')"
+            v-on:update:modelValue="setMessage"
+        />
     </div>
 </template>
 
@@ -63,8 +53,6 @@
 import { byError, messageQueries, titleQueries } from 'src/error-filtering'
 import { computed, defineComponent, onUpdated } from 'vue'
 import SchemaGuideLink from 'components/SchemaGuideLink.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import { useCff } from 'src/store/cff'
 import { useStepperErrors } from 'src/store/stepper-errors'
 import { useValidation } from 'src/store/validation'
@@ -72,9 +60,7 @@ import { useValidation } from 'src/store/validation'
 export default defineComponent({
     name: 'ScreenStart',
     components: {
-        SchemaGuideLink,
-        Stepper,
-        StepperActions
+        SchemaGuideLink
     },
     setup () {
         onUpdated(() => {
diff --git a/src/components/ScreenVersionSpecific.vue b/src/components/ScreenVersionSpecific.vue
index 00bdb578..f69d7cd3 100644
--- a/src/components/ScreenVersionSpecific.vue
+++ b/src/components/ScreenVersionSpecific.vue
@@ -1,93 +1,83 @@
 <template>
-    <Stepper />
-    <div
-        id="form"
-        class="col-12 col-lg-5 col-sm-10"
-    >
-        <div id="form-title">
-            <h1 class="page-title">
-                Version specific
-            </h1>
-        </div>
+    <div id="form-title">
+        <h1 class="page-title">
+            Version specific
+        </h1>
+    </div>
 
-        <div id="form-content">
-            <h2 class="question">
-                What is the commit identifier of the work?
-                <SchemaGuideLink anchor="#commit" />
-            </h2>
-            <q-input
-                bg-color="white"
-                label="commit"
-                outlined
-                standout
-                v-bind:model-value="commit"
-                v-on:update:modelValue="setCommit"
-            />
+    <div id="form-content">
+        <h2 class="question">
+            What is the commit identifier of the work?
+            <SchemaGuideLink anchor="#commit" />
+        </h2>
+        <q-input
+            bg-color="white"
+            label="commit"
+            outlined
+            standout
+            v-bind:model-value="commit"
+            v-on:update:modelValue="setCommit"
+        />
 
-            <h2 class="question">
-                What is the version of the work?
-                <SchemaGuideLink anchor="#version" />
-            </h2>
-            <q-input
-                bg-color="white"
-                label="version"
-                outlined
-                standout
-                v-bind:model-value="version"
-                v-on:update:modelValue="setVersion"
-            />
+        <h2 class="question">
+            What is the version of the work?
+            <SchemaGuideLink anchor="#version" />
+        </h2>
+        <q-input
+            bg-color="white"
+            label="version"
+            outlined
+            standout
+            v-bind:model-value="version"
+            v-on:update:modelValue="setVersion"
+        />
 
-            <h2 class="question">
-                When was the version released?
-                <SchemaGuideLink anchor="#date-released" />
-            </h2>
-            <q-input
-                bg-color="white"
-                hint="Format: YYYY-MM-DD"
-                label="date-released"
-                mask="####-##-##"
-                outlined
-                standout
-                style="width: 33.33%"
-                today-btn="true"
-                v-bind:class="dateReleasedErrors.length > 0 ? 'has-error' : ''"
-                v-bind:model-value="dateReleased"
-                v-bind:error="dateReleasedErrors.length > 0"
-                v-bind:error-message="dateReleasedErrors.join(', ')"
-                v-on:update:modelValue="setDateReleased"
-            >
-                <template v-slot:append>
-                    <q-icon
-                        name="event"
-                        class="cursor-pointer"
+        <h2 class="question">
+            When was the version released?
+            <SchemaGuideLink anchor="#date-released" />
+        </h2>
+        <q-input
+            bg-color="white"
+            hint="Format: YYYY-MM-DD"
+            label="date-released"
+            mask="####-##-##"
+            outlined
+            standout
+            style="width: 33.33%"
+            today-btn="true"
+            v-bind:class="dateReleasedErrors.length > 0 ? 'has-error' : ''"
+            v-bind:model-value="dateReleased"
+            v-bind:error="dateReleasedErrors.length > 0"
+            v-bind:error-message="dateReleasedErrors.join(', ')"
+            v-on:update:modelValue="setDateReleased"
+        >
+            <template v-slot:append>
+                <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                >
+                    <q-popup-proxy
+                        transition-show="scale"
+                        transition-hide="scale"
                     >
-                        <q-popup-proxy
-                            transition-show="scale"
-                            transition-hide="scale"
+                        <q-date
+                            v-bind:model-value="dateReleased === '' ? initializeDate() : dateReleased"
+                            v-on:update:modelValue="setDateReleased"
+                            mask="YYYY-MM-DD"
                         >
-                            <q-date
-                                v-bind:model-value="dateReleased === '' ? initializeDate() : dateReleased"
-                                v-on:update:modelValue="setDateReleased"
-                                mask="YYYY-MM-DD"
-                            >
-                                <div class="row items-center justify-end">
-                                    <q-btn
-                                        v-close-popup
-                                        label="Close"
-                                        color="primary"
-                                        flat
-                                    />
-                                </div>
-                            </q-date>
-                        </q-popup-proxy>
-                    </q-icon>
-                </template>
-            </q-input>
-        </div>
-
-        <div id="form-button-bar">
-            <StepperActions />
-        </div>
+                            <div class="row items-center justify-end">
+                                <q-btn
+                                    v-close-popup
+                                    label="Close"
+                                    color="primary"
+                                    flat
+                                />
+                            </div>
+                        </q-date>
+                    </q-popup-proxy>
+                </q-icon>
+            </template>
+        </q-input>
     </div>
 </template>
 
@@ -95,8 +85,6 @@
 import { byError, dateReleasedQueries } from 'src/error-filtering'
 import { computed, defineComponent, onUpdated } from 'vue'
 import SchemaGuideLink from 'components/SchemaGuideLink.vue'
-import Stepper from 'components/Stepper.vue'
-import StepperActions from 'components/StepperActions.vue'
 import { useCff } from 'src/store/cff'
 import { useStepperErrors } from 'src/store/stepper-errors'
 import { useValidation } from 'src/store/validation'
@@ -104,9 +92,7 @@ import { useValidation } from 'src/store/validation'
 export default defineComponent({
     name: 'ScreenVersionSpecific',
     components: {
-        SchemaGuideLink,
-        Stepper,
-        StepperActions
+        SchemaGuideLink
     },
     setup () {
         onUpdated(() => {