Vantage-auth

A reusable auth interface component for any React Application. Use this component to give your users a simple and dynamic experience when they sign in. Interface pre-made with validation, you only have to worry about sending the values to your server.

Features

Responsive
Easy to use
Plug-and-Use
Form validation
Customizable

installation

Just install the dependency and start using

npm i vantage-auth or yarn add vantage-auth

How to import

After installing the dependency, just import the components you need

import Auth, { SignIn, SignUp, ForgotPassword } from "vantage-auth";

Usage

This example shows how to import Sign In

import Auth, { SignIn } from "vantage-auth";

<Auth>
  <SignIn />
</Auth>;

Handle Submit

The whole part of the form is validated for you only have to receive the values submitted through the handleSubmit, after this you only have to send to your server through an API etc.

import Auth, { SignIn } from "vantage-auth";

class App extends Component {
  signInUser = values => {
    console.log("signInUser = ", values);
  };
  render() {
    return (
      <Auth>
        <SignIn handleSubmit={this.signInUser} />
      </Auth>
    );
  }
}

Customize Auth

Here you will find all possible properties for the Auth component. They are not require, in case of not seeing a certain properties the default is presented

import Auth, { SignIn } from "vantage-auth";

const config = {
  imgSrc: "http://i68.tinypic.com/2po1mcg.jpg",
  title: "Formette",
  titleColor: "#EFECF8",
  description: "Forms as a Service",
  descriptionColor: "#BBAAE1",
  backgroundColor: "#E7EBF0",
  gradient:
    "linear-gradient(to right top, #041636, #1c2850, #343a6b, #4d4e87,#6862a4)"
};

<Auth {...config}>
  <SignIn />
</Auth>;

Customize SignIn

Here you will find all possible properties for the SignIn component. They are not require, in case of not seeing a certain properties the default is presented

import Auth, { SignIn } from "vantage-auth";

const signInConfig = {
  title: "Sign In", //isRequired
  description: "Welcome back, come fast! Your forms are waiting.", //isRequired
  submitText: "Sign in", //isRequired
  boxText: "Do not have an account yet?", //isRequired
  boxAction: "Sign Up", //isRequired
  boxUrl: "/signup", //isRequired
  primaryColor: "#6862A4",
  isSubmiting: false, //disables the inputs and give de loader indicator
  forgotPasswordText: "Forgot password?",
  forgotPasswordUrl: "#",
  enableForgotPassword: false,
  box: {
    backgroundColor: "#f6f4fd",
    borderColor: "#e6e1f7",
    textColor: "#a189d6"
  },
  validationMgs: {
    email: {
      invalid: "Invalid email!",
      required: "Email is Required"
    },
    password: {
      min: "Password is Too Short!",
      max: "Password is Too Long!",
      required: "Password is Required"
    }
  },
  placeholders: {
    email: "Email",
    password: "Password"
  },
  customError: false,
  customErrorMsg: "Error description"
};

<Auth>
  <SignIn {...signInConfig} />
</Auth>;

Customize SignUp

Here you will find all possible properties for the SignUp component. They are not require, in case of not seeing a certain properties the default is presented

import Auth, { SignUp } from "vantage-auth";

const signUpConfig = {
  title: "Sign Up", //isRequired
  description: "New life for static forms, no need for code or servers.", //isRequired
  submitText: "Sign up", //isRequired
  boxText: "Already have an account?", //isRequired
  boxAction: "Sign In", //isRequired
  boxUrl: "/signup", //isRequired
  primaryColor: "#6862A4",
  privacyUrl: "http://www.privacy.com",
  privacyText: "Accept the Terms and Privacy Policy",
  isSubmiting: false, //disables the inputs and give de loader indicator
  box: {
    backgroundColor: "#f6f4fd",
    borderColor: "#e6e1f7",
    textColor: "#a189d6"
  },
  validationMgs: {
    username: {
      lowercase: "username must be a lowercase string",
      min: "The username is too Short!",
      max: "The username is too Long!",
      required: "Please the username is Required"
    },
    email: {
      invalid: "Invalid email",
      required: "Please enter the Required"
    },
    password: {
      min: "Too Short! Password",
      max: "Too Long!",
      required: "Password Required"
    },
    approvePrivacy: {
      required: "approvePrivacy Required"
    }
  },
  placeholders: {
    username: "Username",
    email: "Email",
    password: "Password"
  },
  customError: false,
  customErrorMsg: "Error description"
};

