96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import axios from 'axios'
|
|
import {Field, FieldProps, Form, Formik, FormikErrors, FormikProps} from 'formik';
|
|
import * as React from 'react';
|
|
import {RouteComponentProps, withRouter} from "react-router";
|
|
import styled from 'styled-components';
|
|
|
|
const submitRequestToken = (loginRequest: SessionRequest) => {
|
|
axios.post('/api/session', loginRequest)
|
|
}
|
|
|
|
interface SessionRequest {
|
|
email: string;
|
|
}
|
|
|
|
interface Props extends RouteComponentProps {
|
|
}
|
|
|
|
class RequestMagicLink extends React.Component<Props, {}> {
|
|
|
|
handleValidate(values: SessionRequest): FormikErrors<SessionRequest> {
|
|
const errors: FormikErrors<SessionRequest> = {};
|
|
// get a proper validator for this
|
|
if (!(values && values.email && values.email.includes('@'))){
|
|
errors.email = 'Must include valid email address'
|
|
}
|
|
return errors
|
|
}
|
|
|
|
handleSubmit = async (values: SessionRequest) => {
|
|
this.setState({
|
|
loading: true,
|
|
})
|
|
let response
|
|
try {
|
|
response = await axios.post('/api/signin', values)
|
|
} catch (e) {
|
|
this.setState({
|
|
error: e
|
|
})
|
|
return
|
|
} finally {
|
|
this.setState({
|
|
loading: false
|
|
})
|
|
}
|
|
|
|
if (response.status === 200) {
|
|
this.setState({
|
|
error: null,
|
|
invitationSent: true,
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h1>Login</h1>
|
|
<MessageContainer>
|
|
In order to just view the calendar you don't need to log in, you can simply go back to the calendar and browse
|
|
the events. You only need a login if you have an event you would like to publish or manage. If you already have
|
|
registered, simply enter your email below and you will get a magic link per email. Following the magic link will
|
|
log you into this page. No password necessary.
|
|
</MessageContainer>
|
|
<Formik onSubmit={submitRequestToken} initialValues={{email: ''}} validateOnBlur={true} validate={this.handleValidate}>
|
|
{
|
|
(formikProps: FormikProps<SessionRequest>) => (
|
|
<Form>
|
|
<Field name="email">
|
|
{
|
|
({ field }: FieldProps<string>) => <input type="email" {...field} />
|
|
}
|
|
</Field>
|
|
<Button disabled={!formikProps.isValid} type="submit">Request magic link</Button>
|
|
</Form>
|
|
)
|
|
}
|
|
</Formik>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const MessageContainer = styled.div`
|
|
max-width: 600px;
|
|
margin-bottom: 24px;
|
|
`
|
|
const Button = styled.button`
|
|
&[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
`
|
|
|
|
export default withRouter(RequestMagicLink)
|