scott/crabfit
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Sign out button

Browse source
This commit is contained in:
Ben Grant 2021-06-16 00:25:18 +10:00
parent 9adb3d21ed
commit 3e554043de
3 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
crabfit-frontend/public/i18n/en/event.json
View file

@ -17,6 +17,7 @@
"name": "Your name", "name": "Your name",
"password": "Password (optional)", "password": "Password (optional)",
"button": "Login", "button": "Login",
"logout_button": "Sign out",
"info": "These details are only for this event. Use a password to prevent others from changing your availability.", "info": "These details are only for this event. Use a password to prevent others from changing your availability.",
"timezone": "Your time zone", "timezone": "Your time zone",

4
crabfit-frontend/src/components/Button/buttonStyle.ts
View file

@ -83,7 +83,7 @@ export const Pressable = styled.button`
left: calc(50% - 12px); left: calc(50% - 12px);
height: 18px; height: 18px;
width: 18px; width: 18px;
border: 3px solid #FFF; border: 3px solid ${props.primaryColor ? '#FFF' : props.theme.background};
border-left-color: transparent; border-left-color: transparent;
border-radius: 100px; border-radius: 100px;
animation: load .5s linear infinite; animation: load .5s linear infinite;
@ -92,7 +92,7 @@ export const Pressable = styled.button`
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
&:after { &:after {
content: 'loading...'; content: 'loading...';
color: #FFF; color: ${props.primaryColor ? '#FFF' : props.theme.background};
animation: none; animation: none;
width: initial; width: initial;
height: initial; height: initial;

12
crabfit-frontend/src/pages/Event/Event.tsx
View file

@ -51,7 +51,7 @@ const Event = (props) => {
const { t } = useTranslation(['common', 'event']); const { t } = useTranslation(['common', 'event']);
const { register, handleSubmit, setFocus } = useForm(); const { register, handleSubmit, setFocus, reset } = useForm();
const { id } = props.match.params; const { id } = props.match.params;
const { offline } = props; const { offline } = props;
const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone); const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);
@ -270,6 +270,7 @@ const Event = (props) => {
gtag('event', 'login', { gtag('event', 'login', {
'event_category': 'event', 'event_category': 'event',
}); });
reset();
} }
}; };
@ -321,7 +322,14 @@ const Event = (props) => {
<LoginSection id="login"> <LoginSection id="login">
<StyledMain> <StyledMain>
{user ? ( {user ? (
<h2>{t('event:form.signed_in', { name: user.name })}</h2> <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '20px 0', flexWrap: 'wrap', gap: '10px' }}>
<h2 style={{ margin: 0 }}>{t('event:form.signed_in', { name: user.name })}</h2>
<Button small onClick={() => {
setTab('group');
setUser(null);
setPassword(null);
}}>{t('event:form.logout_button')}</Button>
</div>
) : ( ) : (
<> <>
<h2>{t('event:form.signed_out')}</h2> <h2>{t('event:form.signed_out')}</h2>