From 6c436fe6820ec21cba7d8de19fc72965ec2139bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyauheni-kryzhyk-deriv=E2=80=9D?=
 <“yauheni@deriv.me”>
Date: Tue, 12 Apr 2022 15:59:50 +0300
Subject: [PATCH] yauheni/ API token scope update

---
 src/sass/_common/common.scss                  | 119 +++++++++++++++---
 src/templates/_common/components/forms.jsx    |  38 +++++-
 src/templates/app/user/security/api_token.jsx |  43 +++++--
 3 files changed, 172 insertions(+), 28 deletions(-)

diff --git a/src/sass/_common/common.scss b/src/sass/_common/common.scss
index 85cd7a246ceb4..d50f62ca5b16d 100755
--- a/src/sass/_common/common.scss
+++ b/src/sass/_common/common.scss
@@ -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%;
             }
         }
     }
diff --git a/src/templates/_common/components/forms.jsx b/src/templates/_common/components/forms.jsx
index 6732e95e0bee2..48f81594fd114 100644
--- a/src/templates/_common/components/forms.jsx
+++ b/src/templates/_common/components/forms.jsx
@@ -33,6 +33,8 @@ export const FormRow = ({
     children,
     options,
     default_option,
+    label_row_cell_width,
+    is_simple_row,
 }) => {
     const getInnerElement = () => {
         if (type === 'select') {
@@ -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}>
@@ -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}>
diff --git a/src/templates/app/user/security/api_token.jsx b/src/templates/app/user/security/api_token.jsx
index 8418877e45556..ffa7a20450784 100644
--- a/src/templates/app/user/security/api_token.jsx
+++ b/src/templates/app/user/security/api_token.jsx
@@ -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>