chore(login): add description

This commit is contained in:
AP 2020-02-10 08:49:33 +01:00
parent 6db2b35304
commit 84853cf9c9

View file

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Card } from '../../../components/generic/Styled';
import { Card, Separation } from '../../../components/generic/Styled';
import styled from 'styled-components';
import { LoginForm } from '../../../components/auth/NormalLogin';
import { ConnectLoginForm } from '../../../components/auth/ConnectLogin';
@ -10,6 +10,8 @@ import {
MultiButton,
SingleButton,
} from 'components/buttons/multiButton/MultiButton';
import { Text } from 'views/other/OtherViews.styled';
import { Link } from 'components/link/Link';
const ConnectTitle = styled.h1`
width: 100%;
@ -44,20 +46,74 @@ export const LoginView = () => {
</MultiButton>
</>
);
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':
return null;
case 'connect':
return (
<>
<Separation />
<Text>
To connect via LNDConnect paste the LNDConnectUrl
down below.
{' Find the url format specification '}
<Link
href={
'https://github.com/LN-Zap/lndconnect/blob/master/lnd_connect_uri.md'
}
>
here.
</Link>
</Text>
<Separation />
</>
);
default:
return (
<>
<Separation />
<Text>
To connect with your BTCPayServer instance you need
the connection JSON that they provide.
</Text>
<Text>
To access this JSON in your BPS instance, go to:
</Text>
<Text>
Server Settings > Services > gRPC server > Show QR
Code > QR Code Information > Open Config file
</Text>
<Text>
Then copy the complete JSON and paste it below.
</Text>
<Separation />
</>
);
}
};
return (
<Section padding={'0 0 60px'}>
<ConnectTitle>{'How do you want to connect?'}</ConnectTitle>
<Card bottom={'0'}>
{renderButtons()}
{isType === 'login' && (
<LoginForm available={next} withRedirect={true} />
)}
{isType === 'connect' && (
<ConnectLoginForm available={next} withRedirect={true} />
)}
{isType === 'btcpay' && (
<BTCLoginForm available={next} withRedirect={true} />
)}
{renderText()}
{renderView()}
</Card>
</Section>
);