Skip to content
This repository has been archived by the owner on May 13, 2024. It is now read-only.

Commit

Permalink
Merge branch 'binary-com:master' into Jim/FEQ-733/pull-the-changes-fr…
Browse files Browse the repository at this point in the history
…om-binary-websocket-api-automatically
  • Loading branch information
jim-deriv authored Nov 8, 2023
2 parents 1157538 + 4d3cf5e commit 3de5bb2
Show file tree
Hide file tree
Showing 14 changed files with 213 additions and 132 deletions.
4 changes: 2 additions & 2 deletions docs/core-concepts/authorization-authentication/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Please make sure you have all the requirements mentioned below to continue.

### Requirements

1. Deriv account
1. Deriv Client account
2. Deriv API token with the appropriate access level
3. Deriv app ID

Expand Down Expand Up @@ -59,7 +59,7 @@ Here is the visual representation of how the OAuth authorisation connection work

## The authentication process

In order to authenticate your user, specify the URL that will be used as the OAuth Redirect URL on the [Dashboard](/dashboard) page, **Register application** tab in the **OAuth details** fields. Then, add a login button on your website or app and direct users to **`https://oauth.binary.com/oauth2/authorize?app_id=your_app_id`** where your_app_id is the ID of your app.
In order to authenticate your user, specify the URL that will be used as the OAuth Redirect URL on the [Dashboard](/dashboard) page, **Register application** tab in the **OAuth details** fields. Then, add a login button on your website or app and direct users to **`https://oauth.deriv.com/oauth2/authorize?app_id=your_app_id`** where your_app_id is the ID of your app.

![Deriv OAuth Login](/img/oauth_login.png 'Deriv OAuth Login')

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/oauth2/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ For more information on OAuth2, [see this guide](https://aaronparecki.com/oauth-

1. Specify the URL that will be used as the **OAuth Redirect URL** on the app registration page in the **Website URL field**.

2. Add a login button on your website or app and direct users to `https://oauth.binary.com/oauth2/authorize?app_id=your_app_id` where your_app_id is the ID of your app.
2. Add a login button on your website or app and direct users to `https://oauth.deriv.com/oauth2/authorize?app_id=your_app_id` where your_app_id is the ID of your app.

3. Once a user signs up, they will be redirected to the URL that you entered as the **Redirect URL**. This URL will have arguments added to it with the user's session tokens, and will look similar to: `https://[YOUR_WEBSITE_URL]/redirect/?acct1=cr799393& token1=a1-f7pnteezo4jzhpxclctizt27hyeot&cur1=usd& acct2=vrtc1859315& token2=a1clwe3vfuuus5kraceykdsoqm4snfq& cur2=usd&state=`

Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const Header = () => {
<Link to='https://deriv.com/who-we-are' className={styles.SubnavItems}>
Who we are
</Link>
<Link to='https://deriv.com/contact-us' className={styles.SubnavItems}>
<Link to='https://deriv.com/contact_us' className={styles.SubnavItems}>
Contact us
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/features/Endpoint/Endpoint.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const EndPoint = () => {
},
})}
name='server_url'
placeholder='e.g. ws.binaryws.com'
placeholder='e.g. ws.derivws.com'
className={styles.textInput}
required
/>
Expand Down
14 changes: 7 additions & 7 deletions src/features/Endpoint/__tests__/Endpoint.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe('Endpoint', () => {
});

