Client ID Registration

app/components/organizations/api-client-registration-form.hbs

@@ -0,0 +1,148 @@
+<div class="card api-client-registration-form">
+	{{#if this.showSuccessMessage}}
+		<div class="card-body">
+		<h4>Thank you for registering!</h4>
+		<p>
+			We have sent an email to <strong>{{this.email}}</strong> containing your client ID. 
+			This email was sent from <a href="mailto:api@ror.org">api@ror.org</a> with the subject "ROR API client ID".
+		</p>
+		<p class="mb-0">
+			If you do not receive this email within 15 minutes, check your spam/junk folder. 
+			If you still cannot find this email, please contact 
+			<a href="mailto:support@ror.org">support@ror.org</a>.
+		</p>
+		</div>
+	{{else if this.showErrorMessage}}
+		<div class="card-body">
+			<h4 class="alert-heading">Registration Error</h4>
+			<p>
+				Oh no, there was an error and we were not able to process your request for a ROR API client ID. 
+				Please contact <a href="mailto:support@ror.org">support@ror.org</a> for assistance.
+			</p>
+      <button 
+        type="button" 
+        class="btn btn-sm btn-round"
+        {{on "click" this.resetForm}}
+      >
+        Try Again
+      </button>
+		</div>
+	{{else}}
+		<BsForm @formLayout="vertical" @onSubmit={{this.onSubmit}} class="card-body" as |form|>
+			<form.element
+				@controlType="email" 
+				@label="Email address (required)"
+				@value={{this.email}} 
+				placeholder="Enter email"
+				@onChange={{fn (mut this.email)}}
+				@required={{true}}
+        		class={{if this.emailError "is-invalid"}}
+				as |el|>
+				<el.control 
+					required
+					{{on "blur" (fn this.validateField "email" this.email)}}
+				/>
+				{{#if this.emailError}}
+					<div class="invalid-feedback d-block">
+						{{this.emailError}}
+					</div>
+				{{/if}}
+
+			</form.element>
+
+			<form.element 
+				@controlType="text"
+				@label="Name (optional)"
+				@value={{this.name}}
+				@onChange={{fn (mut this.name)}}
+				class={{if this.nameError "is-invalid"}}
+				as |el|>
+				<el.control 
+					{{on "blur" (fn this.validateField "name" this.name)}}
+				/>
+				{{#if this.nameError}}
+					<div class="invalid-feedback d-block">
+						{{this.nameError}}
+					</div>
+				{{/if}}
+			</form.element>
+
+			<div class="form-group">
+				<PowerSelect
+					@searchEnabled={{true}}
+					@labelText="Institution (optional)"
+					@search={{this.searchOrganizations}}
+					@selected={{this.selectedInstitution}}
+					@onChange={{this.onInstitutionSelect}}
+					@placeholder="Search for your institution or enter manually(Press Enter to add)"
+					@allowClear={{true}}
+					@renderInPlace={{true}}
+					@matchTriggerWidth={{true}}
+					class={{if this.institutionError "is-invalid"}}
+					as |institution|>
+						{{#if institution.name}}
+							{{institution.name}}
+						{{else}}
+							{{institution}}
+						{{/if}}
+				</PowerSelect>
+				{{#if this.institutionError}}
+					<div class="invalid-feedback d-block">
+						{{this.institutionError}}
+					</div>
+				{{/if}}
+			</div>
+
+			<div class="form-group">
+				<PowerSelect
+					@searchEnabled={{true}}
+					@labelText="Country (optional)"
+					@search={{this.searchCountries}}
+					@selected={{this.selectedCountry}}
+					@onChange={{this.onCountrySelect}}
+					@placeholder="Select or search for a country"
+					@allowClear={{true}}
+					@renderInPlace={{true}}
+					@matchTriggerWidth={{true}} 
+					class={{if this.countryError "is-invalid"}}
+					as |country|>
+						{{country.name}} ({{country.code}})
+				</PowerSelect>
+				{{#if this.countryError}}
+					<div class="invalid-feedback d-block">
+						{{this.countryError}}
+					</div>
+				{{/if}}
+			</div>
+
+			<form.element 
+				@controlType="textarea"
+				@label="How do you plan to use the ROR API? (optional)"
+				@value={{this.ror_use}}
+				@onChange={{fn (mut this.ror_use)}}
+				@rows="3"
+				class={{if this.rorUseError "is-invalid"}}
+				as |el|>
+				<el.control 
+					{{on "blur" (fn this.validateField "ror_use" this.ror_use)}}
+				/>
+				{{#if this.rorUseError}}
+					<div class="invalid-feedback d-block">
+						{{this.rorUseError}}
+					</div>
+				{{else}}
+					<small class="form-text text-muted">Maximum 500 characters</small>
+				{{/if}}
+			</form.element>
+
+			<BsButton 
+				@type="primary"
+				@buttonType="submit"
+				class="btn btn-sm btn-round"
+				disabled={{this.isFormInvalid}}
+			>
+				Submit
+			</BsButton>
+		</BsForm>
+	{{/if}}
+</div>