From ef05c9f659f8ba72e1b0467eabf498e7d83dc6d3 Mon Sep 17 00:00:00 2001
From: Maia Iyer <maia.raj.iyer@gmail.com>
Date: Thu, 12 Aug 2021 18:35:05 -0400
Subject: [PATCH] review - adjusting field widths and error messages

Signed-off-by: Maia Iyer <maia.raj.iyer@gmail.com>
---
 .../dashboard/agents-dashboard-table.js       |   2 +-
 .../src/components/entry-create.js            | 109 ++++++++++--------
 .../src/components/spiffe-helper.js           |   3 +-
 tornjak-frontend/src/components/style.css     |  15 +--
 4 files changed, 71 insertions(+), 58 deletions(-)

diff --git a/tornjak-frontend/src/components/dashboard/agents-dashboard-table.js b/tornjak-frontend/src/components/dashboard/agents-dashboard-table.js
index 74b770f1..a51cb204 100644
--- a/tornjak-frontend/src/components/dashboard/agents-dashboard-table.js
+++ b/tornjak-frontend/src/components/dashboard/agents-dashboard-table.js
@@ -80,7 +80,7 @@ class AgentDashboardTable extends React.Component {
         return [];
     }
 
-    let agentEntriesDict = this.SpiffeHelper.getAgentsEntries(this.props.globalAgents.globalAgentsList, this.props.globalEntries.globalEntriesList)
+    let agentEntriesDict = this.SpiffeHelper.getAgentsEntries(this.props.globalAgents.globalAgentsList, this.props.globalEntries.globalEntriesList) // TODO this.props.globalEntries.globalEntriesList may be undefined if there are no entries
     return this.props.globalAgents.globalAgentsList.map(currentAgent => {
       return this.getChildEntries(currentAgent, agentEntriesDict);
     })
diff --git a/tornjak-frontend/src/components/entry-create.js b/tornjak-frontend/src/components/entry-create.js
index ba7c9f08..28b5ab05 100644
--- a/tornjak-frontend/src/components/entry-create.js
+++ b/tornjak-frontend/src/components/entry-create.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
-import { Dropdown, TextInput, MultiSelect, Checkbox, TextArea, NumberInput, DatePicker, DatePickerInput, TimePicker } from 'carbon-components-react';
+import { Dropdown, TextInput, MultiSelect, Checkbox, TextArea, NumberInput } from 'carbon-components-react';
 import GetApiServerUri from './helpers';
 import IsManager from './is_manager';
 import TornjakApi from './tornjak-api-helpers';
