Skip to content

T
Tia-dev
Commit e99a9640 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

profile1

parent f5525d3e
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 221 deletions
src/Utils/Index.js
View file @ e99a9640
import React from 'react';
import React, { useState, useEffect } from 'react';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from '@material-ui/core/styles';
......@@ -6,6 +6,7 @@ import Fade from '@material-ui/core/Fade';
import Grid from '@material-ui/core/Grid';
import { Typography, Avatar } from '@material-ui/core';
import Images from '../assets/Images';
import { Link, useRouteMatch } from 'react-router-dom';
const useStyles = makeStyles({
avatar: {
......@@ -32,6 +33,8 @@ function FadeMenu() {
const classes = useStyles();
let { path, url } = useRouteMatch();
return (
<div>
<Grid container justify="center" alignItems="center" >
......@@ -58,8 +61,10 @@ function FadeMenu() {
</MenuItem>
<MenuItem onClick={handleClose}>
<div style={{ display: 'flex', padding: 10 }}>
<img src={Images.setting} style={{ height: 20, width: 20, marginRight: 20 }} />
<Typography>Settings</Typography>
<Link to={'/home/profile'}>
<img src={Images.setting} style={{ height: 20, width: 20, marginRight: 20 }} />
<Typography>Settings</Typography>
</Link>
</div>
</MenuItem>
<MenuItem onClick={handleClose}>
......@@ -80,24 +85,49 @@ const footerStyle = {
// borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
left: "0",
bottom: "0",
left: 0,
bottom: 0,
right: 0,
height: "80px",
width: "100%"
};
const phantomStyle = {
};
const phantomStyle = {
display: "block",
};
function Footer({ children }) {
};
function Footer({ children }) {
return (
<div>
{/* <div style={phantomStyle} /> */}
<div style={footerStyle}>{children}</div>
</div>
<div>
{/* <div style={phantomStyle} /> */}
<div style={footerStyle}>{children}</div>
</div>
);
}
}
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}
function UseWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(
getWindowDimensions()
);
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowDimensions;
}
export { FadeMenu, Footer };
\ No newline at end of file
export { FadeMenu, Footer, UseWindowDimensions };
\ No newline at end of file
src/container/Profile.js
View file @ e99a9640
import React, { Component } from 'react';
import { Typography, TextField, Paper, FormControl, InputLabel, Input, FormHelperText, Button } from '@material-ui/core';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Avatar from '@material-ui/core/Avatar';
import Grid from '@material-ui/core/Grid';
import { Save, Facebook, Twitter, Instagram } from '@material-ui/icons';
// import axios from 'axios'
import { Typography, AppBar, Tabs, Tab, TextField } from '@material-ui/core';
import HomePage from './HomePage';
const styles = theme => ({
root: {
background: 'black',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: '100vh',
padding: '0 30px',
},
container: {
flexDirection: 'row',
display: 'flex',
flexGrow: 3
},
bigAvatar: {
margin: 10,
width: 150,
height: 150,
},
formControl: {
width: '100%',
marginHorizontal: 20
},
textField: {
width: '100%',
marginHorizontal: 20
},
Paper: {
},
button: {
display: 'flex',
justifyContent:'center',
alignSelf:'center',
width: 100,
height: 30,
marginTop: 20
},
});
class Profile extends Component {
export default class Profile extends Component {
constructor(props) {
super(props);
this.state ={
file: null,
labelRef: null,
email: 'arfinsyadziy@gmail.com',
username: 'Superadmin',
password: '12345',
repeat: '12345',
labelWidth: 0
};
this.onFormSubmit = this.onFormSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
onFormSubmit(e){
e.preventDefault();
const formData = new FormData();
formData.append('myImage',this.state.file);
const config = {
headers: {
'content-type': 'multipart/form-data'
}
};
// axios.post("/upload",formData,config)
// .then((response) => {
// alert("The file is successfully uploaded");
// }).catch((error) => {
// });
super(props)
this.state = {
tab: 0
}
}
onChange(e) {
this.setState({file:e.target.files[0]});
selectTab = (event, newEvent) => {
this.setState({ tab: newEvent })
}
handleChange = (event) => {
this.setState({
[event.target.name]:event.target.value,
})
};
render() {
const { classes } = this.props;
return(
<div className={classes.root}>
<div style={{ display: 'flex', justifyContent:'center', alignItems:'center'}}>
<h2 style={{ marginTop: 20}}> PROFILE </h2>
return (
<div style={{ flex: 1}}>
<div style={{ height: 203, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'flex-end', padding: 20 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ height: 72, width: 72, backgroundColor: 'white', borderRadius: 40, marginRight: 20 }} />
<Typography style={{ fontSize: '24px', color: 'white', fontWeight: 'bold' }}>John Doe</Typography>
</div>
</div>
<div className={classes.container}>
<div style={{ flexDirection: 'column', flex: 1, paddingTop: 20, paddingLeft: 200}}>
<Typography style={{ marginLeft: 25, fontSize: 20, fontWeight: 'bold' }}>
Avatar Picture
</Typography>
<Grid container justify="flex-start" alignItems="flex-start">
{/* <Avatar alt="Avatar" src={images.avatar} className={classes.bigAvatar} /> */}
</Grid>
{/* <form onSubmit={this.onFormSubmit}>
<h1>File Upload</h1>
<input type="file" name="myImage" onChange= {this.onChange} />
<button type="submit">Upload</button>
</form> */}
<div style={{ display: 'flex' }}>
<Facebook/>
<Typography style ={{ marginLeft: 20}}>Add Facebook</Typography>
<div>
<AppBar position="static">
<Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#f8f8f8', borderColor: 'transparent' }}>
<Tab label="KATA SANDI" style={{ color: '#4b4b4b', fontSize: 11 }} />
<Tab label="OTORISASI PERUSAHAAN" style={{ color: '#4b4b4b', fontSize: 11 }} />
</Tabs>
</AppBar>
{this.state.tab == 0 ?
<div style={{ padding: 20, marginTop: 10, marginBottom: 100 }}>
<div style={{ width: 432, borderRadius: 6, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }}>
<div style={{ width: '100%', height: 64, backgroundColor: '#354960', display: 'flex', paddingLeft: 20, borderTopLeftRadius: 6, borderTopRightRadius: 6, alignItems: 'center' }}>
<Typography style={{ fontSize: '13px', color: 'white', fontWeight: 'bold' }}>Kata Sandi</Typography>
</div>
<div style={{ padding: 20, justifyContent: 'space-between' }}>
<TextField
style={{ width: '100%'}}
inputProps={{ style: { fontSize: 11 } }}
id="filled-required"
label="Kata Sandi Saat Ini"
defaultValue=""
variant="outlined"
/>
<TextField
style={{ width: '100%', marginTop: 20 }}
inputProps={{ style: { fontSize: 11 } }}
id="filled-required"
label="Kata Sandi Baru"
defaultValue=""
variant="outlined"
/>
<TextField
style={{ width: '100%', marginTop: 20}}
inputProps={{ style: { fontSize: 11 } }}
id="filled-required"
label="Konfirmasi Kata Sandi Baru"
defaultValue=""
variant="outlined"
/>
</div>
<div style={{width: '100%', backgroundColor: '#f5f5f5', height: 43, display: 'flex', justifyContent: 'flex-end', padding: 10, borderColor: 'rgba(0, 0, 0, 0.25)', borderWidth: .2, borderStyle: 'dotted'}}>
<div style={{backgroundColor: '#354960', textAlign: 'center', height: 25, width: 64, borderRadius: 3}}>
<span style={{color: 'white', fontSize: 11}}>Simpan</span>
</div>
</div>
</div>
</div> :
<div style={{ padding: 20 }}>
ini tab 1
</div>
<div style={{ display: 'flex', marginTop: 10 }}>
<Twitter/>
<Typography style ={{ marginLeft: 20}}>Add Twitter</Typography>
</div>
<div style={{ display: 'flex', marginTop: 10 }}>
<Instagram/>
<Typography style ={{ marginLeft: 20}}>Add Instagram</Typography>
</div>
</div>
<div style={{ flexDirection: 'column', flex: 2, paddingTop: 20, paddingRight: 100 }}>
<Paper className={classes.paper} style={{ paddingLeft: 20, paddingRight: 20}}>
<TextField
error={this.state.username.length < 7 ? true : false }
id="standard-name"
name="username"
label="Username"
className={classes.textField}
value={this.state.username}
onChange={this.handleChange.bind(this)}
margin="normal"
/>
<TextField
id="standard-name"
name="email"
label="Email"
className={classes.textField}
value={this.state.email}
onChange={this.handleChange.bind(this)}
margin="normal"
/>
<TextField
error={this.state.password.length <= 4 ? true : false }
id="standard-password-input"
label="Password"
name="password"
value={this.state.password}
className={classes.textField}
onChange={this.handleChange.bind(this)}
type="password"
autoComplete="current-password"
margin="normal"
/>
<FormControl className={classes.formControl} error={this.state.password == this.state.repeat ? false : true }>
<InputLabel htmlFor="component-error"></InputLabel>
<TextField
error={this.state.repeat.length <= 4 ? true : false }
id="standard-password-input"
label="Repeat Password"
name="repeat"
value={this.state.repeat}
className={classes.textField}
onChange={this.handleChange.bind(this)}
type="password"
autoComplete="current-password"
margin="normal"
/>
<FormHelperText id="component-error-text">{this.state.password == this.state.repeat ? '' : "Password didn't match" }</FormHelperText>
</FormControl>
</Paper>
<Button
variant="contained"
color="primary"
size="small"
className={classes.button}
startIcon={<Save />}
>
Update
</Button>
</div>
<div></div>
}
</div>
</div>
)
);
}
}
Profile.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Profile);
}
src/router/homeRoutes.js
View file @ e99a9640
......@@ -5,25 +5,30 @@ import ApprovalMatrix from '../container/ApprovalMatrix'
import BudgetTahunan from '../container/BudgetTahunan';
import HomePage from '../container/HomePage';
import BalanceSheet from '../container/BudgetTahunan/BalanceSheet';
import Profile from '../container/Profile';
const routes = [
{
path: "/home/beranda",
main: HomePage
},
{
path: "/home/userrole",
main: UserRole
},
{
path: "/home/approval",
main: ApprovalMatrix
},
{
path: "/home/budget-tahunan",
main: BalanceSheet
},
];
{
path: "/home/beranda",
main: HomePage
},
{
path: "/home/userrole",
main: UserRole
},
{
path: "/home/approval",
main: ApprovalMatrix
},
{
path: "/home/budget-tahunan",
main: BalanceSheet
},
{
path: "/home/profile",
main: Profile
},
];
export default routes;
\ No newline at end of file
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