Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/routes/Pages/ComingSoon/ComingSoon.js Executable file
View File

@@ -0,0 +1,91 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Form,
FormGroup,
FormText,
Input,
InputGroupAddon,
InputGroup,
Button,
Label,
EmptyLayout,
ThemeConsumer
} from './../../../components';
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
const ComingSoon = () => (
<EmptyLayout>
<EmptyLayout.Section center>
{ /* START Header */}
<HeaderAuth
title="Coming Soon"
icon="clock-o"
text="Our website is under construction. Still, the app is not ready, but we're working hard on it and will be available for around:"
/>
{ /* END Header */}
<ul className="list-inline my-5 text-center">
<li className="list-inline-item text-center mr-2">
<h2 className="mb-0">16</h2>
<div>Days</div>
</li>
<li className="list-inline-item text-center mr-2">
<h2 className="mb-0">34</h2>
<div>Hours</div>
</li>
<li className="list-inline-item text-center mr-2">
<h2 className="mb-0">10</h2>
<div>Min</div>
</li>
<li className="list-inline-item text-center">
<h2 className="mb-0">3</h2>
<div>Sec</div>
</li>
</ul>
{ /* START Form */}
<Form className="mb-3">
<FormGroup>
<Label for="email">
Enter email
</Label>
<InputGroup>
<Input type="email" name="email" id="email" placeholder="Enter here..." />
<InputGroupAddon addonType="append">
<ThemeConsumer>
{
({ color }) => (
<Button color={ color } tag={ Link } to="/">
Subscribe
</Button>
)
}
</ThemeConsumer>
</InputGroupAddon>
</InputGroup>
<FormText className="muted">
If you want to be informed about the start, please subscribe to the newsletter
</FormText>
</FormGroup>
</Form>
{ /* END Form */}
{ /* START Bottom Links */}
<div className="d-flex mb-5">
<Link to="/" className="text-decoration-none">
<i className="fa fa-angle-left mr-2" /> Back to Home
</Link>
<Link to="/" className="ml-auto text-decoration-none">
Contact
</Link>
</div>
{ /* END Bottom Links */}
{ /* START Footer */}
<FooterAuth />
{ /* END Footer */}
</EmptyLayout.Section>
</EmptyLayout>
);
export default ComingSoon;

3
app/routes/Pages/ComingSoon/index.js Executable file
View File

@@ -0,0 +1,3 @@
import ComingSoon from './ComingSoon';
export default ComingSoon;

42
app/routes/Pages/Confirmation/Confirmation.js Executable file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
EmptyLayout
} from './../../../components';
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
const Confirmation = () => (
<EmptyLayout>
<EmptyLayout.Section center>
{ /* START Header */}
<HeaderAuth
title="Confirm Your Email Address"
icon="envelope"
text={(
<React.Fragment>
The confirmation mail was sent to
<i>email@example.com</i> Check your mailbox
and hit the <strong>Confirm My Email</strong>
link to confirm your email address.
</React.Fragment>
)}
/>
{ /* END Header */}
{ /* START Bottom Links */}
<div className="text-center mb-5">
<Link to="/" className="text-decoration-none">
<i className="fa fa-angle-left mr-2"></i>Back to Home
</Link>
</div>
{ /* END Bottom Links */}
{ /* START Footer */}
<FooterAuth />
{ /* END Footer */}
</EmptyLayout.Section>
</EmptyLayout>
);
export default Confirmation;

3
app/routes/Pages/Confirmation/index.js Executable file
View File

@@ -0,0 +1,3 @@
import Confirmation from './Confirmation';
export default Confirmation;

32
app/routes/Pages/Danger/Danger.js Executable file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { EmptyLayout } from './../../../components';
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
const Danger = () => (
<EmptyLayout>
<EmptyLayout.Section center>
{ /* START Header */}
<HeaderAuth
title="An Error has Occurred"
icon="close"
iconClassName="text-danger"
/>
{ /* END Header */}
{ /* START Bottom Links */}
<div className="text-center mb-5">
<Link to="/" className="text-decoration-none">
<i className="fa fa-angle-left mr-2"></i>Correct Errors
</Link>
</div>
{ /* END Bottom Links */}
{ /* START Footer */}
<FooterAuth />
{ /* END Footer */}
</EmptyLayout.Section>
</EmptyLayout>
);
export default Danger;

3
app/routes/Pages/Danger/index.js Executable file
View File

@@ -0,0 +1,3 @@
import Danger from './Danger';
export default Danger;