<Auth>
  <SignUp {...signUpConfig} />
</Auth>;

Customize ForgotPassword

Here you will find all possible properties for the ForgotPassword component. They are not require, in case of not seeing a certain properties the default is presented

import Auth, { ForgotPassword } from "vantage-auth";

const forgotPassConfig = {
  title: "Did you forgot your password?", //isRequired
  description:
    "Enter your email address you´re using for your account below and we will send you a password reset link", //isRequired
  submitText: "Request reset link", //isRequired
  boxText: "Do not have an account yet?", //isRequired
  boxAction: "Sign Up", //isRequired
  boxUrl: "/signup", //isRequired
  primaryColor: "#6862A4",
  box: {
    backgroundColor: "#f6f4fd",
    borderColor: "#e6e1f7",
    textColor: "#a189d6"
  },
  validationMgs: {
    email: {
      invalid: "Invalid email!",
      required: "Email is Required"
    }
  },
  placeholders: {
    email: "Email"
  },
  customError: false,
  customErrorMsg: "Error description"
};

<Auth>
  <ForgotPassword
    handleSubmit={() => console.log("resend email.")}
    {...forgotPassConfig}
  />
</Auth>;

Customize CodeVerification

Here you will find all possible properties for the CodeVerification component. They are not require, in case of not seeing a certain properties the default is presented

import Auth, { CodeVerification } from "vantage-auth";

const codeVerificationConfig = {
  title: "Please confirm your email",
  description:
    "We like real people, we need to know if it's not a ghost of the internet.",
  submitText: "Confirm Account",
  boxText: "Resend confirmation code?",
  boxAction: "submit",
  primaryColor: "#6862A4",
  box: {
    backgroundColor: "#f6f4fd",
    borderColor: "#e6e1f7",
    textColor: "#a189d6"
  },
  validationMgs: {
    code: {
      required: "The verification code required"
    }
  },
  placeholders: {
    code: "Confirmation Code"
  },
  customError: false,
  customErrorMsg: "Error description"
};

<Auth>
  <CodeVerification
    handleBoxAction={() => console.log("resend code.")}
    handleSubmit={() => console.log("submit code.")}
    isSubmiting={true | false}
    {...codeVerificationConfig}
  />
</Auth>;

A Complete Example

An example of how to quickly and universally mount a dynamic login page for your applications

import Auth, { SignIn } from "vantage-auth";

const config = {
  imgSrc: "http://i68.tinypic.com/2po1mcg.jpg",
  title: "Formette",
  titleColor: "#EFECF8",
  description: "Forms as a Service",
  descriptionColor: "#BBAAE1",
  backgroundColor: "#E7EBF0",
  gradient:
    "linear-gradient(to right top, #041636, #1c2850, #343a6b, #4d4e87,#6862a4)"
};

const signInConfig = {
  title: "Sign In",
  description: "Welcome back, come fast! Your forms are waiting.",
  submitText: "Sign in",
  boxText: "Do not have an account yet?",
  boxAction: "Sign Up",
  boxUrl: "/signup",
  primaryColor: "#6862A4",
  box: {
    backgroundColor: "#f6f4fd",
    borderColor: "#e6e1f7",
    textColor: "#a189d6"
  },
  validationMgs: {
    email: {
      invalid: "Invalid email!",
      required: "Email is Required"
    },
    password: {
      min: "Password is Too Short!",
      max: "Password is Too Long!",
      required: "Password is Required"
    }
  }
};

class App extends Component {
  signInUser = values => {
    console.log("signInUser = ", values);
  };
  render() {
    return (
      <Auth {...config}>
        <SignIn {...signInConfig} handleSubmit={this.signInUser} />
      </Auth>
    );
  }
}

vacom/vantage-auth