comand-component-library 3.1.43 → 3.1.46

package/src/components/CmdLoginForm.vue

@@ -1,8 +1,15 @@
 <template>
+    <!-- begin login-form -->
     <fieldset v-if="!sendLogin" class="flex-container">
-        <legend :class="{'hidden' : !legendLoginForm.show}">{{ legendLoginForm.text }}</legend>
-        <h2 v-if="headlineLoginForm">{{ headlineLoginForm }}</h2>
+        <legend :class="{hidden : !showLegend}">{{ textLegend }}</legend>
+        <!-- begin CmdCustomHeadline -->
+        <CmdCustomHeadline v-if="cmdCustomHeadlineLoginForm"
+                           v-bind="cmdCustomHeadlineLoginForm"/>
+        <!-- end CmdCustomHeadline -->
+
+        <!-- being form elements -->
         <div class="flex-container">
+            <!-- begin CmdFormElement -->
             <CmdFormElement
                 element="input"
                 type="text"
@@ -13,6 +20,9 @@
                 :labelText="cmdFormElementUsername.labelText"
                 :placeholder="cmdFormElementUsername.placeholder"
             />
+            <!-- end CmdFormElement -->
+
+            <!-- begin CmdFormElement -->
             <CmdFormElement
                 element="input"
                 type="password"
@@ -23,8 +33,11 @@
                 :labelText="cmdFormElementPassword.labelText"
                 :placeholder="cmdFormElementPassword.placeholder"
             />
+            <!-- end CmdFormElement -->
         </div>
-        <div class="option-wrapper flex-container">
+        <!-- end form elements -->
+
+        <div class="option-wrapper flex-container" v-focus>
             <template v-if="options.forgotPassword || options.createAccount">
                 <a v-if="options.forgotPassword" href="#" @click.prevent="sendLogin = true">
                     <span v-if="options.forgotPassword.icon && options.forgotPassword.icon.show && options.forgotPassword.icon.iconClass"
@@ -33,6 +46,7 @@
                     </span>
                     <span v-if="options.forgotPassword.text">{{ options.forgotPassword.text }}</span>
                 </a>
+                <!-- begin link-type 'href' -->
                 <a v-if="options.createAccount && options.createAccount.linkType === 'href'" :href="options.createAccount.path">
                     <span v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
                           :class="options.createAccount.icon.iconClass"
@@ -40,6 +54,9 @@
                     </span>
                     <span v-if="options.createAccount.text">{{ options.createAccount.text }}</span>
                 </a>
+                <!-- end link-type 'href' -->
+
+                <!-- begin link-type 'router' -->
                 <router-link v-else-if="options.createAccount && options.createAccount.linkType === 'router'" :to="options.createAccount.path">
                     <span v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
                           :class="options.createAccount.icon.iconClass"
@@ -47,7 +64,10 @@
                     </span>
                     <span v-if="options.createAccount.text">{{ options.createAccount.text }}</span>
                 </router-link>
+                <!-- end link-type 'router -->
             </template>
+
+            <!-- begin link-type 'href' -->
             <a
                 v-if="buttons.login.linkType === 'href'"
                 :class="['button', { primary: buttons.login.primary }]"
@@ -61,6 +81,9 @@
                   ></span>
                 <span v-if="buttons.login.text">{{ buttons.login.text }}</span>
             </a>
+            <!-- begin link-type 'href' -->
+
+            <!-- begin link-type 'router' -->
             <router-link
                 v-if="buttons.login.linkType === 'router'"
                 :class="['button', { primary: buttons.login.primary }]"
@@ -74,6 +97,9 @@
                   ></span>
                 <span v-if="buttons.login.text">{{ buttons.login.text }}</span>
             </router-link>
+            <!-- begin link-type 'router' -->
+
+            <!-- begin link-type 'button' -->
             <button
                 v-if="buttons.login.linkType === 'button'"
                 :type="buttons.login.type === 'submit' ? 'submit' : 'button'"
@@ -87,19 +113,35 @@
                   ></span>
                 <span v-if="buttons.login.text">{{ buttons.login.text }}</span>
             </button>
