Ekstraksi dialog registrasi perusahaan ke halaman terpisah

assets/css/custom.css

@@ -71,7 +71,20 @@ img {
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
-  padding-bottom: 80px;
+  min-height: 100vh;
+  display: flex;
+  flex-flow: column;
+}
+
+.register-card {
+  width: calc(100% - 2rem) !important;
+  margin: 1rem !important;
+  padding: 1rem !important;
+}
+
+.auth-page-content {
+  flex-grow: 1;
+  padding-bottom: 30px;
 }
 
 .headerLoginform {

assets/js/CompanyRegisterPage.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import CompanyRegisterModal from './components/CompanyRegisterModal';
+import Footer from './components/Footer';
+
+import {
+  Grid, Header, Image
+} from 'semantic-ui-react';
+
+const CompanyRegisterPage = () => {
+
+  return (
+    <div class="halamanLogin">
+      <div class="auth-page-content">
+        <div class="headerLogin">
+          <Header as="h2" icon textAlign="center">
+            <Image src="/assets/img/logo.png" size="medium" centered />
+            <Header.Content>Kanal Akses Pendaftaran KP Elektronik</Header.Content>
+          </Header>
+        </div>
+
+        <Grid
+          stackable
+          columns={2}
+          padded
+          style={{ display: 'flex', justifyContent: 'center' }}
+        >
+          <Grid.Column width="seven" style={{
+            backgroundColor: 'white', border: '1px solid #aeaeae',
+            borderRadius: '6px'
+          }}>
+              <CompanyRegisterModal />
+          </Grid.Column>
+        </Grid>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+CompanyRegisterPage.propTypes = {
+  children: PropTypes.node,
+};
+
+CompanyRegisterPage.defaultProps = {
+  children: null,
+};
+
+export default CompanyRegisterPage;

assets/js/Login.jsx

@@ -4,7 +4,6 @@ import {
   Grid, Segment, Header, Card, Image, Button,
 } from 'semantic-ui-react';
 import LoginForm from './components/LoginForm';
-import CompanyRegisterModal from './components/CompanyRegisterModal';
 import Footer from './components/Footer';
 import InfoModal from './components/InfoModal';
 
@@ -66,46 +65,46 @@ const Login = ({ children }) => {
 
   return (
     <div className="halamanLogin">
-      <div className="headerLogin">
-        <Header as="h2" icon textAlign="center">
-          <Image src="/assets/img/logo.png" size="medium" centered />
-          <Header.Content>Kanal Akses Pendaftaran KP Elektronik</Header.Content>
-          <InfoModal>KAPE INFO</InfoModal>
-        </Header>
-      </div>
+      <div className="auth-page-content">
+        <div className="headerLogin">
+          <Header as="h2" icon textAlign="center">
+            <Image src="/assets/img/logo.png" size="medium" centered />
+            <Header.Content>Kanal Akses Pendaftaran KP Elektronik</Header.Content>
+            <InfoModal>KAPE INFO</InfoModal>
+          </Header>
+        </div>
 
-      <Grid
-        stackable
-        columns={2}
-        padded
-        style={{ display: 'flex', justifyContent: 'center' }}
-      >
-        <Grid.Column width="seven">
-          {activeForm === 'user' ? (
-            <UserForm onChange={(role) => setActiveForm(role)}>
-              {children}
-            </UserForm>
-          ) : (
-            <CompanyForm onChange={(role) => setActiveForm(role)}>
-              {children}
-            </CompanyForm>
-          )}
-          <div className="register">
-            <Card centered className="register">
-              <Card.Content>
-                <Grid columns={2} relaxed>
-                  <Grid.Column>
-                    <Header as="h3">New to us ?</Header>
-                  </Grid.Column>
-                  <Grid.Column>
-                    <CompanyRegisterModal />
-                  </Grid.Column>
-                </Grid>
-              </Card.Content>
+        <Grid
+          stackable
+          columns={2}
+          padded
+          style={{ display: 'flex', justifyContent: 'center' }}
+        >
+          <Grid.Column width="seven">
+            {activeForm === 'user' ? (
+              <UserForm onChange={(role) => setActiveForm(role)}>
+                {children}
+              </UserForm>
+            ) : (
+              <CompanyForm onChange={(role) => setActiveForm(role)}>
+                {children}
+              </CompanyForm>
+            )}
+            {activeForm !== 'user' ? (
+            <Card className="register register-card">
+              <Grid columns={2} relaxed>
+                <Grid.Column>
+                  <Header as="h3">New to us ?</Header>
+                </Grid.Column>
+                <Grid.Column>
+                  <a className="ui primary button" href="/register-perusahaan">Register Your Company</a>
+                </Grid.Column>
+              </Grid>
             </Card>
-          </div>
-        </Grid.Column>
-      </Grid>
+            ) : ""}
+          </Grid.Column>
+        </Grid>
+      </div>
       <Footer />
     </div>
   );

assets/js/__test__/CompanyRegisterPage-test.jsx

+import React from 'react';
+import CompanyRegisterPage from '../CompanyRegisterPage';
+import CompanyRegisterModal from '../components/CompanyRegisterModal';
+import { shallow } from 'enzyme';
+
+describe('CompanyRegisterPage', () => {
+  it('renders main form component ', () => {
+    const wrapper = shallow(<CompanyRegisterPage />);
+    expect(wrapper.find(CompanyRegisterModal)).to.exist;
+  });
+});
\ No newline at end of file

assets/js/components/CompanyRegisterModal.jsx

@@ -129,7 +129,7 @@ export default class CompanyRegisterModal extends React.Component {
       benefitViews.push(benefitView);
     });
     return (
-      <Modal trigger={<Button primary floated="right">Register</Button>} closeIcon="close">
+      <div>
         <Header icon="archive" content="Register for More Benefits" />
         <ul>{benefitViews}</ul>
         <Modal.Content>
@@ -238,7 +238,7 @@ Submit
 
           </Form>
         </Modal.Content>
-      </Modal>
+      </div>
     );
   }
 }

assets/js/index.jsx

@@ -12,6 +12,7 @@ import CreateVacancy from './CreateVacancy';
 import Server from './lib/Server';
 import Storage from './lib/Storage';
 import ApplicantPage from './ApplicantPage';
+import CompanyRegisterPage from './CompanyRegisterPage';
 import TranscriptPage from './TranscriptPage';
 import AdminVacancyPage from './AdminVacancyPage';
 import CompanyPage from './CompanyPage';
@@ -82,7 +83,8 @@ export default class App extends React.Component {
     };
 
   handleAuth = (nextState, replace) => {
-    if (!Server.isLoggedIn()) replace({ pathname: '/login' });
+    const EXCLUDED_PATHS = ['register-perusahaan', 'login']
+    if (!Server.isLoggedIn() && EXCLUDED_PATHS.indexOf(nextState.pathname) < 0) replace({ pathname: '/login' });
     Storage.getUserData();
   };
 
@@ -126,6 +128,7 @@ export default class App extends React.Component {
     return (
       <Router history={browserHistory}>
         <Route path="/login" component={Login} />
+        <Route path="/register-perusahaan" component={CompanyRegisterPage} />
         <Route component={all(Dashboard)} onEnter={this.handleAuth}>
           <Route path="/transkrip/:id" component={commonUser(TranscriptPage)} />
           <Route path="/lowongan" component={all(VacancyPage)} />