Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

yauheni/ API token scope update #7098

Merged
matin-deriv merged 4 commits into from
Apr 25, 2022
Merged

yauheni/ API token scope update #7098

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6c436fe
yauheni/ API token scope update
Apr 12, 2022
a935e33
Merge branch 'master' into api_token_form_view_rebuild
matin-deriv Apr 25, 2022
d73f204
Merge branch 'master' into api_token_form_view_rebuild
matin-deriv Apr 25, 2022
a08169a
Merge branch 'master' into api_token_form_view_rebuild
matin-deriv Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 100 additions & 19 deletions src/sass/_common/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -947,33 +947,114 @@ label + input {
}

#token_form {
@media screen and (max-width: 480px) {
fieldset {
padding: 14px;

& > legend {
margin-left: 20px;
}
}
.title-row {
margin: 20px 2px 5px;

label {
white-space: nowrap;
}
input {
width: 205px;
height: 22px;
max-width: 100%;
}
}
.scopes-title {
padding: 0;
margin: 0;

label {
margin: 0 0 0 13px;
text-align: left;
}
}
.scope-types {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px;
grid-template-rows: 1fr 1fr 1fr;

input[type='checkbox'] + label:before {
margin-bottom: 3px;
}
.scope-item {
padding: 15px;
min-height: 76px;
margin-right: 0;
text-align: left !important;
border: 1px solid $COLOR_GRAY;
border-radius: 4px;

.scope-item-description {
margin-top: 7px;
font-size: 14px;
line-height: 19px;
}
}
p.error-msg {
grid-row-end: none;
height: 0;
}
}
.gr-padding-10 {
.button, .hint {
margin-left: calc(16.3% + 5px);
}
}

@media screen and (max-width: 679px) {
.scopes-title {
align-self: flex-start;
}
.scopes-row {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.scope-list {
position: relative;
.scopes-title, .scope-types {
margin-left: 0;
margin-right: 0;
flex-basis: unset;
max-width: unset;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.scope-types {
.scope-item {
width: 70%;
}
}
.gr-padding-10 {
max-width: 100%;
text-align: center;

input[type='checkbox'] + label {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
align-items: center;
.button, .hint {
margin-left: 0;
}
p.error-msg {
position: absolute;
left: 0;
}
}

@media screen and (max-width: 619px) {
.scope-types {
.scope-item {
width: 80%;
}
.scope-types {
flex-basis: unset;
max-width: unset;
}
}

&:last-child {
margin-bottom: 16px;
}
@media screen and (max-width: 569px) {
.scope-types {
.scope-item {
width: 90%;
}
}
}
Expand Down
38 changes: 37 additions & 1 deletion src/templates/_common/components/forms.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export const FormRow = ({
children,
options,
default_option,
label_row_cell_width,
is_simple_row,
}) => {
const getInnerElement = () => {
if (type === 'select') {
Expand Down Expand Up @@ -135,10 +137,21 @@ export const FormRow = ({
return 'gr-12';
} else if (has_geovalidator) {
return 'gr-3 gr-12-m';
} else if (label_row_cell_width) {
return `gr-${12 - label_row_cell_width} gr-12-m ${sub_row_class || ''}`;
}
return `gr-8 gr-12-m ${sub_row_class || ''}`;
};

const getLabelRowClassName = () => {
if (is_two_rows) {
return `gr-12 ${label_row_class}`;
} else if (label_row_cell_width) {
return `gr-${label_row_cell_width} gr-12-m ${label_row_class}`;
}
return `gr-4 gr-12-m ${label_row_class}`;
};

if (type === 'checkbox' && !spaced) {
return (
<div className={`gr-row ${row_class || ''}`} id={row_id}>
Expand All @@ -150,12 +163,35 @@ export const FormRow = ({
</div>
);
}

if (is_simple_row) {
return (
<div
className={`gr-row form-row center-text-m ${is_two_rows ? 'two-rows' : ''} ${row_class || ''}`}
id={row_id}
>
<label htmlFor={type !== 'label' ? id : undefined} className={required ? 'required_asterisk' : ''}>
{tooltip ?
<span data-balloon-length='xlarge' data-balloon={tooltip}>
{label}
</span> :
label
}
</label>
<div>{getInnerElement()}</div>
{hint &&
<p className='hint no-margin'>{hint}</p>
}
{has_geovalidator ? children : undefined}
</div>
);
}
return (
<div
className={`gr-row form-row center-text-m ${is_two_rows ? 'two-rows' : ''} ${row_class || ''}`}
id={row_id}
>
<div className={`${is_two_rows ? `gr-12 ${label_row_class}` : `gr-4 gr-12-m ${label_row_class}`}`}>
<div className={getLabelRowClassName()}>
<label htmlFor={type !== 'label' ? id : undefined} className={required ? 'required_asterisk' : ''}>
{tooltip ?
<span data-balloon-length='xlarge' data-balloon={tooltip}>
Expand Down
43 changes: 35 additions & 8 deletions src/templates/app/user/security/api_token.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,53 @@ const ApiToken = () => (
<div id='token_form' className='gr-12 gr-padding-10'>
<form>
<Fieldset legend={it.L('Create new token')}>
<FormRow type='text' id='txt_name' label={it.L('Token name')} attributes={{ maxLength: 32 }} />
<FormRow is_simple_row row_class='title-row' type='text' id='txt_name' label={it.L('Title')} attributes={{ maxLength: 32 }} />

<FormRow label_row_cell_width={2} row_class='scopes-row' label_row_class='scopes-title' sub_row_class='scope-types' type='custom' label={it.L('Choose scopes:')}>

<FormRow row_class='scope-list' sub_row_class='scope-types' type='custom' label={it.L('Choose scopes:')}>
<input id='chk_scopes_read' type='checkbox' value='read' checked='checked' readOnly='readonly' />
<label htmlFor='chk_scopes_read'><span data-balloon={it.L('Can be used to view account activity, including settings, limits, balance sheets, trade purchase history, and more.')} data-balloon-length='xlarge'>{it.L('Read')}</span></label>
<label htmlFor='chk_scopes_read' className='scope-item'>
<span>{it.L('Read')}</span>
<div className='scope-item-description'>
{it.L('View account activity such as settings, limits, balance sheets, trade purchase history, and more.')}
</div>
</label>

<input id='chk_scopes_trade' type='checkbox' value='trade' />
<label htmlFor='chk_scopes_trade'><span data-balloon={it.L('Can be used to buy and sell contracts, renew expired purchases, and top-up demo accounts.')} data-balloon-length='xlarge'>{it.L('Trade')}</span></label>
<label htmlFor='chk_scopes_trade' className='scope-item'>
<span>{it.L('Trade')}</span>
<div className='scope-item-description'>
{it.L('Buy and sell contracts, renew expired purchases, and top up demo accounts.')}
</div>
</label>

<input id='chk_scopes_payments' type='checkbox' value='payments' />
<label htmlFor='chk_scopes_payments'><span data-balloon={it.L('Can be used to withdraw to payment agents and transfer funds between accounts.')} data-balloon-length='xlarge'>{it.L('Payments')}</span></label>
<label htmlFor='chk_scopes_payments' className='scope-item'>
<span>{it.L('Payments')}</span>
<div className='scope-item-description'>
{it.L('Withdraw to payment agents, and transfer funds between accounts.')}
</div>
</label>

<input id='chk_scopes_admin' type='checkbox' value='admin' />
<label htmlFor='chk_scopes_admin'><span data-balloon={it.L('Can be used to open accounts, set settings, manage token usage, and more.')} data-balloon-length='xlarge'>{it.L('Admin')}</span></label>
<label htmlFor='chk_scopes_admin' className='scope-item'>
<span>{it.L('Admin')}</span>
<div className='scope-item-description'>
{it.L('Open accounts, manage settings, manage token usage, and more.')}
</div>
</label>

<input id='chk_scopes_trading_information' type='checkbox' value='trading_information' />
<label htmlFor='chk_scopes_trading_information'><span data-balloon={it.L('Can be used to view the trading history of an account.')} data-balloon-length='xlarge'>{it.L('Trading information')}</span></label>
<label htmlFor='chk_scopes_trading_information' className='scope-item'>
<span>{it.L('Trading information')}</span>
<div className='scope-item-description'>
{it.L('View the trading history.')}
</div>
</label>

</FormRow>

<SubmitButton text={it.L('Create')} type='submit' />
<SubmitButton no_wrapper text={it.L('Create')} type='submit' />
</Fieldset>
</form>
</div>
Expand Down