disabling join button

This commit is contained in:
Pavel Murygin 2021-01-16 16:31:26 +03:00
parent 98d3cfd990
commit 655d2fcf81
2 changed files with 11 additions and 3 deletions

View File

@ -1,7 +1,7 @@
$bg-color1: white; $bg-color1: white;
$bg-color2: #f4f4f4; $bg-color2: #f4f4f4;
$font-color1: black; $font-color1: black;
$font-color1-disabled: lightgray; $color-disabled: lightgray;
$color1: black; $color1: black;
$color2: rgb(214, 214, 214); $color2: rgb(214, 214, 214);
@ -185,6 +185,10 @@ body {
color: white; color: white;
border: none; border: none;
} }
&:disabled {
color: $color-disabled;
border-color: $color-disabled;
}
} }
.header-item { .header-item {

View File

@ -11,7 +11,7 @@ import { relayNode } from 'src/app/constants';
const App = () => { const App = () => {
const [client, setClient] = useState<FluenceClient | null>(null); const [client, setClient] = useState<FluenceClient | null>(null);
const [isInRoom, setIsInRoom] = useState<boolean>(false); const [isInRoom, setIsInRoom] = useState<boolean>(false);
const [nickName, setNickName] = useState('myNickName'); const [nickName, setNickName] = useState('');
useEffect(() => { useEffect(() => {
const fn = async () => { const fn = async () => {
@ -80,7 +80,11 @@ const App = () => {
}} }}
/> />
<button className="join-button" disabled={isInRoom || !client} onClick={joinRoom}> <button
className="join-button"
disabled={isInRoom || !client || !nickName}
onClick={joinRoom}
>
Join Join
</button> </button>
</div> </div>