login

src/assets/Images.js

@@ -13,6 +13,10 @@ const Images = {
     laporan: require('./laporan.svg'),
     editCopy: require('./edit-copy.svg'),
     editCopy2: require('./edit-copy-2.svg'),
+    tia: require('./tia.svg'),
+    imageLogin: require('./image.svg'),
+    email: require('./email.svg'),
+    key: require('./key.svg'),
 
     //Image
     triputra: require('./triputra.png'),

src/assets/email.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0H24V24H0z" transform="translate(-4 -7)"/>
+        <g stroke="#979797" stroke-linejoin="round">
+            <path d="M0 0H13V9.533H0z" transform="translate(-4 -7) translate(5 8)"/>
+            <path d="M0 0L13 0 13 3.467 6.5 5.204 0 3.467z" transform="translate(-4 -7) translate(5 8)"/>
+        </g>
+    </g>
+</svg>

src/assets/key.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="10" viewBox="0 0 17 10">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0H24V24H0z" transform="translate(-4 -7)"/>
+        <g stroke="#979797" transform="translate(-4 -7) translate(5 8)">
+            <path stroke-linejoin="round" d="M3 0c1.657 0 3 1.343 3 3v.005h8.999V5h-.994L14 6.006h-2V5H6c0 1.657-1.343 3-3 3S0 6.657 0 5V3c0-1.657 1.343-3 3-3z"/>
+            <rect width="2" height="4" x="2" y="2" rx="1"/>
+        </g>
+    </g>
+</svg>

src/assets/tia.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="59" viewBox="0 0 100 59">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#51C6EA" d="M1.68 0L6.89 6.763 14.494 6.763 6.68 27.137 18.064 27.137 25.878 6.763 37.052 6.763 39.657 0zM41.505 0L44.78 4.033 35.917 27.137 47.301 27.137 57.72 0zM59.569 0l3.275 4.033-8.864 23.104h11.385l3.319-8.696h12.184l-3.32 8.696h11.384L99.35 0H59.569zm13.61 6.763h12.183l-1.89 4.958H71.288l1.89-4.958z"/>
+        <path fill="#EF5B52" d="M30.078 31.506L26.172 41.715 13.989 41.715 17.896 31.506 1.68 31.506 4.958 35.541 0 48.437 23.568 48.437 19.661 58.645 31.046 58.645 41.463 31.506zM36.926 51.923L34.363 58.645 45.833 58.645 48.393 51.923zM58.098 31.506l3.275 4.035-8.863 23.104h34.951l10.42-27.139H58.097zM71.71 38.27h12.182L78.64 51.923H66.46l5.25-13.654z"/>
+    </g>
+</svg>

src/container/Login.js

 import React, { Component } from 'react';
 import Images from '../assets/Images';
+import { Checkbox, Button, InputAdornment, TextField, InputLabel } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+
+const CustomCheckbox = withStyles({
+  root: {
+    color: '#51c6ea',
+    '&$checked': {
+      color: '#51c6ea',
+    },
+  },
+  checked: {},
+})((props) => <Checkbox color="default" {...props} />);
 
 class Login extends Component {
   render() {
     return (
-      <div style={{ flex: 1, display: 'flex'}}> 
-        <div style={{width: '50%', height: '100vh', display: 'flex'}}>
-        <img src={Images.tia} alt="React Logo" style={{ height: 59, width: 100 }} />
+      <div style={{ flex: 1, display: 'flex' }}>
+        <div style={{ width: '50%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
+          <img src={Images.tia} />
+          <img src={Images.imageLogin} style={{ marginTop: 30 }} />
+        </div>
+        <div style={{ width: '50%', height: '100vh', backgroundColor: '#51c6ea', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
+          <div style={{ padding: 60, display: 'flex', flexDirection: 'column', width: 318, height: 351, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff' }}>
+            <img src={Images.tia} />
+
+            <TextField
+              label="Username/Email *"
+              id="username"
+              type={"text"}
+              name={"username"}
+              variant="outlined"
+              error={false}
+              style={{ width: '100%', height: 51, marginTop: 32 }}
+              helperText=""
+              InputProps={{
+                endAdornment: <InputAdornment position="end"><img src={Images.email} /></InputAdornment>,
+              }}
+            />
+
+            <TextField
+              label="Kata Sandi *"
+              id="password"
+              type={"password"}
+              name={"password"}
+              variant="outlined"
+              error={true}
+              style={{ width: '100%', height: 51, marginTop: 12 }}
+              helperText=""
+              InputProps={{
+                endAdornment: <InputAdornment position="end"><img src={Images.key} /></InputAdornment>,
+              }}
+            />
+
+            <div style={{ flexDirection: 'row', width: '100%', marginTop: 16 }}>
+              <CustomCheckbox name="checked-remember" />
+              <span style={{ color: 'rgba(0, 0, 0, 0.5)' }}>Remember Me</span>
+              <span style={{marginLeft: 30, color: '#51c6ea', cursor: 'pointer' }}>Lupa Kata Sandi?</span>
+            </div>
+            <Button variant="contained" style={{ marginTop: 23,  width: '100%', height: 35, borderRadius: 4 }} disabled>
+              Login
+            </Button>
+          </div>
         </div>
-        <div style={{width: '50%', height: '100vh', backgroundColor: '#51c6ea'}}></div>
-      </div>
+      </div >
     );
   }
 }