67
app/routes/Pages/Error404/Error404.js Executable file
View File

@@ -0,0 +1,67 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Form,
FormGroup,
Input,
InputGroupAddon,
InputGroup,
Button,
Label,
EmptyLayout,
ThemeConsumer
} from './../../../components';
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
const Error404 = () => (
<EmptyLayout>
<EmptyLayout.Section center>
{ /* START Header */}
<HeaderAuth
title="Error 404"
/>
{ /* END Header */}
{ /* START Form */}
<Form className="mb-3">
<FormGroup>
<Label for="search">
Search
</Label>
<InputGroup>
<Input type="text" name="text" id="search" placeholder="Enter search phrase here..." className="bg-white" />
<InputGroupAddon addonType="append">
<ThemeConsumer>
{
({ color }) => (
<Button color={ color } tag={ Link } to="/">
<i className="fa fa-search"></i>
</Button>
)
}
</ThemeConsumer>
</InputGroupAddon>
</InputGroup>
</FormGroup>
</Form>
{ /* END Form */}
{ /* START Bottom Links */}
<div className="d-flex mb-5">
<Link to="/pages/login">
Back to Home
</Link>
<Link to="/" className="ml-auto text-decoration-none">
Support
</Link>
</div>
{ /* END Bottom Links */}
{ /* START Footer */}
<FooterAuth />
{ /* END Footer */}
</EmptyLayout.Section>
</EmptyLayout>
);
export default Error404;

3
app/routes/Pages/Error404/index.js Executable file
View File

@@ -0,0 +1,3 @@
import Error404 from './Error404';
export default Error404;

70
app/routes/Pages/ForgotPassword/ForgotPassword.js Executable file
View File

@@ -0,0 +1,70 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Form,
FormGroup,
FormText,
Input,
Button,
Label,
EmptyLayout,
ThemeConsumer
} from './../../../components';
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
const ForgotPassword = () => (
<EmptyLayout>
<EmptyLayout.Section center>
{ /* START Header */}
<HeaderAuth
title="Forgot Password"
/>
{ /* END Header */}
{ /* START Form */}
<Form className="mb-3">
<FormGroup>
<Label for="emailAdress">
Email Adress or Username
</Label>
<Input type="email" name="email" id="emailAdress" placeholder="Enter..." className="bg-white" />
<FormText color="muted">
We&amp;ll never share your email with anyone else.
</FormText>
</FormGroup>
<div className="d-flex">
<ThemeConsumer>
{
({ color }) => (
<Button color={ color } tag={ Link } to="/" className="align-self-center">
Reset Password
</Button>
)
}
</ThemeConsumer>
<Button color="link" tag={ Link } to="/" className="align-self-center ml-auto pr-0 text-decoration-none">
<i className="fa fa-angle-left mr-2"></i> Back to Home
</Button>
</div>
</Form>
{ /* END Form */}
{ /* START Bottom Links */}
<div className="d-flex mb-5">
<Link to="/pages/login" className="text-decoration-none">
Login
</Link>
<Link to="/pages/register" className="ml-auto text-decoration-none">
Register
</Link>
</div>
{ /* END Bottom Links */}
{ /* START Footer */}
<FooterAuth />
{ /* END Footer */}
</EmptyLayout.Section>
</EmptyLayout>
);
export default ForgotPassword;

3
app/routes/Pages/ForgotPassword/index.js Executable file
View File

@@ -0,0 +1,3 @@
import ForgotPassword from './ForgotPassword';
export default ForgotPassword;

61
app/routes/Pages/LockScreen/LockScreen.js Executable file
View File

@@ -0,0 +1,61 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Form,
FormGroup,
Input,
Button,
Label,
EmptyLayout,
ThemeConsumer
} from './../../../components';
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
const LockScreen = () => (
<EmptyLayout>
<EmptyLayout.Section center>
{ /* START Header */}
<HeaderAuth
title="Your Session is Blocked"
/>
{ /* END Header */}
{ /* START Form */}
<Form className="mb-3">
<FormGroup>
<Label for="password">
Password
</Label>
<Input type="password" name="password" id="password" placeholder="Enter the password to continue..." className="bg-white" />
</FormGroup>
<ThemeConsumer>
{
({ color }) => (
<Button color={ color } block tag={ Link } to="/">
Unlock
</Button>
)
}
</ThemeConsumer>
</Form>
{ /* END Form */}
{ /* START Bottom Links */}
<div className="d-flex mb-5">
<Link to="/pages/login" className="text-decoration-none">
Sign as Diffrent User
</Link>
<Link to="/" className="ml-auto text-decoration-none">
<i className="fa fa-angle-left mr-2"></i> Back to Home
</Link>
</div>
{ /* END Bottom Links */}
{ /* START Footer */}
<FooterAuth />
{ /* END Footer */}
</EmptyLayout.Section>
</EmptyLayout>
);
export default LockScreen;

