Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Aded in a basic Bio field into the Add Name dialog

Browse source
This commit is contained in:
James Morris 2022-07-26 11:45:10 +01:00
parent 1eb16692aa
commit b1e1d4e23b
1 changed files with 50 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
apps/comments-ui/src/components/modals/AddNameDialog.js
View file

@ -4,7 +4,8 @@ import CloseButton from './CloseButton';
import AppContext from '../../AppContext';
const AddNameDialog = (props) => {
const inputRef = useRef(null);
const inputNameRef = useRef(null);
const inputBioRef = useRef(null);
const {dispatchAction} = useContext(AppContext);
const close = () => {
@ -16,37 +17,41 @@ const AddNameDialog = (props) => {
await dispatchAction('updateMemberName', {
name
});
// TODO: need to save the bio, too
props.callback();
close();
} else {
setError('Enter your name');
setError({name: 'Enter your name'});
setName('');
inputRef.current?.focus();
inputNameRef.current?.focus();
}
};
// using <input autofocus> breaks transitions in browsers. So we need to use a timer
useEffect(() => {
const timer = setTimeout(() => {
inputRef.current?.focus();
inputNameRef.current?.focus();
}, 200);
return () => {
clearTimeout(timer);
};
}, [inputRef]);
}, [inputNameRef]);
const [name, setName] = useState('');
const [error, setError] = useState('');
const [bio, setBio] = useState('');
const [error, setError] = useState({name: '', bio: ''});
return (
<>
<h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add your name</h1>
<h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add context to your comments</h1>
<p className="font-sans text-[1.45rem] text-neutral-500 px-4 sm:px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p>
<section className="mt-8 text-left">
<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}
show={!!error.name}
enter="transition duration-300 ease-out"
enterFrom="opacity-0"
enterTo="opacity-100"
@ -54,15 +59,15 @@ const AddNameDialog = (props) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="font-sans text-sm text-red-500">{error}</div>
<div className="font-sans text-sm text-red-500">{error.name}</div>
</Transition>
</div>
<input
id="comments-name"
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'}`}
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.name && 'border-red-500 focus:border-red-500'}`}
type="text"
name="name"
ref={inputRef}
ref={inputNameRef}
value={name}
placeholder="Jamie Larson"
onChange={(e) => {
@ -76,8 +81,41 @@ const AddNameDialog = (props) => {
}}
maxLength="64"
/>
<div className="flex flex-row mt-4 mb-2 justify-between">
<label htmlFor="comments-name" className="font-sans font-medium text-sm">Bio</label>
<Transition
show={!!error.bio}
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.bio}</div>
</Transition>
</div>
<input
id="comments-bio"
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.bio && 'border-red-500 focus:border-red-500'}`}
type="text"
name="bio"
ref={inputBioRef}
value={bio}
placeholder="Head of Marketing at Acme, Inc"
onChange={(e) => {
setBio(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
setBio(e.target.value);
submit();
}
}}
maxLength="50"
/>
<button
className="transition-opacity duration-200 ease-linear w-full h-[44px] mt-4 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-[#3204F5] opacity-100 hover:opacity-90"
className="transition-opacity duration-200 ease-linear w-full h-[44px] mt-10 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-[#3204F5] opacity-100 hover:opacity-90"
onClick={submit}
>
Save