Commit baad51b4 authored by Sandro Lutz's avatar Sandro Lutz Committed by Sandro Lutz
Browse files

Improve event signup view

parent 1fd24197
...@@ -190,6 +190,7 @@ export default { ...@@ -190,6 +190,7 @@ export default {
blacklisted: 'Du kannst dich im Moment nicht anmelden, da du auf der Blacklist bist.', blacklisted: 'Du kannst dich im Moment nicht anmelden, da du auf der Blacklist bist.',
waitingList: 'Du bist auf der Warteliste.', waitingList: 'Du bist auf der Warteliste.',
accepted: 'Du bist angemeldet und hast einen Platz.', accepted: 'Du bist angemeldet und hast einen Platz.',
noAdditionalInfoRequired: 'Keine Zusatzinformationen erforderlich.',
}, },
signoff: { signoff: {
action: 'abmelden', action: 'abmelden',
......
...@@ -189,6 +189,7 @@ export default { ...@@ -189,6 +189,7 @@ export default {
blacklisted: 'You cannot register for this event because you are on the blacklist.', blacklisted: 'You cannot register for this event because you are on the blacklist.',
waitingList: 'You are on the waiting list.', waitingList: 'You are on the waiting list.',
accepted: 'You are signed up and got a spot.', accepted: 'You are signed up and got a spot.',
noAdditionalInfoRequired: 'No additional information required.',
}, },
signoff: { signoff: {
action: 'signoff', action: 'signoff',
......
...@@ -59,6 +59,10 @@ ...@@ -59,6 +59,10 @@
position: relative; position: relative;
margin: 2em 1em .5em; margin: 2em 1em .5em;
.infobox,.message {
margin-bottom: 1.5em;
}
> p { > p {
position: absolute; position: absolute;
top: 50%; top: 50%;
......
...@@ -19,6 +19,7 @@ export default class EventDetails { ...@@ -19,6 +19,7 @@ export default class EventDetails {
this.signupFetchError = false; this.signupFetchError = false;
this.event = vnode.attrs.event; this.event = vnode.attrs.event;
this.notification = null; this.notification = null;
this.emailValid = true;
this.signupBusy = false; this.signupBusy = false;
this.signoffBusy = false; this.signoffBusy = false;
this.schema = !this.event.additional_fields this.schema = !this.event.additional_fields
...@@ -152,7 +153,10 @@ export default class EventDetails { ...@@ -152,7 +153,10 @@ export default class EventDetails {
eventSignupForm = this._renderSignupForm(signupFormOptions); eventSignupForm = this._renderSignupForm(signupFormOptions);
eventSignupButtons = this._renderSignupButtons(signupFormOptions); eventSignupButtons = this._renderSignupButtons(signupFormOptions);
} else { } else {
eventSignupForm = m('div', [m('span', `${i18n('events.restrictions.membersOnly')} `)]); eventSignupForm = m(
'div.message',
m('span', `${i18n('events.restrictions.membersOnly')} `)
);
eventSignupButtons = m(Button, { eventSignupButtons = m(Button, {
label: i18n('login'), label: i18n('login'),
className: 'blue-flat-button', className: 'blue-flat-button',
...@@ -161,7 +165,7 @@ export default class EventDetails { ...@@ -161,7 +165,7 @@ export default class EventDetails {
} }
this._renderParticipationNotice(); this._renderParticipationNotice();
} else { } else {
eventSignupForm = m('div', m('p', i18n('events.registration.over'))); eventSignupForm = m('div.message', m('p', i18n('events.registration.over')));
this._renderParticipationNotice(); this._renderParticipationNotice();
} }
} else { } else {
...@@ -203,7 +207,13 @@ export default class EventDetails { ...@@ -203,7 +207,13 @@ export default class EventDetails {
return m('div.event-details', { className: noSignup ? 'no-signup' : null }, [ return m('div.event-details', { className: noSignup ? 'no-signup' : null }, [
m('p', m.trust(marked(escape(this.event.getDescription())))), m('p', m.trust(marked(escape(this.event.getDescription())))),
!noSignup && m('div.separator'), !noSignup && m('div.separator'),
!noSignup && m('div.form', [notification, eventSignupForm]), !noSignup &&
m(
'div.form',
notification || eventSignupForm
? [notification, eventSignupForm]
: m('div.message', [m('span', `${i18n('events.signup.noAdditionalInfoRequired')} `)])
),
m(ActionBar, { m(ActionBar, {
className: 'event-actions', className: 'event-actions',
left: eventSignupButtons, left: eventSignupButtons,
...@@ -238,7 +248,7 @@ export default class EventDetails { ...@@ -238,7 +248,7 @@ export default class EventDetails {
elements.push(this._renderEmailField()); elements.push(this._renderEmailField());
} }
return m('form', { onsubmit: () => false }, elements); return elements.length > 0 ? m('form', { onsubmit: () => false }, elements) : null;
} }
_renderSignupButtons({ canChangeSignup = false, hasSignupData = false, signoffButton = false }) { _renderSignupButtons({ canChangeSignup = false, hasSignupData = false, signoffButton = false }) {
...@@ -252,14 +262,12 @@ export default class EventDetails { ...@@ -252,14 +262,12 @@ export default class EventDetails {
} }
_renderSignupButton(label) { _renderSignupButton(label) {
// TODO: evaluate email field validity!
// Waiting for MR to be accepted in web-ui-components repository.
return m(Button, { return m(Button, {
name: 'signup', name: 'signup',
className: 'blue-flat-button', className: 'blue-flat-button',
border: true, border: true,
label, label,
active: this.form.valid && !this.signupBusy, active: this.emailValid && this.form.valid && !this.signupBusy,
events: { events: {
onclick: () => this.signup(), onclick: () => this.signup(),
}, },
...@@ -273,8 +281,9 @@ export default class EventDetails { ...@@ -273,8 +281,9 @@ export default class EventDetails {
validateOnInput: true, validateOnInput: true,
floatingLabel: true, floatingLabel: true,
type: 'email', type: 'email',
onChange: ({ value }) => { onChange: ({ value, invalid }) => {
this.email = value; this.email = value;
this.emailValid = !invalid;
}, },
value: this.email, value: this.email,
}); });
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment