login

src/container/Login.js

@@ -5,6 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import api from '../api';
+import Constant from '../library/Constant';
 
 const CustomCheckbox = withStyles({
   root: {
@@ -42,10 +43,10 @@ class Login extends Component {
   }
     api.create().login(payload).then((response) => {
       if (response.data.status === 'success') {
-      this.props.history.replace('/home')
-      // console.log(response.data)
+        this.props.history.push('/home/beranda')
+        localStorage.setItem(Constant.TOKEN, response.data.data.token)
       } else {
-      alert("Oops Incorrect Username or Password!")
+        alert(response.data.message)
       }
     })
   }

src/container/Otorisasi/User.js

@@ -4,14 +4,23 @@ import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/
 import SearchIcon from '@material-ui/icons/Search';
 import Images from "../../assets/Images";
 import MUIDataTable from "mui-datatables";
+import AddRole from './UserRole/AddRole';
+import EditRole from './UserRole/EditRole'
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
 
 export default class User extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      add: false,
+      edit: false
+    }
+  }
   render() {
-    const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
+    const columns = [{
       name: "Action",
       options: {
         customBodyRender: (val, tableMeta) => {
@@ -21,19 +30,9 @@ export default class User extends Component {
                 style={{
                   backgroundColor: 'transparent',
                   cursor: 'pointer',
-                  borderColor: 'transparent'
+                  borderColor: 'transparent',
                 }}
-                onClick={() => null}
-              >
-                <img src={Images.editCopy2} />
-              </button>
-              <button
-                style={{
-                  backgroundColor: 'transparent',
-                  cursor: 'pointer',
-                  borderColor: 'transparent'
-                }}
-                onClick={() => null}
+                onClick={() => this.setState({edit: true})}
               >
                 <img src={Images.editCopy} />
               </button>
@@ -41,13 +40,35 @@ export default class User extends Component {
           );
         }
       }
-    }]
+    }, {
+      name: "ID",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex', width: 50 }}>
+              {val}
+            </div >
+          );
+        }
+      }
+    }, {
+      name: "User Role",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex', width: 250 }}>
+              {val}
+            </div >
+          );
+        }
+      }
+    }, "Hak Akses", "Status"]
     const data = [
-      ["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
-      ["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
-      ["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
-      ["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
-      ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
+      ["1", "1", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
+      ["2", "2", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
+      ["3", "3", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
+      ["4", "4", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
+      ["5", "5", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
     ]
     return (
       <div style={{ height: this.props.height }}>
@@ -55,10 +76,16 @@ export default class User extends Component {
         <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
         <div>
           <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
-            <label style={{ color: 'white', width: '20%' }}>Master Data - Role & Otorisasi</label>
-            <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label>
+            <label style={{ color: 'white', width: '20%', alignSelf: 'center'}}>Master Data - Role & Otorisasi</label>
+            <div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
+              <div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5, flexDirection: 'row', display: 'flex'}}>
+                <SearchIcon/>
+                <input type="text" style={{flexGrow: 1, marginLeft: 10}}/>
+              </div>
+            </div>
+            {/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
             <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
-              <img src={Images.add} />
+              <img src={Images.add} onClick={() => this.setState({add: true})}/>
             </div>
           </div>
           <div style={{ padding: 25 }}>
@@ -69,9 +96,10 @@ export default class User extends Component {
                 options={options}
               />
             </MuiThemeProvider>
-
           </div>
         </div>
+        {this.state.add && <AddRole/>}
+        {this.state.edit && <EditRole/>}
       </div>
     );
   }

src/library/Constant.js

+const Constant = {
+    TOKEN: 'TOKEN',
+    USER: null,
+}
+
+export default Constant;
\ No newline at end of file

src/router/index.js

@@ -14,6 +14,7 @@ import Screen404 from '../container/Screen404'
 import ForgotPassword from '../container/ForgotPassword'
 import ResetPassword from '../container/ResetPassword'
 import EmailVerification from "../container/EmailVerification";
+import Constant from "../library/Constant";
 // This site has 3 pages, all of which are rendered
 // dynamically in the browser (not server rendered).
 //
@@ -35,12 +36,16 @@ export default function BasicExample() {
             }}
           />
         </Route>
-        <Route path="/login" component={Login} />
+        <Route path="/login" component={Login}/>
+          {/* <Login/>
+        </PrivateRoute> */}
         <Route path="/forgot-password" component={ForgotPassword} />
         <Route path="/reset-password" component={ResetPassword} />
         <Route path="/email-verification" component={EmailVerification} />
         <Route path="/register" component={Register}/>
-        <PrivateRoute path="/home" component={Home} />
+        <PrivateRoute path="/home">
+          <Home/>
+        </PrivateRoute>
         <Route path="*">
           <Screen404 />
         </Route>
@@ -50,20 +55,21 @@ export default function BasicExample() {
 }
 
 function PrivateRoute({ children, ...rest }) {
+  const logged = localStorage.getItem(Constant.TOKEN) == 'TOKEN'? false : true
   return (
     <Route
       {...rest}
       render={({ location }) =>
-        // fakeAuth.isAuthenticated ? (
-        //   children
-        // ) : (
+        logged ? (
+          children
+        ) : (
           <Redirect
             to={{
               pathname: "/login",
-              // state: { from: location }
+              state: { from: location }
             }}
           />
-        // )
+        )
       }
     />
   );