Skip to content

Commit 8b17818

Browse files
mdomaseviciusmdomasevicius
authored
Merge pull request #497 from mysteriumnetwork/features/clickboarding
ClickBoarding
2 parents 03033af + 476c8de commit 8b17818

File tree

22 files changed

+543
-170
lines changed

22 files changed

+543
-170
lines changed

‎src/Components/ConfirmationDialog/ConfirmationDialog.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import styled from 'styled-components'
88
import { Button } from '../Inputs/Button'
99
import zIndexes from '../../constants/z-indexes'
10+
import { ReactNode } from 'react'
1011

1112
const PageOverlay = styled.div`
1213
position: fixed;
@@ -66,14 +67,15 @@ const Controls = styled.div`
6667

6768
interface Props {
6869
title: string
69-
message: string
70+
message: ReactNode
7071
show: boolean
7172
onConfirm?: () => void
7273
onConfirmLabel?: string
7374
onCancel?: () => void
7475
onCancelLabel?: string
7576
loading?: boolean
7677
disableBackdrop?: boolean
78+
hideCancel?: boolean
7779
}
7880

7981
export const ConfirmationDialog = ({
@@ -86,6 +88,7 @@ export const ConfirmationDialog = ({
8688
disableBackdrop,
8789
onConfirmLabel,
8890
onCancelLabel,
91+
hideCancel,
8992
}: Props) => {
9093
if (!show) {
9194
return <></>
@@ -100,13 +103,15 @@ export const ConfirmationDialog = ({
100103
<Message>{message}</Message>
101104
<FlexGrow />
102105
<Controls>
103-
<Button
104-
disabled={loading}
105-
label={onCancelLabel ?? 'Cancel'}
106-
variant="outlined"
107-
rounded
108-
onClick={onCancel}
109-
/>
106+
{!hideCancel && (
107+
<Button
108+
disabled={loading}
109+
label={onCancelLabel ?? 'Cancel'}
110+
variant="outlined"
111+
rounded
112+
onClick={onCancel}
113+
/>
114+
)}
110115
<Button loading={loading} label={onConfirmLabel ?? 'OK'} rounded onClick={onConfirm} />
111116
</Controls>
112117
</Container>

‎src/Components/CopyToClipboard/CopyToClipboard.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@ const Icon = styled(CopySVG)`
3333
`
3434

3535
const StyledButton = styled.div`
36-
width: 100%;
37-
height: 100%;
38-
3936
display: flex;
4037
justify-content: center;
4138
align-items: center;

‎src/Components/Modals/Modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ export const Modal = ({
206206
<>
207207
{!isMobile && <PageOverlay onClick={() => !disableBackdrop && onClickX && onClickX()} />}
208208

209-
<StyledModal data-test-id={dataTestId} $size={size} $zIndex={zIndex}>
209+
<StyledModal $size={size} $zIndex={zIndex}>
210210
<Container>
211211
{loading && (
212212
<SpinnerOverlay>

‎src/Pages/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { GlobalStyle } from './GlobalStyle'
1414
import { IntercomLoader } from '../intercom/IntercomLoader'
1515
import 'react-toastify/dist/ReactToastify.css'
1616
import { NodeThemeProvider } from './NodeThemeProvider'
17+
import { GeneratedPasswordPopUp } from './Authenticated/Components/ClickBoarding/GeneratedPasswordPopUp'
1718
export const App = () => {
1819
return (
1920
<NodeThemeProvider>
@@ -25,6 +26,7 @@ export const App = () => {
2526
<StateInitializer>
2627
<IntercomLoader />
2728
<AppRouter />
29+
<GeneratedPasswordPopUp />
2830
</StateInitializer>
2931
</NodeHealthcheckBarrier>
3032
</Hotkeys>

‎src/Pages/AppRouter.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { FullPageSpinner } from './Authenticated/Components/Spinner/FullPageSpin
3939
import { STORYBOOK_ROUTES } from './Authenticated/StorybookPage/storybook.routes'
4040
import { SSOPage } from './Login/SSOPage'
4141
import { NodeClaimPage } from './Authenticated/NodeClaimPage/NodeClaimPage'
42+
import { ClickBoarding } from './ClickBoarding'
4243

4344
const AppRouter = () => {
4445
const loading = useAppSelector(({ app }) => app.loading)
@@ -87,6 +88,14 @@ const AppRouter = () => {
8788
</Protected>
8889
}
8990
/>
91+
<Route
92+
path={ROUTES.CLICKBOARDING}
93+
element={
94+
// <Protected redirects={toLoginOrOnBoarding}>
95+
<ClickBoarding />
96+
// </Protected>
97+
}
98+
/>
9099
<Route
91100
path={HISTORY}
92101
element={

‎src/Pages/Authenticated/Components/ClickBoarding/GeneratedPasswordPopUp.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/**
2+
* Copyright (c) 2023 BlockDev AG
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import { useEffect, useState } from 'react'
9+
import { useLocation, useNavigate } from 'react-router-dom'
10+
import styled from 'styled-components'
11+
import { ConfirmationDialog } from '../../../../Components/ConfirmationDialog/ConfirmationDialog'
12+
13+
const Password = styled.div`
14+
font-size: ${({ theme }) => theme.common.fontSizeBigger};
15+
font-weight: bold;
16+
color: ${({ theme }) => theme.generatedPassword.textColor};
17+
`
18+
19+
const Row = styled.div`
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
gap: 6px;
24+
`
25+
26+
const Warning = styled.div`
27+
margin-top: 10px;
28+
font-size: ${({ theme }) => theme.common.fontSizeNormal};
29+
`
30+
31+
const Column = styled.div`
32+
display: flex;
33+
flex-direction: column;
34+
`
35+
36+
export const GeneratedPasswordPopUp = () => {
37+
const [show, setShow] = useState(false)
38+
const location = useLocation()
39+
const navigate = useNavigate()
40+
41+
const resolveGeneratedPassword = (): string | undefined => {
42+
if (typeof location.state !== 'object') {
43+
return
44+
}
45+
const state = location.state as Record<string, string>
46+
return state?.generatedPassword
47+
}
48+
49+
const generatedPassword = resolveGeneratedPassword()
50+
51+
useEffect(() => {
52+
if (generatedPassword) {
53+
setShow(true)
54+
}
55+
}, [generatedPassword])
56+
57+
if (!generatedPassword) {
58+
return <></>
59+
}
60+
61+
return (
62+
<ConfirmationDialog
63+
hideCancel
64+
disableBackdrop
65+
show={show}
66+
message={
67+
<Column>
68+
<Row>
69+
<Password>{generatedPassword}</Password>
70+
</Row>
71+
<Warning>Please write down the password or use it to change to a new password in settings page.</Warning>
72+
</Column>
73+
}
74+
title="Your NodeUI Password"
75+
onConfirm={() => {
76+
setShow(false)
77+
navigate(location.pathname, { replace: true })
78+
}}
79+
></ConfirmationDialog>
80+
)
81+
}

‎src/Pages/Authenticated/DashboardPage/DashboardPage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { LiveSessions } from './LiveSessions/LiveSessions'
1414
import { useMediaQuery } from 'react-responsive'
1515
import { media } from '../../../commons/media'
1616
import { Activity } from '../Components/Activity/Activity'
17+
import { ConfirmationDialog } from '../../../Components/ConfirmationDialog/ConfirmationDialog'
1718

1819
const { isDesktopQuery } = media
1920

@@ -34,6 +35,7 @@ const DashboardPage = () => {
3435
<LayoutRow>
3536
<LiveSessions />
3637
</LayoutRow>
38+
<ConfirmationDialog title="Your password" message="" show={false} />
3739
</Layout>
3840
)
3941
}

‎src/Pages/Authenticated/Onboarding/Password/Heading.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* Copyright (c) 2023 BlockDev AG
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
import styled from 'styled-components'
8+
import { devices } from '../../../../theme/themes'
9+
import React, { ReactNode } from 'react'
10+
11+
const Header = styled.div`
12+
display: flex;
13+
flex-direction: column;
14+
gap: 20px;
15+
@media ${devices.tablet} {
16+
gap: 5px;
17+
}
18+
`
19+
20+
const Title = styled.h1<{ $centered?: boolean }>`
21+
color: ${({ theme }) => theme.text.colorSecondary};
22+
font-size: ${({ theme }) => theme.common.fontSizeHuge};
23+
24+
align-self: ${({ $centered }) => ($centered ? 'center' : 'unset')};
25+
26+
@media ${devices.tablet} {
27+
font-size: ${({ theme }) => theme.common.fontSizeNormal};
28+
align-self: unset;
29+
}
30+
`
31+
32+
const Comment = styled.p`
33+
color: ${({ theme }) => theme.text.colorMain};
34+
font-size: ${({ theme }) => theme.common.fontSizeNormal};
35+
@media ${devices.tablet} {
36+
font-size: ${({ theme }) => theme.common.fontSizeNormal};
37+
}
38+
`
39+
40+
type Props = {
41+
title: string
42+
titleCenter?: boolean
43+
description: ReactNode
44+
}
45+
46+
export const Heading = ({ title, description, titleCenter }: Props) => {
47+
return (
48+
<Header>
49+
<Title $centered={titleCenter}>{title}</Title>
50+
<Comment>{description}</Comment>
51+
</Header>
52+
)
53+
}

0 commit comments

Comments
 (0)