3
app/routes/Pages/LockScreen/index.js Executable file
View File

@@ -0,0 +1,3 @@
import LockScreen from './LockScreen';
export default LockScreen;

75
app/routes/Pages/Login/Login.js Executable file
View File

@@ -0,0 +1,75 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Form,
FormGroup,
FormText,
Input,
CustomInput,
Button,
Label,
EmptyLayout,
ThemeConsumer
} from './../../../components';
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
const Login = () => (
<EmptyLayout>
<EmptyLayout.Section center>
{ /* START Header */}
<HeaderAuth
title="Sign In to Application"
/>
{ /* END Header */}
{ /* START Form */}
<Form className="mb-3">
<FormGroup>
<Label for="emailAdress">
Email Adress
</Label>
<Input type="email" name="email" id="emailAdress" placeholder="Enter email..." className="bg-white" />
<FormText color="muted">
We&amp;ll never share your email with anyone else.
</FormText>
</FormGroup>
<FormGroup>
<Label for="password">
Password
</Label>
<Input type="password" name="password" id="password" placeholder="Password..." className="bg-white" />
</FormGroup>
<FormGroup>
<CustomInput type="checkbox" id="rememberPassword" label="Remember Password" inline />
</FormGroup>
<ThemeConsumer>
{
({ color }) => (
<Button color={ color } block tag={ Link } to="/">
Sign In
</Button>
)
}
</ThemeConsumer>
</Form>
{ /* END Form */}
{ /* START Bottom Links */}
<div className="d-flex mb-5">
<Link to="/pages/forgotpassword" className="text-decoration-none">
Forgot Password
</Link>
<Link to="/pages/register" className="ml-auto text-decoration-none">
Register
</Link>
</div>
{ /* END Bottom Links */}
{ /* START Footer */}
<FooterAuth />
{ /* END Footer */}
</EmptyLayout.Section>
</EmptyLayout>
);
export default Login;

3
app/routes/Pages/Login/index.js Executable file
View File

@@ -0,0 +1,3 @@
import Login from './Login';
export default Login;

87
app/routes/Pages/Register/Register.js Executable file
View File

@@ -0,0 +1,87 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Form,
FormGroup,
FormText,
Input,
CustomInput,
Button,
Label,
EmptyLayout,
ThemeConsumer
} from './../../../components';
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
const Register = () => (
<EmptyLayout>
<EmptyLayout.Section center width={ 480 }>
{ /* START Header */}
<HeaderAuth
title="Create Account"
/>
{ /* END Header */}
{ /* START Form */}
<Form className="mb-3">
<FormGroup>
<Label for="username">
Username
</Label>
<Input type="text" name="text" id="username" placeholder="Enter a Username..." className="bg-white" />
</FormGroup>
<FormGroup>
<Label for="password">
Password
</Label>
<Input type="password" name="password" id="password" placeholder="Password..." className="bg-white" />
</FormGroup>
<FormGroup>
<Label for="repeatPassword">
Repeat Password
</Label>
<Input type="password" name="password" id="repeatPassword" placeholder="Password..." className="bg-white" />
</FormGroup>
<FormGroup>
<Label for="emailAdress">
Email Adress
</Label>
<Input type="email" name="email" id="emailAdress" placeholder="Enter email..." className="bg-white" />
<FormText color="muted">
We&amp;ll never share your email with anyone else.
</FormText>
</FormGroup>
<FormGroup>
<CustomInput type="checkbox" id="acceptTerms" label="Accept Terms and Privacy Policy" inline />
</FormGroup>
<ThemeConsumer>
{
({ color }) => (
<Button color={ color } block tag={ Link } to="/">
Create Account
</Button>
)
}
</ThemeConsumer>
</Form>
{ /* END Form */}
{ /* START Bottom Links */}
<div className="d-flex mb-5">
<Link to="/pages/forgot-password" className="text-decoration-none">
Forgot Password
</Link>
<Link to="/pages/login" className="ml-auto text-decoration-none">
Login
</Link>
</div>
{ /* END Bottom Links */}
{ /* START Footer */}
<FooterAuth />
{ /* END Footer */}
</EmptyLayout.Section>
</EmptyLayout>
);
export default Register;

