moving to docker
This commit is contained in:
80
react/app/src/components/Header.jsx
Normal file
80
react/app/src/components/Header.jsx
Normal file
@ -0,0 +1,80 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
MDBContainer,
|
||||
MDBNavbar,
|
||||
MDBNavbarBrand,
|
||||
MDBNavbarToggler,
|
||||
MDBIcon,
|
||||
MDBNavbarNav,
|
||||
MDBNavbarItem,
|
||||
MDBNavbarLink,
|
||||
MDBBtn,
|
||||
MDBDropdown,
|
||||
MDBDropdownToggle,
|
||||
MDBDropdownMenu,
|
||||
MDBDropdownItem,
|
||||
MDBCollapse,
|
||||
} from 'mdb-react-ui-kit';
|
||||
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
|
||||
import "@fortawesome/fontawesome-free/css/all.min.css";
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export default function App() {
|
||||
const [showBasic, setShowBasic] = useState(false);
|
||||
|
||||
return (
|
||||
<MDBNavbar expand='lg' light bgColor='light'>
|
||||
<MDBContainer fluid>
|
||||
<Link to="/">
|
||||
<MDBNavbarBrand>CodeBox</MDBNavbarBrand>
|
||||
</Link>
|
||||
|
||||
<MDBNavbarToggler
|
||||
aria-controls='navbarSupportedContent'
|
||||
aria-expanded='false'
|
||||
aria-label='Toggle navigation'
|
||||
onClick={() => setShowBasic(!showBasic)}
|
||||
>
|
||||
<MDBIcon icon='bars' fas />
|
||||
</MDBNavbarToggler>
|
||||
|
||||
<MDBCollapse navbar show={showBasic}>
|
||||
<MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
|
||||
<MDBNavbarItem>
|
||||
<MDBNavbarLink active aria-current='page' href='#'>
|
||||
Home
|
||||
</MDBNavbarLink>
|
||||
</MDBNavbarItem>
|
||||
<MDBNavbarItem>
|
||||
<MDBNavbarLink href='#'>Link</MDBNavbarLink>
|
||||
</MDBNavbarItem>
|
||||
|
||||
<MDBNavbarItem>
|
||||
<MDBDropdown>
|
||||
<MDBDropdownToggle tag='a' className='nav-link' role='button'>
|
||||
Snippets
|
||||
</MDBDropdownToggle>
|
||||
<MDBDropdownMenu>
|
||||
<MDBDropdownItem link>Public snippets</MDBDropdownItem>
|
||||
<MDBDropdownItem link>My snippets</MDBDropdownItem>
|
||||
<MDBDropdownItem link>Something else here</MDBDropdownItem>
|
||||
</MDBDropdownMenu>
|
||||
</MDBDropdown>
|
||||
</MDBNavbarItem>
|
||||
|
||||
<MDBNavbarItem>
|
||||
<MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true' background='#3b71ca'>
|
||||
New snippet
|
||||
</MDBNavbarLink>
|
||||
</MDBNavbarItem>
|
||||
<MDBNavbarItem>
|
||||
<MDBNavbarLink href='#' tabIndex={-2} aria-disabled='true' color='#3b71ca'>
|
||||
admin
|
||||
</MDBNavbarLink>
|
||||
</MDBNavbarItem>
|
||||
</MDBNavbarNav>
|
||||
</MDBCollapse>
|
||||
</MDBContainer>
|
||||
</MDBNavbar>
|
||||
);
|
||||
}
|
||||
93
react/app/src/components/LoginForm.jsx
Normal file
93
react/app/src/components/LoginForm.jsx
Normal file
@ -0,0 +1,93 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
MDBContainer,
|
||||
MDBTabs,
|
||||
MDBTabsItem,
|
||||
MDBTabsLink,
|
||||
MDBTabsContent,
|
||||
MDBTabsPane,
|
||||
MDBBtn,
|
||||
MDBIcon,
|
||||
MDBInput,
|
||||
MDBCheckbox
|
||||
}
|
||||
from 'mdb-react-ui-kit';
|
||||
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
|
||||
import "@fortawesome/fontawesome-free/css/all.min.css";
|
||||
import { useContext } from "react";
|
||||
import AuthContext from "../context/AuthContext";
|
||||
|
||||
const LoginForm = () => {
|
||||
|
||||
const [justifyActive, setJustifyActive] = useState('tab1');
|
||||
|
||||
const handleJustifyClick = (value) => {
|
||||
if (value === justifyActive) {
|
||||
return;
|
||||
}
|
||||
|
||||
setJustifyActive(value);
|
||||
};
|
||||
|
||||
const [username, setUsername] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
|
||||
const { loginUser } = useContext(AuthContext);
|
||||
const handleLoginSubmit = () => {
|
||||
username.length > 0 && loginUser(username, password);
|
||||
};
|
||||
|
||||
return (
|
||||
<MDBContainer className="p-3 my-5 d-flex flex-column w-50">
|
||||
|
||||
<MDBTabs pills justify className='mb-3 d-flex flex-row justify-content-between'>
|
||||
<MDBTabsItem>
|
||||
<MDBTabsLink onClick={() => handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>
|
||||
Login
|
||||
</MDBTabsLink>
|
||||
</MDBTabsItem>
|
||||
<MDBTabsItem>
|
||||
<MDBTabsLink onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>
|
||||
Register
|
||||
</MDBTabsLink>
|
||||
</MDBTabsItem>
|
||||
</MDBTabs>
|
||||
|
||||
<MDBTabsContent>
|
||||
|
||||
<MDBTabsPane show={justifyActive === 'tab1'}>
|
||||
|
||||
<MDBInput wrapperClass='mb-4' label='Username' id='form1' type='username' value={username} onInput={e => setUsername(e.target.value)}/>
|
||||
<MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'value={password} onInput={e => setPassword(e.target.value)}/>
|
||||
|
||||
<div className="d-flex justify-content-between mx-4 mb-4">
|
||||
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
|
||||
</div>
|
||||
|
||||
<MDBBtn
|
||||
className="mb-4 w-100"
|
||||
onClick={handleLoginSubmit}
|
||||
>
|
||||
Sign in
|
||||
</MDBBtn>
|
||||
<p className="text-center">Not a member? <a href="#!" onClick={() => handleJustifyClick('tab2')} active={justifyActive === 'tab2'}>Register</a></p>
|
||||
|
||||
</MDBTabsPane>
|
||||
|
||||
<MDBTabsPane show={justifyActive === 'tab2'}>
|
||||
|
||||
<MDBInput wrapperClass='mb-4' label='Username' id='form1' type='text'/>
|
||||
<MDBInput wrapperClass='mb-4' label='Password' id='form1' type='password'/>
|
||||
|
||||
<MDBBtn className="mb-4 w-100">Sign up</MDBBtn>
|
||||
<p className="text-center">Already have an account? <a href="#!" onClick={() => handleJustifyClick('tab1')} active={justifyActive === 'tab1'}>Login</a></p>
|
||||
|
||||
</MDBTabsPane>
|
||||
|
||||
</MDBTabsContent>
|
||||
|
||||
</MDBContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginForm;
|
||||
33
react/app/src/components/MainCard.jsx
Normal file
33
react/app/src/components/MainCard.jsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
MDBCard,
|
||||
MDBCardBody,
|
||||
MDBCardTitle,
|
||||
MDBCardText,
|
||||
MDBCardImage,
|
||||
MDBBtn,
|
||||
MDBRipple
|
||||
} from 'mdb-react-ui-kit';
|
||||
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
|
||||
import "@fortawesome/fontawesome-free/css/all.min.css";
|
||||
import {Link} from 'react-router-dom';
|
||||
|
||||
const MainCard = () => {
|
||||
return (
|
||||
<MDBCard>
|
||||
<MDBCardBody>
|
||||
<MDBCardTitle>Welcome to CodeBox!</MDBCardTitle>
|
||||
<MDBCardText>
|
||||
CodeBox is a snippet service to let you securely store your code snippets and share them with your friends, colleagues and others! Register and start sharing your code for free!
|
||||
</MDBCardText>
|
||||
|
||||
<Link to='/auth'>Register</Link>
|
||||
|
||||
</MDBCardBody>
|
||||
</MDBCard>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default MainCard;
|
||||
25
react/app/src/components/Snippet.jsx
Normal file
25
react/app/src/components/Snippet.jsx
Normal file
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
MDBCard,
|
||||
MDBCardBody,
|
||||
MDBCardTitle,
|
||||
MDBCardText,
|
||||
} from 'mdb-react-ui-kit';
|
||||
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
|
||||
import "@fortawesome/fontawesome-free/css/all.min.css";
|
||||
|
||||
const Snippet = ({title, text}) => {
|
||||
return (
|
||||
<MDBCard>
|
||||
<MDBCardBody>
|
||||
<MDBCardTitle>{title}</MDBCardTitle>
|
||||
<MDBCardText style={{textAlign: "left"}}>
|
||||
{text}
|
||||
</MDBCardText>
|
||||
</MDBCardBody>
|
||||
</MDBCard>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default Snippet;
|
||||
Reference in New Issue
Block a user