Upgrade to Website Integration
This commit is contained in:
Luis Fernando Molina committed
1 parent
5df235ec2f
commit
0f71748710
12 files changed
+581
-189
No files matched your search
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@advancedalgos/users-client",
|
||||
"description": "Advanced Algos Users client-side web app",
|
||||
"version": "0.0.15",
|
||||
"version": "0.0.16",
|
||||
"main": "src/index.js",
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^3.2.0",
|
||||
|
||||
@@ -1,14 +1,51 @@
|
||||
import React from 'react'
|
||||
import React, { Component } from 'react'
|
||||
import UserList from './UserList'
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
|
||||
const Browse = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<CssBaseline />
|
||||
<UserList />
|
||||
</React.Fragment>
|
||||
)
|
||||
class Browse extends Component {
|
||||
|
||||
componentDidMount () {
|
||||
window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
||||
<section id='mainslider' className='fullwidth no_padding_container no_margin_col'>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-sm-12'>
|
||||
<div className='flexslider'>
|
||||
<ul className='slides text-center'>
|
||||
<li>
|
||||
<img src='https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg' alt='' />
|
||||
<div className='slide_description_wrapper slider_textblock_center'>
|
||||
<div className='slide_description to_animate'>
|
||||
<div data-animation='fadeInUp' align='center'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Users Directory</h3>
|
||||
<h4 className='white-text'>
|
||||
<br />Everyone involved in Advanced Algos is here.
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CssBaseline />
|
||||
<UserList />
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Browse
|
||||
@@ -1,98 +1,52 @@
|
||||
import React, { Component } from 'react'
|
||||
import { compose } from 'recompose'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
padding: 100
|
||||
},
|
||||
grid: {
|
||||
margin: theme.spacing.unit,
|
||||
width: '50%'
|
||||
},
|
||||
typography: {
|
||||
width: '100%',
|
||||
marginTop: 20,
|
||||
marginBottom: 20
|
||||
},
|
||||
'@global': {
|
||||
body: {
|
||||
backgroundColor: theme.palette.common.white
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
width: 'auto',
|
||||
marginLeft: theme.spacing.unit * 3,
|
||||
marginRight: theme.spacing.unit * 3,
|
||||
[theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
|
||||
width: 900,
|
||||
marginLeft: 'auto',
|
||||
marginRight: 'auto'
|
||||
}
|
||||
},
|
||||
heroContent: {
|
||||
maxWidth: 600,
|
||||
margin: '0 auto',
|
||||
padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
class Home extends Component {
|
||||
|
||||
componentDidMount () {
|
||||
window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up
|
||||
}
|
||||
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<React.Fragment>
|
||||
<CssBaseline />
|
||||
<main className={classes.layout}>
|
||||
<div className={classes.heroContent}>
|
||||
<Typography
|
||||
variant='display3'
|
||||
align='center'
|
||||
color='textPrimary'
|
||||
gutterBottom
|
||||
>
|
||||
Collaborate. Innovate. Evolve.
|
||||
</Typography>
|
||||
<Typography
|
||||
variant='title'
|
||||
align='center'
|
||||
color='textSecondary'
|
||||
component='h3'
|
||||
>
|
||||
Welcome to Advanced Algos Users Module
|
||||
</Typography>
|
||||
|
||||
<section id='mainslider' className='fullwidth no_padding_container no_margin_col'>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-sm-12'>
|
||||
<div className='flexslider slider_height_max'>
|
||||
<ul className='slides text-center'>
|
||||
<li>
|
||||
<img src='https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg' alt='' />
|
||||
<div className='slide_description_wrapper slider_textblock_center'>
|
||||
<div className='slide_description to_animate'>
|
||||
<div data-animation='fadeInUp' align='center'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Users Module</h3>
|
||||
<h4 className='white-text'>
|
||||
<br />Responsible for all human users of the Advanced Algos Platform.
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Grid container justify='center' spacing={24}>
|
||||
<Grid className={classes.grid} item>
|
||||
<Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
|
||||
Intro
|
||||
</Typography>
|
||||
<Typography className={classes.typography} component='p'>
|
||||
This module is responsible for managing users across the Advanced Algos system. Here you can browse the Users Directory, search for users and get to their profiles. You can create your own User profile if you sign up, or manage it if you already have one by logging in.
|
||||
</Typography>
|
||||
<Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
|
||||
Development Status
|
||||
</Typography>
|
||||
<Typography className={classes.typography} component='p'>
|
||||
This module is is currently under development. Implementation started 1st of September 2018 and this is the result of the 3rd sprint of 2 weeks of work each.
|
||||
</Typography>
|
||||
<Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
|
||||
What can you do?
|
||||
</Typography>
|
||||
<Typography className={classes.typography} component='p'>
|
||||
Currently you can use the Browse section to list all registered users. At the Search page you can searh for users by name. Clicking on View Profile you can see some more info about that user. You can signup with your Github account and manage your profile information while logged in. While loggedin, you can edit your profile info, define your referrer and view your descendants. You will find all features under develpment with a dialog indicating it is not ready.
|
||||
</Typography>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</section>
|
||||
</React.Fragment>
|
||||
|
||||
)
|
||||
|
||||
@@ -11,6 +11,16 @@ import IconButton from '@material-ui/core/IconButton'
|
||||
import UserIcon from '@material-ui/icons/Person'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
import ProfileSheetIcon from '@material-ui/icons/Create'
|
||||
import ProfileImagesIcon from '@material-ui/icons/Wallpaper'
|
||||
import YourReferrerIcon from '@material-ui/icons/AccessibilityNew'
|
||||
import DescendentsIcon from '@material-ui/icons/DeviceHub'
|
||||
|
||||
const ProfileSheetLink = props => <Link to='/users/profile-sheet' {...props} />
|
||||
const ProfileImagesLink = props => <Link to='/users/profile-images' {...props} />
|
||||
const YourReferrerLink = props => <Link to='/users/referrer' {...props} />
|
||||
const YourDescendentsLink = props => <Link to='/users/descendents' {...props} />
|
||||
|
||||
const UserLink = props => <Link to='/users/user' {...props} />
|
||||
|
||||
const styles = theme => ({
|
||||
@@ -79,7 +89,7 @@ class LoggedInUser extends Component {
|
||||
let identityProvider = authArray[0]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<li className='menu-item-has-children'>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
@@ -88,9 +98,60 @@ class LoggedInUser extends Component {
|
||||
component={UserLink}
|
||||
to={`${match.url}/user`}>
|
||||
<UserIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Your Profile
|
||||
</Button>
|
||||
</div>
|
||||
Your Profile
|
||||
</Button>
|
||||
<ul>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Profile Sheet'
|
||||
component={ProfileSheetLink}
|
||||
to={`${match.url}/profile-sheet`}>
|
||||
<ProfileSheetIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Profile Sheet
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Profile Images'
|
||||
component={ProfileImagesLink}
|
||||
to={`${match.url}/profile-images`}>
|
||||
<ProfileImagesIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Profile Images
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Your Referrer'
|
||||
component={YourReferrerLink}
|
||||
to={`${match.url}/referrer`}>
|
||||
<YourReferrerIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Your Referrer
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Your Descendents'
|
||||
component={YourDescendentsLink}
|
||||
to={`${match.url}/descendents`}>
|
||||
<DescendentsIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Your Descendents
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
@@ -114,9 +175,9 @@ class LoggedInUser extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<React.Fragment>
|
||||
{this.displayLoggedInUser()}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import classNames from 'classnames'
|
||||
import AppBar from '@material-ui/core/AppBar'
|
||||
import Toolbar from '@material-ui/core/Toolbar'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import Button from '@material-ui/core/Button'
|
||||
|
||||
// icons
|
||||
import UsersIcon from '@material-ui/icons/People'
|
||||
import BrowseIcon from '@material-ui/icons/ImportContacts'
|
||||
import SearchIcon from '@material-ui/icons/Search'
|
||||
import ContactIcon from '@material-ui/icons/ContactMail'
|
||||
import BugReportIcon from '@material-ui/icons/BugReport'
|
||||
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
// components
|
||||
import LoggedInUser from './LoggedInUser'
|
||||
|
||||
const HomeLink = props => <Link to='/users' {...props} />
|
||||
const BrowseLink = props => <Link to='/users/browse' {...props} />
|
||||
const SearchLink = props => <Link to='/users/search' {...props} />
|
||||
|
||||
const styles = theme => ({
|
||||
cssRoot: {
|
||||
color: '#FFFFFF',
|
||||
backgroundColor: theme.palette.secondary,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.dark
|
||||
},
|
||||
whiteSpace: 'nowrap',
|
||||
paddingRight: 2 * theme.spacing.unit,
|
||||
paddingLeft: 2 * theme.spacing.unit
|
||||
},
|
||||
button: {
|
||||
margin: theme.spacing.unit
|
||||
},
|
||||
leftIcon: {
|
||||
marginRight: theme.spacing.unit
|
||||
},
|
||||
iconSmall: {
|
||||
fontSize: 20
|
||||
}
|
||||
})
|
||||
|
||||
class Menu extends Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
authId: null
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
let user = localStorage.getItem('user')
|
||||
let authId
|
||||
|
||||
if (user !== null && user !== undefined && user !== 'undefined') {
|
||||
user = JSON.parse(user)
|
||||
authId = user.authId
|
||||
}
|
||||
|
||||
if (authId !== null && authId !== undefined && authId !== 'undefined') {
|
||||
this.setState({ authId: authId })
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { classes, user } = this.props
|
||||
const match = {
|
||||
url: '/users'
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className='sub-menu'>
|
||||
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
|
||||
title='Users Module Home'
|
||||
component={HomeLink}
|
||||
to={`${match.url}`}>
|
||||
<UsersIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Home
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Browse the Users Directory'
|
||||
component={BrowseLink}
|
||||
to={`${match.url}/browse`}>
|
||||
<BrowseIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Directory
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Search Users'
|
||||
component={SearchLink}
|
||||
to={`${match.url}/search`}>
|
||||
<SearchIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Search
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant='text'
|
||||
size='small'
|
||||
className={classNames(classes.button, classes.cssRoot)}
|
||||
title='Report a Users Module bug'
|
||||
href='https://github.com/AdvancedAlgos/UsersModule/issues/new'
|
||||
target='_blank'
|
||||
>
|
||||
<BugReportIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
|
||||
Report
|
||||
</Button>
|
||||
</li>
|
||||
<LoggedInUser {...this.props} match={match} authId={this.state.authId} />
|
||||
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Menu.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
user: PropTypes.object,
|
||||
match: PropTypes.object
|
||||
}
|
||||
|
||||
export default withStyles(styles)(Menu)
|
||||
@@ -1,52 +1,58 @@
|
||||
import React from 'react'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import Dialog from '@material-ui/core/Dialog'
|
||||
import DialogActions from '@material-ui/core/DialogActions'
|
||||
import DialogContent from '@material-ui/core/DialogContent'
|
||||
import DialogContentText from '@material-ui/core/DialogContentText'
|
||||
import DialogTitle from '@material-ui/core/DialogTitle'
|
||||
import React, { Component } from 'react'
|
||||
import { compose } from 'recompose'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
|
||||
class Contact extends React.Component {
|
||||
state = {
|
||||
open: true
|
||||
}
|
||||
const styles = theme => ({
|
||||
|
||||
handleClickOpen = () => {
|
||||
this.setState({ open: true })
|
||||
}
|
||||
})
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({ open: false })
|
||||
class ProfileImages extends Component {
|
||||
|
||||
componentDidMount () {
|
||||
window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up
|
||||
}
|
||||
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
|
||||
<React.Fragment>
|
||||
<CssBaseline />
|
||||
<Dialog
|
||||
open={this.state.open}
|
||||
onClose={this.handleClose}
|
||||
aria-labelledby='alert-dialog-title'
|
||||
aria-describedby='alert-dialog-description'>
|
||||
<DialogTitle id='alert-dialog-title'>
|
||||
{"Section under development."}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id='alert-dialog-description'>
|
||||
The functionality of this section has not been developed yet. We expect to have it for November 2018. Thanks for your understanding.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={this.handleClose} color='primary' autoFocus>
|
||||
Close
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<section id='mainslider' className='fullwidth no_padding_container no_margin_col'>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-sm-12'>
|
||||
<div className='flexslider slider_height_max'>
|
||||
<ul className='slides text-center'>
|
||||
<li>
|
||||
<img src='https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg' alt='' />
|
||||
<div className='slide_description_wrapper slider_textblock_center'>
|
||||
<div className='slide_description to_animate'>
|
||||
<div data-animation='fadeInUp' align='center'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Profile Images</h3>
|
||||
<h4 className='white-text'>
|
||||
<br />Comming Soon.
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</React.Fragment>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Contact
|
||||
export default compose(
|
||||
withStyles(styles)
|
||||
)(ProfileImages)
|
||||
@@ -31,7 +31,8 @@ const styles = theme => ({
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginLeft: '25%',
|
||||
marginTop: '2%'
|
||||
marginTop: '5%',
|
||||
marginBottom: '10%'
|
||||
},
|
||||
inputField: {
|
||||
width: '80%',
|
||||
@@ -312,18 +313,54 @@ class ProfileSheet extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
componentDidMount () {
|
||||
window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up
|
||||
}
|
||||
|
||||
addSlider () {
|
||||
return (
|
||||
<section id='mainslider' className='fullwidth no_padding_container no_margin_col'>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-sm-12'>
|
||||
<div className='flexslider'>
|
||||
<ul className='slides text-center'>
|
||||
<li>
|
||||
<img src='https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg' alt='' />
|
||||
<div className='slide_description_wrapper slider_textblock_center'>
|
||||
<div className='slide_description to_animate'>
|
||||
<div data-animation='fadeInUp' align='center'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Profile Sheet</h3>
|
||||
<h4 className='white-text'>
|
||||
<br />Manage here your basic profile info.
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
addForm () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
<Typography className={classes.typography} variant='headline' gutterBottom>
|
||||
Profile Sheet
|
||||
</Typography>
|
||||
|
||||
<form onSubmit={this.submitForm.bind(this)}>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
Use this form to control the information you keep at the Advanced Algos system about yourself.
|
||||
</Typography>
|
||||
Use this form to control the information you keep at the Advanced Algos system about yourself.
|
||||
</Typography>
|
||||
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
@@ -332,8 +369,8 @@ class ProfileSheet extends Component {
|
||||
</Grid>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
This is your basic information we have gotten from the identity provider you used to sign up. This information can not be changed.
|
||||
</Typography>
|
||||
This is your basic information we have gotten from the identity provider you used to sign up. This information can not be changed.
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
id='alias'
|
||||
@@ -359,10 +396,10 @@ class ProfileSheet extends Component {
|
||||
id='emailVerified'
|
||||
checked={this.rightCheckboxValue(this.state.emailVerified)}
|
||||
color='primary'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
label='Email Verified'
|
||||
/>
|
||||
/>
|
||||
|
||||
<Grid container justify='center' >
|
||||
<Grid item>
|
||||
@@ -371,8 +408,8 @@ class ProfileSheet extends Component {
|
||||
</Grid>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
Complete your profile with the following optional information. Providing your real name might help other users trust you more.
|
||||
</Typography>
|
||||
Complete your profile with the following optional information. Providing your real name might help other users trust you more.
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
error={this.state.firstNameError}
|
||||
@@ -382,7 +419,7 @@ class ProfileSheet extends Component {
|
||||
label='First Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.middleNameError}
|
||||
@@ -392,7 +429,7 @@ class ProfileSheet extends Component {
|
||||
label='Middle Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
/>
|
||||
|
||||
<TextField
|
||||
error={this.state.lastNameError}
|
||||
@@ -402,11 +439,11 @@ class ProfileSheet extends Component {
|
||||
label='Last Name'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
/>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
If you wish, you can add a short paragraph with your Bio or anything you would like to communicate to whoever finds your user profile.
|
||||
</Typography>
|
||||
If you wish, you can add a short paragraph with your Bio or anything you would like to communicate to whoever finds your user profile.
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
error={this.state.bioError}
|
||||
@@ -416,11 +453,11 @@ class ProfileSheet extends Component {
|
||||
label='Bio'
|
||||
className={classes.inputField}
|
||||
onChange={this.handleTextField.bind(this)}
|
||||
/>
|
||||
/>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.
|
||||
</Typography>
|
||||
Check the following options to enable specialized tools designed for each role. You can allways come back and change these settings later.
|
||||
</Typography>
|
||||
|
||||
<FormGroup row className={classes.inputField}>
|
||||
<Grid container justify='center' >
|
||||
@@ -433,10 +470,10 @@ class ProfileSheet extends Component {
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isDeveloper)}
|
||||
color='secondary'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
label='Developer'
|
||||
/>
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormControlLabel
|
||||
@@ -447,10 +484,10 @@ class ProfileSheet extends Component {
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isTrader)}
|
||||
color='secondary'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
label='Trader'
|
||||
/>
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<FormControlLabel
|
||||
@@ -461,10 +498,10 @@ class ProfileSheet extends Component {
|
||||
onChange={this.handleCheckBoxes.bind(this)}
|
||||
checked={this.rightCheckboxValue(this.state.isDataAnalyst)}
|
||||
color='secondary'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
label='Data Analyst'
|
||||
/>
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</FormGroup>
|
||||
@@ -473,8 +510,8 @@ class ProfileSheet extends Component {
|
||||
|
||||
<FormControl className={classes.inputField}>
|
||||
<InputLabel shrink htmlFor='select'>
|
||||
Current Role
|
||||
</InputLabel>
|
||||
Current Role
|
||||
</InputLabel>
|
||||
<Select
|
||||
id='select'
|
||||
ref='select'
|
||||
@@ -484,7 +521,7 @@ class ProfileSheet extends Component {
|
||||
displayEmpty
|
||||
name='select'
|
||||
className={classes.selectEmpty}
|
||||
>
|
||||
>
|
||||
{ this.displayRoles() }
|
||||
</Select>
|
||||
<FormHelperText>Select from the list your current role</FormHelperText>
|
||||
@@ -498,12 +535,19 @@ class ProfileSheet extends Component {
|
||||
className={classes.button}
|
||||
onClick={this.submitForm.bind(this)}
|
||||
disabled={this.state.updated}
|
||||
>{this.displayButtonTitle()}</Button>
|
||||
>{this.displayButtonTitle()}</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</Paper>
|
||||
|
||||
)
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{this.addSlider()}
|
||||
{this.addForm()}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,8 @@ const styles = theme => ({
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginLeft: '25%',
|
||||
marginTop: '2%'
|
||||
marginTop: '5%',
|
||||
marginBottom: '10%'
|
||||
}
|
||||
})
|
||||
|
||||
@@ -29,6 +30,35 @@ class Search extends Component {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<React.Fragment>
|
||||
<section id='mainslider' className='fullwidth no_padding_container no_margin_col'>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-sm-12'>
|
||||
<div className='flexslider'>
|
||||
<ul className='slides text-center'>
|
||||
<li>
|
||||
<img src='https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg' alt='' />
|
||||
<div className='slide_description_wrapper slider_textblock_center'>
|
||||
<div className='slide_description to_animate'>
|
||||
<div data-animation='fadeInUp' align='center'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Users Search</h3>
|
||||
<h4 className='white-text'>
|
||||
<br />Find anyone involved in Advanced Algos here.
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CssBaseline />
|
||||
<Paper className={classes.root}>
|
||||
<UserSearch />
|
||||
|
||||
@@ -196,13 +196,18 @@ class UserSearch extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up
|
||||
}
|
||||
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
|
||||
<div>
|
||||
<form onSubmit={this.submitForm.bind(this)}>
|
||||
|
||||
<Typography className={classes.formTypography} variant='body2' gutterBottom align='left'>
|
||||
<Typography className={classes.formTypography} variant='body1' gutterBottom align='left'>
|
||||
Use any of these fileds to search for users. {this.selectText()}
|
||||
</Typography>
|
||||
|
||||
@@ -257,6 +262,7 @@ class UserSearch extends Component {
|
||||
{this.displayUsers()}
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,8 @@ const styles = theme => ({
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginLeft: '25%',
|
||||
marginTop: '2%'
|
||||
marginTop: '5%',
|
||||
marginBottom: '10%'
|
||||
},
|
||||
typography: {
|
||||
width: '80%',
|
||||
@@ -59,14 +60,48 @@ class YourDescendents extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { classes } = this.props
|
||||
componentDidMount () {
|
||||
window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up
|
||||
}
|
||||
|
||||
addSlider () {
|
||||
return (
|
||||
<section id='mainslider' className='fullwidth no_padding_container no_margin_col'>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-sm-12'>
|
||||
<div className='flexslider'>
|
||||
<ul className='slides text-center'>
|
||||
<li>
|
||||
<img src='https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg' alt='' />
|
||||
<div className='slide_description_wrapper slider_textblock_center'>
|
||||
<div className='slide_description to_animate'>
|
||||
<div data-animation='fadeInUp' align='center'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Your Descendents</h3>
|
||||
<h4 className='white-text'>
|
||||
<br />Explore here generations of people that discovered Advanced Algos because of you.
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
addForm () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
<Typography className={classes.typography} variant='headline' gutterBottom>
|
||||
Your Descendents
|
||||
</Typography>
|
||||
|
||||
<Typography className={classes.typography} variant='body1' gutterBottom align='left'>
|
||||
These are your decendents within the project. Your children referred you as the one who brought them to the project, while
|
||||
@@ -79,6 +114,15 @@ class YourDescendents extends Component {
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{this.addSlider()}
|
||||
{this.addForm()}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
|
||||
@@ -19,7 +19,8 @@ const styles = theme => ({
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
marginLeft: '25%',
|
||||
marginTop: '2%'
|
||||
marginTop: '5%',
|
||||
marginBottom: '10%'
|
||||
},
|
||||
typography: {
|
||||
width: '80%',
|
||||
@@ -125,18 +126,61 @@ class YourReferrer extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
componentDidMount () {
|
||||
window.dispatchEvent(new Event('load')) // This is a workaround to solve the problem that the slider does not show up
|
||||
}
|
||||
|
||||
addSlider () {
|
||||
return (
|
||||
<section id='mainslider' className='fullwidth no_padding_container no_margin_col'>
|
||||
<div className='container'>
|
||||
<div className='row'>
|
||||
<div className='col-sm-12'>
|
||||
<div className='flexslider'>
|
||||
<ul className='slides text-center'>
|
||||
<li>
|
||||
<img src='https://aacorporatesitedevelop.azurewebsites.net/img/photos/connect.jpg' alt='' />
|
||||
<div className='slide_description_wrapper slider_textblock_center'>
|
||||
<div className='slide_description to_animate'>
|
||||
<div data-animation='fadeInUp' align='center'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Your Referrer</h3>
|
||||
<h4 className='white-text'>
|
||||
<br />It is important to know who introduced you to Advanced Algos.
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
addForm () {
|
||||
const { classes } = this.props
|
||||
return (
|
||||
<Paper className={classes.root}>
|
||||
<Typography className={classes.typography} variant='headline' gutterBottom>
|
||||
Your Referrer
|
||||
</Typography>
|
||||
|
||||
{this.renderMode()}
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{this.addSlider()}
|
||||
{this.addForm()}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default compose(
|
||||
|
||||
+30
-6
@@ -6,12 +6,15 @@ import { hot } from 'react-hot-loader'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
|
||||
// Components
|
||||
import NavBar from './components/NavBar'
|
||||
import Home from './components/Home'
|
||||
import User from './components/User'
|
||||
import Browse from './components/Browse'
|
||||
import Search from './components/Search'
|
||||
import Contact from './components/Contact'
|
||||
import ProfileSheet from './components/ProfileSheet'
|
||||
import ProfileImages from './components/ProfileImages'
|
||||
import YourReferrer from './components/YourReferrer'
|
||||
import YourDescendents from './components/YourDescendents'
|
||||
import UsersMenu from './components/Menu'
|
||||
|
||||
import { getItem } from './utils/local-storage'
|
||||
import {
|
||||
@@ -36,12 +39,10 @@ class App extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const { match } = this.props
|
||||
|
||||
const match = {path: '/users'}
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div className='App'>
|
||||
<NavBar match={match} user={this.state.user} />
|
||||
<Switch>
|
||||
<Route exact path={`${match.path}`} component={Home} />
|
||||
<Route
|
||||
@@ -64,7 +65,26 @@ class App extends Component {
|
||||
path={`${match.path}/search`}
|
||||
render={props => <Search {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
<Route path='/browse/:slug' component={Browse} />
|
||||
<Route
|
||||
exact
|
||||
path={`${match.path}/profile-sheet`}
|
||||
render={props => <ProfileSheet {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path={`${match.path}/profile-images`}
|
||||
render={props => <ProfileImages {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path={`${match.path}/referrer`}
|
||||
render={props => <YourReferrer {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
<Route
|
||||
exact
|
||||
path={`${match.path}/descendents`}
|
||||
render={props => <YourDescendents {...props} auth={this.props.auth} />}
|
||||
/>
|
||||
</Switch>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
@@ -77,4 +97,8 @@ App.propTypes = {
|
||||
}
|
||||
|
||||
const StyledApp = withStyles(globalStyles)(App)
|
||||
export {
|
||||
StyledApp,
|
||||
UsersMenu
|
||||
}
|
||||
export default hot(module)(StyledApp)
|
||||
Reference in new issue
Block a user