3
app/routes/Pages/Register/index.js Executable file
View File

@@ -0,0 +1,3 @@
import Register from './Register';
export default Register;

40
app/routes/Pages/Success/Success.js Executable file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
EmptyLayout
} from './../../../components';
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
const Success = () => (
<EmptyLayout>
<EmptyLayout.Section center>
{ /* START Header */}
<HeaderAuth
title="Successful Activated"
icon="check"
iconClassName="text-success"
text={(
<React.Fragment>
To activate your account, please click the link in the activation email which has been sent to you. If you do not see the activation email in your inbox, you may need to check your spam/junk email folders.
</React.Fragment>
)}
/>
{ /* END Header */}
{ /* START Bottom Links */}
<div className="text-center mb-5">
<Link to="/" className="text-decoration-none">
<i className="fa fa-angle-left mr-2"></i>Back to Home
</Link>
</div>
{ /* END Bottom Links */}
{ /* START Footer */}
<FooterAuth />
{ /* END Footer */}
</EmptyLayout.Section>
</EmptyLayout>
);
export default Success;

3
app/routes/Pages/Success/index.js Executable file
View File

@@ -0,0 +1,3 @@
import Success from './Success';
export default Success;

130
app/routes/Pages/Timeline/Timeline.js Executable file
View File

@@ -0,0 +1,130 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Card,
CardBody,
CardTitle,
Container,
ListGroup,
ListGroupItem,
Row,
Col,
CustomInput,
Button,
Label
} from './../../../components';
import { HeaderMain } from "../../components/HeaderMain";
import { HeaderAuth } from "../../components/Pages/HeaderAuth";
import { FooterAuth } from "../../components/Pages/FooterAuth";
import {
TimelineMini
} from "../../components/Timeline/TimelineMini";
import {
TimelineDefault
} from "../../components/Timeline/TimelineDefault";
const Timeline = () => (
<React.Fragment>
<Container>
<HeaderMain
title="Timeline"
className="mb-5 mt-4"
/>
<Row>
<Col lg={ 8 }>
<TimelineDefault
showPillDate
pillDate="Today"
smallIconColor="danger"
iconCircleColor="danger"
iconCircle="exclamation"
/>
<TimelineDefault
showPillDate
pillDate="Yesterday"
smallIconColor="info"
iconCircleColor="info"
iconCircle="comment"
/>
<TimelineDefault
showPillDate
pillDate="2 Days ago"
smallIconColor="primary"
iconCircleColor="primary"
iconCircle="envelope"
/>
<TimelineDefault
showPillDate
pillDate="3 Months ago"
smallIconColor="warning"
iconCircleColor="warning"
iconCircle="clock-o"
/>
<TimelineDefault
showPillDate
pillDate="Year ago"
smallIconColor="success"
iconCircleColor="success"
iconCircle="check"
/>
<TimelineDefault
iconCircle="close"
/>
</Col>
<Col lg={ 4 }>
{ /* START Card Widget */}
<Card className="mb-3">
<CardBody>
<CardTitle tag="h6">
Timeline Mini
</CardTitle>
<TimelineMini
showPillDate
pillDate="2 Days ago"
icon="times-circle"
iconClassName="text-danger"
badgeTitle="Alert"
badgeColor="danger"
/>
<TimelineMini
icon="question-circle"
iconClassName="text-warning"
badgeTitle="Warning"
badgeColor="warning"
/>
<TimelineMini
icon="info-circle"
iconClassName="text-info"
badgeTitle="Info"
badgeColor="info"
/>
<TimelineMini
showPillDate
pillDate="Yesterday"
icon="plus-circle"
iconClassName="text-primary"
badgeTitle="Message"
badgeColor="primary"
/>
<TimelineMini
icon="check-circle"
iconClassName="text-success"
badgeTitle="Success"
badgeColor="success"
/>
<TimelineMini
icon="circle"
badgeTitle="Obsolete"
/>
</CardBody>
</Card>
{ /* END Card Widget */}
</Col>
</Row>
</Container>
</React.Fragment>
);
export default Timeline;

3
app/routes/Pages/Timeline/index.js Executable file
View File

@@ -0,0 +1,3 @@
import Timeline from './Timeline';
export default Timeline;