Skip to content

2
2021-049
Commit 112aaa96 authored by Hasitha Samarasekara's avatar Hasitha Samarasekara
Browse files
Options

Institute Sign up UI Done. 

Nav bar fixed to top.
parent a5cec1be
Hide whitespace changes
Inline Side-by-side
Showing with 299 additions and 11 deletions
WebFrontEnd/smartcoach-frontend/src/Components/Login.js
View file @ 112aaa96
......@@ -63,7 +63,8 @@ export default class Login extends Component{
render() {
return (
<div className="container" style={{padding:'10px'}}>
<div style={{width:'30%', margin:'auto', marginTop:'50px', padding:'0px', paddingBottom: '30px', border:'solid', borderColor:'#216E9B'}} >
<div>
<div style={{width:'30%', margin:'auto', marginTop:'7%', padding:'0px', paddingBottom: '30px', border:'solid', borderColor:'#216E9B'}} >
<form onSubmit={this.onSubmit} id="login" name="login" className="login">
<div className="row">
<br/>
......@@ -124,7 +125,7 @@ export default class Login extends Component{
</div>
</form>
</div>
</div>
</div>
)
}
......
WebFrontEnd/smartcoach-frontend/src/Components/Navbar.js
View file @ 112aaa96
......@@ -5,7 +5,8 @@ export default class NavBar extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg" style={{background:'#1E4258'}}>
<nav className="navbar navbar-expand-lg" style={{background:'#1E4258',position: 'fixed',
width:'100%', marginTop: '0%', zIndex:'100'}}>
<button className="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
......
WebFrontEnd/smartcoach-frontend/src/Components/SignUp.js
View file @ 112aaa96
......@@ -6,9 +6,9 @@ export default class SignUp extends Component {
super(props);
this.state = {
isClickStudent: true,
isClickStudent: false,
isClickTutor: false,
isClickInstitute: false,
isClickInstitute: true,
streams: ['Commerce stream', 'Physical Science Stream ', 'Biological Science Stream', 'Technology Stream', 'Art Stream'],
subjects: ['Economics', 'Geography', 'Business statistics', 'Business Studies',
'Accounting', 'Logic & Scientific Method', 'History of India', 'History of Europe', 'History of Modern World',
......@@ -35,6 +35,11 @@ export default class SignUp extends Component {
studentButtonColor : '#216E9B',
tutorButtonColor : '#265077',
instituteButtonColor : '#265077',
institutePhoneNoOnChange : '',
uerAddedInstitutePhoneList : [],
tempInstitutePhoneList : [],
emptyVariable : '',
}
......@@ -48,12 +53,14 @@ export default class SignUp extends Component {
this.onClickInstituteRemoveButton = this.onClickInstituteRemoveButton.bind(this);
this.onChangeInstituteCheckBox = this.onChangeInstituteCheckBox.bind(this);
this.FindCities = this.FindCities.bind(this);
this.onChangeInstitutePhoneNo = this.onChangeInstitutePhoneNo.bind(this);
this.onClickAddInstitutePhoneNoButton = this.onClickAddInstitutePhoneNoButton.bind(this);
this.onClickInstitutePhoneNoRemoveButton = this.onClickInstitutePhoneNoRemoveButton.bind(this);
}
componentDidMount() {
if(this.state.isClickStudent){
}
}
onClickStudent() {
......@@ -211,15 +218,64 @@ export default class SignUp extends Component {
});
}
onChangeInstitutePhoneNo(e){
if(e.target.value >= 0){
this.setState({
institutePhoneNoOnChange : e.target.value
});
}
}
onClickAddInstitutePhoneNoButton() {
let oldInstitutePN = [];
let temInstitutePNList02 = [];
if (this.state.institutePhoneNoOnChange !== '') {
oldInstitutePN = this.state.uerAddedInstitutePhoneList.slice();
oldInstitutePN.push(this.state.institutePhoneNoOnChange);
this.setState({
uerAddedInstitutePhoneList: oldInstitutePN
}, () => {
for (let i = 0; i < this.state.uerAddedInstitutePhoneList.length; i++) {
temInstitutePNList02.push(this.state.uerAddedInstitutePhoneList[i] + ' | ');
}
this.setState({
tempInstitutePhoneList: temInstitutePNList02,
institutePhoneNoOnChange :''
})
})
}
}
onClickInstitutePhoneNoRemoveButton() {
let oldInstitutePN = [];
let oldInstitutePN02 = [];
oldInstitutePN = this.state.uerAddedInstitutePhoneList.slice();
oldInstitutePN02 = this.state.tempInstitutePhoneList.slice();
let popped = oldInstitutePN.pop();
let popped2 = oldInstitutePN02.pop();
this.setState({
uerAddedInstitutePhoneList: oldInstitutePN,
tempInstitutePhoneList: oldInstitutePN02
})
}
render() {
return (
<div className="container">
<div className="container" style={{paddingTop:'50px'}}>
<div>
<div style={{
width: '50%',
margin: 'auto',
marginTop: '50px',
marginTop: '3%',
marginBottom: '30px',
padding: '0px',
paddingTop: '0px',
paddingBottom: '30px',
border: 'solid',
borderColor: '#216E9B'
......@@ -997,7 +1053,236 @@ export default class SignUp extends Component {
:
<div>
<h3>This is Institute</h3>
<form onSubmit={this.onSubmit} id="signup" name="signup" className="signup">
<div className="row"
style={{display: 'flex', justifyContent: 'center', marginTop: '0px'}}>
<h5 style={{marginTop: '30px', color: '#8c8c8c'}}>INSTITUTE DETAILS</h5>
</div>
<div className="row" style={{marginTop: '10px', marginBottom: '0px'}}>
<div className="col-1">
</div>
<div className="col-10">
<h5 style={{float: 'left', color: '#216E9B'}}>Name of Institute</h5>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
<div className="col-1">
</div>
<div className="col-10" style={{textAlign: '-webkit-center'}}>
<input type="text" id="studentName" className="form-control"
placeholder="Name of Institute" onChange={this.onChangeEmail}
style={{width: '90%'}} required/>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
<div className="col-1">
</div>
<div className="col-10">
<h5 style={{float: 'left', color: '#216E9B'}}>Phone Number(s)</h5>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
<div className="col-1">
</div>
<div className="col-8" style={{textAlign: '-webkit-center'}}>
<input type="tel" id="institutePN" className="form-control" value={this.state.institutePhoneNoOnChange}
placeholder="Phone Number" onChange={this.onChangeInstitutePhoneNo}
style={{width: '90%'}} />
</div>
<div className="col-3">
<button type="button" className="btn btn-primary"
onClick={this.onClickAddInstitutePhoneNoButton}
style={{
width: '40px',
marginTop: '0px',
backgroundColor: '#265077',
borderColor: '#216E9B',
float: 'left'
}}><b>+</b></button>
</div>
</div>
{this.state.tempInstitutePhoneList.length > 0 ?
<div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
<div className="col-1">
</div>
<div className="col-8">
<label style={{
float: 'left',
color: '#216E9B'
}}>{this.state.tempInstitutePhoneList}</label>
</div>
<div className="col-3">
<button type="button" className="btn btn-primary"
onClick={this.onClickInstitutePhoneNoRemoveButton}
style={{
width: '40px',
marginTop: '0px',
backgroundColor: '#265077',
borderColor: '#216E9B',
float: 'left'
}}><b>-</b></button>
</div>
</div>
:
<div>
</div>
}
<div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
<div className="col-1">
</div>
<div className="col-10">
<h5 style={{float: 'left', color: '#216E9B'}}>Institute Email</h5>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
<div className="col-1">
</div>
<div className="col-10" style={{textAlign: '-webkit-center'}}>
<input type="email" id="instEmail" className="form-control"
placeholder="Email" onChange={this.onChangePassword}
style={{width: '90%'}} required/>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
<div className="col-1">
</div>
<div className="col-10">
<h5 style={{float: 'left', color: '#216E9B'}}>Address</h5>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
<div className="col-1">
</div>
<div className="col-10" style={{textAlign: '-webkit-center'}}>
<input type="text" id="stdAddress" className="form-control"
placeholder="Apartment #" onChange={this.onChangePassword}
style={{width: '90%'}} required/>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
<div className="col-1">
</div>
<div className="col-10" style={{textAlign: '-webkit-center'}}>
<input type="text" id="stdAddress" className="form-control"
placeholder="Street" onChange={this.onChangePassword}
style={{width: '90%'}} required/>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
<div className="col-1">
</div>
<div className="col-10" style={{textAlign: '-webkit-center'}}>
<input type="text" id="stdAddress" className="form-control"
placeholder="City" onChange={this.onChangePassword}
style={{width: '90%'}} required/>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '20px', marginBottom: '0px'}}>
<div className="col-1">
</div>
<div className="col-10">
<h5 style={{float: 'left', color: '#216E9B'}}>Institute Registration No</h5>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
<div className="col-1">
</div>
<div className="col-10" style={{textAlign: '-webkit-center'}}>
<input type="text" id="regNo" className="form-control"
placeholder="Company Registration Number" onChange={this.onChangePassword}
style={{width: '90%'}} required/>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{marginTop: '0px', marginBottom: '10px'}}>
<div className="col-1">
</div>
<div className="col-10">
<input type="checkbox" id="condition" className="form-control"
onChange={this.onChangePassword}
style={{
width: '20px',
height: '20px',
float: 'left',
marginLeft: '25px',
marginTop: '15px'
}}
required/>
<label style={{marginTop: '15px', float: 'left', marginLeft: '20px'}}> I Confirm
I have read the terms and conditions.</label>
</div>
<div className="col-1">
</div>
</div>
<div className="row" style={{
marginTop: '35px',
marginBottom: '5px',
display: 'flex',
justifyContent: 'center'
}}>
<button type="submit" className="btn btn-primary" style={{
width: '50%',
marginTop: '0px',
backgroundColor: '#265077',
borderColor: '#216E9B'
}}><b>SIGN UP</b></button>
</div>
</form>
</div>
}
</div>
......@@ -1005,6 +1290,7 @@ export default class SignUp extends Component {
}
</div>
</div>
</div>
)
}
......
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