reactstrap#InputGroupText JavaScript Examples
The following examples show how to use
reactstrap#InputGroupText.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AutoCompleteAddressFormGroup.js From covidsos with MIT License | 6 votes |
|
render() {
const {iconClass, placeholder, ...props} = this.props;
const {isSelected} = this.state;
return (
<FormGroup className={classnames({'has-danger': !isSelected})}>
<CardText className="text-gray text-custom-small mb-0">
{placeholder}
</CardText>
<InputGroup className="input-group-alternative mb-3"
style={{border: isSelected ? '0' : '1px solid red'}}>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className={iconClass + (isSelected ? '' : ' text-red')}/>
</InputGroupText>
</InputGroupAddon>
<AutoCompleteAddress {...props}
onSelect={({geoaddress, latitude, longitude, place_id}) => {
this.setState({isSelected: true},
() => this.props.onSelect(
{geoaddress, latitude, longitude, place_id}))
}}/>
</InputGroup>
<div className="address-select-warning" hidden={isSelected}>
Please search and select from Google dropdown only
</div>
</FormGroup>
)
}
Example #2
| Source File: Page500.js From id.co.moonlay-eworkplace-admin-web with MIT License | 6 votes |
|
render() {
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="6">
<span className="clearfix">
<h1 className="float-left display-3 mr-4">500</h1>
<h4 className="pt-3">Houston, we have a problem!</h4>
<p className="text-muted float-left">The page you are looking for is temporarily unavailable.</p>
</span>
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-search"></i>
</InputGroupText>
</InputGroupAddon>
<Input size="16" type="text" placeholder="What are you looking for?" />
<InputGroupAddon addonType="append">
<Button color="info">Search</Button>
</InputGroupAddon>
</InputGroup>
</Col>
</Row>
</Container>
</div>
);
}
Example #3
| Source File: Page404.js From id.co.moonlay-eworkplace-admin-web with MIT License | 6 votes |
|
render() {
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="6">
<div className="clearfix">
<h1 className="float-left display-3 mr-4">404</h1>
<h4 className="pt-3">Oops! You're lost.</h4>
<p className="text-muted float-left">The page you are looking for was not found.</p>
</div>
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-search"></i>
</InputGroupText>
</InputGroupAddon>
<Input size="16" type="text" placeholder="What are you looking for?" />
<InputGroupAddon addonType="append">
<Button color="info">Search</Button>
</InputGroupAddon>
</InputGroup>
</Col>
</Row>
</Container>
</div>
);
}
Example #4
| Source File: InputText.js From id.co.moonlay-eworkplace-admin-web with MIT License | 6 votes |
|
render() {
return (
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className={this.props.icon}></i>
{this.props.text}
</InputGroupText>
</InputGroupAddon>
<Input type='text' placeholder={this.props.placeholder} name={this.props.name} />
</InputGroup>
)
}
Example #5
| Source File: RequestsContainer.js From covidsos with MIT License | 6 votes |
|
getFilter(key, name, val_key, mapperFunc = (val) => {
return (<option key={val} value={val}>{val}</option>);
}) {
const {filterData, filters} = this.state
return (filterData[key] &&
<Col md={2} xs={6} className="pt-3">
<InputGroup className="input-group-alternative r-filter">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-filter"/>
</InputGroupText>
</InputGroupAddon>
<Input
placeholder={name}
type="select"
value={filters[val_key || key]}
onChange={e => {
let value = e.target.value;
this.handleFilter(val_key || key, value);
}}>
<option value="">{name}</option>
<option value="any">Any</option>
{filterData[key].map(mapperFunc)}
</Input>
</InputGroup>
</Col>);
}
Example #6
| Source File: FormGroupTemplate.js From covidsos with MIT License | 5 votes |
|
render() {
const {iconClass, placeholder, type, optionsArray, optionGroupsArray, optionGroupsLabels, ...attributes} = this.props;
return (
<FormGroup>
<CardText className="text-gray text-custom-small mb-0">
{placeholder}
</CardText>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className={iconClass}/>
</InputGroupText>
</InputGroupAddon>
{
type === 'select' && optionsArray ?
<Input {...attributes} placeholder={placeholder} type={type}>
<option value="">{placeholder}</option>
{optionsArray.map(option => {
return (
<option key={option.value} value={option.value}>{option.label}</option>);
})}
</Input>
:
type === 'select' && optionGroupsArray ?
<Input {...attributes} placeholder={placeholder} type={type}>
<option value="">{placeholder}</option>
{optionGroupsArray.map(optionGroup => {
return (
<optgroup label={optionGroup.label} key={optionGroup.label}>
{optionGroup.optionList.map(option => {
return (
<option key={option.value}
value={option.value}>{option.label}</option>);
})}
</optgroup>
)
})}
</Input>
:
<Input {...attributes} placeholder={placeholder} type={type}/>
}
</InputGroup>
</FormGroup>
);
}
Example #7
| Source File: Register.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
var token = localStorage.getItem('token');
var RoleId = localStorage.getItem('RoleId')
if (token === null || token === undefined ||RoleId === null || RoleId === undefined) {
this.props.history.push('/login');
}
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="9" lg="7" xl="6">
<Card className="mx-4">
<CardBody className="p-4">
<Form>
<h1>Register</h1>
<p className="text-muted">Create your account</p>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Username" autoComplete="username" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Email" autoComplete="email" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Password" autoComplete="new-password" />
</InputGroup>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Repeat password" autoComplete="new-password" />
</InputGroup>
<Button color="success" block>Create Account</Button>
</Form>
</CardBody>
<CardFooter className="p-4">
<Row>
<Col xs="12" sm="6">
<Button className="btn-facebook mb-1" block><span>facebook</span></Button>
</Col>
<Col xs="12" sm="6">
<Button className="btn-twitter mb-1" block><span>twitter</span></Button>
</Col>
</Row>
</CardFooter>
</Card>
</Col>
</Row>
</Container>
</div>
);
}
Example #8
| Source File: Login.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="8">
<CardGroup>
<Card className="p-4">
<CardBody>
<Form>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" required onChange={this.handleUsername} placeholder="Username" autoComplete="username" />
</InputGroup>
<font color="red">{this.state.messageErrorUsername}</font>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" onChange={this.handlePassword} placeholder="Password" autoComplete="current-password" />
</InputGroup>
<font color="red">{this.state.messageErrorPassword}</font>
<Row>
<Col xs="6">
<Button color="primary" className="px-4" onClick={this.onHandleSubmit}>Login</Button>
</Col>
</Row>
</Form>
</CardBody>
</Card>
<Card body className="justify-content-center" style={{ width: '44%', backgroundColor: '#1A446D', }}>
<CardImg src={Logo} alt="Logo" style={{padding:'auto'}} />
</Card>
</CardGroup>
</Col>
</Row>
</Container>
</div>
);
}
Example #9
| Source File: import React, { Component } from 'react'.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="8">
<CardGroup>
<Card className="p-4">
<CardBody>
<Form>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" required onChange={this.handleUsername} placeholder="Username" autoComplete="username" />
</InputGroup>
<font color="red">{this.state.messageErrorUsername}</font>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" onChange={this.handlePassword} placeholder="Password" autoComplete="current-password" />
</InputGroup>
<font color="red">{this.state.messageErrorPassword}</font>
<Row>
<Col xs="6">
<Button color="primary" className="px-4" onClick={this.onHandleSubmit}>Login</Button>
</Col>
</Row>
</Form>
</CardBody>
</Card>
<Card className="text-white py-5 d-md-down-none" style={{ width: '44%', backgroundColor: '#1A446D' }}>
<CardBody className="text-center">
<div>
<img src={Logo} className="img-fluid" />
<h4 style={{marginTop: 20, fontFamily:'D-Din'}}>moonlay<b>technologies</b></h4>
</div>
</CardBody>
</Card>
</CardGroup>
</Col>
</Row>
</Container>
</div>
);
}
Example #10
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Input Addons</strong>
</h5>
<InputGroup>
<InputGroupAddon addonType="prepend">@</InputGroupAddon>
<Input placeholder="username" />
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<Input addon type="checkbox" aria-label="Checkbox for following text input" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Check it out" />
</InputGroup>
<br />
<InputGroup>
<Input placeholder="username" />
<InputGroupAddon addonType="append">
<InputGroupText>@example.com</InputGroupText>
</InputGroupAddon>
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input placeholder="Dolla dolla billz yo!" />
<InputGroupAddon addonType="append">
<InputGroupText>$</InputGroupText>
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
</InputGroup>
<br />
<InputGroup>
<InputGroupAddon addonType="prepend">$</InputGroupAddon>
<Input placeholder="Amount" min={0} max={100} type="number" step="1" />
<InputGroupAddon addonType="append">.00</InputGroupAddon>
</InputGroup>
</div>
)
}
Example #11
| Source File: Tables.js From covidsos with MIT License | 5 votes |
|
getTable(tableConfig) {
const currTableState = this.state.currState[tableConfig.key];
const statusList = []
if (currTableState.data.length !== 0) {
currTableState.data.map(row => row.status.toString().toLowerCase()).forEach(status => {
if (status && statusList.indexOf(status) === -1) {
statusList.push(status);
}
});
}
return (
<Col>
<Card className="shadow">
<CardHeader className="border-0">
<h3 className="mb-3 d-inline-block col-sm-4">
{tableConfig.title} ({this.state.currState[tableConfig.key].filteredData.length})
</h3>
<Form inline className="navbar-search d-inline-block ml-auto col-sm-8"
onSubmit={e => e.preventDefault()}>
<FormGroup>
{
statusList.length > 1 ?
<InputGroup className="input-group-alternative mr-0 ml-auto">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-filter"/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Status" type="select"
value={this.state.currState[tableConfig.key].statusFilter}
onChange={e => this.filter(e, tableConfig)}>
<option value="">Status</option>
{
statusList.sort(
(a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).map(
status => {
return (<option key={status} value={status}>{status}</option>);
})
}
</Input>
</InputGroup> : null
}
<InputGroup className="input-group-alternative mr-0 ml-auto">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-search"/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Search" type="text"
value={this.state.currState[tableConfig.key].searchString}
onChange={e => this.search(e, tableConfig)}/>
</InputGroup>
</FormGroup>
</Form>
</CardHeader>
<Table className="align-items-center table-flush" responsive>
<thead className="thead-light">
<tr>
<th scope="col">S.No.</th>
{
tableConfig.fieldHeaders.map(fh => {
return (
<th scope="col" key={tableConfig.key + '_' + fh}>{fh}</th>
);
})
}
<th scope="col">Action</th>
</tr>
</thead>
<tbody>{this.getRows(tableConfig)}</tbody>
</Table>
<CardFooter className="py-4">
{this.getNavigation(tableConfig)}
</CardFooter>
</Card>
</Col>
);
}
Example #12
| Source File: Login.js From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
const { errors } = this.state;
return (
<>
<DemoNavbar />
<main ref="main">
<section className="section section-shaped section-lg">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="pt-lg-md">
<Row className="justify-content-center">
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign in with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-neutral btn-icon"
color="default"
href="http://localhost:5000/api/auth/facebook"
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("../../assets/img/icons/common/facebook.svg")}
/>
</span>
<span className="btn-inner--text">Facebook</span>
</Button>
<Button
className="btn-neutral btn-icon ml-1"
color="default"
href="http://localhost:5000/api/auth/google"
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("../../assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
{errors && errors.auth ? (
<Alert color="warning">{errors.auth}</Alert>
) : (
<div className="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
)}
<Form role="form" noValidate onSubmit={this.onSubmit}>
<FormGroup className="mb-3">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onChange={this.onChange}
value={this.state.email}
id="email"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onChange={this.onChange}
value={this.state.password}
id="password"
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id=" customCheckLogin"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor=" customCheckLogin"
>
<span>Remember me</span>
</label>
</div>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="submit"
>
Sign in
</Button>
</div>
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col xs="6">
<a
className="text-light"
href="#pablo"
onClick={e => e.preventDefault()}
>
<small>Forgot password?</small>
</a>
</Col>
<Col className="text-right" xs="6">
<Link to="/register">
<small>Create new account</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #13
| Source File: Register.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<DemoNavbar />
<main ref="main">
<section className="section section-shaped section-lg">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="pt-lg-md">
<Row className="justify-content-center">
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign up with</small>
</div>
<div className="text-center">
<Button
className="btn-neutral btn-icon mr-4"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/github.svg")}
/>
</span>
<span className="btn-inner--text">Github</span>
</Button>
<Button
className="btn-neutral btn-icon ml-1"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<div className="text-center text-muted mb-4">
<small>Or sign up with credentials</small>
</div>
<Form role="form">
<FormGroup>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-hat-3" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Name" type="text" />
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Email" type="email" />
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
/>
</InputGroup>
</FormGroup>
<div className="text-muted font-italic">
<small>
password strength:{" "}
<span className="text-success font-weight-700">
strong
</span>
</small>
</div>
<Row className="my-4">
<Col xs="12">
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id="customCheckRegister"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor="customCheckRegister"
>
<span>
I agree with the{" "}
<a
href="#pablo"
onClick={e => e.preventDefault()}
>
Privacy Policy
</a>
</span>
</label>
</div>
</Col>
</Row>
<div className="text-center">
<Button
className="mt-4"
color="primary"
type="button"
>
Create account
</Button>
</div>
</Form>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #14
| Source File: Register.js From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
const { errors } = this.state;
return (
<>
<DemoNavbar />
<main ref="main">
<section className="section section-shaped section-lg">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="pt-lg-md">
<Row className="justify-content-center">
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign up with</small>
</div>
<div className="text-center">
<Button
className="btn-neutral btn-icon mr-4"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("../../assets/img/icons/common/github.svg")}
/>
</span>
<span className="btn-inner--text">Github</span>
</Button>
<Button
className="btn-neutral btn-icon ml-1"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("../../assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
{errors && errors.auth ? (
<Alert color="warning">{errors.auth}</Alert>
) : (
<div className="text-center text-muted mb-4">
<small>Or sign up with credentials</small>
</div>
)}
<Form role="form" noValidate onSubmit={this.onSubmit}>
<FormGroup>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-hat-3" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Name"
type="text"
onChange={this.onChange}
value={this.state.name}
id="name"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onChange={this.onChange}
value={this.state.email}
id="email"
></Input>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onChange={this.onChange}
value={this.state.password}
id="password"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Confirm Password"
onChange={this.onChange}
value={this.state.password2}
id="password2"
type="password"
/>
</InputGroup>
</FormGroup>
<div className="text-muted font-italic">
<small>
password strength:{" "}
<span className="text-success font-weight-700">
strong
</span>
</small>
</div>
<Row className="my-4">
<Col xs="12">
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id="customCheckRegister"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor="customCheckRegister"
>
<span>
I agree with the{" "}
<a
href="#pablo"
onClick={e => e.preventDefault()}
>
Privacy Policy
</a>
</span>
</label>
</div>
</Col>
</Row>
<div className="text-center">
<Button
className="mt-4"
color="primary"
type="submit"
>
Create account
</Button>
</div>
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col xs="6"></Col>
<Col className="text-right" xs="6">
<Link to="/login">
<small>Already an account ?</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #15
| Source File: AddPost.js From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
const { errors } = this.state;
return (
<>
<DemoNavbar />
<main ref="main">
<section className="section section-shaped section-lg">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="pt-lg-md">
<Row className="justify-content-center">
<Col lg="8">
<Card className="bg-secondary shadow border-0">
<CardBody className="px-lg-5 py-lg-5">
{errors && errors.auth ? (
<Alert color="warning">{errors.auth}</Alert>
) : (
<div className="text-center text-muted mb-4">
<small>What's on your mind ?</small>
</div>
)}
<Form role="form" noValidate onSubmit={this.onSubmit}>
<FormGroup>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-hat-3" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Title"
type="text"
onChange={this.onChange}
value={this.state.title}
id="title"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative mb-3">
<Input
id="content"
placeholder="Write a large text here ..."
rows="3"
type="textarea"
onChange={this.onChange}
/>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button
className="mt-4"
color="primary"
type="submit"
>
Post
</Button>
</div>
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col xs="6"></Col>
<Col className="text-right" xs="6">
<Link to="/login">
<small>Already an account ?</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #16
| Source File: EditProfile.js From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
const { user } = this.props.auth;
return (
<>
<DemoNavbar />
<main className="profile-page" ref="main">
<section className="section-profile-cover section-shaped my-0">
{/* Circles background */}
<div className="shape shape-style-1 shape-default alpha-4">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
<section className="section">
<Container>
<Card className="card-profile shadow mt--300 bg-secondary ">
<CardHeader className="bg-white">
<Row className="justify-content-center">
<Col className="order-lg-2" lg="3">
<div className="card-profile-image">
<a href="#pablo" onClick={e => e.preventDefault()}>
<img
alt="..."
className="rounded-circle"
src={
user.profilePicture
? user.profilePicture
: require("../../assets/img/theme/team-4-800x800.jpg")
}
/>
</a>
</div>
</Col>
<Col
className="order-lg-3 text-lg-right align-self-lg-center"
lg="4"
>
<div className="card-profile-actions py-4 mt-lg-0">
<Link to="/profile">
<Button className="mr-4" color="default" size="sm">
Go back to profile
</Button>
</Link>
</div>
</Col>
<Col className="order-lg-1" lg="4"></Col>
</Row>
<div className="text-center mt-5">
<h3>
{user.name}
<span className="font-weight-light">, 27</span>
</h3>
</div>
</CardHeader>
<div className="mt-5 py-5text-center">
<Row className="justify-content-center">
<Col lg="9">
<Form role="form" noValidate onSubmit={this.onSubmit}>
<FormGroup className="mb-3">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-circle-08" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Name"
type="input"
onChange={this.onChange}
value={this.state.name}
id="name"
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-3">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onChange={this.onChange}
value={this.state.email}
id="email"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onChange={this.onChange}
value={this.state.password}
id="password"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Re-enter Password"
type="password"
autoComplete="off"
onChange={this.onChange}
value={this.state.password2}
id="password2"
/>
</InputGroup>
</FormGroup>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="submit"
>
Save Changes
</Button>
</div>
</Form>
</Col>
</Row>
</div>
</Card>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #17
| Source File: Datepicker.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<h3 className="h4 text-success font-weight-bold mt-md mb-4">
Datepicker
</h3>
<Row>
<Col md="4">
<small className="d-block text-uppercase font-weight-bold mb-3">
Single date
</small>
<FormGroup className="focused">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
inputProps={{
placeholder: "Date Picker Here"
}}
timeFormat={false}
/>
</InputGroup>
</FormGroup>
</Col>
<Col className="mt-4 mt-md-0" md="8">
<small className="d-block text-uppercase font-weight-bold mb-3">
Date range
</small>
<Row>
<Col sm={6} xs={12}>
<FormGroup className="focused">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
inputProps={{
placeholder: "Start Date"
}}
value={this.state.startDate}
timeFormat={false}
onChange={e =>
this.handleReactDatetimeChange("startDate", e)
}
renderDay={(props, currentDate, selectedDate) => {
let classes = props.className;
classes += this.getClassNameReactDatetimeDays(
currentDate
);
return (
<td {...props} className={classes}>
{currentDate.date()}
</td>
);
}}
/>
</InputGroup>
</FormGroup>
</Col>
<Col sm={6} xs={12}>
<FormGroup className="focused">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
inputProps={{
placeholder: "End Date"
}}
className="rdtPickerOnRight"
value={this.state.endDate}
timeFormat={false}
onChange={e =>
this.handleReactDatetimeChange("endDate", e)
}
renderDay={(props, currentDate, selectedDate) => {
let classes = props.className;
classes += this.getClassNameReactDatetimeDays(
currentDate
);
return (
<td {...props} className={classes}>
{currentDate.date()}
</td>
);
}}
/>
</InputGroup>
</FormGroup>
</Col>
</Row>
</Col>
</Row>
</>
);
}
Example #18
| Source File: Inputs.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<section className="section pb-0 section-components">
<Container className="mb-5">
{/* Inputs */}
<h3 className="h4 text-success font-weight-bold mb-4">Inputs</h3>
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
Form controls
</small>
</div>
<Row>
<Col lg="4" sm="6">
<FormGroup>
<Input placeholder="Regular" type="text" />
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.searchFocused
})}
>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Search"
type="text"
onFocus={e => this.setState({ searchFocused: true })}
onBlur={e => this.setState({ searchFocused: false })}
/>
</InputGroup>
</FormGroup>
</Col>
<Col lg="4" sm="6">
<FormGroup>
<Input disabled placeholder="Regular" type="text" />
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.birthdayFocused
})}
>
<InputGroup className="mb-4">
<Input
placeholder="Birthday"
type="text"
onFocus={e => this.setState({ birthdayFocused: true })}
onBlur={e => this.setState({ birthdayFocused: false })}
/>
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
<Col lg="4" sm="6">
<FormGroup className="has-success">
<Input
className="is-valid"
placeholder="Success"
type="text"
/>
</FormGroup>
<FormGroup className="has-danger">
<Input
className="is-invalid"
placeholder="Error Input"
type="email"
/>
</FormGroup>
</Col>
</Row>
</Container>
<div className="py-5 bg-secondary">
<Container>
{/* Inputs (alternative) */}
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
Form controls (alternative)
</small>
</div>
<Row>
<Col lg="4" sm="6">
<FormGroup>
<Input
className="form-control-alternative"
placeholder="Regular"
type="text"
/>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.searchAltFocused
})}
>
<InputGroup className="input-group-alternative mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Search"
type="text"
onFocus={e => this.setState({ searchAltFocused: true })}
onBlur={e => this.setState({ searchAltFocused: false })}
/>
</InputGroup>
</FormGroup>
</Col>
<Col lg="4" sm="6">
<FormGroup>
<Input
className="form-control-alternative"
disabled
placeholder="Regular"
type="text"
/>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.birthdayAltFocused
})}
>
<InputGroup className="input-group-alternative mb-4">
<Input
placeholder="Birthday"
type="text"
onFocus={e =>
this.setState({ birthdayAltFocused: true })
}
onBlur={e =>
this.setState({ birthdayAltFocused: false })
}
/>
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="ni ni-zoom-split-in" />
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Col>
<Col lg="4" sm="6">
<FormGroup className="has-success">
<Input
className="form-control-alternative is-valid"
placeholder="Success"
type="text"
/>
</FormGroup>
<FormGroup className="has-danger">
<Input
className="form-control-alternative is-invalid"
placeholder="Error Input"
type="email"
/>
</FormGroup>
</Col>
</Row>
</Container>
</div>
</section>
</>
);
}
Example #19
| Source File: Login.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<section className="section section-lg section-shaped">
<div className="shape shape-style-1 shape-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="py-md">
<Row className="row-grid justify-content-between align-items-center">
<Col lg="6">
<h3 className="display-3 text-white">
A beautiful Design System{" "}
<span className="text-white">completed with examples</span>
</h3>
<p className="lead text-white">
The Design System comes with four pre-built pages to help you
get started faster. You can change the text and images and
you're good to go. More importantly, looking at them will give
you a picture of what you can built with this powerful
Bootstrap 4 Design System.
</p>
<div className="btn-wrapper">
<Button color="success" to="/login-page" tag={Link}>
Login Page
</Button>
<Button
className="btn-white"
color="default"
to="/register-page"
tag={Link}
>
Register Page
</Button>
</div>
</Col>
<Col className="mb-lg-auto" lg="5">
<div className="transform-perspective-right">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign in with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-neutral btn-icon"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/github.svg")}
/>
</span>
<span className="btn-inner--text">Github</span>
</Button>
<Button
className="btn-neutral btn-icon"
color="default"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<div className="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
<Form role="form">
<FormGroup
className={classnames("mb-3", {
focused: this.state.emailFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onFocus={e =>
this.setState({ emailFocused: true })
}
onBlur={e =>
this.setState({ emailFocused: false })
}
/>
</InputGroup>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.passwordFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onFocus={e =>
this.setState({ passwordFocused: true })
}
onBlur={e =>
this.setState({ passwordFocused: false })
}
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id="customCheckLogin2"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor="customCheckLogin2"
>
<span>Remember me</span>
</label>
</div>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="button"
>
Sign in
</Button>
</div>
</Form>
</CardBody>
</Card>
</div>
</Col>
</Row>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon className="fill-white" points="2560 0 2560 100 0 100" />
</svg>
</div>
</section>
</>
);
}
Example #20
| Source File: Modals.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<h2 className="mt-lg mb-5">
<span>Javascript Components</span>
</h2>
<h3 className="h4 text-success font-weight-bold mb-4">Modals</h3>
<Row>
<Col md="4">
<Button
block
className="mb-3"
color="primary"
type="button"
onClick={() => this.toggleModal("defaultModal")}
>
Default
</Button>
<Modal
className="modal-dialog-centered"
isOpen={this.state.defaultModal}
toggle={() => this.toggleModal("defaultModal")}
>
<div className="modal-header">
<h6 className="modal-title" id="modal-title-default">
Type your modal title
</h6>
<button
aria-label="Close"
className="close"
data-dismiss="modal"
type="button"
onClick={() => this.toggleModal("defaultModal")}
>
<span aria-hidden={true}>×</span>
</button>
</div>
<div className="modal-body">
<p>
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind texts.
Separated they live in Bookmarksgrove right at the coast of
the Semantics, a large language ocean.
</p>
<p>
A small river named Duden flows by their place and supplies it
with the necessary regelialia. It is a paradisematic country,
in which roasted parts of sentences fly into your mouth.
</p>
</div>
<div className="modal-footer">
<Button color="primary" type="button">
Save changes
</Button>
<Button
className="ml-auto"
color="link"
data-dismiss="modal"
type="button"
onClick={() => this.toggleModal("defaultModal")}
>
Close
</Button>
</div>
</Modal>
</Col>
<Col md="4">
<Button
block
className="mb-3"
color="warning"
type="button"
onClick={() => this.toggleModal("notificationModal")}
>
Notification
</Button>
<Modal
className="modal-dialog-centered modal-danger"
contentClassName="bg-gradient-danger"
isOpen={this.state.notificationModal}
toggle={() => this.toggleModal("notificationModal")}
>
<div className="modal-header">
<h6 className="modal-title" id="modal-title-notification">
Your attention is required
</h6>
<button
aria-label="Close"
className="close"
data-dismiss="modal"
type="button"
onClick={() => this.toggleModal("notificationModal")}
>
<span aria-hidden={true}>×</span>
</button>
</div>
<div className="modal-body">
<div className="py-3 text-center">
<i className="ni ni-bell-55 ni-3x" />
<h4 className="heading mt-4">You should read this!</h4>
<p>
A small river named Duden flows by their place and supplies
it with the necessary regelialia.
</p>
</div>
</div>
<div className="modal-footer">
<Button className="btn-white" color="default" type="button">
Ok, Got it
</Button>
<Button
className="text-white ml-auto"
color="link"
data-dismiss="modal"
type="button"
onClick={() => this.toggleModal("notificationModal")}
>
Close
</Button>
</div>
</Modal>
</Col>
<Col md="4">
<Button
block
color="default"
type="button"
onClick={() => this.toggleModal("formModal")}
>
Form
</Button>
<Modal
className="modal-dialog-centered"
size="sm"
isOpen={this.state.formModal}
toggle={() => this.toggleModal("formModal")}
>
<div className="modal-body p-0">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign in with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-icon mt-2 mb-2"
color="neutral"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/github.svg")}
/>
</span>
<span className="btn-inner--text">Github</span>
</Button>
<Button
className="btn-icon mt-2 mb-2 ml-1"
color="neutral"
href="#pablo"
onClick={e => e.preventDefault()}
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
<div className="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
<Form role="form">
<FormGroup
className={classnames("mb-3", {
focused: this.state.emailFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onFocus={e => this.setState({ emailFocused: true })}
onBlur={e => this.setState({ emailFocused: false })}
/>
</InputGroup>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.passwordFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onFocus={e =>
this.setState({ passwordFocused: true })
}
onBlur={e =>
this.setState({ passwordFocused: false })
}
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id=" customCheckLogin"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor=" customCheckLogin"
>
<span className="text-muted">Remember me</span>
</label>
</div>
<div className="text-center">
<Button className="my-4" color="primary" type="button">
Sign in
</Button>
</div>
</Form>
</CardBody>
</Card>
</div>
</Modal>
</Col>
</Row>
</>
);
}
Example #21
| Source File: Landing.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<DemoNavbar />
<main ref="main">
<div className="position-relative">
{/* shape Hero */}
<section className="section section-lg section-shaped pb-250">
<div className="shape shape-style-1 shape-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="py-lg-md d-flex">
<div className="col px-0">
<Row>
<Col lg="6">
<h1 className="display-3 text-white">
A beautiful Design System{" "}
<span>completed with examples</span>
</h1>
<p className="lead text-white">
The design system comes with four pre-built pages to
help you get started faster. You can change the text and
images and you're good to go.
</p>
<div className="btn-wrapper">
<Button
className="btn-icon mb-3 mb-sm-0"
color="info"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alerts?ref=adsr-landing-page"
>
<span className="btn-inner--icon mr-1">
<i className="fa fa-code" />
</span>
<span className="btn-inner--text">Components</span>
</Button>
<Button
className="btn-white btn-icon mb-3 mb-sm-0 ml-1"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
>
<span className="btn-inner--icon mr-1">
<i className="ni ni-cloud-download-95" />
</span>
<span className="btn-inner--text">
Download React
</span>
</Button>
</div>
</Col>
</Row>
</div>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
{/* 1st Hero Variation */}
</div>
<section className="section section-lg pt-lg-0 mt--200">
<Container>
<Row className="justify-content-center">
<Col lg="12">
<Row className="row-grid">
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-primary rounded-circle mb-4">
<i className="ni ni-check-bold" />
</div>
<h6 className="text-primary text-uppercase">
Download Argon
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="primary" pill className="mr-1">
design
</Badge>
<Badge color="primary" pill className="mr-1">
system
</Badge>
<Badge color="primary" pill className="mr-1">
creative
</Badge>
</div>
<Button
className="mt-4"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-success rounded-circle mb-4">
<i className="ni ni-istanbul" />
</div>
<h6 className="text-success text-uppercase">
Build Something
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="success" pill className="mr-1">
business
</Badge>
<Badge color="success" pill className="mr-1">
vision
</Badge>
<Badge color="success" pill className="mr-1">
success
</Badge>
</div>
<Button
className="mt-4"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
<Col lg="4">
<Card className="card-lift--hover shadow border-0">
<CardBody className="py-5">
<div className="icon icon-shape icon-shape-warning rounded-circle mb-4">
<i className="ni ni-planet" />
</div>
<h6 className="text-warning text-uppercase">
Prepare Launch
</h6>
<p className="description mt-3">
Argon is a great free UI package based on Bootstrap
4 that includes the most important components and
features.
</p>
<div>
<Badge color="warning" pill className="mr-1">
marketing
</Badge>
<Badge color="warning" pill className="mr-1">
product
</Badge>
<Badge color="warning" pill className="mr-1">
launch
</Badge>
</div>
<Button
className="mt-4"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</Button>
</CardBody>
</Card>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
<section className="section section-lg">
<Container>
<Row className="row-grid align-items-center">
<Col className="order-md-2" md="6">
<img
alt="..."
className="img-fluid floating"
src={require("../../assets/img/theme/promo-1.png")}
/>
</Col>
<Col className="order-md-1" md="6">
<div className="pr-md-5">
<div className="icon icon-lg icon-shape icon-shape-success shadow rounded-circle mb-5">
<i className="ni ni-settings-gear-65" />
</div>
<h3>Awesome features</h3>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<ul className="list-unstyled mt-5">
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-settings-gear-65" />
</Badge>
</div>
<div>
<h6 className="mb-0">
Carefully crafted components
</h6>
</div>
</div>
</li>
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-html5" />
</Badge>
</div>
<div>
<h6 className="mb-0">Amazing page examples</h6>
</div>
</div>
</li>
<li className="py-2">
<div className="d-flex align-items-center">
<div>
<Badge
className="badge-circle mr-3"
color="success"
>
<i className="ni ni-satisfied" />
</Badge>
</div>
<div>
<h6 className="mb-0">
Super friendly support team
</h6>
</div>
</div>
</li>
</ul>
</div>
</Col>
</Row>
</Container>
</section>
<section className="section bg-secondary">
<Container>
<Row className="row-grid align-items-center">
<Col md="6">
<Card className="bg-default shadow border-0">
<CardImg
alt="..."
src={require("../../assets/img/theme/img-1-1200x1000.jpg")}
top
/>
<blockquote className="card-blockquote">
<svg
xmlns="http://www.w3.org/2000/svg"
className="svg-bg"
preserveAspectRatio="none"
viewBox="0 0 583 95"
>
<polygon
className="fill-default"
points="0,52 583,95 0,95"
/>
<polygon
className="fill-default"
opacity=".2"
points="0,42 583,95 683,0 0,95"
/>
</svg>
<h4 className="display-3 font-weight-bold text-white">
Design System
</h4>
<p className="lead text-italic text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever happens.
</p>
</blockquote>
</Card>
</Col>
<Col md="6">
<div className="pl-md-5">
<div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
<i className="ni ni-settings" />
</div>
<h3>Our customers</h3>
<p className="lead">
Don't let your uses guess by attaching tooltips and
popoves to any element. Just make sure you enable them
first via JavaScript.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<p>
The kit comes with three pre-built pages to help you get
started faster. You can change the text and images and
you're good to go.
</p>
<a
className="font-weight-bold text-warning mt-5"
href="#pablo"
onClick={e => e.preventDefault()}
>
A beautiful UI Kit for impactful websites
</a>
</div>
</Col>
</Row>
</Container>
</section>
<section className="section pb-0 bg-gradient-warning">
<Container>
<Row className="row-grid align-items-center">
<Col className="order-lg-2 ml-lg-auto" md="6">
<div className="position-relative pl-md-5">
<img
alt="..."
className="img-center img-fluid"
src={require("../../assets/img/ill/ill-2.svg")}
/>
</div>
</Col>
<Col className="order-lg-1" lg="6">
<div className="d-flex px-3">
<div>
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-building text-primary" />
</div>
</div>
<div className="pl-4">
<h4 className="display-3 text-white">Modern Interface</h4>
<p className="text-white">
The Arctic Ocean freezes every winter and much of the
sea-ice then thaws every summer, and that process will
continue whatever.
</p>
</div>
</div>
<Card className="shadow shadow-lg--hover mt-5">
<CardBody>
<div className="d-flex px-3">
<div>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-satisfied" />
</div>
</div>
<div className="pl-4">
<h5 className="title text-success">
Awesome Support
</h5>
<p>
The Arctic Ocean freezes every winter and much of
the sea-ice then thaws every summer, and that
process will continue whatever.
</p>
<a
className="text-success"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</a>
</div>
</div>
</CardBody>
</Card>
<Card className="shadow shadow-lg--hover mt-5">
<CardBody>
<div className="d-flex px-3">
<div>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-active-40" />
</div>
</div>
<div className="pl-4">
<h5 className="title text-warning">
Modular Components
</h5>
<p>
The Arctic Ocean freezes every winter and much of
the sea-ice then thaws every summer, and that
process will continue whatever.
</p>
<a
className="text-warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
Learn more
</a>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
<section className="section section-lg">
<Container>
<Row className="justify-content-center text-center mb-lg">
<Col lg="8">
<h2 className="display-3">The amazing Team</h2>
<p className="lead text-muted">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record maximum.
</p>
</Col>
</Row>
<Row>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("../../assets/img/theme/team-1-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Ryan Tompson</span>
<small className="h6 text-muted">Web Developer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="warning"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("../../assets/img/theme/team-2-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Romina Hadid</span>
<small className="h6 text-muted">
Marketing Strategist
</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="primary"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("../../assets/img/theme/team-3-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">Alexander Smith</span>
<small className="h6 text-muted">UI/UX Designer</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="info"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
<Col className="mb-5 mb-lg-0" lg="3" md="6">
<div className="px-4">
<img
alt="..."
className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
src={require("../../assets/img/theme/team-4-800x800.jpg")}
style={{ width: "200px" }}
/>
<div className="pt-4 text-center">
<h5 className="title">
<span className="d-block mb-1">John Doe</span>
<small className="h6 text-muted">Founder and CEO</small>
</h5>
<div className="mt-3">
<Button
className="btn-icon-only rounded-circle"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook" />
</Button>
<Button
className="btn-icon-only rounded-circle ml-1"
color="success"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-dribbble" />
</Button>
</div>
</div>
</div>
</Col>
</Row>
</Container>
</section>
<section className="section section-lg pt-0">
<Container>
<Card className="bg-gradient-warning shadow-lg border-0">
<div className="p-5">
<Row className="align-items-center">
<Col lg="8">
<h3 className="text-white">
We made website building easier for you.
</h3>
<p className="lead text-white mt-3">
I will be the leader of a company that ends up being
worth billions of dollars, because I got the answers. I
understand culture.
</p>
</Col>
<Col className="ml-lg-auto" lg="3">
<Button
block
className="btn-white"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
size="lg"
>
Download React
</Button>
</Col>
</Row>
</div>
</Card>
</Container>
</section>
<section className="section section-lg bg-gradient-default">
<Container className="pt-lg pb-300">
<Row className="text-center justify-content-center">
<Col lg="10">
<h2 className="display-3 text-white">Build something</h2>
<p className="lead text-white">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record low maximum sea ice extent tihs year down
to low ice.
</p>
</Col>
</Row>
<Row className="row-grid mt-5">
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-settings text-primary" />
</div>
<h5 className="text-white mt-3">Building tools</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-ruler-pencil text-primary" />
</div>
<h5 className="text-white mt-3">Grow your market</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
<Col lg="4">
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
<i className="ni ni-atom text-primary" />
</div>
<h5 className="text-white mt-3">Launch time</h5>
<p className="text-white mt-3">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
</Col>
</Row>
</Container>
{/* SVG separator */}
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
<section className="section section-lg pt-lg-0 section-contact-us">
<Container>
<Row className="justify-content-center mt--300">
<Col lg="8">
<Card className="bg-gradient-secondary shadow">
<CardBody className="p-lg-5">
<h4 className="mb-1">Want to work with us?</h4>
<p className="mt-0">
Your project is very important to us.
</p>
<FormGroup
className={classnames("mt-5", {
focused: this.state.nameFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-user-run" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Your name"
type="text"
onFocus={e => this.setState({ nameFocused: true })}
onBlur={e => this.setState({ nameFocused: false })}
/>
</InputGroup>
</FormGroup>
<FormGroup
className={classnames({
focused: this.state.emailFocused
})}
>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email address"
type="email"
onFocus={e => this.setState({ emailFocused: true })}
onBlur={e => this.setState({ emailFocused: false })}
/>
</InputGroup>
</FormGroup>
<FormGroup className="mb-4">
<Input
className="form-control-alternative"
cols="80"
name="name"
placeholder="Type a message..."
rows="4"
type="textarea"
/>
</FormGroup>
<div>
<Button
block
className="btn-round"
color="default"
size="lg"
type="button"
>
Send Message
</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</section>
<Download />
</main>
<CardsFooter />
</>
);
}
Example #22
| Source File: ContactUsPage.js From Website2020 with MIT License | 4 votes |
|
render() {
return (
<>
<ExamplesNavbar activePage="/contact-us" />
<div className="section text-center ">
<Container className="reduce-margin">
<Row>
<h2 className="heading-contact-us" style={{ textAlign: "center", zIndex:"10" }}>CONTACT US</h2>
</Row>
</Container>
</div>
<Container className="main">
<div className="section landing-section">
<Container className="u-border contact-us-section">
<Row>
<Col lg="6" className="contact-us-form-container">
<h2 className=" heading-small-contact-us">Share Feedback or Ask your Queries </h2>
<Form className="contact-form" onSubmit={this.postDataHandler}>
<Row>
<Col md="12">
<label className="mb-0 desc-auv">Name</label>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="nc-icon nc-single-02" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Name"
type="text"
value={this.state.name}
onChange={this.nameChangedHandler} />
</InputGroup>
</Col>
<Col md="12">
<label className="mb-0 desc-auv">Email</label>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="nc-icon nc-email-85" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
value={this.state.email}
onChange={this.emailChangedHandler} />
</InputGroup>
</Col>
</Row>
<label className="mb-0 desc-auv">Message</label>
<Input
placeholder="Tell us your thoughts and feelings..."
type="textarea"
rows="4"
value={this.state.message}
onChange={this.messageChangedHandler}
/>
<Button className="contact-us-form-button">
Send
</Button>
</Form>
</Col>
<Col lg="6" className="contact-us-form-container">
<h2 className="ml-5 small-heading">Contact details</h2>
<div className="row u-margin-top-large">
<Col md="1">
<i className="fa fa-phone contact-icon" />
</Col>
<Col md="10" className="ml-3 mt-4">
<p className="desc-auv">Phone Number : +91 9521597992 </p>
</Col>
<Col md="1">
<i className="fa fa-envelope-square contact-icon" />
</Col>
<Col md="10" className="ml-3 mt-4">
<p className="desc-auv">Email id : [email protected] </p>
</Col>
<Col md="1">
<i className="fa fa-map-marker contact-icon" />
</Col>
<Col md="10" className="ml-3 mt-4">
<p className="desc-auv">
Address : AUV Room, Hall of Residence 2, Indian
Institute of Technology, Kanpur, Uttar Pradesh, India -
208016{" "}
</p>
</Col>
</div>
</Col>
</Row>
</Container>
</div>
</Container>
</>
);
}
Example #23
| Source File: Introduce.js From semikolan-react with GNU General Public License v3.0 | 4 votes |
|
Register = () => {
const handleSubmit = (event) => {
event.preventDefault();
const name = document.querySelector("input[name=name]").value;
const email = document.querySelector("input[name=email]").value;
const college = document.querySelector("input[name=college]").value;
const branch = document.querySelector("input[name=branch]").value;
const year = document.querySelector("input[name=year]").value;
const linkedin = document.querySelector("input[name=linkedin]").value;
const github = document.querySelector("input[name=github]").value;
const about = document.querySelector("textarea[name=about]").value;
const other = document.querySelector("textarea[name=other]").value;
const newsletter = document.querySelector("input[name=newsletter]").value;
API.post(`introduce`, {
name,
email,
college,
branch,
year,
linkedin,
github,
about,
other,
newsletter
})
.then((res) => {
alert(
"You have sucessfully submitted your details."
);
window.location.replace('/')
})
.catch(function (error) {
console.log(error);
alert(
`We're Sorry, Your details have not been submitted yet. \n
It is happened due to -- ` + error
);
})
.then(function () {
// always executed
});
};
return (
<div className="c-app c-default-layout flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="10" lg="8" xl="8">
<CCard className="mx-4">
<CCardBody className="p-4">
<CForm onSubmit={handleSubmit}>
<center>
<h1>Introduce Yourself</h1>
</center>
<p className="text-muted mb-0">Personal Info</p>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-user p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="name" placeholder="Name" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-envelope p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="email" type="email" placeholder="Email" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-university p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="college" placeholder="College" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-graduation-cap p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="branch" placeholder="Branch" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-calendar-week p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="year" placeholder="Year" required />
</InputGroup>
<p className="text-muted mt-4 mb-0">Social Info</p>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-linkedin p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="linkedin" placeholder="Linkedin Profile URL" required />
</InputGroup>
<InputGroup className="mb-2 mt-1">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-github p-1" />
</InputGroupText>
</InputGroupAddon>
<Input name="github" placeholder="Github Account Username/URL" required />
</InputGroup>
<FormGroup>
<Label for="exampleText" className="text-muted mt-2">
Tell us about your technological interests (For ex. Web Dev, App Dev, Machine Learning, Graphic Design etc.):
</Label>
<Input
type="textarea"
name="about"
id="example"
placeholder="Blockchain, Graphic Design"
required />
</FormGroup>
<FormGroup>
<Label for="example" className="text-muted mt-2">
Tell us about the tools and languages you're currently using or want to learn:
</Label>
<Input
type="textarea"
name="other"
id="exampleText"
placeholder="HTML, CSS, JavaScript, React.js and c++"
/>
</FormGroup>
<FormGroup check>
<Label check>
<Input name="newsletter" type="checkbox" className="mt-1" />{" "}
Subscribe to the Semikolan weekly Newsletter
</Label>
</FormGroup>
<center>
<button
type="submit"
className=" btn btn-lg mt-3"
style={{
background: "var(--Navy)",
color: "var(--LightestSlate)",
}}
block
>
Submit
</button>
</center>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
</CContainer>
</div>
);
}
Example #24
| Source File: EditAccount.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render(){
var token = localStorage.getItem('token');
var RoleId = localStorage.getItem('RoleId')
if (token === null || token === undefined ||RoleId === null || RoleId === undefined) {
this.props.history.push('/login');
}
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="9" lg="7" xl="6">
<Card className="mx-4">
<CardBody className="p-4">
<Form>
<h1>Register</h1>
<p className="text-muted">Create an employee account</p>
<p>Step {this.state.step} of 2</p>
<div style={{display: this.state.step === 1 ? 'block' : 'none'}}>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" value={this.state.firstname} onChange={this.onChangeFirtsname} placeholder="First Name" autoComplete="firstname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" value={this.state.lastname} onChange={this.onChangeLastname} placeholder="Last Name" autoComplete="lastname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeUsername} value={this.state.username} placeholder="Username" autoComplete="username" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" value={this.state.email} onChange={this.onChangeEmail} placeholder="Email" autoComplete="email" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" value={this.state.password} onChange={this.onchagePassword} placeholder="Password" autoComplete="new-password" />
</InputGroup>
{/* <InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Repeat password" autoComplete="new-password" />
</InputGroup> */}
<Button onClick={this.onhandleNext} color="primary">Next</Button>
</div>
<div style={{display: this.state.step === 2 ? 'block' : 'none'}}>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Role
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.role} onChange={this.onChangeRole}>
<option>Select Role..</option>
<option value="Developer">Developer</option>
<option value="Scrum Master">Scrum Master</option>
<option value="Product Owner">Product Owner</option>
<option value="Human Resource">Human Resource</option>
<option value="MOKKI Design Team" >MOKKI Design Team</option>
</Input>
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Status
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.status} onChange={this.onChangeStatus}>
<option>{this.state.status}</option>
<option value="Internship">Internship</option>
<option value="Full-Time Worker">Full-Time Worker</option>
</Input>
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Birthday
</InputGroupText>
</InputGroupAddon>
<Input type="date" value={this.state.dob} onChange={this.onChangeDob} />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Gender
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.gender} onChange={this.onChangeGender}>
<option value>{this.state.gender}</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</Input>
</InputGroup>
<Button onClick={this.onhandlePrevius} color="primary">Previus</Button>
<Button onClick={this.onhandleSubmit} color="success">Create Account</Button>
</div>
</Form>
</CardBody>
<CardFooter className="p-4">
<Button color='danger' block onClick={this.onhandleBack} >Back to Dashboard</Button>
</CardFooter>
</Card>
</Col>
</Row>
</Container>
</div>
);
}
Example #25
| Source File: AddAccount.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render(){
var token = localStorage.getItem('token');
var RoleId = localStorage.getItem('RoleId')
if (token === null || token === undefined ||RoleId === null || RoleId === undefined) {
this.props.history.push('/login');
}
let roleList = this.state.listRole.map(function (role) {
return { value: role._id, label: role .name };
})
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="9" lg="7" xl="6">
<Card className="mx-4">
<CardBody className="p-4">
<Form>
<h1>Add Account</h1>
<p className="text-muted">Create an employee account</p>
<p>Step {this.state.step} of 2</p>
<div style={{display: this.state.step === 1 ? 'block' : 'none'}}>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeFirtsname} placeholder="First Name" autoComplete="firstname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeLastname} placeholder="Last Name" autoComplete="lastname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeUsername} placeholder="Username" autoComplete="username" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeEmail} placeholder="Email" autoComplete="email" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type={this.state.hidden ? "password" : "text"} onChange={this.onchagePassword} name="password" placeholder="Password" autoComplete="new-password" id="password-field" />
<i className={this.state.hidden ? "fa fa-eye" : "fa fa-eye-slash"} style={{fontSize : 30}} onClick={this.toggleShow}></i>
</InputGroup>
{/* <InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Repeat password" autoComplete="new-password" />
</InputGroup> */}
<Button onClick={this.onhandleNext} color="primary">Next</Button>
</div>
<div style={{display: this.state.step === 2 ? 'block' : 'none'}}>
<Row>
<Col style={{marginRight:'-30px'}} md={3} ><InputGroupText>
Role
</InputGroupText>
</Col>
<Col> <Select
name="form-field-name"
value={this.state.selectedRole}
onChange={this.onChangeRole}
options={roleList} /> <br /></Col>
</Row>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Birthday
</InputGroupText>
</InputGroupAddon>
<Input type="date" onChange={this.onChangeDob} />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Gender
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.value} onChange={this.onChangeGender}>
<option>Select Gender..</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</Input>
</InputGroup>
<Button onClick={this.onhandlePrevius} color="primary">Previous</Button>
<Button onClick={this.onhandleSubmit} color="success">Create Account</Button>
</div>
</Form>
</CardBody>
<CardFooter className="p-4">
<Button color='danger' block onClick={this.onhandleBack} >Back to Dashboard</Button>
</CardFooter>
</Card>
</Col>
</Row>
</Container>
</div>
);
}
Example #26
| Source File: ButtonGroups.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Group</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Vertical variation</strong>
</CardHeader>
<CardBody>
<ButtonGroup vertical>
<Button>1</Button>
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen[0]} toggle={() => { this.toggle(0); }}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
<DropdownItem>Dropdown Link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
</CardHeader>
<CardBody>
<ButtonToolbar>
<ButtonGroup className="mr-2">
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
</ButtonGroup>
<ButtonGroup>
<Button>8</Button>
</ButtonGroup>
</ButtonToolbar>
</CardBody>
</Card>
</Col>
<Col md={6}>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Sizing</strong>
</CardHeader>
<CardBody>
<ButtonGroup size="lg">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<hr />
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<hr />
<ButtonGroup size="sm">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Nesting</strong>
</CardHeader>
<CardBody>
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen[1]} toggle={() => { this.toggle(1); }}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
<DropdownItem>Dropdown Link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong> <small>with input groups</small>
</CardHeader>
<CardBody>
<ButtonToolbar className="mb-3">
<ButtonGroup className="mr-2">
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<InputGroup>
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" />
</InputGroup>
</ButtonToolbar>
<ButtonToolbar className="justify-content-between">
<ButtonGroup>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</ButtonGroup>
<InputGroup>
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" />
</InputGroup>
</ButtonToolbar>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #27
| Source File: Forms.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Credit Card</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input type="text" id="name" placeholder="Enter your name" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="ccnumber">Credit Card Number</Label>
<Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccmonth">Month</Label>
<Input type="select" name="ccmonth" id="ccmonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccyear">Year</Label>
<Input type="select" name="ccyear" id="ccyear">
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="cvv">CVV/CVC</Label>
<Input type="text" id="cvv" placeholder="123" required />
</FormGroup>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Company</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="company">Company</Label>
<Input type="text" id="company" placeholder="Enter your company name" />
</FormGroup>
<FormGroup>
<Label htmlFor="vat">VAT</Label>
<Input type="text" id="vat" placeholder="DE1234567890" />
</FormGroup>
<FormGroup>
<Label htmlFor="street">Street</Label>
<Input type="text" id="street" placeholder="Enter street name" />
</FormGroup>
<FormGroup row className="my-0">
<Col xs="8">
<FormGroup>
<Label htmlFor="city">City</Label>
<Input type="text" id="city" placeholder="Enter your city" />
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="postal-code">Postal Code</Label>
<Input type="text" id="postal-code" placeholder="Postal Code" />
</FormGroup>
</Col>
</FormGroup>
<FormGroup>
<Label htmlFor="country">Country</Label>
<Input type="text" id="country" placeholder="Country name" />
</FormGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Basic Form</strong> Elements
</CardHeader>
<CardBody>
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label>Static</Label>
</Col>
<Col xs="12" md="9">
<p className="form-control-static">Username</p>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="text-input">Text Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="text-input" name="text-input" placeholder="Text" />
<FormText color="muted">This is a help text</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="email-input">Email Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="password-input">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" />
<FormText className="help-block">Please enter a complex password</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="date-input">Date Input <Badge>NEW</Badge></Label>
</Col>
<Col xs="12" md="9">
<Input type="date" id="date-input" name="date-input" placeholder="date" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabled-input">Disabled Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="textarea-input">Textarea</Label>
</Col>
<Col xs="12" md="9">
<Input type="textarea" name="textarea-input" id="textarea-input" rows="9"
placeholder="Content..." />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="select">Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="select" id="select">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectLg">Select Large</Label>
</Col>
<Col xs="12" md="9" size="lg">
<Input type="select" name="selectLg" id="selectLg" bsSize="lg">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectSm">Select Small</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabledSelect">Disabled Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="disabledSelect" id="disabledSelect" disabled autoComplete="name">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="multiple-select">Multiple select</Label>
</Col>
<Col md="9">
<Input type="select" name="multiple-select" id="multiple-select" multiple>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
<option value="8">Option #8</option>
<option value="9">Option #9</option>
<option value="10">Option #10</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Radios</Label>
</Col>
<Col md="9">
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1" />
<Label check className="form-check-label" htmlFor="radio1">Option 1</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2" />
<Label check className="form-check-label" htmlFor="radio2">Option 2</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3" />
<Label check className="form-check-label" htmlFor="radio3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Radios</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1" />
<Label className="form-check-label" check htmlFor="inline-radio1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2" />
<Label className="form-check-label" check htmlFor="inline-radio2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3" />
<Label className="form-check-label" check htmlFor="inline-radio3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3"><Label>Checkboxes</Label></Col>
<Col md="9">
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1" />
<Label check className="form-check-label" htmlFor="checkbox1">Option 1</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2" />
<Label check className="form-check-label" htmlFor="checkbox2">Option 2</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3" />
<Label check className="form-check-label" htmlFor="checkbox3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Checkboxes</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1" />
<Label className="form-check-label" check htmlFor="inline-checkbox1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2" />
<Label className="form-check-label" check htmlFor="inline-checkbox2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3" />
<Label className="form-check-label" check htmlFor="inline-checkbox3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-input">File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-input" name="file-input" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-multiple-input">Multiple File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-multiple-input" name="file-multiple-input" multiple />
</Col>
</FormGroup>
<FormGroup row hidden>
<Col md="3">
<Label className="custom-file" htmlFor="custom-file-input">Custom file input</Label>
</Col>
<Col xs="12" md="9">
<Label className="custom-file">
<Input className="custom-file" type="file" id="custom-file-input" name="file-input" />
<span className="custom-file-control"></span>
</Label>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Inline</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" inline>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
<Input type="text" id="exampleInputName2" placeholder="Jane Doe" required />
</FormGroup>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputEmail2" className="pr-1">Email</Label>
<Input type="email" id="exampleInputEmail2" placeholder="[email protected]" required />
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Horizontal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-email">Email</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" />
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-password">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Normal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<Label htmlFor="nf-email">Email</Label>
<Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</FormGroup>
<FormGroup>
<Label htmlFor="nf-password">Password</Label>
<Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Grid</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col sm="3">
<Input type="text" placeholder=".col-sm-3" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="4">
<Input type="text" placeholder=".col-sm-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="5">
<Input type="text" placeholder=".col-sm-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="6">
<Input type="text" placeholder=".col-sm-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="7">
<Input type="text" placeholder=".col-sm-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="8">
<Input type="text" placeholder=".col-sm-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="9">
<Input type="text" placeholder=".col-sm-9" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="10">
<Input type="text" placeholder=".col-sm-10" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="11">
<Input type="text" placeholder=".col-sm-11" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="12">
<Input type="text" placeholder=".col-sm-12" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Sizes</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Label sm="5" size="sm" htmlFor="input-small">Small Input</Label>
<Col sm="6">
<Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" htmlFor="input-normal">Normal Input</Label>
<Col sm="6">
<Input type="text" id="input-normal" name="input-normal" placeholder="Normal" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" size="lg" htmlFor="input-large">Large Input</Label>
<Col sm="6">
<Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="inputIsValid">Input is valid</Label>
<Input type="text" valid id="inputIsValid" />
<FormFeedback valid>Cool! Input is valid</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputIsInvalid">Input is invalid</Label>
<Input type="text" invalid id="inputIsInvalid" />
<FormFeedback>Houston, we have a problem...</FormFeedback>
</FormGroup>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<Form className="was-validated">
<FormGroup>
<Label htmlFor="inputSuccess2i">Non-required input</Label>
<Input type="text" className="form-control-success" id="inputSuccess2i" />
<FormFeedback valid>Non-required</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputWarning2i">Required input</Label>
<Input type="text" className="form-control-warning" id="inputWarning2i" required />
<FormFeedback className="help-block">Please provide a valid information</FormFeedback>
<FormFeedback valid className="help-block">Input provided</FormFeedback>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Icon/Text</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email" />
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-envelope-o"></i>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-euro"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".." />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Button</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
</InputGroupAddon>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary">Submit</Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
</InputGroupAddon>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Dropdowns</strong> Groups
</CardHeader>
<CardBody>
<Form className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown addonType="prepend"
isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown
addonType="prepend"
isOpen={this.state.third}
toggle={() => { this.setState({ third: !this.state.third }); }}>
<DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
Use the grid for big devices!
<small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Input Grid for small devices!
<small><code>.col-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="7">
<Input type="text" placeholder=".col-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="7">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Username</InputGroupText>
</InputGroupAddon>
<Input type="email" id="username3" name="username3" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Email</InputGroupText>
</InputGroupAddon>
<Input type="email" id="email3" name="email3" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Password</InputGroupText>
</InputGroupAddon>
<Input type="password" id="password3" name="password3" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="primary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<Input type="text" id="username2" name="username2" placeholder="Username" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="email" id="email2" name="email2" placeholder="Email" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="password" id="password2" name="password2" placeholder="Password" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="secondary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
<Input type="text" id="username1" name="username1" placeholder="Username" autoComplete="name"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
<Input type="email" id="email1" name="email1" placeholder="Email" autoComplete="username"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
<Input type="password" id="password1" name="password1" placeholder="Password" autoComplete="current-password"/>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="success">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12">
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
<Card>
<CardHeader>
<i className="fa fa-edit"></i>Form Elements
<div className="card-header-actions">
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
<Button color="link" className="card-header-action btn-close" onClick={this.toggleFade}><i className="icon-close"></i></Button>
</div>
</CardHeader>
<Collapse isOpen={this.state.collapse} id="collapseExample">
<CardBody>
<Form className="form-horizontal">
<FormGroup>
<Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input id="prependedInput" size="16" type="text" />
</InputGroup>
<p className="help-block">Here's some help text</p>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div>
</Form>
</CardBody>
</Collapse>
</Card>
</Fade>
</Col>
</Row>
</div>
);
}
Example #28
| Source File: Register.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
const {from} = this.props.location.state || {from: {pathname: '/app'}}; // eslint-disable-line
// cant access login page while logged in
if (Login.isAuthenticated(JSON.parse(localStorage.getItem('authenticated')))) {
return (
<Redirect to={from}/>
);
}
return (
<div className="auth-page">
<Container>
<Widget className="widget-auth mx-auto" title={<h3 className="mt-0">Login to your Web App</h3>}>
<p className="widget-auth-info">
Please fill all fields below.
</p>
<form onSubmit={this.doRegister}>
{
this.props.errorMessage && (
<Alert className="alert-sm widget-middle-overflow rounded-0" color="danger">
{this.props.errorMessage}
</Alert>
)
}
<FormGroup className="mt">
<Label for="email">Email</Label>
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="la la-user text-white"/>
</InputGroupText>
</InputGroupAddon>
<Input id="email" className="input-transparent pl-3" value={this.state.email}
onChange={this.changeEmail} type="email"
required name="email" placeholder="Email"/>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="la la-lock text-white"/>
</InputGroupText>
</InputGroupAddon>
<Input id="password" className="input-transparent pl-3" value={this.state.password}
onChange={this.changePassword} type="password"
required name="password" placeholder="Password"/>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="confirmPassword">Confirm</Label>
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="la la-lock text-white"/>
</InputGroupText>
</InputGroupAddon>
<Input id="confirmPassword" className="input-transparent pl-3" value={this.state.confirmPassword}
onChange={this.changeConfirmPassword} onBlur={this.checkPassword} type="password"
required name="confirmPassword" placeholder="Confirm"/>
</InputGroup>
</FormGroup>
<div className="bg-widget-transparent auth-widget-footer">
<Button type="submit" color="danger" className="auth-btn"
size="sm" style={{color: '#fff'}}>{this.props.isFetching ? 'Loading...' : 'Register'}</Button>
<p className="widget-auth-info mt-4">
Already have the account? Login now!
</p>
<Link className="d-block text-center mb-4" to="login">Enter the account</Link>
<div className="social-buttons">
<Button color="primary" className="social-button">
<i className="social-icon social-google"/>
<p className="social-text">GOOGLE</p>
</Button>
<Button color="success" className="social-button">
<i className="social-icon social-microsoft"
style={{backgroundImage: `url(${microsoft})`}}/>
<p className="social-text" style={{color: '#fff'}}>MICROSOFT</p>
</Button>
</div>
</div>
</form>
</Widget>
{/*<Widget className="widget-auth mx-auto" title={<h3 className="mt-0">Create an account</h3>}>*/}
{/*<p className="widget-auth-info">*/}
{/*Please fill all fields below*/}
{/*</p>*/}
{/*<form className="mt" onSubmit={this.doRegister}>*/}
{/*{*/}
{/*this.props.errorMessage && (*/}
{/*<Alert className="alert-sm" color="danger">*/}
{/*{this.props.errorMessage}*/}
{/*</Alert>*/}
{/*)*/}
{/*}*/}
{/*<div className="form-group">*/}
{/*<input className="form-control no-border" value={this.state.email}*/}
{/*onChange={this.changeEmail} type="text" required name="email"*/}
{/*placeholder="Email"/>*/}
{/*</div>*/}
{/*<div className="form-group">*/}
{/*<input className="form-control no-border" value={this.state.password}*/}
{/*onChange={this.changePassword} type="password" required name="password"*/}
{/*placeholder="Password"/>*/}
{/*</div>*/}
{/*<div className="form-group">*/}
{/*<input className="form-control no-border" value={this.state.confirmPassword}*/}
{/*onChange={this.changeConfirmPassword} onBlur={this.checkPassword} type="password" required name="confirmPassword"*/}
{/*placeholder="Confirm"/>*/}
{/*</div>*/}
{/*<Button type="submit" color="inverse" className="auth-btn mb-3" size="sm">{this.props.isFetching ? 'Loading...' : 'Register'}</Button>*/}
{/*<p className="widget-auth-info">or sign up with</p>*/}
{/*<div className="social-buttons">*/}
{/*<Button onClick={this.googleLogin} color="primary" className="social-button mb-2">*/}
{/*<i className="social-icon social-google"/>*/}
{/*<p className="social-text">GOOGLE</p>*/}
{/*</Button>*/}
{/*<Button onClick={this.microsoftLogin} color="success" className="social-button">*/}
{/*<i className="social-icon social-microsoft"*/}
{/*style={{backgroundImage: `url(${microsoft})`}}/>*/}
{/*<p className="social-text">MICROSOFT</p>*/}
{/*</Button>*/}
{/*</div>*/}
{/*</form>*/}
{/*<p className="widget-auth-info">*/}
{/*Already have the account? Login now!*/}
{/*</p>*/}
{/*<Link className="d-block text-center" to="login">Enter the account</Link>*/}
{/*</Widget>*/}
</Container>
<footer className="auth-footer">
{new Date().getFullYear()} © Light Blue Template - React Admin Dashboard Template Made by <a href="https://flatlogic.com" rel="noopener noreferrer" target="_blank">Flatlogic LLC</a>.
</footer>
</div>
);
}
Example #29
| Source File: Login.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
const { from } = this.props.location.state || { from: { pathname: '/app' } }; // eslint-disable-line
// cant access login page while logged in
if (Login.isAuthenticated(JSON.parse(localStorage.getItem('authenticated')))) {
return (
<Redirect to={from} />
);
}
return (
<div className="auth-page">
<Container>
<Widget className="widget-auth mx-auto" title={<h3 className="mt-0">Login to your Web App</h3>}>
<p className="widget-auth-info">
Use your email to sign in.
</p>
<form onSubmit={this.doLogin}>
{
this.props.errorMessage && (
<Alert className="alert-sm widget-middle-overflow rounded-0" color="danger">
{this.props.errorMessage}
</Alert>
)
}
<FormGroup className="mt">
<Label for="email">Email</Label>
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="la la-user text-white"/>
</InputGroupText>
</InputGroupAddon>
<Input id="email" className="input-transparent pl-3" value={this.state.email} onChange={this.changeEmail} type="email"
required name="email" placeholder="Email"/>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="la la-lock text-white"/>
</InputGroupText>
</InputGroupAddon>
<Input id="password" className="input-transparent pl-3" value={this.state.password}
onChange={this.changePassword} type="password"
required name="password" placeholder="Password"/>
</InputGroup>
</FormGroup>
<div className="bg-widget auth-widget-footer">
<Button type="submit" color="danger" className="auth-btn"
size="sm" style={{color: '#fff'}}>
<span className="auth-btn-circle" style={{marginRight: 8}}>
<i className="la la-caret-right"/>
</span>
{this.props.isFetching ? 'Loading...' : 'Login'}
</Button>
<p className="widget-auth-info mt-4">
Don't have an account? Sign up now!
</p>
<Link className="d-block text-center mb-4" to="register">Create an Account</Link>
<div className="social-buttons">
<Button color="primary" className="social-button">
<i className="social-icon social-google"/>
<p className="social-text">GOOGLE</p>
</Button>
<Button color="success" className="social-button">
<i className="social-icon social-microsoft"
style={{backgroundImage: `url(${microsoft})`}}/>
<p className="social-text" style={{color: '#fff'}}>MICROSOFT</p>
</Button>
</div>
</div>
</form>
</Widget>
</Container>
<footer className="auth-footer">
{new Date().getFullYear()} © Light Blue Template - React Admin Dashboard Template Made by <a href="https://flatlogic.com" rel="noopener noreferrer" target="_blank">Flatlogic LLC</a>.
</footer>
</div>
);
}
