Set standard height as iframe default height, validate form

src/css/popup.scss

@@ -13,8 +13,6 @@ html {
 
     #moco-bx-root {
       min-width: 516px;
-      min-height: 420px;
-      transition: height 2s ease-out;
 
       h1 {
         font-size: 24px;

src/js/components/App.js

@@ -110,7 +110,7 @@ class App extends Component {
 
   componentDidMount() {
     window.addEventListener("keydown", this.handleKeyDown)
-    parent.postMessage(window.document.body.scrollHeight, "*")
+    parent.postMessage({ __mocoBX: { iFrameHeight: window.document.body.scrollHeight } }, "*")
     chrome.runtime.onMessage.addListener(this.handleSetFormErrors)
   }
 

src/js/components/Form.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
 import Select from "components/Select"
-import TimeInputParser from "utils/TimeInputParser"
 import { formatDate } from "utils"
 import cn from "classnames"
 import stopWatch from "images/icons/stopwatch-light.svg"
@@ -39,15 +38,18 @@ class Form extends Component {
 
   isValid() {
     const { changeset } = this.props
-    return ["assignment_id", "task_id"].map(prop => changeset[prop]).every(Boolean)
+    return (
+      ["assignment_id", "task_id"].map(prop => changeset[prop]).every(Boolean) &&
+      (changeset.date === formatDate(new Date()) || changeset.seconds > 0)
+    )
   }
 
   get isTimerStartable() {
     const {
-      changeset: { hours, date },
+      changeset: { seconds, date },
     } = this.props
-    const duration = new TimeInputParser(hours).parseSeconds()
+
-    return date === formatDate(new Date()) && duration === 0
+    return date === formatDate(new Date()) && seconds === 0
   }
 
   buttonStyle() {

src/js/components/Popup.js

@@ -13,8 +13,8 @@ const Popup = forwardRef((props, ref) => {
   }
 
   const handleMessage = event => {
-    if (iFrameRef.current) {
+    if (iFrameRef.current && event.data?.__mocoBX?.iFrameHeight > 300) {
-      iFrameRef.current.style.height = `${event.data}px`
+      iFrameRef.current.style.height = `${event.data.__mocoBX.iFrameHeight}px`
     }
   }
 
@@ -50,11 +50,11 @@ const Popup = forwardRef((props, ref) => {
 
   return (
     <div ref={ref} className="moco-bx-popup" onClick={handleRequestClose}>
-      <div className="moco-bx-popup-content" style={{ width: "516px", minHeight: "420px" }}>
+      <div className="moco-bx-popup-content" style={{ width: "516px" }}>
         <iframe
           ref={iFrameRef}
           src={chrome.extension.getURL(`popup.html?${queryString.stringify(serializedProps)}`)}
-          width="516px"
+          style={{ width: "516px", height: "576px", transition: "height 0.1s ease-in-out" }}
         />
       </div>
     </div>