Added in some error handling and a few other tiny tweaks to Add Name dialog

- Added in some error handling to catch empty names
- Basic checks for trimmed strings
- Subtle transition effects

refs https://github.com/TryGhost/Team/issues/1682

apps/comments-ui/src/components/modals/AddNameDialog.js

@@ -1,7 +1,9 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useState, useRef} from 'react';
+import {Transition} from '@headlessui/react';
 import AppContext from '../../AppContext';
 
 const AddNameDialog = (props) => {
+    const inputRef = useRef(null);
     const {dispatchAction} = useContext(AppContext);
 
     const close = () => {
@@ -9,33 +11,52 @@ const AddNameDialog = (props) => {
     };
 
     const submit = async () => {
-        await dispatchAction('updateMemberName', {
-            name
-        });
-        props.callback();
-        close();
+        if (name.trim() !== '') {
+            await dispatchAction('updateMemberName', {
+                name
+            });
+            props.callback();
+            close();
+        } else {
+            setError('Enter your name');
+            setName('');
+            inputRef.current.focus();
+        }
     };
 
     const [name, setName] = useState('');
+    const [error, setError] = useState('');
     return (
         <>
             <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add context to your comment</h1>
             <p className="font-sans text-[1.45rem] text-neutral-500 px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p>
             <section className="mt-8 text-left">
-                <label htmlFor="comments-name" className="block font-sans font-medium text-sm mb-2">Name</label>
+                <div className="flex flex-row mb-2 justify-between">
+                    <label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
+                    <Transition
+                        show={!!error}
+                        enter="transition duration-300 ease-out"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
+                        leave="transition duration-100 ease-out"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <div className="font-sans text-sm text-red-500">{error}</div>
+                    </Transition>
+                </div>
                 <input
                     id="comments-name"
-                    className="font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center"
+                    className={`transition-[border-color] duration-200 font-sans px-3 rounded border border-neutral-200 focus:border-neutral-300 w-full outline-0 h-[42px] flex items-center ${error && 'border-red-500 focus:border-red-500'}`}
                     type="text"
                     name="name"
+                    ref={inputRef}
                     value={name}
                     placeholder="Jamie Larson"
                     autoFocus={true}
                     onChange={(e) => {
                         setName(e.target.value);
                     }}
-                    // onKeyDown={e => onKeyDown(e, name)}
-                    // onBlur={e => onBlur(e, name)}
                     maxLength="64"
                 />
                 <button

apps/comments-ui/src/components/modals/GenericDialog.js

@@ -16,7 +16,7 @@ const GenericDialog = (props) => {
     };
 
     return (
-        <Transition show={props.show} appear={true}>
+        <Transition show={props.show}>
             <Frame type="fixed">
                 <div>
                     <Transition.Child