loginpanel

loginpanel

Login Panel with Material-ui components

Install

npm install --save loginpanel

yarn add loginpanel

Usage

import  React, { Component } from  'react'
import  LoginPanel  from  'loginpanel'

class  Example  extends  Component {

	const  handleSubmit = event =>{
		event.preventDefault();
		//get values from child component
		const  username = event.target[0].value  // or document.getElementById('username').value
		const  password = event.target[2].value  // or document.getElementById('password').value
		const  remember = event.target[5].checked // or document.getElementById('rememberme').checked
		
		// console.log(event.target) //scope event.target
	}

	render() {
		return  <LoginPanel  onSubmit={handleSubmit}  />
	}
}

**

Props

You can use it with some props from material-ui attributes

name	type	from @material-ui
formControl	Object	no
website	Object	no
forgetpassword	Object	no
signin	Object	no
signup	Object	no
onSubmit	Function	no (have to declare to handle values)
isbusy	Boolean	no
progressprops	Object	yes (from buttonloading)
buttonprops	Object	yes (from buttonloading)
usernameprops	Object	yes (from @material-ui/core/TextField)
passwordprops	Object	yes (from @material-ui/core/TextField)

Default values of props

passwordprops = { InputProps: { 
		startAdornment: (<InputAdornment  position='start'>
			 <LockRounded  /> </InputAdornment> )},
		autoComplete:  'current-password',
		variant:  'outlined',
		margin:  'normal',
		required:  true,
		fullWidth:  true,
		name:  'password',
		label:  'Password'
	}  //look at material-ui.com for details 

  usernameprops = {
      InputProps: {
        startAdornment: (
          <InputAdornment position='start'>
            <AccountCircle />
          </InputAdornment>
        )
      },
      label: 'User Name or Email',
      fullWidth: true,
      name: 'username',
      autoComplete: 'email',
      autoFocus: true,
      variant: 'outlined',
      margin: 'normal',
      required: true
    } //look at material-ui.com for details 


	isbusy = false
	
    progressprops = { color: 'primary', size: 21 }
    
    buttonprops = { color: 'primary', type: 'submit', variant: 'contained' }

	website = {
      name: 'website',
      url: 'https://material-ui.com',
      copyrightvisible: true,
      logo: '/broken-image.jpg'
    }
    
    formControl = {
      label: 'Remember me',
      control: { value: 'remember', color: 'primary' }
    }
    
    forgetpassword = { text: 'Forgot password?', link: '#', visible: true }
    
    signin = { text: 'SIGN IN', icon: undefined }
    
    signup = {
      text: "Don't have an account? Sign Up",
      link: '#',
      visible: true
    }

onSubmit have to be function from parent component to handle variables.

You can run just defined onSubmit.

The reserved identifiers are: username = @material-ui/core/TextField for "username" password = @material-ui/core/TextField for "password" rememberme = @material-ui/core/Checkbox for "remember me"

PeerDependency

Do not use it if you are not already using @material-ui/icons, @material-ui/core, also buttonloading

License

MIT Burak İmrek