108 lines
4.1 KiB
JavaScript
108 lines
4.1 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { Navigate, useNavigate } from 'react-router-dom';
|
|
import { NavDashboard } from './Navigation';
|
|
import { AddChannel, Config } from '../../wailsjs/go/main/App';
|
|
import { Eye, EyeSlash } from '../assets/icons';
|
|
import './SignIn.css';
|
|
import ChannelList from '../components/ChannelList';
|
|
import { SmallModal } from '../components/Modal';
|
|
|
|
function SignIn() {
|
|
const [error, setError] = useState('');
|
|
const navigate = useNavigate();
|
|
const [config, setConfig] = useState({ channels: {} });
|
|
const [addChannelError, setAddChannelError] = useState('');
|
|
const [streamKey, setStreamKey] = useState('');
|
|
const updateStreamKey = (event) => setStreamKey(event.target.value);
|
|
const [showStreamKey, setShowStreamKey] = useState(false);
|
|
const updateShowStreamKey = () => setShowStreamKey(!showStreamKey);
|
|
|
|
useEffect(() => {
|
|
Config()
|
|
.then((response) => {
|
|
setConfig(response);
|
|
})
|
|
.catch((error) => {
|
|
// TODO: display error to user
|
|
setError('Error loading config: ' + error);
|
|
console.log('error getting config', error);
|
|
});
|
|
}, []);
|
|
|
|
const saveStreamKey = () => {
|
|
AddChannel(streamKey)
|
|
.then((response) => {
|
|
console.log(response);
|
|
setConfig(response);
|
|
setStreamKey('');
|
|
})
|
|
.catch((error) => {
|
|
console.log('error adding channel', error);
|
|
setAddChannelError(error);
|
|
});
|
|
};
|
|
|
|
const openStreamDashboard = (cid) => {
|
|
navigate(NavDashboard, { state: { cid: cid } });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{error !== '' && (
|
|
<SmallModal
|
|
onClose={() => setError('')}
|
|
show={error !== ''}
|
|
style={{ minWidth: '300px', maxWidth: '300px', maxHeight: '200px' }}
|
|
title={'Error'}
|
|
message={error}
|
|
submitButton={'OK'}
|
|
onSubmit={() => setError('')}
|
|
/>
|
|
)}
|
|
<div id='SignIn'>
|
|
<div className='signin-header'>
|
|
<span className='signin-title-text'>Rum Goggles</span>
|
|
<span className='signin-title-subtext'>Rumble Stream Dashboard</span>
|
|
</div>
|
|
<div className='signin-center'>
|
|
<ChannelList
|
|
channels={config.channels}
|
|
openStreamDashboard={openStreamDashboard}
|
|
/>
|
|
</div>
|
|
<div className='signin-input-box'>
|
|
<label className='signin-label'>Add Channel</label>
|
|
<span className='add-channel-description'>
|
|
Copy your API key from your Rumble account
|
|
</span>
|
|
<div className='signin-input-button'>
|
|
<input
|
|
id='StreamKey'
|
|
className='signin-input'
|
|
onChange={updateStreamKey}
|
|
placeholder='Stream Key'
|
|
type={showStreamKey ? 'text' : 'password'}
|
|
value={streamKey}
|
|
/>
|
|
<button className='signin-show' onClick={updateShowStreamKey}>
|
|
<img
|
|
className='signin-show-icon'
|
|
src={showStreamKey ? EyeSlash : Eye}
|
|
></img>
|
|
</button>
|
|
<button className='signin-button' onClick={saveStreamKey}>
|
|
Save
|
|
</button>
|
|
</div>
|
|
<span className='add-channel-error'>
|
|
{addChannelError ? addChannelError : '\u00A0'}
|
|
</span>
|
|
</div>
|
|
<div className='signin-footer'></div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default SignIn;
|