91 lines
3.2 KiB
JavaScript
91 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import { ContactDataValidator } from '../../../../assets/javascripts/registration-validator.js'
|
|
|
|
|
|
function PersonalDataContainer({ onStepClick, labels, participant_data, local_groups }) {
|
|
const handle_next_step = () => {
|
|
if (ContactDataValidator()) {
|
|
onStepClick(4);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<table>
|
|
<tr>
|
|
<td colSpan="2">
|
|
<h3>{labels.headlines.personaldata}</h3>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{labels.common.firstname};</td>
|
|
<td><input defaultValue={participant_data.firstname} type="text" name="vorname" id="vorname" /></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{labels.common.lastname}:</td>
|
|
<td><input defaultValue={participant_data.lastname} type="text" name="nachname" id="nachname" /></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{labels.common.nickname}</td>
|
|
<td><input defaultValue={participant_data.nickname} type="text" name="pfadiname" id="pfadiname" /></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{labels.common.localgroup}</td>
|
|
<td>
|
|
<select id="localgroup" name="localgroup" required placeholder="<?php echo esc_html__( 'Please select', 'solea' ); ?>">
|
|
<option value="-1">{labels.common.please_select}</option>
|
|
{local_groups.map((local_group, index) => (
|
|
<option
|
|
value={local_group.id}
|
|
selected={participant_data.localgroup == local_group.id}
|
|
>{local_group.name}
|
|
</option>
|
|
))
|
|
}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{labels.common.birthday}:</td>
|
|
<td><input defaultValue={participant_data.birthday} type="date" name="geburtsdatum" id="geburtsdatum" /></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{labels.common.street}, {labels.common.housenumber}:</td>
|
|
<td>
|
|
<input type="text" defaultValue={participant_data.street} name="strasse" id="strasse" />
|
|
<input type="text" defaultValue={participant_data.number} name="hausnummer" id="hausnummer" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
{labels.common.postal_code}, {labels.common.city}:</td>
|
|
<td>
|
|
<input type="text" defaultValue={participant_data.zip} name="plz" id="plz" />
|
|
<input type="text" defaultValue={participant_data.city} name="ort" id="ort" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{labels.common.telephone}:</td>
|
|
<td><input defaultValue={participant_data.phone} type="text" name="telefon_1" id="telefon_1" /></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>{labels.common.email}:</td>
|
|
<td><input defaultValue={participant_data.email} type="text" name="email_1" id="email_1" /></td>
|
|
</tr>
|
|
<tr>
|
|
<td colSpan="2">
|
|
<input type="button" value={labels.common.next} onClick= {() => handle_next_step()} />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
);
|
|
}
|
|
|
|
export default PersonalDataContainer; |