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

Commit 60d0411

Browse files
yauheni-deriv“yauheni-kryzhyk-deriv”matin-deriv
authored
yauheni/ API token scope update (#7098)
Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> Co-authored-by: Matin shafiei <matin@binary.com>
1 parent 9fc34e1 commit 60d0411

File tree

3 files changed

+172
-28
lines changed

3 files changed

+172
-28
lines changed

‎src/sass/_common/common.scss‎

Lines changed: 100 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -947,33 +947,114 @@ label + input {
947947
}
948948

949949
#token_form {
950-
@media screen and (max-width: 480px) {
950+
fieldset {
951+
padding: 14px;
952+
953+
& > legend {
954+
margin-left: 20px;
955+
}
956+
}
957+
.title-row {
958+
margin: 20px 2px 5px;
959+
960+
label {
961+
white-space: nowrap;
962+
}
963+
input {
964+
width: 205px;
965+
height: 22px;
966+
max-width: 100%;
967+
}
968+
}
969+
.scopes-title {
970+
padding: 0;
971+
margin: 0;
972+
973+
label {
974+
margin: 0 0 0 13px;
975+
text-align: left;
976+
}
977+
}
978+
.scope-types {
979+
display: grid;
980+
grid-template-columns: 1fr 1fr;
981+
gap: 10px;
982+
padding: 10px;
983+
grid-template-rows: 1fr 1fr 1fr;
984+
985+
input[type='checkbox'] + label:before {
986+
margin-bottom: 3px;
987+
}
988+
.scope-item {
989+
padding: 15px;
990+
min-height: 76px;
991+
margin-right: 0;
992+
text-align: left !important;
993+
border: 1px solid $COLOR_GRAY;
994+
border-radius: 4px;
995+
996+
.scope-item-description {
997+
margin-top: 7px;
998+
font-size: 14px;
999+
line-height: 19px;
1000+
}
1001+
}
9511002
p.error-msg {
1003+
grid-row-end: none;
1004+
height: 0;
1005+
}
1006+
}
1007+
.gr-padding-10 {
1008+
.button, .hint {
1009+
margin-left: calc(16.3% + 5px);
1010+
}
1011+
}
1012+
1013+
@media screen and (max-width: 679px) {
1014+
.scopes-title {
1015+
align-self: flex-start;
1016+
}
1017+
.scopes-row {
9521018
display: flex;
953-
justify-content: center;
1019+
flex-direction: column;
1020+
align-items: center;
9541021
}
955-
.scope-list {
956-
position: relative;
1022+
.scopes-title, .scope-types {
1023+
margin-left: 0;
1024+
margin-right: 0;
1025+
flex-basis: unset;
1026+
max-width: unset;
9571027
display: flex;
958-
justify-content: center;
1028+
flex-direction: column;
1029+
align-items: center;
1030+
}
1031+
.scope-types {
1032+
.scope-item {
1033+
width: 70%;
1034+
}
1035+
}
1036+
.gr-padding-10 {
1037+
max-width: 100%;
1038+
text-align: center;
9591039

960-
input[type='checkbox'] + label {
961-
padding-top: 10px;
962-
padding-bottom: 10px;
963-
display: flex;
964-
align-items: center;
1040+
.button, .hint {
1041+
margin-left: 0;
9651042
}
966-
p.error-msg {
967-
position: absolute;
968-
left: 0;
1043+
}
1044+
}
1045+
1046+
@media screen and (max-width: 619px) {
1047+
.scope-types {
1048+
.scope-item {
1049+
width: 80%;
9691050
}
970-
.scope-types {
971-
flex-basis: unset;
972-
max-width: unset;
1051+
}
1052+
}
9731053

974-
&:last-child {
975-
margin-bottom: 16px;
976-
}
1054+
@media screen and (max-width: 569px) {
1055+
.scope-types {
1056+
.scope-item {
1057+
width: 90%;
9771058
}
9781059
}
9791060
}

‎src/templates/_common/components/forms.jsx‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export const FormRow = ({
3333
children,
3434
options,
3535
default_option,
36+
label_row_cell_width,
37+
is_simple_row,
3638
}) => {
3739
const getInnerElement = () => {
3840
if (type === 'select') {
@@ -135,10 +137,21 @@ export const FormRow = ({
135137
return 'gr-12';
136138
} else if (has_geovalidator) {
137139
return 'gr-3 gr-12-m';
140+
} else if (label_row_cell_width) {
141+
return `gr-${12 - label_row_cell_width} gr-12-m ${sub_row_class || ''}`;
138142
}
139143
return `gr-8 gr-12-m ${sub_row_class || ''}`;
140144
};
141145

146+
const getLabelRowClassName = () => {
147+
if (is_two_rows) {
148+
return `gr-12 ${label_row_class}`;
149+
} else if (label_row_cell_width) {
150+
return `gr-${label_row_cell_width} gr-12-m ${label_row_class}`;
151+
}
152+
return `gr-4 gr-12-m ${label_row_class}`;
153+
};
154+
142155
if (type === 'checkbox' && !spaced) {
143156
return (
144157
<div className={`gr-row ${row_class || ''}`} id={row_id}>
@@ -150,12 +163,35 @@ export const FormRow = ({
150163
</div>
151164
);
152165
}
166+
167+
if (is_simple_row) {
168+
return (
169+
<div
170+
className={`gr-row form-row center-text-m ${is_two_rows ? 'two-rows' : ''} ${row_class || ''}`}
171+
id={row_id}
172+
>
173+
<label htmlFor={type !== 'label' ? id : undefined} className={required ? 'required_asterisk' : ''}>
174+
{tooltip ?
175+
<span data-balloon-length='xlarge' data-balloon={tooltip}>
176+
{label}
177+
</span> :
178+
label
179+
}
180+
</label>
181+
<div>{getInnerElement()}</div>
182+
{hint &&
183+
<p className='hint no-margin'>{hint}</p>
184+
}
185+
{has_geovalidator ? children : undefined}
186+
</div>
187+
);
188+
}
153189
return (
154190
<div
155191
className={`gr-row form-row center-text-m ${is_two_rows ? 'two-rows' : ''} ${row_class || ''}`}
156192
id={row_id}
157193
>
158-
<div className={`${is_two_rows ? `gr-12 ${label_row_class}` : `gr-4 gr-12-m ${label_row_class}`}`}>
194+
<div className={getLabelRowClassName()}>
159195
<label htmlFor={type !== 'label' ? id : undefined} className={required ? 'required_asterisk' : ''}>
160196
{tooltip ?
161197
<span data-balloon-length='xlarge' data-balloon={tooltip}>

‎src/templates/app/user/security/api_token.jsx‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,53 @@ const ApiToken = () => (
1616
<div id='token_form' className='gr-12 gr-padding-10'>
1717
<form>
1818
<Fieldset legend={it.L('Create new token')}>
19-
<FormRow type='text' id='txt_name' label={it.L('Token name')} attributes={{ maxLength: 32 }} />
19+
<FormRow is_simple_row row_class='title-row' type='text' id='txt_name' label={it.L('Title')} attributes={{ maxLength: 32 }} />
20+
21+
<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:')}>
2022

21-
<FormRow row_class='scope-list' sub_row_class='scope-types' type='custom' label={it.L('Choose scopes:')}>
2223
<input id='chk_scopes_read' type='checkbox' value='read' checked='checked' readOnly='readonly' />
23-
<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>
24+
<label htmlFor='chk_scopes_read' className='scope-item'>
25+
<span>{it.L('Read')}</span>
26+
<div className='scope-item-description'>
27+
{it.L('View account activity such as settings, limits, balance sheets, trade purchase history, and more.')}
28+
</div>
29+
</label>
2430

2531
<input id='chk_scopes_trade' type='checkbox' value='trade' />
26-
<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>
32+
<label htmlFor='chk_scopes_trade' className='scope-item'>
33+
<span>{it.L('Trade')}</span>
34+
<div className='scope-item-description'>
35+
{it.L('Buy and sell contracts, renew expired purchases, and top up demo accounts.')}
36+
</div>
37+
</label>
2738

2839
<input id='chk_scopes_payments' type='checkbox' value='payments' />
29-
<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>
40+
<label htmlFor='chk_scopes_payments' className='scope-item'>
41+
<span>{it.L('Payments')}</span>
42+
<div className='scope-item-description'>
43+
{it.L('Withdraw to payment agents, and transfer funds between accounts.')}
44+
</div>
45+
</label>
3046

3147
<input id='chk_scopes_admin' type='checkbox' value='admin' />
32-
<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>
48+
<label htmlFor='chk_scopes_admin' className='scope-item'>
49+
<span>{it.L('Admin')}</span>
50+
<div className='scope-item-description'>
51+
{it.L('Open accounts, manage settings, manage token usage, and more.')}
52+
</div>
53+
</label>
3354

3455
<input id='chk_scopes_trading_information' type='checkbox' value='trading_information' />
35-
<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>
56+
<label htmlFor='chk_scopes_trading_information' className='scope-item'>
57+
<span>{it.L('Trading information')}</span>
58+
<div className='scope-item-description'>
59+
{it.L('View the trading history.')}
60+
</div>
61+
</label>
62+
3663
</FormRow>
3764

38-
<SubmitButton text={it.L('Create')} type='submit' />
65+
<SubmitButton no_wrapper text={it.L('Create')} type='submit' />
3966
</Fieldset>
4067
</form>
4168
</div>

0 commit comments

Comments
 (0)