Commit e28a0ffb authored by Michael Henretty's avatar Michael Henretty
Browse files

add form validation logic

parent 1f0c21b7
......@@ -128,6 +128,10 @@ button {
}
}
button.highlight {
transform: scale(1.1);
}
button:active {
background: black;
color: white;
......@@ -136,7 +140,7 @@ button:active {
button:disabled {
pointer-events: none;
color: #BDBDBD;
opacity: 0.3;
}
button.dark {
......@@ -876,6 +880,10 @@ header.active {
width: 100%;
}
#profile-container .unsaved {
background-color: yellow;
}
#opt-in {
margin-top: 1rem;
}
......
......@@ -7,19 +7,40 @@ interface Props {
}
interface State {
email: string;
accent: string;
age: string;
gender: string;
}
export default class Profile extends Component<Props, State> {
constructor(props) {
super(props);
let user = this.props.user.getState();
this.state = {
email: user.email,
accent: user.accent,
age: user.age,
gender: user.gender
}
this.saveEmail = this.saveEmail.bind(this);
this.configSendEmails = this.configSendEmails.bind(this);
this.saveDemographics = this.saveDemographics.bind(this);
this.update = this.update.bind(this);
}
private saveEmail() {
let el = document.getElementById('email') as HTMLInputElement;
this.props.user.setEmail(el.value);
let email = el.value;
this.props.user.setEmail(email);
this.setState({
email: email
});
this.render();
}
private configSendEmails(e) {
......@@ -29,22 +50,59 @@ export default class Profile extends Component<Props, State> {
private saveDemographics() {
let el = document.getElementById('profile-accent') as HTMLSelectElement;
this.props.user.setAccent(el.options[el.selectedIndex].value);
let accent = el.options[el.selectedIndex].value;
this.props.user.setAccent(accent);
el = document.getElementById('profile-age') as HTMLSelectElement;
this.props.user.setAge(el.options[el.selectedIndex].value);
let age = el.options[el.selectedIndex].value;
this.props.user.setAge(age);
el = document.getElementById('profile-gender') as HTMLSelectElement;
this.props.user.setGender(el.options[el.selectedIndex].value);
let gender = el.options[el.selectedIndex].value;
this.props.user.setGender(gender);
this.setState({
accent: accent,
age: age,
gender: gender
});
this.render();
}
private update() {
let user = this.props.user.getState();
let el = document.getElementById('email') as HTMLInputElement;
let email = el.value;
let select = document.getElementById('profile-accent') as HTMLSelectElement;
let accent = select.options[select.selectedIndex].value;
select = document.getElementById('profile-age') as HTMLSelectElement;
let age = select.options[select.selectedIndex].value;
select = document.getElementById('profile-gender') as HTMLSelectElement;
let gender = select.options[select.selectedIndex].value;
this.setState({
email: email,
accent: accent,
age: age,
gender: gender
});
}
render() {
let user = this.props.user.getState();
// Check for modified form fields.
let emailModified = this.state.email !== user.email;
let accentModified = this.state.accent !== user.accent;
let ageModified = this.state.age !== user.age;
let genderModified = this.state.gender !== user.gender;
let accentOptions = [];
Object.keys(ACCENTS).forEach(accent => {
accentOptions.push(
<option value={accent} selected={user.accent === accent}>
<option value={accent} selected={this.state.accent === accent}>
{ACCENTS[accent]}
</option>);
});
......@@ -52,7 +110,7 @@ export default class Profile extends Component<Props, State> {
let ageOptions = [];
Object.keys(AGES).forEach(age => {
ageOptions.push(
<option value={age} selected={user.age === age}>
<option value={age} selected={this.state.age === age}>
{AGES[age]}
</option>);
});
......@@ -60,16 +118,23 @@ export default class Profile extends Component<Props, State> {
let genderOptions = [];
Object.keys(GENDER).forEach(gender => {
genderOptions.push(
<option value={gender} selected={user.gender === gender}>
<option value={gender} selected={this.state.gender === gender}>
{GENDER[gender]}
</option>);
});
return <div id="profile-container" className={this.props.active}>
<h2>Profile Data</h2>
<div className="input-and-button">
<label for="email">Your email address</label>
<input id="email" type="email" name="email" value={user.email}/>
<button onClick={this.saveEmail}>Save</button> </div>
<input onKeyUp={this.update}
className={emailModified ? 'unsaved': ''}
id="email" type="email" name="email" value={this.state.email}/>
<button onClick={this.saveEmail}
className={emailModified ? 'highlight': ''}>
Save
</button>
</div>
<div id="opt-in">
<input onClick={this.configSendEmails} id="send-emails"
type="checkbox" checked={user.sendEmails} />
......@@ -81,21 +146,23 @@ export default class Profile extends Component<Props, State> {
<hr />
<h2>Demographic Data</h2>
<label for="profile-accent">Your English accent</label>
<select id="profile-accent">
<option value="">--</option>
<select onChange={this.update} id="profile-accent"
className={accentModified ? 'unsaved': ''}>
{accentOptions}
</select>
<label for="profile-age">Your age</label>
<select id="profile-age">
<option>--</option>
<select onChange={this.update} id="profile-age"
className={ageModified ? 'unsaved': ''}>
{ageOptions}
</select>
<label for="profile-gender">Your gender</label>
<select id="profile-gender">
<option>--</option>
<select onChange={this.update} id="profile-gender"
className={genderModified ? 'unsaved': ''}>
{genderOptions}
</select>
<button id="save-demos" class="dark" onClick={this.saveDemographics}>
<button id="save-demos" onClick={this.saveDemographics}
className={accentModified || ageModified || genderModified ?
'dark highlight': 'dark'}>
Save changes
</button>
</div>;
......
......@@ -3,6 +3,7 @@ import { generateGUID } from './utility';
const USER_KEY = 'userdata';
export const ACCENTS = {
'': '--',
'us': 'United States',
'england': 'England',
'scotland': 'Scotland',
......@@ -21,6 +22,7 @@ export const ACCENTS = {
};
export const AGES = {
'': '--',
'teens': '< 19',
'twenties': '19 - 29',
'thirties': '30 - 39',
......@@ -33,6 +35,7 @@ export const AGES = {
};
export const GENDER = {
'': '--',
'male': 'Male',
'female': 'Female',
'other': 'Other'
......
Markdown is supported
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