chore: improve login ux

apotdevin · Apr 17, 2020 · b9f63c1 · b9f63c1
1 parent 1713ca2
commit b9f63c1
Show file tree

Hide file tree

Showing 13 changed files with 290 additions and 156 deletions.
diff --git a/next.config.js b/next.config.js
@@ -17,5 +17,6 @@ module.exports = withBundleAnalyzer({
     apiBaseUrl: `${process.env.API_BASE_URL || ''}/api/v1`,
     basePath: process.env.BASE_PATH || '',
     npmVersion: process.env.npm_package_version || '0.0.0',
+    trustNeeded: process.env.TRUST || false,
   },
 });
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -14,20 +14,25 @@ import { BitcoinFees } from '../src/components/bitcoinInfo/BitcoinFees';
 import { BitcoinPrice } from '../src/components/bitcoinInfo/BitcoinPrice';
 import { GridWrapper } from '../src/components/gridWrapper/GridWrapper';
 import { useRouter } from 'next/router';
-import { useConnectionState } from '../src/context/ConnectionContext';
+import {
+  useConnectionState,
+  useConnectionDispatch,
+} from '../src/context/ConnectionContext';
 import {
   LoadingView,
   ErrorView,
 } from '../src/components/stateViews/StateCards';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Head from 'next/head';