it('should have default values in input fields', () => {
const server = screen.getByPlaceholderText('e.g. ws.binaryws.com');
const server = screen.getByPlaceholderText('e.g. ws.derivws.com');
const app_id = screen.getByPlaceholderText('e.g. 9999');
expect(server).toHaveValue('oauth.deriv.com');

Expand All @@ -40,7 +40,7 @@ describe('Endpoint', () => {
});

it('validate user inputs, and provides error messages for server field', async () => {
const server = screen.getByPlaceholderText('e.g. ws.binaryws.com');
const server = screen.getByPlaceholderText('e.g. ws.derivws.com');

await userEvent.clear(server);
await userEvent.type(server, '[email protected]');
Expand All @@ -51,12 +51,12 @@ describe('Endpoint', () => {
});

it('should validate submit button functionality', async () => {
const server = screen.getByPlaceholderText('e.g. ws.binaryws.com');
const server = screen.getByPlaceholderText('e.g. ws.derivws.com');
const app_id = screen.getByPlaceholderText('e.g. 9999');
const form = screen.getByRole('form');

await userEvent.clear(server);
await userEvent.type(server, 'blue.binaryws.com');
await userEvent.type(server, 'blue.derivws.com');

await userEvent.clear(app_id);
await userEvent.type(app_id, '31063');
Expand All @@ -65,7 +65,7 @@ describe('Endpoint', () => {
fireEvent.submit(form);
});

expect(server).toHaveValue('blue.binaryws.com');
expect(server).toHaveValue('blue.derivws.com');
expect(app_id).toHaveValue('31063');
});

Expand All @@ -89,12 +89,12 @@ describe('Endpoint', () => {
});

it('Should have submit button enabled with no errors on the from', async () => {
const server = screen.getByPlaceholderText('e.g. ws.binaryws.com');
const server = screen.getByPlaceholderText('e.g. ws.derivws.com');
const app_id = screen.getByPlaceholderText('e.g. 9999');
const submit_button = screen.getByRole('button', { name: /submit/i });

await userEvent.clear(server);
await userEvent.type(server, 'blue.binaryws.com');
await userEvent.type(server, 'blue.derivws.com');

await userEvent.clear(app_id);
await userEvent.type(app_id, '31063');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ const CreateTokenField = ({
}: TCreateTokenField) => {
const { tokens } = useApiToken();
const [input_value, setInputValue] = useState('');
const numberOfTokens = tokens.length;

useEffect(() => {
if (form_is_cleared) {
setInputValue('');
setFormIsCleared(false);
}
}, [form_is_cleared]);

const getTokenNames = useMemo(() => {
const token_names = [];
for (const token_object of tokens) {
Expand Down Expand Up @@ -75,21 +75,30 @@ const CreateTokenField = ({
</Text>
</div>
</div>
<div
onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
>
<input
className={`${error_border_active ? 'error-border' : ''}`}
type='text'
name='name'
{...register}
placeholder=' '
/>
<div className={styles.tokenWrapper}>
<div
onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
className={`${styles.customTextInput} ${error_border_active ? 'error-border' : ''}`}
>
<input
className={`${error_border_active ? 'error-border' : ''}`}
type='text'
name='name'
{...register}
placeholder=''
/>
{is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
<label
htmlFor='playground-request'
className={styles.inlineLabel}
data-testid='token-count-label'
>
Token name (You&apos;ve created <b>{numberOfTokens}</b> out of 30 tokens )
</label>
</div>
<Button disabled={disable_button} type='submit'>
Create
</Button>
{is_toggle && <TokenCreationDialogSuccess setToggleModal={setToggleModal} />}
</div>
{errors && errors.name && (
<Text as='span' type='paragraph-1' className='error-message'>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { cleanup, render, screen, within } from '@site/src/test-utils';
import { cleanup, render, screen, waitFor, within } from '@site/src/test-utils';
import userEvent from '@testing-library/user-event';
import ApiTokenForm from '../api-token.form';
import useCreateToken from '../../../hooks/useCreateToken';
Expand Down Expand Up @@ -134,6 +134,13 @@ describe('Home Page', () => {
expect(adminCheckbox.checked).toBeTruthy();
});

it('Should show dynamic token label', async () => {
const tokenLabel = screen.getByTestId('token-count-label');
await waitFor(() => {
expect(tokenLabel).toBeVisible();
});
});

it('Should create token on form submit', async () => {
const nameInput = screen.getByRole('textbox');

Expand All @@ -155,6 +162,20 @@ describe('Home Page', () => {
expect(error).toBeVisible;
});

it('Should update token a value on create token', async () => {
const tokenLabel = screen.getByTestId('token-count-label');
const nameInput = screen.getByRole('textbox');

await userEvent.type(nameInput, 'test create token');

const submitButton = screen.getByRole('button', { name: /Create/i });
await userEvent.click(submitButton);

await waitFor(() => {
expect(tokenLabel).toHaveTextContent('2');
});
});

it('should hide restrictions if error is present', async () => {
const nameInput = screen.getByRole('textbox');
const restrictions = screen.getByRole('list');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,69 +48,59 @@ form {
}
}

.customTextInput {
align-items: center;
border: 1px solid var(--colors-greyLight400);
border-radius: rem(1.6);
.tokenWrapper {
display: flex;
position: relative;
box-sizing: border-box;
margin: rem(0.5) 0;
&:hover {
border: 1px solid var(--colors-greyLight600);
}
&:focus-within {
border-color: var(--colors-blue500);
}
flex-direction: row;
align-items: center;
button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-radius: 0 rem(1.6) rem(1.6) 0;
height: rem(3);
border-top-right-radius: rem(1.6);
border-bottom-right-radius: rem(1.6);
}
label {
position: absolute;
color: var(--colors-greyLight600);
left: rem(1.2);
pointer-events: none;
transform-origin: top left;
transition: all 0.25s ease;
white-space: nowrap;
width: calc(100% - 100px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media (max-width: 425px) {
border-radius: rem(1.6);
width: 91%;
}
}
input[type='text'],
input[type='number'] {
background: 0 0;
box-sizing: border-box;
color: var(--ifm-color-emphasis-1000);
height: rem(4);
min-width: 0;

.customTextInput {
align-items: center;
border: 1px solid var(--colors-greyLight400);
border-radius: rem(1.6) 0 0 rem(1.6);
display: flex;
width: 100%;
border: none;
text-indent: rem(1.2);
font-size: rem(1.6);
&:not(:placeholder-shown) ~ label {
color: var(--colors-blue400);
background-color: var(--ifm-color-emphasis-0);
padding: 0 rem(0.4);
transform: translateY(rem(-2)) scale(0.75);
width: unset;
@media screen and (min-width: 320px) and (max-width: 425px) {
font-size: rem(1.4);
}
&.tokenInputLabel {
color: var(--smoke);
}
position: relative;
box-sizing: border-box;
margin: rem(0.5) 0;
&:hover {
border: 1px solid var(--colors-greyLight600);
}
&:focus {
outline-color: unset;
outline: unset;
border-radius: rem(1.6);
& ~ label {
&:focus-within {
border-color: var(--colors-blue500);
}
label {
position: absolute;
color: var(--colors-greyLight600);
left: rem(1.2);
pointer-events: none;
transform-origin: top left;
transition: all 0.25s ease;
white-space: nowrap;
width: calc(100% - 100px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
input[type='text'],
input[type='number'] {
background: 0 0;
box-sizing: border-box;
color: var(--ifm-color-emphasis-1000);
height: rem(4);
min-width: 0;
width: 100%;
border: none;
text-indent: rem(1.2);
font-size: rem(1.6);
&:not(:placeholder-shown) ~ label {
color: var(--colors-blue400);
background-color: var(--ifm-color-emphasis-0);
padding: 0 rem(0.4);
Expand All @@ -123,11 +113,36 @@ form {
color: var(--smoke);
}
}
&:focus {
outline-color: unset;
outline: unset;
border-radius: rem(1.6);
& ~ label {
color: var(--colors-blue400);
background-color: var(--ifm-color-emphasis-0);
padding: 0 rem(0.4);
transform: translateY(rem(-2)) scale(0.75);
width: unset;
@media screen and (min-width: 320px) and (max-width: 425px) {
font-size: rem(1.4);
}
&.tokenInputLabel {
color: var(--smoke);
}
}
}
&::placeholder {
color: var(--colors-greyLight600);
}
}
&::placeholder {
color: var(--colors-greyLight600);
@media (max-width: 425px) {
border-radius: rem(1.6);
}
}
@media (max-width: 425px) {
flex-direction: column;
gap: rem(0.5);
}
}

.card_wrapper {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe('App Dialog Register Success', () => {
});

it('Should render buttons properly', () => {
const primaryButton = screen.getByRole('button', { name: /manage application/i });
const primaryButton = screen.getByRole('button', { name: /join our telegram community/i });
const secondaryButton = screen.getByRole('button', { name: /got it/i });

expect(primaryButton).toBeInTheDocument();
Expand All @@ -38,9 +38,7 @@ describe('App Dialog Register Success', () => {

it('Should display correct content on the modal', () => {
const textContent = screen.getByText(/^You have successfully registered/i);
expect(textContent).toHaveTextContent(
'You have successfully registered your application. You can now start using Deriv API.',
);
expect(textContent).toHaveTextContent('You have successfully registered your application.');
});

it('Should close the modal on Secondary button click', async () => {
Expand All @@ -52,7 +50,7 @@ describe('App Dialog Register Success', () => {
});

it('Should update current tab on primary button click to Manage Application', async () => {
const primaryButton = screen.getByRole('button', { name: /manage application/i });
const primaryButton = screen.getByRole('button', { name: /join our telegram community/i });

await userEvent.click(primaryButton);

Expand Down
Loading

0 comments on commit 3de5bb2

Please sign in to comment.