mirrors/thunderhub
1
0
Fork 0
mirror of https://github.com/apotdevin/thunderhub.git synced 2025-02-22 14:22:33 +01:00
Code Issues Projects Releases Wiki Activity

Feature: Refactor login process (#4)

Browse source 
* feat: refactor login

* chore: small refactors

* chore: set password strength back
This commit is contained in:
Anthony Potdevin 2020-02-22 17:10:24 +01:00 • committed by GitHub
parent 0c89b6362d
commit 76eb6f608e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
41 changed files with 772 additions and 653 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.tsx
View file

@ -32,7 +32,7 @@ const client = new ApolloClient({
const ContextApp: React.FC = () => {
const { theme } = useSettings();
const { loggedIn, admin, read, sessionAdmin } = useAccount();
const { loggedIn, admin, viewOnly, sessionAdmin } = useAccount();
const renderContent = () => (
<Suspense
@ -40,7 +40,7 @@ const ContextApp: React.FC = () => {
>
{!loggedIn && admin === '' ? (
<EntryView />
) : admin !== '' && read === '' && sessionAdmin === '' ? (
) : admin !== '' && viewOnly === '' && sessionAdmin === '' ? (
<EntryView session={true} />
) : (
<>

154
src/components/auth/BTCLogin.tsx
View file

@ -1,154 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useAccount } from '../../context/AccountContext';
import { getConfigLnd, saveUserAuth, getAuthString } from '../../utils/auth';
import CryptoJS from 'crypto-js';
import { PasswordInput } from './Password';
import { toast } from 'react-toastify';
import { useLazyQuery } from '@apollo/react-hooks';
import { GET_CAN_CONNECT } from '../../graphql/query';
import { getErrorContent } from '../../utils/error';
import { useHistory } from 'react-router-dom';
import { ColorButton } from '../buttons/colorButton/ColorButton';
import { Input } from 'components/input/Input';
import { Line, StyledTitle } from './Auth.styled';
import { ChevronLeft } from 'components/generic/Icons';
import { RiskCheckboxAndConfirm } from './Checkboxes';
interface AuthProps {
available: number;
withRedirect?: boolean;
callback?: () => void;
goBack?: () => void;
}
export const BTCLoginForm = ({
available,
callback,
withRedirect,
goBack,
}: AuthProps) => {
const { setAccount } = useAccount();
const { push } = useHistory();
const [isName, setName] = useState('');
const [isJson, setJson] = useState('');
const [checked, setChecked] = useState(false);
const [hasInfo, setHasInfo] = useState(false);
const [isPass, setPass] = useState('');
const [tryToConnect, { data, loading }] = useLazyQuery(GET_CAN_CONNECT, {
onError: error => {
setHasInfo(false);
toast.error(getErrorContent(error));
},
});
useEffect(() => {
if (!loading && data && data.getNodeInfo && data.getNodeInfo.alias) {
const { cert, macaroon, readMacaroon, host } = getConfigLnd(isJson);
if (!host) {
toast.error('Invalid connection credentials');
return;
}
const encryptedAdmin =
macaroon && isPass !== ''
? CryptoJS.AES.encrypt(macaroon, isPass).toString()
: undefined;
saveUserAuth({
available,
name: isName,
host,
admin: encryptedAdmin,
read: readMacaroon,
cert,
});
setAccount({
loggedIn: true,
host,
admin: macaroon,
read: readMacaroon,
cert,
});
toast.success('Connected!');
callback && callback();
withRedirect && push('/');
}
}, [
data,
loading,
available,
callback,
isJson,
isName,
isPass,
setAccount,
withRedirect,
push,
]);
const handleClick = () => {
try {
JSON.parse(isJson);
setHasInfo(true);
} catch (error) {
toast.error('Invalid JSON Object');
}
};
const handleConnect = () => {
const { cert, readMacaroon, host } = getConfigLnd(isJson);
if (!host) {
toast.error('Invalid connection credentials');
return;
}
tryToConnect({
variables: { auth: getAuthString(host, readMacaroon, cert) },
});
};
const renderContent = () => {
const canConnect = isJson !== '' && !!available && checked;
return (
<>
{goBack && (
<ColorButton onClick={goBack}>
<ChevronLeft />
</ColorButton>
)}
<Line>
<StyledTitle>Name:</StyledTitle>
<Input onChange={e => setName(e.target.value)} />
</Line>
<Line>
<StyledTitle>BTCPayServer Connect JSON:</StyledTitle>
<Input onChange={e => setJson(e.target.value)} />
</Line>
<RiskCheckboxAndConfirm
disabled={!canConnect}
handleClick={handleClick}
checked={checked}
onChange={setChecked}
/>
</>
);
};
return hasInfo ? (
<PasswordInput
isPass={isPass}
setPass={setPass}
callback={handleConnect}
loading={loading}
/>
) : (
renderContent()
);
};

147
src/components/auth/ConnectLogin.tsx
View file

@ -1,147 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useAccount } from '../../context/AccountContext';
import {
getAuthLnd,
getBase64CertfromDerFormat,
saveUserAuth,
getAuthString,
saveSessionAuth,
} from '../../utils/auth';
import { PasswordInput } from './Password';
import CryptoJS from 'crypto-js';
import { useLazyQuery } from '@apollo/react-hooks';
import { GET_CAN_CONNECT } from '../../graphql/query';
import { toast } from 'react-toastify';
import { getErrorContent } from '../../utils/error';
import { useHistory } from 'react-router-dom';
import { ColorButton } from '../buttons/colorButton/ColorButton';
import { Input } from 'components/input/Input';
import { Line, StyledTitle } from './Auth.styled';
import { ChevronLeft } from 'components/generic/Icons';
import { RiskCheckboxAndConfirm } from './Checkboxes';
interface AuthProps {
available: number;
withRedirect?: boolean;
callback?: () => void;
goBack?: () => void;
}
export const ConnectLoginForm = ({
available,
callback,
withRedirect,
goBack,
}: AuthProps) => {
const { setAccount } = useAccount();
const { push } = useHistory();
const [isName, setName] = useState('');
const [isUrl, setUrl] = useState('');
const [checked, setChecked] = useState(false);
const [hasInfo, setHasInfo] = useState(false);
const [isPass, setPass] = useState('');
const [tryToConnect, { data, loading }] = useLazyQuery(GET_CAN_CONNECT, {
onError: error => {
setHasInfo(false);
toast.error(getErrorContent(error));
},
});
useEffect(() => {
if (!loading && data && data.getNodeInfo && data.getNodeInfo.alias) {
const { cert, macaroon, socket } = getAuthLnd(isUrl);
const base64Cert = getBase64CertfromDerFormat(cert) || '';
const encryptedAdmin = CryptoJS.AES.encrypt(
macaroon,
isPass,
).toString();
saveUserAuth({
available,
name: isName,
host: socket,
admin: encryptedAdmin,
cert: base64Cert,
});
saveSessionAuth(macaroon);
setAccount({
loggedIn: true,
host: socket,
admin: encryptedAdmin,
sessionAdmin: macaroon,
read: macaroon,
cert: base64Cert,
});
toast.success('Connected!');
callback && callback();
withRedirect && push('/');
}
}, [
data,
loading,
available,
callback,
isName,
isPass,
isUrl,
setAccount,
withRedirect,
push,
]);
const handleConnect = () => {
const { cert, macaroon, socket } = getAuthLnd(isUrl);
const base64Cert = getBase64CertfromDerFormat(cert) || '';
tryToConnect({
variables: { auth: getAuthString(socket, macaroon, base64Cert) },
});
};
const renderContent = () => {
const canConnect = isUrl !== '' && !!available && checked;
return (
<>
{goBack && (
<ColorButton onClick={goBack}>
<ChevronLeft />
</ColorButton>
)}
<Line>
<StyledTitle>Name:</StyledTitle>
<Input onChange={e => setName(e.target.value)} />
</Line>
<Line>
<StyledTitle>LND Connect Url:</StyledTitle>
<Input onChange={e => setUrl(e.target.value)} />
</Line>
<RiskCheckboxAndConfirm
disabled={!canConnect}
handleClick={() => setHasInfo(true)}
checked={checked}
onChange={setChecked}
/>
</>
);
};
return hasInfo ? (
<PasswordInput
isPass={isPass}
setPass={setPass}
callback={handleConnect}
loading={loading}
/>
) : (
renderContent()
);
};

219
src/components/auth/NormalLogin.tsx
View file

@ -1,219 +0,0 @@
import React, { useState, useEffect } from 'react';
import { useAccount } from '../../context/AccountContext';
import { saveUserAuth, getAuthString, saveSessionAuth } from '../../utils/auth';
import CryptoJS from 'crypto-js';
import { PasswordInput } from './Password';
import { useLazyQuery } from '@apollo/react-hooks';
import { GET_CAN_CONNECT } from '../../graphql/query';
import { getErrorContent } from '../../utils/error';
import { toast } from 'react-toastify';
import { useHistory } from 'react-router-dom';
import { ColorButton } from '../buttons/colorButton/ColorButton';
import { Input } from 'components/input/Input';
import { Line, StyledTitle } from './Auth.styled';
import { SingleLine, Sub4Title } from 'components/generic/Styled';
import {
MultiButton,
SingleButton,
} from 'components/buttons/multiButton/MultiButton';
import { ChevronLeft } from 'components/generic/Icons';
import { RiskCheckboxAndConfirm } from './Checkboxes';
interface AuthProps {
available: number;
callback?: () => void;
withRedirect?: boolean;
goBack?: () => void;
}
export const LoginForm = ({
available,
callback,
withRedirect,
goBack,
}: AuthProps) => {
const { setAccount } = useAccount();
const { push } = useHistory();
const [viewOnly, setViewOnly] = useState(true);
const [checked, setChecked] = useState(false);
const [isName, setName] = useState('');
const [isHost, setHost] = useState('');
const [isAdmin, setAdmin] = useState('');
const [isRead, setRead] = useState('');
const [isCert, setCert] = useState('');
const [hasInfo, setHasInfo] = useState(false);
const [isPass, setPass] = useState('');
const [tryToConnect, { data, loading }] = useLazyQuery(GET_CAN_CONNECT, {
onError: error => {
setHasInfo(false);
toast.error(getErrorContent(error));
},
});
const handleClick = () => {
if (isAdmin !== '') {
setHasInfo(true);
} else {
handleConnect();
}
};
useEffect(() => {
if (!loading && data && data.getNodeInfo && data.getNodeInfo.alias) {
const admin = isAdmin;
const read = isRead;
const cert = isCert;
const encryptedAdmin =
admin && isPass !== ''
? CryptoJS.AES.encrypt(admin, isPass).toString()
: undefined;
saveUserAuth({
available,
name: isName,
host: isHost,
admin: encryptedAdmin,
read,
cert,
});
saveSessionAuth(admin);
setAccount({
loggedIn: true,
name: isName,
host: isHost,
admin: encryptedAdmin,
...(read === '' && { sessionAdmin: admin }),
read,
cert,
});
toast.success('Connected!');
callback && callback();
withRedirect && push('/');
}
}, [
data,
loading,
available,
callback,
isAdmin,
isCert,
isHost,
isName,
isPass,
isRead,
setAccount,
withRedirect,
push,
]);
const handleConnect = () => {
const admin = isAdmin;
const read = isRead;
const cert = isCert;
const correctMacaroon = read ? read : admin;
tryToConnect({
variables: {
auth: getAuthString(isHost, correctMacaroon, cert),
},
});
};
const renderContent = () => {
const canConnect =
isName !== '' &&
isHost !== '' &&
(isAdmin !== '' || isRead !== '') &&
!!available &&
checked;
return (
<>
<SingleLine>
{goBack && (
<ColorButton onClick={goBack}>
<ChevronLeft />
</ColorButton>
)}
<Sub4Title>Type of Account:</Sub4Title>
<MultiButton>
<SingleButton
selected={viewOnly}
onClick={() => setViewOnly(true)}
>
ViewOnly
</SingleButton>
<SingleButton
selected={!viewOnly}
onClick={() => setViewOnly(false)}
>
Admin
</SingleButton>
</MultiButton>
</SingleLine>
<Line>
<StyledTitle>Name:</StyledTitle>
<Input
placeholder={'Name for this node'}
onChange={e => setName(e.target.value)}
/>
</Line>
<Line>
<StyledTitle>Host:</StyledTitle>
<Input
placeholder={'Url and port (e.g.: www.node.com:443)'}
onChange={e => setHost(e.target.value)}
/>
</Line>
{!viewOnly && (
<Line>
<StyledTitle>Admin:</StyledTitle>
<Input
placeholder={'Base64 or HEX Admin macaroon'}
onChange={e => setAdmin(e.target.value)}
/>
</Line>
)}
<Line>
<StyledTitle>Readonly:</StyledTitle>
<Input
placeholder={'Base64 or HEX Readonly macaroon'}
onChange={e => setRead(e.target.value)}
/>
</Line>
<Line>
<StyledTitle>Certificate:</StyledTitle>
<Input
placeholder={'Base64 or HEX TLS Certificate'}
onChange={e => setCert(e.target.value)}
/>
</Line>
<RiskCheckboxAndConfirm
disabled={!canConnect}
handleClick={handleClick}
checked={checked}
onChange={setChecked}
/>
</>
);
};
return hasInfo ? (
<PasswordInput
isPass={isPass}
setPass={setPass}
callback={handleConnect}
loading={loading}
/>
) : (
renderContent()
);
};

44
src/components/auth/checks/AdminCheck.tsx Normal file
View file

@ -0,0 +1,44 @@
import React from 'react';
import { GET_CAN_ADMIN } from 'graphql/query';
import { useQuery } from '@apollo/react-hooks';
import { getAuthString } from 'utils/auth';
import { SingleLine, Sub4Title } from 'components/generic/Styled';
import ScaleLoader from 'react-spinners/ScaleLoader';
import { themeColors } from 'styles/Themes';
import { XSvg, Check } from 'components/generic/Icons';
type AdminProps = {
host: string;
admin: string;
cert: string;
setChecked: (state: boolean) => void;
};
export const AdminCheck = ({ host, admin, cert, setChecked }: AdminProps) => {
const { data, loading } = useQuery(GET_CAN_ADMIN, {
skip: !admin,
variables: { auth: getAuthString(host, admin, cert) },
onError: () => {
setChecked(false);
},
onCompleted: () => {
setChecked(true);
},
});
const content = () => {
if (loading) {
return <ScaleLoader height={20} color={themeColors.blue3} />;
} else if (data?.adminCheck) {
return <Check />;
}
return <XSvg />;
};
return (
<SingleLine>
<Sub4Title>Admin Macaroon</Sub4Title>
{content()}
</SingleLine>
);
};

150
src/components/auth/checks/ViewCheck.tsx Normal file
View file

@ -0,0 +1,150 @@
import React, { useState } from 'react';
import { useQuery } from '@apollo/react-hooks';
import { GET_CAN_CONNECT } from 'graphql/query';
import { getAuthString } from 'utils/auth';
import { SingleLine, Sub4Title, Separation } from 'components/generic/Styled';
import ScaleLoader from 'react-spinners/ScaleLoader';
import { themeColors } from 'styles/Themes';
import { Check, XSvg } from 'components/generic/Icons';
import { ColorButton } from 'components/buttons/colorButton/ColorButton';
import { AdminCheck } from './AdminCheck';
import { Text } from 'views/other/OtherViews.styled';
type ViewProps = {
host: string;
admin: string;
viewOnly: string;
cert: string;
adminChecked: boolean;
callback: () => void;
setAdminChecked: (state: boolean) => void;
handleConnect: () => void;
};
export const ViewCheck = ({
host,
admin,
viewOnly,
cert,
adminChecked,
setAdminChecked,
handleConnect,
callback,
}: ViewProps) => {
const [confirmed, setConfirmed] = useState(false);
const { data, loading } = useQuery(GET_CAN_CONNECT, {
variables: { auth: getAuthString(host, viewOnly ?? admin, cert) },
onCompleted: () => setConfirmed(true),
onError: () => setConfirmed(false),
});
const content = () => {
if (loading) {
return <ScaleLoader height={20} color={themeColors.blue3} />;
} else if (data?.getNodeInfo.alias && viewOnly) {
return <Check />;
}
return <XSvg />;
};
const renderInfo = () => {
if (!loading && data && data.getNodeInfo) {
return (
<>
<SingleLine>
<Sub4Title>Alias</Sub4Title>
<Sub4Title>{data.getNodeInfo.alias}</Sub4Title>
</SingleLine>
<SingleLine>
<Sub4Title>Synced To Chain</Sub4Title>
<Sub4Title>
{data.getNodeInfo.is_synced_to_chain ? 'Yes' : 'No'}
</Sub4Title>
</SingleLine>
<SingleLine>
<Sub4Title>Version</Sub4Title>
<Sub4Title>
{data.getNodeInfo.version.split(' ')[0]}
</Sub4Title>
</SingleLine>
<SingleLine>
<Sub4Title>Active Channels</Sub4Title>
<Sub4Title>
{data.getNodeInfo.active_channels_count}
</Sub4Title>
</SingleLine>
<SingleLine>
<Sub4Title>Pending Channels</Sub4Title>
<Sub4Title>
{data.getNodeInfo.pending_channels_count}
</Sub4Title>
</SingleLine>
<SingleLine>
<Sub4Title>Closed Channels</Sub4Title>
<Sub4Title>
{data.getNodeInfo.closed_channels_count}
</Sub4Title>
</SingleLine>
<Separation />
</>
);
}
return null;
};
const renderTitle = () => {
if (!confirmed) {
return 'Go Back';
} else if (adminChecked && !viewOnly && admin) {
return 'Connect (Admin-Only)';
} else if (!adminChecked && viewOnly) {
return 'Connect (View-Only)';
} else {
return 'Connect';
}
};
const renderButton = () => (
<ColorButton
fullWidth={true}
withMargin={'16px 0 0'}
disabled={loading}
loading={loading}
arrow={confirmed}
onClick={() => {
if (confirmed) {
handleConnect();
} else {
callback();
}
}}
>
{renderTitle()}
</ColorButton>
);
const renderText = () => (
<Text>
Failed to connect to node. Please verify the information provided.
</Text>
);
return (
<>
{renderInfo()}
{!confirmed && !loading && renderText()}
<SingleLine>
<Sub4Title>View-Only Macaroon</Sub4Title>
{content()}
</SingleLine>
<AdminCheck
host={host}
admin={admin}
cert={cert}
setChecked={setAdminChecked}
/>
{renderButton()}
</>
);
};

137
src/components/auth/index.tsx Normal file
View file

@ -0,0 +1,137 @@
import React, { useState } from 'react';
import { getNextAvailable } from 'utils/storage';
import { LoginForm } from './views/NormalLogin';
import { ConnectLoginForm } from './views/ConnectLogin';
import { BTCLoginForm } from './views/BTCLogin';
import { ViewCheck } from './checks/ViewCheck';
import CryptoJS from 'crypto-js';
import { useAccount } from 'context/AccountContext';
import { useHistory } from 'react-router-dom';
import { saveUserAuth } from 'utils/auth';
import { PasswordInput } from './views/Password';
import { useConnectionDispatch } from 'context/ConnectionContext';
import { useStatusDispatch } from 'context/StatusContext';
type AuthProps = {
type: string;
status: string;
withRedirect?: boolean;
callback: () => void;
setStatus: (state: string) => void;
};
export const Auth = ({
type,
status,
withRedirect,
callback,
setStatus,
}: AuthProps) => {
const next = getNextAvailable();
const { changeAccount } = useAccount();
const { push } = useHistory();
const dispatch = useConnectionDispatch();
const dispatchState = useStatusDispatch();
const [name, setName] = useState();
const [host, setHost] = useState();
const [admin, setAdmin] = useState();
const [viewOnly, setViewOnly] = useState();
const [cert, setCert] = useState();
const [password, setPassword] = useState();
const [adminChecked, setAdminChecked] = useState(false);
const handleSet = ({
name,
host,
admin,
viewOnly,
cert,
}: {
name?: string;
host?: string;
admin?: string;
viewOnly?: string;
cert?: string;
}) => {
name && setName(name);
host && setHost(host);
admin && setAdmin(admin);
viewOnly && setViewOnly(viewOnly);
cert && setCert(cert);
setStatus('confirmNode');
};
const handleSave = () => {
const encryptedAdmin =
admin && password
? CryptoJS.AES.encrypt(admin, password).toString()
: undefined;
saveUserAuth({
available: next,
name,
host,
admin: encryptedAdmin,
viewOnly,
cert,
});
dispatch({ type: 'disconnected' });
dispatchState({ type: 'disconnected' });
changeAccount(next);
withRedirect && push('/');
};
const handleConnect = () => {
if (adminChecked) {
setStatus('password');
} else {
handleSave();
}
};
const renderView = () => {
switch (type) {
case 'login':
return <LoginForm handleSet={handleSet} available={next} />;
case 'connect':
return (
<ConnectLoginForm handleSet={handleSet} available={next} />
);
default:
return <BTCLoginForm handleSet={handleSet} available={next} />;
}
};
return (
<>
{status === 'none' && renderView()}
{status === 'confirmNode' && (
<ViewCheck
host={host}
admin={admin}
viewOnly={viewOnly}
cert={cert}
adminChecked={adminChecked}
setAdminChecked={setAdminChecked}
handleConnect={handleConnect}
callback={callback}
/>
)}
{status === 'password' && (
<PasswordInput
isPass={password}
setPass={setPassword}
callback={handleSave}
loading={false}
/>
)}
</>
);
};

59
src/components/auth/views/BTCLogin.tsx Normal file
View file

@ -0,0 +1,59 @@
import React, { useState } from 'react';
import { getConfigLnd } from '../../../utils/auth';
import { toast } from 'react-toastify';
import { Input } from 'components/input/Input';
import { Line, StyledTitle } from '../Auth.styled';
import { RiskCheckboxAndConfirm } from './Checkboxes';
interface AuthProps {
available: number;
handleSet?: ({
name,
host,
admin,
viewOnly,
cert,
}: {
name?: string;
host?: string;
admin?: string;
viewOnly?: string;
cert?: string;
}) => void;
}
export const BTCLoginForm = ({ available, handleSet }: AuthProps) => {
const [name, setName] = useState('');
const [json, setJson] = useState('');
const [checked, setChecked] = useState(false);
const handleClick = () => {
try {
JSON.parse(json);
const { cert, admin, viewOnly, host } = getConfigLnd(json);
handleSet && handleSet({ name, host, admin, viewOnly, cert });
} catch (error) {
toast.error('Invalid JSON Object');
}
};
const canConnect = json !== '' && !!available && checked;
return (
<>
<Line>
<StyledTitle>Name:</StyledTitle>
<Input onChange={e => setName(e.target.value)} />
</Line>
<Line>
<StyledTitle>BTCPayServer Connect JSON:</StyledTitle>
<Input onChange={e => setJson(e.target.value)} />
</Line>
<RiskCheckboxAndConfirm
disabled={!canConnect}
handleClick={handleClick}
checked={checked}
onChange={setChecked}
/>
</>
);
};

4
src/components/auth/Checkboxes.tsx → src/components/auth/views/Checkboxes.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import { Checkbox } from 'components/checkbox/Checkbox';
import { CheckboxText, StyledContainer, FixedWidth } from './Auth.styled';
import { CheckboxText, StyledContainer, FixedWidth } from '../Auth.styled';
import { AlertCircle } from 'components/generic/Icons';
import { fontColors } from 'styles/Themes';
import { ColorButton } from 'components/buttons/colorButton/ColorButton';
@ -19,7 +19,6 @@ export const RiskCheckboxAndConfirm = ({
onChange,
}: CheckboxProps) => (
<>
<WarningBox />
<Checkbox checked={checked} onChange={onChange}>
<CheckboxText>
I'm feeling reckless - I understand that Lightning, LND and
@ -36,6 +35,7 @@ export const RiskCheckboxAndConfirm = ({
>
Connect
</ColorButton>
<WarningBox />
</>
);

62
src/components/auth/views/ConnectLogin.tsx Normal file
View file

@ -0,0 +1,62 @@
import React, { useState } from 'react';
import { getAuthLnd, getBase64CertfromDerFormat } from '../../../utils/auth';
import { Input } from 'components/input/Input';
import { Line, StyledTitle } from '../Auth.styled';
import { RiskCheckboxAndConfirm } from './Checkboxes';
interface AuthProps {
available: number;
handleSet?: ({
name,
host,
admin,
viewOnly,
cert,
}: {
name?: string;
host?: string;
admin?: string;
viewOnly?: string;
cert?: string;
}) => void;
}
export const ConnectLoginForm = ({ available, handleSet }: AuthProps) => {
const [name, setName] = useState('');
const [url, setUrl] = useState('');
const [checked, setChecked] = useState(false);
const handleClick = () => {
const { cert, macaroon, socket } = getAuthLnd(url);
const base64Cert = getBase64CertfromDerFormat(cert) || '';
handleSet &&
handleSet({
name,
host: socket,
admin: macaroon,
cert: base64Cert,
});
};
const canConnect = url !== '' && !!available && checked;
return (
<>
<Line>
<StyledTitle>Name:</StyledTitle>
<Input onChange={e => setName(e.target.value)} />
</Line>
<Line>
<StyledTitle>LND Connect Url:</StyledTitle>
<Input onChange={e => setUrl(e.target.value)} />
</Line>
<RiskCheckboxAndConfirm
disabled={!canConnect}
handleClick={handleClick}
checked={checked}
onChange={setChecked}
/>
</>
);
};

112
src/components/auth/views/NormalLogin.tsx Normal file
View file

@ -0,0 +1,112 @@
import React, { useState } from 'react';
import { Input } from 'components/input/Input';
import { Line, StyledTitle } from '../Auth.styled';
import { SingleLine, Sub4Title } from 'components/generic/Styled';
import {
MultiButton,
SingleButton,
} from 'components/buttons/multiButton/MultiButton';
import { RiskCheckboxAndConfirm } from './Checkboxes';
interface AuthProps {
available: number;
handleSet?: ({
name,
host,
admin,
viewOnly,
cert,
}: {
name?: string;
host?: string;
admin?: string;
viewOnly?: string;
cert?: string;
}) => void;
}
export const LoginForm = ({ available, handleSet }: AuthProps) => {
const [isViewOnly, setIsViewOnly] = useState(true);
const [checked, setChecked] = useState(false);
const [name, setName] = useState('');
const [host, setHost] = useState('');
const [admin, setAdmin] = useState('');
const [viewOnly, setRead] = useState('');
const [cert, setCert] = useState('');
const handleClick = () => {
handleSet && handleSet({ name, host, admin, viewOnly, cert });
};
const canConnect =
name !== '' &&
host !== '' &&
(admin !== '' || viewOnly !== '') &&
!!available &&
checked;
return (
<>
<SingleLine>
<Sub4Title>Type of Account:</Sub4Title>
<MultiButton>
<SingleButton
selected={isViewOnly}
onClick={() => setIsViewOnly(true)}
>
ViewOnly
</SingleButton>
<SingleButton
selected={!isViewOnly}
onClick={() => setIsViewOnly(false)}
>
Admin
</SingleButton>
</MultiButton>
</SingleLine>
<Line>
<StyledTitle>Name:</StyledTitle>
<Input
placeholder={'Name for this node (e.g.: My Awesome Node)'}
onChange={e => setName(e.target.value)}
/>
</Line>
<Line>
<StyledTitle>Host:</StyledTitle>
<Input
placeholder={'Url and port (e.g.: www.node.com:443)'}
onChange={e => setHost(e.target.value)}
/>
</Line>
{!isViewOnly && (
<Line>
<StyledTitle>Admin:</StyledTitle>
<Input
placeholder={'Base64 or HEX Admin macaroon'}
onChange={e => setAdmin(e.target.value)}
/>
</Line>
)}
<Line>
<StyledTitle>Readonly:</StyledTitle>
<Input
placeholder={'Base64 or HEX Readonly macaroon'}
onChange={e => setRead(e.target.value)}
/>
</Line>
<Line>
<StyledTitle>Certificate:</StyledTitle>
<Input
placeholder={'Base64 or HEX TLS Certificate'}
onChange={e => setCert(e.target.value)}
/>
</Line>
<RiskCheckboxAndConfirm
disabled={!canConnect}
handleClick={handleClick}
checked={checked}
onChange={setChecked}
/>
</>
);
};

10
src/components/auth/Password.tsx → src/components/auth/views/Password.tsx
View file

@ -1,11 +1,11 @@
import React from 'react';
import { Sub4Title, SubTitle } from '../generic/Styled';
import { Sub4Title, SubTitle } from '../../generic/Styled';
import zxcvbn from 'zxcvbn';
import styled from 'styled-components';
import { progressBackground } from '../../styles/Themes';
import { ColorButton } from '../buttons/colorButton/ColorButton';
import { progressBackground } from '../../../styles/Themes';
import { ColorButton } from '../../buttons/colorButton/ColorButton';
import { Input } from 'components/input/Input';
import { Line } from './Auth.styled';
import { Line } from '../Auth.styled';
const Progress = styled.div`
width: 100%;
@ -49,7 +49,7 @@ interface PasswordProps {
}
export const PasswordInput = ({
isPass,
isPass = '',
setPass,
callback,
loading = false,

8
src/components/connectionCheck/ConnectionCheck.tsx
View file

@ -11,8 +11,12 @@ export const ConnectionCheck = () => {
const { connected } = useConnectionState();
const dispatch = useConnectionDispatch();
const { loggedIn, host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { loggedIn, host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
useQuery(GET_CAN_CONNECT, {
variables: { auth },

11
src/components/statusCheck/StatusCheck.tsx
View file

@ -12,8 +12,12 @@ export const StatusCheck = () => {
const { connected } = useConnectionState();
const dispatch = useStatusDispatch();
const { loggedIn, host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { loggedIn, host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { data, loading, error, stopPolling } = useQuery(GET_NODE_INFO, {
variables: { auth },
@ -36,13 +40,14 @@ export const StatusCheck = () => {
getChannelBalance,
getNodeInfo,
} = data;
const { is_synced_to_chain, version } = getNodeInfo;
const { alias, is_synced_to_chain, version } = getNodeInfo;
const { confirmedBalance, pendingBalance } = getChannelBalance;
const versionNumber = version.split(' ');
const state = {
loading: false,
alias,
syncedToChain: is_synced_to_chain,
version: versionNumber[0],
chainBalance: getChainBalance,

25
src/context/AccountContext.tsx
View file

@ -8,7 +8,7 @@ interface ChangeProps {
host?: string;
admin?: string;
sessionAdmin?: string;
read?: string;
viewOnly?: string;
cert?: string;
}
@ -18,7 +18,7 @@ interface AccountProps {
host: string;
admin: string;
sessionAdmin: string;
read: string;
viewOnly: string;
cert: string;
setAccount: (newProps: ChangeProps) => void;
changeAccount: (account: number) => void;
@ -31,7 +31,7 @@ export const AccountContext = createContext<AccountProps>({
host: '',
admin: '',
sessionAdmin: '',
read: '',
viewOnly: '',
cert: '',
setAccount: () => {},
changeAccount: () => {},
@ -41,8 +41,8 @@ export const AccountContext = createContext<AccountProps>({
const AccountProvider = ({ children }: any) => {
const activeAccount = localStorage.getItem('account') || 'auth1';
const sessionAdmin = sessionStorage.getItem('session') || '';
const { name, host, admin, read, cert } = getAuthParams(activeAccount);
const loggedIn = host !== '' && (read !== '' || sessionAdmin !== '');
const { name, host, admin, viewOnly, cert } = getAuthParams(activeAccount);
const loggedIn = host !== '' && (viewOnly !== '' || sessionAdmin !== '');
const setAccount = ({
loggedIn,
@ -50,7 +50,7 @@ const AccountProvider = ({ children }: any) => {
host,
admin,
sessionAdmin,
read,
viewOnly,
cert,
}: ChangeProps) => {
updateAccount((prevState: any) => {
@ -61,7 +61,7 @@ const AccountProvider = ({ children }: any) => {
host,
admin,
sessionAdmin,
read,
viewOnly,
cert,
});
});
@ -82,8 +82,11 @@ const AccountProvider = ({ children }: any) => {
? account
: localStorage.getItem('account') || 'auth1';
const sessionAdmin = sessionStorage.getItem('session') || '';
const { name, host, admin, read, cert } = getAuthParams(activeAccount);
const loggedIn = host !== '' && (read !== '' || sessionAdmin !== '');
const { name, host, admin, viewOnly, cert } = getAuthParams(
activeAccount,
);
const loggedIn =
host !== '' && (viewOnly !== '' || sessionAdmin !== '');
updateAccount((prevState: any) => {
const newState = { ...prevState };
@ -93,7 +96,7 @@ const AccountProvider = ({ children }: any) => {
host,
admin,
sessionAdmin,
read,
viewOnly,
cert,
});
});
@ -105,7 +108,7 @@ const AccountProvider = ({ children }: any) => {
host,
admin,
sessionAdmin,
read,
viewOnly,
cert,
setAccount,
changeAccount,

2
src/context/StatusContext.tsx
View file

@ -2,6 +2,7 @@ import React, { createContext, useContext, useReducer } from 'react';
type State = {
loading: boolean;
alias: string;
syncedToChain: boolean;
version: string;
chainBalance: number;
@ -33,6 +34,7 @@ const stateReducer = (state: State, action: ActionType): State => {
const initialState = {
loading: true,
alias: '',
syncedToChain: false,
version: '',
chainBalance: 0,

14
src/graphql/query.ts
View file

@ -18,11 +18,25 @@ export const GET_NETWORK_INFO = gql`
export const GET_CAN_CONNECT = gql`
query GetNodeInfo($auth: authType!) {
getNodeInfo(auth: $auth) {
chains
color
active_channels_count
closed_channels_count
alias
is_synced_to_chain
peers_count
pending_channels_count
version
}
}
`;
export const GET_CAN_ADMIN = gql`
query AdminCheck($auth: authType!) {
adminCheck(auth: $auth)
}
`;
export const GET_NODE_INFO = gql`
query GetNodeInfo($auth: authType!) {
getNodeInfo(auth: $auth) {

8
src/sections/navigation/nodeInfo/NodeInfo.tsx
View file

@ -83,8 +83,12 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
channelPending,
} = useStatusState();
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data } = useQuery(GET_NODE_INFO, {
variables: { auth },

22
src/utils/auth.ts
View file

@ -6,7 +6,7 @@ interface BuildProps {
name?: string;
host: string;
admin?: string;
read?: string;
viewOnly?: string;
cert?: string;
}
@ -26,14 +26,14 @@ export const saveUserAuth = ({
name,
host,
admin,
read,
viewOnly,
cert,
}: BuildProps) => {
localStorage.setItem('account', `auth${available}`);
localStorage.setItem(`auth${available}-host`, host);
localStorage.setItem(`auth${available}-name`, name ? name : 'no name');
admin && localStorage.setItem(`auth${available}-admin`, admin);
read && localStorage.setItem(`auth${available}-read`, read);
viewOnly && localStorage.setItem(`auth${available}-read`, viewOnly);
cert && localStorage.setItem(`auth${available}-cert`, cert);
};
@ -54,14 +54,14 @@ export const getAuthParams = (available: string) => {
const host = localStorage.getItem(`${available}-host`) || '';
const name = localStorage.getItem(`${available}-name`) || '';
const admin = localStorage.getItem(`${available}-admin`) || '';
const read = localStorage.getItem(`${available}-read`) || '';
const viewOnly = localStorage.getItem(`${available}-read`) || '';
const cert = localStorage.getItem(`${available}-cert`) || '';
return {
host,
name,
admin,
read,
viewOnly,
cert,
};
};
@ -107,8 +107,8 @@ export const getBase64CertfromDerFormat = (base64: string) => {
const emptyObject = {
cert: undefined,
macaroon: undefined,
readMacaroon: undefined,
admin: undefined,
viewOnly: undefined,
host: undefined,
};
@ -119,15 +119,15 @@ export const getConfigLnd = (json: string) => {
if (config && config.length >= 1) {
const cert = config[0].certificateThumbprint || '';
const macaroon = config[0].adminMacaroon;
const readMacaroon = config[0].readonlyMacaroon;
const admin = config[0].adminMacaroon;
const viewOnly = config[0].readonlyMacaroon;
const host = config[0].host;
const port = config[0].port;
return {
cert,
macaroon,
readMacaroon,
admin,
viewOnly,
host: `${host}:${port}`,
};
}

8
src/views/backups/DownloadBackups.tsx
View file

@ -10,8 +10,12 @@ import { getErrorContent } from '../../utils/error';
import { ColorButton } from '../../components/buttons/colorButton/ColorButton';
export const DownloadBackups = () => {
const { name, host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { name, host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const [getBackups, { data, loading }] = useLazyQuery(GET_BACKUPS, {
variables: { auth },

8
src/views/backups/VerifyBackups.tsx
View file

@ -19,8 +19,12 @@ export const VerifyBackups = () => {
const [backupString, setBackupString] = useState<string>('');
const [isPasting, setIsPasting] = useState<boolean>(false);
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const [verifyBackup, { data, loading }] = useLazyQuery(VERIFY_BACKUPS, {
onError: error => toast.error(getErrorContent(error)),

9
src/views/balance/Balance.tsx
View file

@ -27,15 +27,18 @@ import { Text } from 'views/other/OtherViews.styled';
export const BalanceView = () => {
const { version } = useStatusState();
const { host, read, cert, sessionAdmin } = useAccount();
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const [outgoing, setOutgoing] = useState();
const [incoming, setIncoming] = useState();
const [amount, setAmount] = useState();
const [blocked, setBlocked] = useState(false);
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { loading, data } = useQuery(GET_CHANNELS, {
variables: { auth, active: true },
onError: error => toast.error(getErrorContent(error)),

10
src/views/chain/ChainTransactions.tsx
View file

@ -11,8 +11,12 @@ import { TransactionsCard } from './TransactionsCard';
export const ChainTransactions = () => {
const [indexOpen, setIndexOpen] = useState(0);
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data } = useQuery(GET_CHAIN_TRANSACTIONS, {
variables: { auth },
@ -23,8 +27,6 @@ export const ChainTransactions = () => {
return <LoadingCard title={'Chain Transactions'} />;
}
console.log(loading, data);
return (
<CardWithTitle>
<SubTitle>Chain Transactions</SubTitle>

8
src/views/channels/ChannelView.tsx
View file

@ -25,8 +25,12 @@ export const ChannelView = () => {
});
const { theme } = useSettings();
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { data } = useQuery(GET_CHANNEL_AMOUNT_INFO, {
variables: { auth },

8
src/views/channels/channels/Channels.tsx
View file

@ -12,8 +12,12 @@ import { LoadingCard } from '../../../components/loading/LoadingCard';
export const Channels = () => {
const [indexOpen, setIndexOpen] = useState(0);
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data } = useQuery(GET_CHANNELS, {
variables: { auth },

8
src/views/channels/closedChannels/ClosedChannels.tsx
View file

@ -12,8 +12,12 @@ import { LoadingCard } from '../../../components/loading/LoadingCard';
export const ClosedChannels = () => {
const [indexOpen, setIndexOpen] = useState(0);
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data } = useQuery(GET_CLOSED_CHANNELS, {
variables: { auth },

8
src/views/channels/pendingChannels/PendingChannels.tsx
View file

@ -12,8 +12,12 @@ import { LoadingCard } from '../../../components/loading/LoadingCard';
export const PendingChannels = () => {
const [indexOpen, setIndexOpen] = useState(0);
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data } = useQuery(GET_PENDING_CHANNELS, {
variables: { auth },

32
src/views/entry/login/Login.tsx
View file

@ -1,10 +1,6 @@
import React, { useState } from 'react';
import { Card, Separation } from '../../../components/generic/Styled';
import styled from 'styled-components';
import { LoginForm } from '../../../components/auth/NormalLogin';
import { ConnectLoginForm } from '../../../components/auth/ConnectLogin';
import { getNextAvailable } from '../../../utils/storage';
import { BTCLoginForm } from '../../../components/auth/BTCLogin';
import { Section } from 'components/section/Section';
import {
MultiButton,
@ -12,6 +8,7 @@ import {
} from 'components/buttons/multiButton/MultiButton';
import { Text } from 'views/other/OtherViews.styled';
import { Link } from 'components/link/Link';
import { Auth } from 'components/auth';
const ConnectTitle = styled.h1`
width: 100%;
@ -20,7 +17,7 @@ const ConnectTitle = styled.h1`
export const LoginView = () => {
const [isType, setIsType] = useState('login');
const next = getNextAvailable();
const [status, setStatus] = useState('none');
const renderButtons = () => (
<>
@ -47,19 +44,6 @@ export const LoginView = () => {
</>
);
const renderView = () => {
switch (isType) {
case 'login':
return <LoginForm available={next} withRedirect={true} />;
case 'connect':
return (
<ConnectLoginForm available={next} withRedirect={true} />
);
default:
return <BTCLoginForm available={next} withRedirect={true} />;
}
};
const renderText = () => {
switch (isType) {
case 'login':
@ -111,9 +95,15 @@ export const LoginView = () => {
<Section padding={'0 0 60px'}>
<ConnectTitle>{'How do you want to connect?'}</ConnectTitle>
<Card bottom={'0'}>
{renderButtons()}
{renderText()}
{renderView()}
{status === 'none' && renderButtons()}
{status === 'none' && renderText()}
<Auth
type={isType}
status={status}
setStatus={setStatus}
withRedirect={true}
callback={() => setStatus('none')}
/>
</Card>
</Section>
);

8
src/views/fees/Fees.tsx
View file

@ -31,8 +31,12 @@ export const FeesView = () => {
const [baseFee, setBaseFee] = useState(0);
const [feeRate, setFeeRate] = useState(0);
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data } = useQuery(CHANNEL_FEES, {
variables: { auth },

8
src/views/forwards/ForwardList.tsx
View file

@ -31,8 +31,12 @@ export const ForwardsList = () => {
const [indexOpen, setIndexOpen] = useState(0);
const { theme } = useSettings();
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data } = useQuery(GET_FORWARDS, {
variables: { auth, time },

8
src/views/home/account/pay/pay.tsx
View file

@ -26,8 +26,12 @@ export const PayCard = ({ setOpen }: { setOpen: () => void }) => {
const [request, setRequest] = useState('');
const [modalOpen, setModalOpen] = useState(false);
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const [makePayment, { loading }] = useMutation(PAY_INVOICE, {
onError: error => toast.error(getErrorContent(error)),

8
src/views/home/connect/Connect.tsx
View file

@ -57,8 +57,12 @@ const TextPadding = styled.span`
const sectionColor = '#fa541c';
export const ConnectCard = () => {
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data } = useQuery(GET_CONNECT_INFO, {
variables: { auth },

8
src/views/home/networkInfo/NetworkInfo.tsx
View file

@ -66,8 +66,12 @@ const Padding = styled.span`
`;
export const NetworkInfo = () => {
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data } = useQuery(GET_NETWORK_INFO, {
variables: { auth },

8
src/views/home/quickActions/decode/Decode.tsx
View file

@ -23,8 +23,12 @@ export const DecodeCard = ({ color }: { color: string }) => {
const { width } = useSize();
const [request, setRequest] = useState('');
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const [decode, { data, loading }] = useMutation(DECODE_REQUEST, {
onError: error => toast.error(getErrorContent(error)),

8
src/views/home/reports/flow/index.tsx
View file

@ -81,8 +81,12 @@ export const FlowBox = () => {
const [isTime, setIsTime] = useState<string>('month');
const [isType, setIsType] = useState<string>('amount');
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { data, loading } = useQuery(GET_IN_OUT, {
variables: { time: isTime, auth },
onError: error => toast.error(getErrorContent(error)),

8
src/views/home/reports/forwardReport/ForwardChannelReport.tsx
View file

@ -74,8 +74,12 @@ export const ForwardChannelsReport = ({ isTime, isType, color }: Props) => {
const priceContext = usePriceState();
const format = getPrice(currency, priceContext);
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { data, loading } = useQuery(GET_FORWARD_CHANNELS_REPORT, {
variables: { time: isTime, order: isType, auth, type },

8
src/views/home/reports/forwardReport/ForwardReport.tsx
View file

@ -40,8 +40,12 @@ export const ForwardReport = ({ isTime, isType }: Props) => {
const priceContext = usePriceState();
const format = getPrice(currency, priceContext);
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { data, loading } = useQuery(GET_FORWARD_REPORT, {
variables: { time: isTime, auth },

8
src/views/home/reports/liquidReport/LiquidReport.tsx
View file

@ -29,8 +29,12 @@ import { usePriceState } from 'context/PriceContext';
export const LiquidReport = () => {
const { width } = useSize();
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { theme, currency } = useSettings();
const priceContext = usePriceState();

42
src/views/settings/Account.tsx
View file

@ -7,9 +7,6 @@ import {
Sub4Title,
Separation,
} from '../../components/generic/Styled';
import { LoginForm } from '../../components/auth/NormalLogin';
import { ConnectLoginForm } from '../../components/auth/ConnectLogin';
import { BTCLoginForm } from '../../components/auth/BTCLogin';
import { SettingsLine } from './Settings';
import { useAccount } from '../../context/AccountContext';
import { getNextAvailable, getStorageSaved } from '../../utils/storage';
@ -22,8 +19,11 @@ import {
import { useHistory } from 'react-router-dom';
import { useConnectionDispatch } from 'context/ConnectionContext';
import { useStatusDispatch } from 'context/StatusContext';
import { Auth } from 'components/auth';
export const AccountSettings = () => {
const [status, setStatus] = useState('none');
const { push } = useHistory();
const { name, changeAccount } = useAccount();
@ -35,12 +35,6 @@ export const AccountSettings = () => {
const next = getNextAvailable();
const handleConnected = () => {
dispatch({ type: 'disconnected' });
dispatchState({ type: 'disconnected' });
setWillAdd(false);
};
const renderButtons = () => (
<SingleLine>
<Sub4Title>Connection Type:</Sub4Title>
@ -111,28 +105,14 @@ export const AccountSettings = () => {
{willAdd && (
<>
<Separation />
{renderButtons()}
{isType === 'login' && (
<LoginForm
available={next}
callback={handleConnected}
withRedirect={true}
/>
)}
{isType === 'connect' && (
<ConnectLoginForm
available={next}
callback={handleConnected}
withRedirect={true}
/>
)}
{isType === 'btcpay' && (
<BTCLoginForm
available={next}
callback={handleConnected}
withRedirect={true}
/>
)}
{status === 'none' && renderButtons()}
<Auth
type={isType}
status={status}
setStatus={setStatus}
withRedirect={true}
callback={() => setStatus('none')}
/>
</>
)}
</Card>

4
src/views/settings/Current.tsx
View file

@ -23,7 +23,7 @@ const CurrentField = styled.textarea`
`;
export const CurrentSettings = () => {
const { name, host, admin, read, cert } = useAccount();
const { name, host, admin, viewOnly, cert } = useAccount();
const renderField = (
title: string,
@ -49,7 +49,7 @@ export const CurrentSettings = () => {
{renderField('Name:', name, 1)}
{renderField('Host:', host, 1)}
{renderField('AES-256 Encrypted Admin Macaroon:', admin)}
{renderField('Read-only Macaroon:', read)}
{renderField('Read-only Macaroon:', viewOnly)}
{renderField('Certificate:', cert)}
</Card>
</CardWithTitle>

8
src/views/transactions/TransactionList.tsx
View file

@ -20,8 +20,12 @@ export const TransactionList = () => {
const [fetching, setFetching] = useState(false);
const { theme } = useSettings();
const { host, read, cert, sessionAdmin } = useAccount();
const auth = getAuthString(host, read !== '' ? read : sessionAdmin, cert);
const { host, viewOnly, cert, sessionAdmin } = useAccount();
const auth = getAuthString(
host,
viewOnly !== '' ? viewOnly : sessionAdmin,
cert,
);
const { loading, data, fetchMore } = useQuery(GET_RESUME, {
variables: { auth, token: '' },