+import { PageWrapper, HeaderBodyWrapper } from '../src/layouts/Layout.styled';
 
 toast.configure({ draggable: false });
 
 const withoutGrid = ['/', '/login', '/faq', '/privacy', '/terms'];
 
 const Wrapper: React.FC = ({ children }) => {
+  const dispatch = useConnectionDispatch();
   const { theme } = useSettings();
   const { loggedIn } = useAccount();
   const { pathname } = useRouter();
@@ -36,7 +41,10 @@ const Wrapper: React.FC = ({ children }) => {
   const isInArray = withoutGrid.includes(pathname);
 
   const renderContent = () => {
-    if (loading || error) {
+    if (error && pathname === '/') {
+      dispatch({ type: 'disconnected' });
+    }
+    if ((loading || error) && pathname !== '/') {
       return (
         <GridWrapper>{loading ? <LoadingView /> : <ErrorView />}</GridWrapper>
       );
@@ -56,9 +64,13 @@ const Wrapper: React.FC = ({ children }) => {
       <ModalProvider backgroundComponent={BaseModalBackground}>
         <GlobalStyles />
         {loggedIn && renderGetters()}
-        <Header />
-        {renderContent()}
-        <Footer />
+        <PageWrapper>
+          <HeaderBodyWrapper>
+            <Header />
+            {renderContent()}
+          </HeaderBodyWrapper>
+          <Footer />
+        </PageWrapper>
       </ModalProvider>
     </ThemeProvider>
   );

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,10 +1,10 @@
-// import App from 'next/app';
 import React from 'react';
 import { useAccount } from '../src/context/AccountContext';
 import { SessionLogin } from '../src/views/login/SessionLogin';
 import { useRouter } from 'next/router';
 import { HomePageView } from '../src/views/homepage/HomePage';
 import { appendBasePath } from '../src/utils/basePath';
+import { LoadingView } from '../src/components/loading/LoadingView';
 
 const ContextApp: React.FC = () => {
   const { push } = useRouter();
@@ -13,6 +13,7 @@ const ContextApp: React.FC = () => {
   if (loggedIn) {
     if (admin === '' || viewOnly !== '' || sessionAdmin !== '') {
       push(appendBasePath('/home'));
+      return <LoadingView />;
     }
   }
 

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -6,9 +6,35 @@ import {
   MultiButton,
   SingleButton,
 } from '../src/components/buttons/multiButton/MultiButton';
-import { Text } from '../src/components/typography/Styled';
 import { Link } from '../src/components/link/Link';
 import { Auth } from '../src/components/auth';
+import { mediaWidths, unSelectedNavButton } from '../src/styles/Themes';
+
+const Text = styled.p`
+  width: 100%;
+  text-align: center;
+`;
+
+const HelpBox = styled.div`
+  font-size: 14px;
+  color: ${unSelectedNavButton};
+  cursor: pointer;
+`;
+
+const Help = styled.div`
+  width: 100%;
+  text-align: right;
+  margin-bottom: -24px;
+
+  :hover {
+    font-weight: bold;
+  }
+
+  @media (${mediaWidths.mobile}) {
+    text-align: center;
+    margin-bottom: 0;
+  }
+`;
 
 const ConnectTitle = styled.h1`
   width: 100%;
@@ -18,31 +44,44 @@ const ConnectTitle = styled.h1`
 const LoginView = () => {
   const [isType, setIsType] = useState('login');
   const [status, setStatus] = useState('none');
+  const [help, setHelp] = useState(false);
 
   const renderButtons = () => (
     <>
       <MultiButton margin={'16px 0'}>
         <SingleButton
           selected={isType === 'login'}
-          onClick={() => setIsType('login')}
+          onClick={() => {
+            setHelp(false);
+            setIsType('login');
+          }}
         >
           Details
         </SingleButton>
         <SingleButton
           selected={isType === 'connect'}
-          onClick={() => setIsType('connect')}
+          onClick={() => {
+            setHelp(false);
+            setIsType('connect');
+          }}
         >
           LndConnect
         </SingleButton>
         <SingleButton
           selected={isType === 'btcpay'}
-          onClick={() => setIsType('btcpay')}
+          onClick={() => {
+            setHelp(false);
+            setIsType('btcpay');
+          }}
         >
           BTCPayServer
         </SingleButton>
         <SingleButton
           selected={isType === 'qrcode'}
-          onClick={() => setIsType('qrcode')}
+          onClick={() => {
+            setHelp(false);
+            setIsType('qrcode');
+          }}
         >
           QR Code
         </SingleButton>
@@ -92,12 +131,25 @@ const LoginView = () => {
     }
   };
 
+  const renderHelp = () => {
+    switch (isType) {
+      case 'btcpay':
+      case 'connect':
+        return <Help>Need Help?</Help>;
+      default:
+        return null;
+    }
+  };
+
   return (
     <Section padding={'0 0 60px'}>
       <ConnectTitle>{'How do you want to connect?'}</ConnectTitle>
       <Card bottom={'0'}>
         {status === 'none' && renderButtons()}
-        {status === 'none' && renderText()}
+        <HelpBox onClick={() => setHelp(prev => !prev)}>
+          {!help && renderHelp()}
+          {status === 'none' && help && renderText()}
+        </HelpBox>
         <Auth
           type={isType}
           status={status}

diff --git a/pages/transactions.tsx b/pages/transactions.tsx
@@ -22,6 +22,7 @@ const TransactionsView = () => {
   const { auth } = useAccount();
 
   const { loading, data, fetchMore } = useGetResumeQuery({
+    skip: !auth,
     variables: { auth, token: '' },
     onError: error => toast.error(getErrorContent(error)),
   });

diff --git a/src/components/auth/views/Checkboxes.tsx b/src/components/auth/views/Checkboxes.tsx
@@ -4,6 +4,10 @@ import { CheckboxText, StyledContainer, FixedWidth } from '../Auth.styled';
 import { AlertCircle } from '../../generic/Icons';
 import { fontColors } from '../../../styles/Themes';
 import { ColorButton } from '../../buttons/colorButton/ColorButton';
+import getConfig from 'next/config';
+
+const { publicRuntimeConfig } = getConfig();
+const { trustNeeded } = publicRuntimeConfig;
 
 type CheckboxProps = {
   handleClick: () => void;
@@ -21,8 +25,8 @@ export const RiskCheckboxAndConfirm = ({
   <>
     <Checkbox checked={checked} onChange={onChange}>
       <CheckboxText>
-        I'm feeling reckless - I understand that Lightning, LND and ThunderHub
-        are under constant development and that there is always a risk of losing
+        I'm feeling reckless. Lightning, LND and ThunderHub are under constant
+        development and I understand that there is always a risk of losing
         funds.
       </CheckboxText>
     </Checkbox>
@@ -40,6 +44,9 @@ export const RiskCheckboxAndConfirm = ({
 );
 
 export const WarningBox = () => {
+  if (!trustNeeded) {
+    return null;
+  }
   return (
     <StyledContainer>
       <FixedWidth>

diff --git a/src/components/connectionCheck/ConnectionCheck.tsx b/src/components/connectionCheck/ConnectionCheck.tsx
@@ -10,11 +10,11 @@ export const ConnectionCheck = () => {
   const { connected } = useConnectionState();
   const dispatch = useConnectionDispatch();
 
-  const { loggedIn, auth } = useAccount();
+  const { auth } = useAccount();
 
   const { data, loading } = useGetCanConnectQuery({
     variables: { auth },
-    skip: connected || !loggedIn || !auth,
+    skip: connected,
     onError: () => {
       dispatch({ type: 'error' });
     },

diff --git a/src/components/loading/LoadingView.tsx b/src/components/loading/LoadingView.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Section } from '../section/Section';
+import { Title } from '../typography/Styled';
+import { LoadingCard } from './LoadingCard';
+import styled from 'styled-components';
+import { textColor, mediaWidths } from '../../styles/Themes';
+
+const StyledTitle = styled(Title)`
+  font-size: 28px;
+  color: ${textColor};
+
+  @media (${mediaWidths.mobile}) {
+    font-size: 16px;
+  }
+`;
+
+export const LoadingView = () => (
+  <Section padding={'40px 0 60px'}>
+    <StyledTitle>Connecting to your node...</StyledTitle>
+    <Section padding={'16px 0 0'}>
+      <LoadingCard noCard={true} />
+    </Section>
+  </Section>
+);
diff --git a/src/layouts/Layout.styled.ts b/src/layouts/Layout.styled.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const PageWrapper = styled.div`
+  position: relative;
+  min-height: 100vh;
+`;
+
+export const HeaderBodyWrapper = styled.div`
+  padding-bottom: 250px;
+`;
diff --git a/src/layouts/footer/Footer.styled.tsx b/src/layouts/footer/Footer.styled.tsx
@@ -0,0 +1,87 @@
+import styled from 'styled-components';
+import { headerTextColor, fontColors, mediaWidths } from '../../styles/Themes';
+import { HomeButton } from '../../views/homepage/HomePage.styled';
+
+export const FooterWrapper = styled.div`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 250px;
+`;
+
+export const FooterStyle = styled.div`
+  padding: 40px 0 16px;
+  min-height: 250px;
+  color: ${headerTextColor};
+  display: flex;
+  justify-content: space-between;
+
+  @media (${mediaWidths.mobile}) {
+    flex-direction: column;
+    padding: 0 0 40px;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+export const SideFooter = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+
+  @media (${mediaWidths.mobile}) {
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+`;
+
+export const RightFooter = styled(SideFooter)`
+  justify-content: flex-start;
+  align-items: flex-end;
+  width: 80%;
+
+  @media (${mediaWidths.mobile}) {
+    margin-top: 32px;
+  }
+`;
+
+export const Title = styled.div`
+  font-weight: 800;
+  color: ${headerTextColor};
+`;
+
+export const SideText = styled.p`
+  font-size: 14px;
+  color: ${fontColors.grey7};
+
+  @media (${mediaWidths.mobile}) {
+    padding-right: 0;
+  }
+`;
+
+export const CopyrightText = styled(SideText)`
+  font-size: 12px;
+  color: ${fontColors.blue};
+`;
+
+export const StyledRouter = styled.div`
+  margin-top: 16px;
+
+  ${HomeButton} {
+    font-size: 14px;
+  }
+`;
+
+export const Line = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+`;
+
+export const Version = styled.div`
+  font-size: 12px;
+  margin-left: 8px;
+`;