auth: create AuthPage with password field

Author: jamaljsr

app/src/assets/images/logo.svg

@@ -1,6 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'store';
+import AuthPage from './auth/AuthPage';
 import HistoryPage from './history/HistoryPage';
 import LoopPage from './loop/LoopPage';
 import SettingsPage from './settings/SettingsPage';
@@ -9,12 +10,15 @@ const Pages: React.FC = () => {
   const { uiStore } = useStore();
 
   switch (uiStore.page) {
+    case 'loop':
+      return <LoopPage />;
     case 'history':
       return <HistoryPage />;
     case 'settings':
       return <SettingsPage />;
+    case 'auth':
     default:
-      return <LoopPage />;
+      return <AuthPage />;
   }
 };
 

app/src/components/Pages.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ReactComponent as LogoImage } from 'assets/images/logo.svg';
+import { usePrefixedTranslation } from 'hooks';
+import { useStore } from 'store';
+import { Button, HeaderOne, Input } from 'components/base';
+import { styled } from 'components/theme';
+
+const Styled = {
+  Wrapper: styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+  `,
+  Logo: styled(LogoImage)`
+    color: ${props => props.theme.colors.offWhite};
+    width: 80px;
+    height: 156px;
+    margin-bottom: 30px;
+  `,
+  Title: styled(HeaderOne)`
+    font-size: 75px;
+    margin-bottom: 30px;
+    text-transform: uppercase;
+  `,
+  Subtitle: styled.div`
+    width: 100%;
+    max-width: 500px;
+    margin-bottom: 80px;
+    text-align: center;
+  `,
+  Form: styled.form`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `,
+  Label: styled.label`
+    margin: 10px 0 80px;
+  `,
+  ErrMessage: styled.div`
+    width: 100%;
+    margin: 0 0 80px;
+    padding: 5px 0;
+    background-color: ${props => props.theme.colors.pink};
+    color: ${props => props.theme.colors.offWhite};
+    text-align: center;
+  `,
+  Submit: styled(Button)`
+    background-color: transparent;
+  `,
+};
+
+const AuthPage: React.FC = () => {
+  const { l } = usePrefixedTranslation('cmps.auth.AuthPage');
+  const { uiStore } = useStore();
+  const [pass, setPass] = useState('');
+  const [error, setError] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPass(e.target.value);
+    setError('');
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      if (!pass) throw new Error('oops, password is required');
+      // TODO: send password to backend to validate
+      uiStore.goToLoop();
+    } catch (e) {
+      setError(e.message);
+    }
+  };
+
+  const { Wrapper, Logo, Title, Subtitle, Form, Label, ErrMessage, Submit } = Styled;
+  return (
+    <Wrapper>
+      <Logo />
+      <Title>{l('title')}</Title>
+      <Subtitle>{l('subtitle')}</Subtitle>
+      <Form onSubmit={handleSubmit}>
+        <Input type="password" autoFocus value={pass} onChange={handleChange} />
+        {error ? <ErrMessage>{error}</ErrMessage> : <Label>{l('passLabel')}</Label>}
+        <Submit>{l('submitBtn')}</Submit>
+      </Form>
+    </Wrapper>
+  );
+};
+
+export default observer(AuthPage);

app/src/components/auth/AuthPage.tsx

@@ -5,10 +5,11 @@ import { styled } from 'components/theme';
 // Misc
 //
 
-export const Background = styled.div`
+export const Background = styled.div<{ gradient?: boolean }>`
   min-height: 100vh;
   color: ${props => props.theme.colors.white};
-  background-color: ${props => props.theme.colors.blue};
+  background: ${props =>
+    props.gradient ? props.theme.colors.gradient : props.theme.colors.blue};
   font-family: ${props => props.theme.fonts.open.regular};
   font-size: ${props => props.theme.sizes.m};
 `;
@@ -105,6 +106,24 @@ export const Button = styled.button<ButtonProps>`
   }
 `;
 
+export const Input = styled.input`
+  font-family: ${props => props.theme.fonts.work.light};
+  font-weight: 300;
+  font-size: ${props => props.theme.sizes.xxl};
+  color: ${props => props.theme.colors.offWhite};
+  background-color: transparent;
+  border-width: 0;
+  border-bottom: 3px solid ${props => props.theme.colors.offWhite};
+  padding: 5px;
+  text-align: center;
+
+  &:active,
+  &:focus {
+    outline: none;
+    background-color: ${props => props.theme.colors.overlay};
+  }
+`;
+
 //
 // Radio Button
 //

app/src/components/base/shared.tsx

@@ -5,7 +5,8 @@ interface HeaderProps {
 }
 
 export const HeaderOne = styled.h1`
-  font-family: ${props => props.theme.fonts.work.medium};
+  font-family: ${props => props.theme.fonts.work.light};
+  font-weight: 300;
   font-size: ${props => props.theme.sizes.xxl};
   line-height: 52px;
 `;

app/src/components/base/text.tsx

@@ -56,7 +56,11 @@ const Styled = {
   `,
 };
 
-const Layout: React.FC = ({ children }) => {
+const AuthLayout: React.FC = ({ children }) => (
+  <Background gradient>{children}</Background>
+);
+
+const StandardLayout: React.FC = observer(({ children }) => {
   const { settingsStore } = useStore();
 
   const { Container, Hamburger, Aside, Content } = Styled;
@@ -75,6 +79,16 @@ const Layout: React.FC = ({ children }) => {
       </Container>
     </Background>
   );
+});
+
+const Layout: React.FC = ({ children }) => {
+  const { uiStore } = useStore();
+
+  return uiStore.page === 'auth' ? (
+    <AuthLayout>{children}</AuthLayout>
+  ) : (
+    <StandardLayout>{children}</StandardLayout>
+  );
 };
 
 export default observer(Layout);

app/src/components/layout/Layout.tsx

@@ -38,6 +38,7 @@ export interface Theme {
     orange: string;
     purple: string;
     overlay: string;
+    gradient: string;
   };
 }
 
@@ -77,6 +78,7 @@ const theme: Theme = {
     orange: '#f66b1c',
     purple: '#57038d',
     overlay: 'rgba(245,245,245,0.04)',
+    gradient: 'linear-gradient(325.53deg, #252F4A 0%, #46547B 100%);',
   },
 };
 

app/src/components/theme.tsx

@@ -2,6 +2,10 @@
   "enums.BalanceMode.receive": "Receiving",
   "enums.BalanceMode.send": "Sending",
   "enums.BalanceMode.routing": "Routing",
+  "cmps.auth.AuthPage.title": "Shushtar",
+  "cmps.auth.AuthPage.subtitle": "A tool to help you more effectively and efficiently manage inbound and outbound liquidity on your Lightning node",
+  "cmps.auth.AuthPage.passLabel": "Enter your password in the field above",
+  "cmps.auth.AuthPage.submitBtn": "Submit",
   "cmps.common.Tile.maximizeTip": "Maximize",
   "cmps.common.PageHeader.historyTip": "Loop History",
   "cmps.common.PageHeader.exportTip": "Download CSV",
@@ -38,7 +42,7 @@
   "cmps.loop.swap.SwapProcessingStep.loadingMsg": "Configuring Loops",
   "cmps.loop.swap.SwapReviewStep.title": "Step 2 of 2",
   "cmps.loop.swap.SwapReviewStep.heading": "Review the quote",
-  "cmps.loop.swap.SwapReviewStep.description": "Confirm. the invoice total for increasing your inbound liquidity. If you'd like to make adjustments, click the back arrow above.",
+  "cmps.loop.swap.SwapReviewStep.description": "Confirm the invoice total for increasing your inbound liquidity. If you'd like to make adjustments, click the back arrow above.",
   "cmps.loop.swap.SwapReviewStep.amount": "{{type}} Amount",
   "cmps.loop.swap.SwapReviewStep.fees": "Fees",
   "cmps.loop.swap.SwapReviewStep.total": "Invoice Total",

app/src/i18n/locales/en-US.json

@@ -2,15 +2,15 @@ import { action, observable, toJS } from 'mobx';
 import { Alert } from 'types/state';
 import { Store } from 'store';
 
-type PageName = 'loop' | 'history' | 'settings';
+type PageName = 'auth' | 'loop' | 'history' | 'settings';
 
 type SettingName = 'general' | 'unit' | 'balance';
 
 export default class UiStore {
   private _store: Store;
 
   /** the current page being displayed */
-  @observable page: PageName = 'loop';
+  @observable page: PageName = 'auth';
   /** indicates if the Processing Loops section is displayed on the Loop page */
   @observable processingSwapsVisible = false;
   /** the selected setting on the Settings page */