spaceport/webclient/src/Auth.js

167 lines
4.3 KiB
JavaScript
Raw Normal View History

import React, { useState } from 'react';
2022-07-14 21:58:50 +00:00
import { Route, Link } from 'react-router-dom';
2020-09-18 05:04:00 +00:00
import './light.css';
import { Container, Form, Header, Image, Message, Segment } from 'semantic-ui-react';
import { requester } from './utils.js';
2020-09-18 05:04:00 +00:00
export function AuthForm(props) {
const { user } = props;
const username = user ? user.username : '';
const [input, setInput] = useState({ username: username });
const [error, setError] = useState({});
const [success, setSuccess] = useState(false);
const [loading, setLoading] = useState(false);
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleSubmit = (e) => {
if (input.username.includes('@')) {
2021-09-05 00:47:44 +00:00
setError({ username: 'Spaceport username, not email.' });
2020-09-18 05:04:00 +00:00
} else {
if (loading) return;
setLoading(true);
const data = { ...input, username: input.username.toLowerCase() };
requester('/spaceport-auth/login/', 'POST', '', data)
.then(res => {
setSuccess(true);
setError({});
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
}
};
return (
success ?
props.children
:
<Form
onSubmit={handleSubmit}
warning={error.non_field_errors && error.non_field_errors[0] === 'Unable to log in with provided credentials.'}
>
<Header size='medium'>Log In to Spaceport</Header>
{user ?
<><Form.Input
label='Spaceport Username'
name='username'
value={user.username}
onChange={handleChange}
error={error.username}
/>
<Form.Input
label='Spaceport Password'
name='password'
type='password'
onChange={handleChange}
error={error.password}
autoFocus
/></>
:
<><Form.Input
label='Spaceport Username'
name='username'
placeholder='first.last'
onChange={handleChange}
error={error.username}
autoFocus
/>
<Form.Input
label='Spaceport Password'
name='password'
type='password'
onChange={handleChange}
error={error.password}
/></>
}
<Form.Button loading={loading} error={error.non_field_errors}>
Authorize
</Form.Button>
<Message warning>
<Message.Header>Forgot your password?</Message.Header>
<p><Link to='/password/reset/'>Click here</Link> to reset it.</p>
</Message>
</Form>
);
};
export function AuthWiki(props) {
const { user } = props;
return (
<Segment compact padded>
<Header size='medium'>
<Image src={'/wikilogo.png'} />
Protospace Wiki
</Header>
<p>would like to request Spaceport authentication.</p>
2021-09-05 00:47:44 +00:00
<p>URL: <a href='https://wiki.protospace.ca/Welcome_to_Protospace' target='_blank' rel='noopener noreferrer'>wiki.protospace.ca</a></p>
2020-09-18 05:04:00 +00:00
<AuthForm user={user}>
<Header size='small'>Success!</Header>
2021-09-05 00:47:44 +00:00
<p>You can now log into the Wiki:</p>
2021-10-08 05:02:00 +00:00
{user && <p>
Username: {user.member.mediawiki_username || user.username}<br/>
2021-09-05 00:47:44 +00:00
Password: [this Spaceport password]
2021-10-08 05:02:00 +00:00
</p>}
2021-09-05 00:47:44 +00:00
<p><a href='https://wiki.protospace.ca/index.php?title=Special:UserLogin&returnto=Welcome+to+Protospace' rel='noopener noreferrer'>Protospace Wiki</a></p>
</AuthForm>
</Segment>
);
}
export function AuthDiscourse(props) {
const { user } = props;
return (
<Segment compact padded>
<Header size='medium'>
<Image src={'/discourselogo.png'} />
Protospace Discourse
</Header>
<p>would like to request Spaceport authentication.</p>
<p>URL: <a href='https://forum.protospace.ca' target='_blank' rel='noopener noreferrer'>forum.protospace.ca</a></p>
<AuthForm user={user}>
<Header size='small'>Success!</Header>
<p>You can now log into the Discourse:</p>
2021-10-08 05:02:00 +00:00
{user && <p>
Username: {user.member.discourse_username || user.username}<br/>
2021-09-05 00:47:44 +00:00
Password: [this Spaceport password]
2021-10-08 05:02:00 +00:00
</p>}
2021-09-05 00:47:44 +00:00
<p><a href='https://forum.protospace.ca' rel='noopener noreferrer'>Protospace Discourse</a></p>
2020-09-18 05:04:00 +00:00
</AuthForm>
</Segment>
);
}
export function Auth(props) {
const { user } = props;
return (
<Container>
<Header size='large'>Spaceport Auth</Header>
<p>Use this page to link different applications to your Spaceport account.</p>
<Route path='/auth/wiki'>
<AuthWiki user={user} />
</Route>
2021-09-05 00:47:44 +00:00
<Route path='/auth/discourse'>
<AuthDiscourse user={user} />
</Route>
2020-09-18 05:04:00 +00:00
</Container>
);
}