@@ -43,7 +43,6 @@ class CreateEntry extends Component {
     this.onChangeDownStream = this.onChangeDownStream.bind(this);
     this.onChangeDnsNames = this.onChangeDnsNames.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
-    this.setState = this.setState.bind(this);
 
     this.state = {
       name: "",
@@ -67,9 +66,10 @@ class CreateEntry extends Component {
       expiryOption: "None",
       expiryOptionList: ["None", "Seconds Since Epoch", "Date/Time"],
       expiryDate: "1/1/2021",
-      expiryTime: "13:01",
+      expiryTime: "00:00",
       expiresAt: 0,
-      expiryBad: false,
+      expiryUnsafe: false,
+      expiryInvalid: false,
       dnsNames: [],
       federatesWith: [],
       downstream: false,
@@ -223,21 +223,15 @@ class CreateEntry extends Component {
     });
   }
 
-  isValidJSTime(seconds) {
-    const JSMaxSafeTime = 8640000000000
+  isValidExpiryTime(seconds) {
+    const JSMaxSafeTime = 8640000000000 // JS cannot represent times safely larger than this
     return seconds > 0 && seconds <= JSMaxSafeTime
   }
 
   expiryTimeUpdate(seconds) {
-    if (!this.isValidJSTime(seconds)) {
-      this.setState({
-        expiryBad: true,
-      })
-      return
-    }
     this.setState({
-      expiryBad: false,
-      expiresAt: seconds
+      expiresAt: seconds,
+      expiryUnsafe: !this.isValidExpiryTime(seconds)
     })
   }
 
@@ -247,20 +241,28 @@ class CreateEntry extends Component {
   }
 
   // TODO some odd behavior with dates like February 33 exists
-  isValidDate(d) { // date is successfully translated 
+  isValidDate(d) { // date is successfully translated in Javascript
     return d instanceof Date && isFinite(d)
   }
 
   updateValidDateAndTime(d, t) {
     var testDate = new Date(d + ", " + t)
+    this.setState({ // should always reflect what the user sees
+      expiryDate: d,
+      expiryTime: t
+    })
     if (this.isValidDate(testDate)) {
       this.setState({
-        expiryDate: d,
-        expiryTime: t
+        expiryInvalid: false,
       })
       var seconds = Math.round(testDate / 1000)
       this.expiryTimeUpdate(seconds)
-    }
+      console.log(d, t, this.state.expiryDate, this.state.expiryTime)
+      return
+    } 
+    this.setState({
+      expiryInvalid: true,
+    })
   }
 
   onChangeExpiresAtDate(e) {
@@ -683,51 +685,60 @@ class CreateEntry extends Component {
                   {this.state.expiryOption !== "None" && <div className="expiryEntryFields">
                       {this.state.expiryOption === "Seconds Since Epoch" &&
                         <div className="expiryOption-field">
-                          <NumberInput
-                            aria-required="true"
-                            helperText="(seconds since Unix epoch)"
-                            id="expiresAt-input"
-                            invalidText="Number is not valid"
-                            label="Enter expiry time [*required]"
-                            min={1}
-                            step={1}
-                            //value={1}
-                            onChange={this.onChangeExpiresAtSeconds}
-                          />
+                          <div className="expiryOption-entry">
+                            <NumberInput
+                              aria-required="true"
+                              helperText="(seconds since Unix epoch)"
+                              id="expiresAt-input"
+                              invalidText="Number is not valid"
+                              label="Enter expiry time [*required]"
+                              min={1}
+                              step={1}
+                              onChange={this.onChangeExpiresAtSeconds}
+                            />
+                          </div>
                         </div>
                       }
                       {this.state.expiryOption === "Date/Time" &&
                         <div className="expiryOption-field">
                           <div className="expiryOption-entry">
-                            <DatePicker datePickerType="simple">
-                              <DatePickerInput
-                                placeholder="mm/dd/yyyy"
-                                labelText="Enter a date"
-                                onChange={this.onChangeExpiresAtDate}
-                              />
-                            </DatePicker> 
+                            <TextInput
+                              labelText="Enter expiry date [*required]"
+                              helperText="mm/dd/yyyy or mm/dd/yyyyy"
+                              placeholder="08/13/2345"
+                              pattern={["^\\d{2}/\\d{2}/\\d{4,5}$"]}
+                              onChange={this.onChangeExpiresAtDate}
+                              required
+                            />
                           </div>
                           <div className="expiryOption-entry">
                             <TextInput
-                              labelText="Enter local time (15:45)"
+                              labelText="Enter local time [*required]"
+                              helperText="00:00:00 - 23:59:59"
                               placeholder="hh:mm:ss"
-                              maxDetail="seconds"
-                              pattern={["^([0-1]\\d|2[0-3]):[0-5]\\d:[0-5]\\d$"]} // Allows 
+                              pattern={["^([0-1]\\d|2[0-3]):[0-5]\\d:[0-5]\\d$"]}
                               onChange={this.onChangeExpiresAtTime}
+                              invalidText="NotGoodTime"
+                              required
                             />
                           </div>
                         </div>
                       }
-                      {this.state.expiryBad &&
-                        <div role="alert">
-                          <p className="failed-message">Warning: expiry time either in invalid format, is negative, or is too large.  Submitting this time may result in undefined behavior.</p>
-                          {this.state.expiryOption === "Seconds Since Epoch" && 
-                            <p className="failed-message">Seconds must be positive and less than 8640000000000</p>
-                          }
-                          {this.state.expiryOption === "Date/Time" &&
-                            <p className="failed-message">Date must be past January 1, 1970 @ 12:00AM GMT</p>
-                          }
-                        </div>
+                    </div>
+
+
+                  }
+                  {(this.state.expiryUnsafe || this.state.expiryInvalid) &&
+                    <div role="alert">
+                      <p className="failed-message">Warning: expiry time either in invalid format, is negative, or is too large.  Submitting this time may result in undefined behavior.</p>
+                      {this.state.expiryOption === "Seconds Since Epoch" && this.state.expiryUnsafe &&
+                        <p className="failed-message">Seconds must be positive and less than 8640000000000</p>
+                      }
+                      {this.state.expiryOption === "Date/Time" && this.state.expiryUnsafe &&
+                        <p className="failed-message">Date must be past January 1, 1970 @ 12:00AM GMT</p>
+                      }
+                      {this.state.expiryOption === "Date/Time" && this.state.expiryInvalid &&
+                        <p className="failed-message">Date or time format is invalid</p>
                       }
                     </div>
                   }
diff --git a/tornjak-frontend/src/components/spiffe-helper.js b/tornjak-frontend/src/components/spiffe-helper.js
index 4426a33f..c75357c8 100644
--- a/tornjak-frontend/src/components/spiffe-helper.js
+++ b/tornjak-frontend/src/components/spiffe-helper.js
@@ -116,7 +116,8 @@ class SpiffeHelper extends Component {
   // performance is impacted.
   getAgentsEntries (agents, entries) {
       if (typeof entries === 'undefined') {
-        return {};
+        console.log("spiffe-helper.js: getAgentEntries: this should not happen, entries undefined`")
+        //return {};
       }
       let nodeEntries = entries.filter(e => e.parent_id.path === "/spire/server");
       var lambdas = [];
diff --git a/tornjak-frontend/src/components/style.css b/tornjak-frontend/src/components/style.css
index 460e1263..506ffd36 100644
--- a/tornjak-frontend/src/components/style.css
+++ b/tornjak-frontend/src/components/style.css
@@ -126,47 +126,48 @@
 .ttl-input {
   margin-right: 20px;
   margin-bottom: 20px;
-  width: 300px
+  width: 200px
 }
 
 .expiresAt-input {
   margin-right: 20px;
   margin-bottom: 20px;
-  width: 700px;
+  width: 600px;
 }
 
 .expiry-drop-down {
   display: inline-block;
   vertical-align: top;
   margin-right: 20px;
-  width: 240px;
+  width: 200px;
 }
 
 .expiryEntryFields {
   display: inline-block;
   vertical-align: top;
-  width: 400px;
+  width: 200px;
 }
 
 .expiryOption-field {
   display: inline-block;
   vertical-align: top;
-  width: 400px;
+  width: 500px;
 }
 
 .expiryOption-entry {
   margin-right: 20px;
   display: inline-block;
   vertical-align: top;
+  width: 200px;
 }
 
 .federates-with-input-field {
   margin-bottom: 20px;
-  width: 55%;
+  width: 420px;
 }
 .dnsnames-input-field {
   margin-bottom: 20px;
-  width: 55%;
+  width: 420px;
 }
 
 .servers-drp-dwn {