vue-common-pages v0.2.1

vue-common-pages

This is a small VueJS component providing a generator of common pages.

Basically you can generate any type of simple form pages like 'Log in', 'Change Password', 'Register', 'Forgot Password'...

Setup

First, install the dependency using npm or yarn.

npm install --save common-pages
# or with yarn
yarn add common-pages

Then, you have to import the component in your Vue app:

import CommonPage from 'vue-common-pages';

And you'll be able to use the component!

Using the component

<common-page                                                                                                        
   :color="data.color"
   :texts="data.texts"
   :inputs="data.inputs"
   :links="data.links"
   @submit="handleForm"
/>

Examples

*Screenshots examples can only be seen at https://github.com/marcos-estrela/common-pages

Log in page

const data = {
   color: "#00bfd8",
   texts: {
      title: "Log in",
      button: "Log in",
   },
   inputs: [
      {
            id: "email",
            type: "email",
            placeholder: "Email",
      },
      {
            id: "password",
            type: "password",
            placeholder: "Password",
      },
   ],
   links: [
      {
            id: "forgotPassword",
            text: "Forgot your password?",
            url: "#",
      },
      {
            id: "newCustomer",
            text: "New customer? Start here.",
            url: "#",
      },
   ],
};

const changePasswordPage = {
    color: "#008000",
    texts: {
        title: "Change password",
        button: "Save",
    },
    inputs: [
        {
            id: "password",
            type: "password",
            placeholder: "Password",
        },
        {
            id: "passwordAgain",
            type: "password",
            placeholder: "Password",
        },
    ],
};

const data = {
    color: "#8B0000",
    texts: {
        title: "Create account",
        button: "Create",  
    },
    inputs: [
        {
            id: "email",
            type: "email",
            placeholder: "Email",
        },
        {
            id: "password",
            type: "password",
            placeholder: "Password",
        },

    ],
    links: [
        {
            id: "alreadyCustomer",
            text: "Already have an account? Sign in",
            url: "#",
        },
    ],
};

const data = {
    color: "#83781a",
    texts: {
        title: "Recover password",
        button: "Send email",
    },
    inputs: [
        {
            id: "email",
            type: "email",
            placeholder: "Email",
        }
    ]
};

Issues

Feel free to open an issue on the github page. I'll take a look ASAP!