spencerpincott/sol-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Kyle Gill
2019-05-17 21:39:37 -06:00
parent 63e16ee468
commit 4d90f29770
18 changed files with 140 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Layout/Layout.js
View File

@@ -1,13 +1,19 @@
import React from "react"
import { Helmet } from "react-helmet"
import { Global, css } from "@emotion/core"
import styled from "@emotion/styled"
import { SimpleNavbar } from "../Navbar"
export default ({ children }) => (
<>
<Helmet title="Sol Journal" />
<Global
styles={css`
* {
transition: 0.2s all ease-in-out;
transition: 0.2s border-color ease-in-out, 0.2s fill ease-in-out,
0.2s box-shadow ease-in-out, 0.2s background-color ease-in-out,
0.2s color ease-in-out;
}
h1 {
font-family: "Montserrat", -apple-system, BlinkMacSystemFont,

53
src/components/Navbar/Navbar.js
View File

@@ -1,6 +1,6 @@
import React from "react"
import { navigate } from "gatsby"
import { StyledLink as Link } from "../elements"
import { navigate, Link } from "gatsby"
import { StyledLink } from "../../components/elements"
import styled from "@emotion/styled"
/** @jsx jsx */
import { jsx } from "@emotion/core"
@@ -73,18 +73,18 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
<NavIcons>
{authUser ? (
<React.Fragment>
<Link to={todayUrl()}>
<StyledLink to={todayUrl()}>
<Icon name="Edit2" />
</Link>
<Link to={yearUrl()}>
</StyledLink>
<StyledLink to={yearUrl()}>
<Icon name="Calendar" />
</Link>
<Link to={"/search"}>
</StyledLink>
<StyledLink to={"/search"}>
<Icon name="Search" />
</Link>
<Link to={"/user"}>
</StyledLink>
<StyledLink to={"/user"}>
<Icon name="User" />
</Link>
</StyledLink>
<Icon
tabindex={0}
onClick={() => toggleTheme()}
@@ -93,19 +93,38 @@ const Navbar = ({ authUser, theme, toggleTheme }) => (
/>
</React.Fragment>
) : (
<React.Fragment>
{/* <Link to={"/"}>Landing</Link> */}
<Link to={"/login"}>
<Icon name="LogIn" label="Login" />
</Link>
{/* <Link to={"/register"}>Register</Link> */}
</React.Fragment>
<Link to={"/login"} style={{ textDecoration: "none" }}>
<Icon name="ArrowRight" label="Login" size={20} />
</Link>
)}
</NavIcons>
</Nav>
</Header>
)
const SimpleNav = ({ theme, toggleTheme }) => (
<Header>
<Nav>
<LogoSection onClick={() => navigate("/")}>
<Logo color={theme.colors.logo} />
<LogoText color={theme.colors.primary}>SOL</LogoText>{" "}
<LogoText color={theme.colors.secondary}>JOURNAL</LogoText>
</LogoSection>
<NavIcons>
{/* <Tooltip title="Login"> */}
<Link to={"/login"} style={{ textDecoration: "none" }}>
<Icon name="ArrowRight" label="Login" size={20} />
</Link>
{/* </Tooltip> */}
</NavIcons>
</Nav>
</Header>
)
const SimpleNavbar = withTheme(SimpleNav)
export { SimpleNavbar }
export default compose(
withAuthentication,
withTheme

3
src/components/Navbar/index.js
View File

@@ -1,2 +1,3 @@
import Navbar from "./Navbar"
import Navbar, { SimpleNavbar } from "./Navbar"
export default Navbar
export { SimpleNavbar }

2
src/components/PrivateRoute/PrivateRoute.js
View File

@@ -8,7 +8,7 @@ const PrivateRoute = ({ component: Component, authed, ...rest }) => {
authed === true ? (
<Component {...rest} />
) : (
<Redirect to="/app/login" from={location.pathname} />
<Redirect to="/login" from={location.pathname} />
)
}
</Location>

2
src/components/firebase/fire.js
View File

@@ -43,7 +43,7 @@ class Firebase {
doSignOut = () => {
this.auth.signOut()
window.location.replace("/app/login")
window.location.replace("/login")
}
doPasswordReset = email => this.auth.sendPasswordResetEmail(email)

7
src/components/screens/Day/Day.js
View File

@@ -17,6 +17,12 @@ import { SIZES } from "../../../styles/constants"
import Seek from "../../Seek"
import Icon from "../../Icon"
const Main = styled.main`
height: 100%;
display: flex;
flex-direction: column;
flex-grow: 1;
`
const EntryHeading = styled.div`
display: flex;
flex-direction: row;
@@ -58,6 +64,7 @@ const JournalEntryArea = styled.textarea`
background-color: transparent;
line-height: 1.5;
letter-spacing: 0.5px;
height: calc(100vh - 275px);
width: 100%;
border: none;
resize: none;

102
src/components/screens/Login/Login.js
View File

@@ -1,102 +0,0 @@
import React, { Component } from "react"
import { navigate } from "gatsby"
import styled from "@emotion/styled"
import { compose } from "recompose"
import { format } from "date-fns"
import { withTheme } from "emotion-theming"
import { Input, Button, P } from "../../elements"
import { SIZES } from "../../../styles/constants"
import { StyledLink as Link } from "../../elements"
import { FirebaseContext } from "../../firebase"
const LoginGrid = styled.div`
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
`
const LoginLayout = styled.div`
max-width: ${SIZES.smallWidth};
width: 100%;
align-self: center;
margin-top: 20px;
`
const LoginPage = ({ theme }) => (
<LoginLayout>
<FirebaseContext.Consumer>
{firebase => <LoginForm firebase={firebase} />}
</FirebaseContext.Consumer>
<P colors={theme.colors} style={{ fontStyle: "italic" }}>
Don't have an account? <Link to={"/register"}>Sign Up</Link>
</P>
</LoginLayout>
)
class LoginFormBase extends Component {
constructor(props) {
super(props)
this.state = { email: "", password: "", error: null }
}
onSubmit = event => {
event.preventDefault()
const { email, password } = this.state
this.props.firebase
.doSignInWithEmailAndPassword(email, password)
.then(() => {
this.setState({ email: "", password: "", error: null })
navigate(`app/${format(new Date(), "/")}`)
})
.catch(error => {
this.setState({ error })
})
}
onChange = event => {
this.setState({ [event.target.name]: event.target.value })
}
render() {
const { email, password, error } = this.state
const { theme } = this.props
const isInvalid = password === "" || email === ""
return (
<form onSubmit={this.onSubmit}>
<LoginGrid>
<Input
name="email"
value={email}
onChange={this.onChange}
type="text"
placeholder="Email Address"
colors={theme.colors}
/>
<Input
name="password"
value={password}
onChange={this.onChange}
type="password"
placeholder="Password"
colors={theme.colors}
/>
<Button colors={theme.colors} disabled={isInvalid} type="submit">
Login
</Button>
</LoginGrid>
{error && <p>{error.message}</p>}
</form>
)
}
}
const LoginForm = compose(withTheme)(LoginFormBase)
export default withTheme(LoginPage)
export { LoginForm }

2
src/components/screens/Login/index.js
View File

@@ -1,2 +0,0 @@
import Login from "./Login"
export default Login

144
src/components/screens/Register/Register.js
View File

@@ -1,144 +0,0 @@
import React, { Component } from "react"
import styled from "@emotion/styled"
import { navigate } from "gatsby"
import { compose } from "recompose"
import { withTheme } from "emotion-theming"
import { Input, Button, P } from "../../elements"
import { SIZES } from "../../../styles/constants"
import { StyledLink as Link } from "../../elements"
import { FirebaseContext } from "../../firebase"
const RegisterGrid = styled.div`
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
`
const RegisterLayout = styled.div`
max-width: ${SIZES.smallWidth};
width: 100%;
align-self: center;
margin-top: 20px;
`
const RegisterPage = ({ theme }) => (
<RegisterLayout>
<FirebaseContext.Consumer>
{firebase => <RegisterForm firebase={firebase} />}
</FirebaseContext.Consumer>
<P colors={theme.colors} style={{ fontStyle: "italic" }}>
Already have an account? <Link to={"/login"}>Login</Link>
</P>
</RegisterLayout>
)
class RegisterFormBase extends Component {
constructor(props) {
super(props)
this.state = {
username: "",
email: "",
passwordOne: "",
passwordTwo: "",
error: null,
}
}
onSubmit = event => {
const { email, passwordOne } = this.state
const { firebase } = this.props
firebase
.doCreateUserWithEmailAndPassword(email, passwordOne)
.then(result => {
this.setState({
username: "",
email: "",
passwordOne: "",
passwordTwo: "",
error: null,
})
const { user } = result
console.log(user)
user.sendEmailVerification()
firebase.db
.collection("users")
.doc(user.uid)
.set({
email: user.email,
})
navigate("app/")
})
.catch(error => {
this.setState({ error })
})
event.preventDefault()
}
onChange = event => {
this.setState({ [event.target.name]: event.target.value })
}
render() {
const { username, email, passwordOne, passwordTwo, error } = this.state
const { theme } = this.props
const isInvalid =
passwordOne !== passwordTwo ||
passwordOne === "" ||
email === "" ||
username === ""
return (
<form onSubmit={this.onSubmit}>
<RegisterGrid>
<Input
colors={theme.colors}
name="username"
value={username}
onChange={this.onChange}
type="text"
placeholder="Full Name"
/>
<Input
colors={theme.colors}
name="email"
value={email}
onChange={this.onChange}
type="text"
placeholder="Email Address"
/>
<Input
colors={theme.colors}
name="passwordOne"
value={passwordOne}
onChange={this.onChange}
type="password"
placeholder="Password"
/>
<Input
colors={theme.colors}
name="passwordTwo"
value={passwordTwo}
onChange={this.onChange}
type="password"
placeholder="Confirm Password"
/>
<Button colors={theme.colors} disabled={isInvalid} type="submit">
Register
</Button>
</RegisterGrid>
{error && <p>{error.message}</p>}
</form>
)
}
}
const RegisterForm = compose(withTheme)(RegisterFormBase)
export default withTheme(RegisterPage)
export { RegisterForm }

2
src/components/screens/Register/index.js
View File

@@ -1,2 +0,0 @@
import Register from "./Register"
export default Register