login->register links

dashboard/src/components/Loading.tsx

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import loading from '../assets/loading.gif';
+
+type PropsType = {
+};
+
+type StateType = {
+};
+
+export default class Loading extends Component<PropsType, StateType> {
+  state = {
+  }
+
+  render() {
+    return (
+      <StyledLoading>
+        <Spinner src={loading} />
+      </StyledLoading>
+    );
+  }
+}
+
+const Spinner = styled.img`
+  width: 25px;
+`;
+
+const StyledLoading = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

dashboard/src/main/Login.tsx

@@ -108,6 +108,10 @@ export default class Login extends Component<PropsType, StateType> {
               {this.renderCredentialError()}
             </InputWrapper>
             <Button onClick={this.handleLogin}>Continue</Button>
+
+            <Helper>Don't have an account?
+              <Link href='/register'>Sign up</Link>
+            </Helper>
           </FormWrapper>
         </LoginPanel>
       </StyledLogin>
@@ -117,6 +121,18 @@ export default class Login extends Component<PropsType, StateType> {
 
 Login.contextType = Context;
 
+const Link = styled.a`
+  margin-left: 5px;
+  color: #819BFD;
+`;
+
+const Helper = styled.div`
+  margin: 52px 0px 20px;
+  font-size: 14px;
+  font-family: 'Work Sans', sans-serif;
+  color: #ffffff44;
+`;
+
 const OverflowWrapper = styled.div`
   position: absolute;
   top: 0;
@@ -205,7 +221,7 @@ const Prompt = styled.div`
 
 const Logo = styled.img`
   width: 150px;
-  margin-top: 63px;
+  margin-top: 53px;
   user-select: none;
 `;
 
@@ -236,7 +252,7 @@ const GradientBg = styled.div`
 
 const LoginPanel = styled.div`
   width: 330px;
-  height: 430px;
+  height: 450px;
   background: white;
   margin-top: -20px;
   border-radius: 10px;

dashboard/src/main/Register.tsx

@@ -130,6 +130,10 @@ export default class Register extends Component<PropsType, StateType> {
               {this.renderConfirmPasswordError()}
             </InputWrapper>
             <Button onClick={this.handleRegister}>Continue</Button>
+
+            <Helper>Have an account?
+              <Link href='/login'>Sign in</Link>
+            </Helper>
           </FormWrapper>
         </LoginPanel>
       </StyledRegister>
@@ -139,6 +143,18 @@ export default class Register extends Component<PropsType, StateType> {
 
 Register.contextType = Context;
 
+const Link = styled.a`
+  margin-left: 5px;
+  color: #819BFD;
+`;
+
+const Helper = styled.div`
+  margin: 30px 0px 20px;
+  font-size: 14px;
+  font-family: 'Work Sans', sans-serif;
+  color: #ffffff44;
+`;
+
 const OverflowWrapper = styled.div`
   position: absolute;
   top: 0;
@@ -227,7 +243,7 @@ const Prompt = styled.div`
 
 const Logo = styled.img`
   width: 150px;
-  margin-top: 50px;
+  margin-top: 40px;
   user-select: none;
 `;
 
@@ -258,7 +274,7 @@ const GradientBg = styled.div`
 
 const LoginPanel = styled.div`
   width: 330px;
-  height: 430px;
+  height: 450px;
   background: white;
   margin-top: -20px;
   border-radius: 10px;

dashboard/src/main/home/Home.tsx

@@ -7,6 +7,7 @@ import { Context } from '../../shared/Context';
 import Sidebar from './sidebar/Sidebar';
 import Dashboard from './dashboard/Dashboard';
 import ClusterConfigModal from './modals/ClusterConfigModal';
+import Loading from '../../components/Loading';
 
 type PropsType = {
   logOut: () => void
@@ -16,6 +17,15 @@ type StateType = {
 };
 
 export default class Home extends Component<PropsType, StateType> {
+
+  renderDashboard = () => {
+    if (this.context.currentCluster) {
+      return <Dashboard />
+    }
+
+    return <Loading />
+  }
+
   render() {
     return (
       <StyledHome>
@@ -29,7 +39,7 @@ export default class Home extends Component<PropsType, StateType> {
         </ReactModal>
 
         <Sidebar logOut={this.props.logOut} />
-        <Dashboard />
+        {this.renderDashboard()}
       </StyledHome>
     );
   }

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -10,6 +10,8 @@ class Dashboard extends Component {
 
   componentDidMount() {
     let { userId, setCurrentError, currentCluster } = this.context;
+
+    console.log(currentCluster);
     
     api.getCharts('<token>', {
       user_id: userId,
@@ -20,7 +22,7 @@ class Dashboard extends Component {
       },
       filter: {
         namespace: '',
-        limit: 20,
+        limit: 10,
         skip: 0,
         byDate: false,
         statusFilter: ['deployed']

dashboard/src/main/home/modals/ClusterConfigModal.tsx

@@ -35,7 +35,7 @@ export default class ClusterConfigModal extends Component<PropsType, StateType>
     // Parse kubeconfig to retrieve all possible clusters
     api.getContexts('<token>', {}, { id: userId }, (err: any, res: any) => {
       if (err) {
-        setCurrentError('getAllClusters: ' + JSON.stringify(err));
+        setCurrentError(JSON.stringify(err));
       } else {
         this.setState({ kubeContexts: res.data });
       }

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -38,7 +38,7 @@ export default class ClusterSection extends Component<PropsType, StateType> {
       if (err) {
         setCurrentError('getContexts: ' + JSON.stringify(err));
       } else {
-        
+        console.log(res);
         // Filter selected (temporary)
         let kubeContexts = res.data.filter((x: KubeContextConfig) => x.selected);
         if (kubeContexts.length > 0) {

dashboard/src/shared/Context.tsx

@@ -51,7 +51,7 @@ class ContextProvider extends Component {
   };
 
   componentDidMount() {
-    this.setState({ userId: 1 });
+    this.setState({ userId: 2 });
   }
 
   render() {