unclean SPARC
This commit is contained in:
STEINNI
@@ -0,0 +1,39 @@
|
||||
<style>
|
||||
.onboarding.applicant { max-width: 50vw; }
|
||||
.onboarding.applicant .legalname { font-weight: bold; }
|
||||
</style>
|
||||
<div class="onboarding applicant">
|
||||
<section class="search">
|
||||
<p>In order to apply, your organisation must be registered withe the European Commission.<br>
|
||||
Please provide the PIC (Participant Identification Code) of the organisation you are representing.</p>
|
||||
<div class="cols-2 right top">
|
||||
<input eicinput type="search" class="required validate-number" data-path="query" hint="The PIC number of a company is at least 9 digit long number" placeholder="Enter a PIC number and press enter..." />
|
||||
<button eicbutton primary icon="icon-search" class="search"></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="result">
|
||||
|
||||
</section>
|
||||
<section class="how-to">
|
||||
If your organisation is not registered yet,
|
||||
you may apply for the PIC using the<br>
|
||||
<a href="https://ec.europa.eu/info/funding-tenders/opportunities/portal/participant/register" target="_blank">Participant Register in the</a>
|
||||
<a href="https://ec.europa.eu/info/funding-tenders/opportunities/portal/participant/register" target="_blank">Funding & Tenders Portal</a>
|
||||
</section>
|
||||
<section class="unregistered-pic">
|
||||
<input type="hidden" data-path="pic" value="" />
|
||||
<alert eicalert info>This organisation is not registered in the platform.<br/>By continuing the registration process, you will become administrator of this organisation.<br/>The organisation administrator will be notified by email and in charge of accepting or denying any later user registration request on this organisation.</alert>
|
||||
<section>
|
||||
<input eiccheckbox type="checkbox" data-path="optin" data-type="ignore" class="required" label="Hereby, I confirm that I hold the legal right to administrate this organisation" value="yes" />
|
||||
</section>
|
||||
</section>
|
||||
<section class="registered-pic">
|
||||
<input type="hidden" data-path="pic" value="" />
|
||||
<alert eicalert info>This organisation has already been registered by another user of the platform. In order to complete the registration, an access request will be sent tho the current administrator of the organisation. Once your request validated, you will get access to your organisation.</alert>
|
||||
<section>
|
||||
<textarea name="justification" eictextarea class=""
|
||||
placeholder="You may provide an explaination to the administrator about your access request"></textarea>
|
||||
<input eiccheckbox type="checkbox" data-path="optin" data-type="ignore" class="required" label="Hereby, I confirm that I have the legal right to access to this organisation" value="yes" />
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,152 @@
|
||||
class onboardingApplicantDialog extends EICDialogContent {
|
||||
|
||||
actions = [
|
||||
{
|
||||
label: 'Back to profiles',
|
||||
onclick: this.cancel.bind(this),
|
||||
severity: 'secondary',
|
||||
role: 'cancel'
|
||||
},
|
||||
{
|
||||
label: 'Register to that organisation',
|
||||
onclick: this.register.bind(this),
|
||||
severity: 'success',
|
||||
role: 'register',
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
|
||||
status = '';
|
||||
|
||||
DOMContentLoaded(options) {
|
||||
for(let model in options.models) this[model] = options.models[model];
|
||||
|
||||
if(options.cancelLabel) this.actions.find(o => o.role == 'cancel').label = options.cancelLabel;
|
||||
|
||||
this.profile = options.profile;
|
||||
let components = ui.eicfy(this.el);
|
||||
this.searchbar = this.find('.search');
|
||||
this.result = this.find('.result');
|
||||
this.howTo = new Form(this.find('.how-to'));
|
||||
this.unregistered = new Form(this.find('.unregistered-pic'));
|
||||
this.registered = new Form(this.find('.registered-pic'));
|
||||
this.query = components.find(component => component.el.dataset.path == 'query');
|
||||
this.query.onQuery = this.onSearch.bind(this);
|
||||
this.searchButton = components.find(component => component.el.classList.contains('search'));
|
||||
this.searchButton.el.addEventListener('click', this.onSearch.bind(this));
|
||||
|
||||
ui.hide(this.result);
|
||||
ui.hide(this.registered.el);
|
||||
ui.hide(this.unregistered.el);
|
||||
}
|
||||
|
||||
onSearch() {
|
||||
let pic = this.query.value.trim();
|
||||
if(!pic.match(/^\d{8,}$/)) return;
|
||||
|
||||
this.searchButton.loading = true;
|
||||
|
||||
ui.hide(this.result);
|
||||
|
||||
this.user.searchOrganisation(pic)
|
||||
.then(this.onResult.bind(this), this.onEmptyResult.bind(this));
|
||||
}
|
||||
|
||||
onResult(payload) {
|
||||
ui.show(this.result);
|
||||
this.howTo.hide()
|
||||
let organisation = payload[0]
|
||||
this.searchButton.loading = false;
|
||||
this.isRegistered = organisation.existsInMl
|
||||
let status = organisation.existsInMl ? 'warning': 'success';
|
||||
let message = organisation.existsInMl ?
|
||||
'This company is already registered in the EIC plaform':
|
||||
'This company is not registered yet the EIC platform';
|
||||
|
||||
this.result.innerHTML = `<div class="company" ${status} class="icon-success">
|
||||
<div><span class="legalname" primary>${organisation.legalName}</span></div>
|
||||
<div class="cols-3 top">
|
||||
<div><label>PIC</label><span class="pic">${organisation.pic}</span></div>
|
||||
<div><label>Country</label><span class="domain">${organisation.country || '(unknown)'}</span></div>
|
||||
<div><label>Location</label><span class="domain">${organisation.city || '(unknown)'}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div eicalert ${status} ${organisation.existsInMl ? 'warning' : 'success' }>${message}</div>`;
|
||||
|
||||
this.pic = payload[0].pic;
|
||||
this.legalname = payload[0].legalName;
|
||||
this.status = 'selecting'
|
||||
this.actions.find(o => o.role == 'register').button.disabled = false;
|
||||
this.actions.find(o => o.role == 'register').button.label = this.isRegistered ? 'Ask to join this organisation' : 'Register to that organisation'
|
||||
}
|
||||
|
||||
onEmptyResult() {
|
||||
ui.show(this.result);
|
||||
this.searchButton.loading = false;
|
||||
this.result.innerHTML = `<div eicalert danger>Sorry, this PIC is invalid</div>`;
|
||||
this.status = 'selecting';
|
||||
this.actions.find(o => o.role == 'register').button.disabled = true;
|
||||
}
|
||||
|
||||
onSelect() {
|
||||
this.findAll('[data-path="pic"]').forEach((item) => item.value = this.query.value )
|
||||
ui.hide(this.searchbar);
|
||||
ui.hide(this.result);
|
||||
this.form = !this.isRegistered ? this.unregistered: this.registered;
|
||||
|
||||
ui.show(this.form.el);
|
||||
|
||||
this.status = 'completing';
|
||||
}
|
||||
|
||||
register() {
|
||||
switch(this.status) {
|
||||
case 'selecting':
|
||||
this.onSelect();
|
||||
break;
|
||||
case 'completing':
|
||||
if(this.form.validate()) {
|
||||
this.actions.find(o => o.role == 'register').button.loading = true;
|
||||
this.actions.find(o => o.role == 'cancel').button.disabled = true;
|
||||
if(!this.isRegistered) {
|
||||
this.user.registerOrganisationAccess(this.form.value)
|
||||
.then( this.onRegisterSuccess.bind(this), this.onFailed.bind(this))
|
||||
} else {
|
||||
this.user.requestOrganisationAccess(this.form.value)
|
||||
.then( this.onRequestSuccess.bind(this), this.onFailed.bind(this))
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onRegisterSuccess() {
|
||||
this.actions.find(o => o.role == 'register').button.loading = false;
|
||||
this.actions.find(o => o.role == 'cancel').button.disabled = false;
|
||||
this.commit({ request: 'register', pic: this.pic, legalname: this.legalname });
|
||||
ui.growl.append(`
|
||||
You have successfully registered to the organisation "${this.legalname}".<br>
|
||||
You will now be redirected to your dashboard...`,
|
||||
'success',5000)
|
||||
setTimeout(()=>{
|
||||
app.User.logout('/applicant')
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
async onRequestSuccess() {
|
||||
this.actions.find(o => o.role == 'register').button.loading = false;
|
||||
this.actions.find(o => o.role == 'cancel').button.disabled = false;
|
||||
this.commit({ request: 'join', pic: this.pic, legalname: this.legalname });
|
||||
}
|
||||
|
||||
onFailed() {
|
||||
this.actions.find(o => o.role == 'register').button.loading = false;
|
||||
this.actions.find(o => o.role == 'cancel').button.disabled = false;
|
||||
ui.growl.append(`There was a technical issue trying to join you to the organisation "${this.legalname}".<br>
|
||||
Please retry again later.`,
|
||||
'danger',10000)
|
||||
this.commit(false);
|
||||
}
|
||||
}
|
||||
|
||||
app.registerClass('onboardingApplicantDialog',onboardingApplicantDialog);
|
||||
@@ -0,0 +1,39 @@
|
||||
<style>
|
||||
.onboarding {}
|
||||
.onboarding .profiles {
|
||||
display: grid;
|
||||
width: auto;
|
||||
justify-content: center;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: var(--app-font-size-m);
|
||||
}
|
||||
.onboarding .profiles > article { width: 240px; }
|
||||
.onboarding, .onboarding .profiles > article h1, .onboarding .profiles > article p { text-align: center; }
|
||||
.onboarding .exit {
|
||||
text-align: center;
|
||||
padding: var(--eicui-base-spacing-m) 0;
|
||||
}
|
||||
.onboarding .logout {
|
||||
margin: 1vw auto;
|
||||
}
|
||||
</style>
|
||||
<div class="onboarding">
|
||||
<div class="exit">
|
||||
<div>You are the user: <b>${app.User.identity.uuid}</b></div>
|
||||
<div>(${app.User.identity.email})</div>
|
||||
<div class="logout"><a href="#">Sign in with as a different user ?</a></div>
|
||||
</div>
|
||||
<div class="profiles">
|
||||
<article eiccard>
|
||||
<header>
|
||||
<h1>I am an Applicant</h1>
|
||||
</header>
|
||||
<section>
|
||||
<p small>I would like to start a short proposal for the EIC accelerator</p>
|
||||
</section>
|
||||
<footer>
|
||||
<div class="cols-1 "><button eicbutton small primary data-type="Applicant">Proceed with that profile</button></div>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
class onboardingLandingDialog extends EICDialogContent {
|
||||
|
||||
actions = [
|
||||
]
|
||||
|
||||
constructor(options) { super(options); }
|
||||
|
||||
DOMContentLoaded(options) {
|
||||
ui.eicfy(this.el);
|
||||
|
||||
let buttons = this.findAll('.profiles button');
|
||||
for(let button of buttons) button.addEventListener('click', this.onProfileSelect.bind(this));
|
||||
this.logoutLink = this.find('.onboarding .logout a');
|
||||
this.logoutLink.addEventListener('click', (event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
app.User.logout()
|
||||
this.commit()
|
||||
});
|
||||
}
|
||||
|
||||
onProfileSelect(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
let profile = event.currentTarget.dataset.type;
|
||||
this.commit(profile);
|
||||
}
|
||||
}
|
||||
|
||||
app.registerClass('onboardingLandingDialog',onboardingLandingDialog);
|
||||
@@ -0,0 +1,9 @@
|
||||
class onboardingLandingView extends EICDomContent {
|
||||
|
||||
DOMContentLoaded() {
|
||||
ui.eicfy(this.el)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
app.registerClass('onboardingLandingView', onboardingLandingView);
|
||||
@@ -0,0 +1,6 @@
|
||||
<style>
|
||||
</style>
|
||||
<div eicalert success>
|
||||
Your request to join the organisation "${legalname}" is submited.<br>
|
||||
You will be notified by email as soon as your access is granted.
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
class onboardingRequestSuccessDialog extends EICDialogContent {
|
||||
|
||||
actions = [
|
||||
{
|
||||
label: 'Ok',
|
||||
onclick: this.cancel.bind(this),
|
||||
severity: 'secondary',
|
||||
role: 'cancel'
|
||||
},
|
||||
]
|
||||
|
||||
constructor(options) { super(options); }
|
||||
|
||||
DOMContentLoaded() {
|
||||
ui.eicfy(this.el)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
app.registerClass('onboardingRequestSuccessDialog', onboardingRequestSuccessDialog);
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<article eiccard>
|
||||
<header>
|
||||
<h1>Welcome to the EIC!</h1>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<section>
|
||||
<p>It appears we could not identify any matching profile in our platform</p>
|
||||
<p>Please, tell us about yor profile:</p>
|
||||
<ul>
|
||||
<li><a href="/onboarding/applicant"></a>I am an applicant</a></li>
|
||||
<li><a href="https://ec.europa.eu">Sorry, wrong place</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</article>
|
||||
@@ -0,0 +1,9 @@
|
||||
class onboardingLandingView extends EICDomContent {
|
||||
|
||||
DOMContentLoaded() {
|
||||
ui.eicfy(this.el)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
app.registerClass('onboardingLandingView', onboardingLandingView);
|
||||
Reference in New Issue
Block a user