+            <!-- begin link-type 'button' -->
         </div>
     </fieldset>
+    <!-- end login-form -->
+
+    <!-- begin send-login-form -->
     <fieldset v-else class="flex-container">
         <legend :class="{'hidden' : !legendSendLoginForm.show}">{{ legendSendLoginForm.text }}</legend>
-        <h2 v-if="headlineSendLoginForm">{{ headlineSendLoginForm }}</h2>
-        <CmdFormElement element="input"
-                        type="email"
-                        :inner-icon-class="cmdFormElementSendLogin.innerIconClass"
-                        :labelText="cmdFormElementSendLogin.labelText"
-                        :placeholder="cmdFormElementSendLogin.placeholder"
-                        :name="cmdFormElementSendLogin.name"
-                        :id="cmdFormElementSendLogin.id"
-                        v-model:value="sendLoginMail" />
+        <!-- begin CmdCustomHeadline -->
+        <CmdCustomHeadline v-if="cmdCustomHeadlineSendLoginForm"
+                           :iconClass="cmdCustomHeadlineSendLoginForm.iconClass"
+                           :preHeadline="cmdCustomHeadlineSendLoginForm.preHeadline"
+                           :headlineLevel="cmdCustomHeadlineSendLoginForm.preHeadline"
+                           :headlineText="cmdCustomHeadlineSendLoginForm.headlineText"/>
+        <!-- end CmdCustomHeadline -->
+
+        <!-- begin CmdFormElement -->
+        <CmdFormElement
+            element="input"
+            type="email"
+            :inner-icon-class="cmdFormElementSendLogin.innerIconClass"
+            :labelText="cmdFormElementSendLogin.labelText"
+            :placeholder="cmdFormElementSendLogin.placeholder"
+            :name="cmdFormElementSendLogin.name"
+            :id="cmdFormElementSendLogin.id"
+            v-model:value="sendLoginMail"
+        />
+        <!-- end CmdFormElement -->
+
         <div class="option-wrapper flex-container">
             <a href="#" @click.prevent="sendLogin = false">
                 <span v-if="options.backToLoginForm && options.backToLoginForm.icon && options.backToLoginForm.icon.show && options.backToLoginForm.icon.iconClass"
@@ -110,6 +152,8 @@
                   {{ options.backToLoginForm.text }}
                 </span>
             </a>
+
+            <!-- begin link-type 'href' -->
             <a
                 v-if="buttons.sendLogin.linkType === 'href'"
                 :class="['button', { primary: buttons.sendLogin.primary }]"
@@ -123,6 +167,9 @@
                   ></span>
                 <span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
             </a>
+            <!-- end link-type 'href' -->
+
+            <!-- begin link-type 'router' -->
             <router-link
                 v-if="buttons.sendLogin.linkType === 'router'"
                 :class="['button', { primary: buttons.sendLogin.primary }]"
@@ -136,20 +183,25 @@
                   ></span>
                 <span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
             </router-link>
+            <!-- end link-type 'router' -->
+
+            <!-- begin link-type 'button' -->
             <button
                 v-if="buttons.sendLogin.linkType === 'button'"
                 :type="buttons.sendLogin.type === 'submit' ? 'submit' : 'button'"
                 :class="['button', { primary: buttons.sendLogin.primary }]"
             >
                   <span
-                      v-if="buttons.sendLogin.icon.iconClass"
-                      :class="buttons.sendLogin.icon.iconClass"
-                      :title="buttons.sendLogin.icon.tooltip"
+                      v-if="buttons.sendLogin.icon?.iconClass"
+                      :class="buttons.sendLogin.icon?.iconClass"
+                      :title="buttons.sendLogin.icon?.tooltip"
                   ></span>
                 <span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
             </button>
+            <!-- end link-type 'button' -->
         </div>
     </fieldset>
+    <!-- end send-login-form -->
 </template>
 
 <script>
@@ -157,6 +209,7 @@
 import {getRoute} from "../utilities.js"
 
 // import components
+import CmdCustomHeadline from "./CmdCustomHeadline"
 import CmdFormElement from "./CmdFormElement"
 
 export default {
@@ -170,6 +223,7 @@ export default {
         }
     },
     components: {
+        CmdCustomHeadline,
         CmdFormElement
     },
     props: {
@@ -186,19 +240,25 @@ export default {
             }
         },
         /**
-         * legend for login-fieldset (required for accessibility)
+         * text used as legend for login-fieldset
+         *
+         * @requiredForAccessibility: true
          */
-        legendLoginForm: {
-            type: Object,
-            default() {
-                return {
-                    show: false,
-                    text: "Login form"
-                }
-            }
+        textLegend: {
+            type: String,
+            default: "Login form"
         },
         /**
-         * legend for send-login-fieldset (required for accessibility)
+         * toggle legend visibility
+         */
+        showLegend: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * legend for send-login-fieldset
+         *
+         * @requiredForAccessibility: true
          */
         legendSendLoginForm: {
             type: Object,
@@ -210,21 +270,35 @@ export default {
             }
         },
         /**
-         * headline for login-form
+         * properties for CmdCustomHeadline-component for login-form
          */
-        headlineLoginForm: {
-            type: String,
-            default: "Login"
+        cmdCustomHeadlineLoginForm: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    text: "Login",
+                    level: 2
+                }
+            }
         },
         /**
-         * headline for send-login-form
+         * properties for CmdCustomHeadline-component for send-login-form
          */
-        headlineSendLoginForm: {
-            type: String,
-            default: "Forgot login"
+        cmdCustomHeadlineSendLoginForm: {
+            type: Object,
+            default() {
+                return {
+                    show: true,
+                    text: "Send Login",
+                    level: 2
+                }
+            }
         },
         /**
          * properties for CmdFormElement-component for username-field
+         *
+         * @requiredForAccessibility: partial
          */
         cmdFormElementUsername: {
             type: Object,
@@ -239,7 +313,9 @@ export default {
             }
         },
         /**
-         * properties for cmdFormElement-component for password-field
+         * properties for CmdFormElement-component for password-field
+         *
+         * @requiredForAccessibility: partial
          */
         cmdFormElementPassword: {
             type: Object,
@@ -254,7 +330,9 @@ export default {
             }
         },
         /**
-         * properties for cmdFormElement-component for email-address-field (to send login-data)
+         * properties for CmdFormElement-component for email-address-field (to send login-data)
+         *
+         * @requiredForAccessibility: partial
          */
         cmdFormElementSendLogin: {
             type: Object,
@@ -275,40 +353,42 @@ export default {
          * createAccount: creates a link (href/router) which could lead to a register-form
          */
         options: {
-          type: Object,
-          default() {
-              return {
-                  forgotPassword: {
-                      icon: {
-                          show: true,
-                          iconClass: "icon-help",
-                          tooltip: ""
-                      },
-                      text: "Forgot password?"
-                  },
-                  createAccount: {
-                      linkType: "href",
-                      path: "#",
-                      icon: {
-                          show: true,
-                          iconClass: "icon-register",
-                          tooltip: ""
-                      },
-                      text: "Create new account!"
-                  },
-                  backToLoginForm: {
-                      icon: {
-                          show: true,
-                          iconClass: "icon-single-arrow-left",
-                          tooltip: ""
-                      },
-                      text: "Back to login form"    
-                  }
-              }
-          }  
+            type: Object,
+            default() {
+                return {
+                    forgotPassword: {
+                        icon: {
+                            show: true,
+                            iconClass: "icon-help",
+                            tooltip: ""
+                        },
+                        text: "Forgot password?"
+                    },
+                    createAccount: {
+                        linkType: "href",
+                        path: "#",
+                        icon: {
+                        show: true,
+                        iconClass: "icon-register",
+                        tooltip: ""
+                    },
+                        text: "Create new account!"
+                    },
+                    backToLoginForm: {
+                        icon: {
+                            show: true,
+                            iconClass: "icon-single-arrow-left",
+                            tooltip: ""
+                        },
+                        text: "Back to login form"
+                    }
+                }
+            }
         },
         /**
          * button to login
+         *
+         * @requiredForAccessibility: partial
          */
         buttons: {
             type: Object,