Update designs to match DSM

silverstripe · Mar 17, 2021 · 802a37f · 802a37f
1 parent 3869821
commit 802a37f
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 32 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/lang/src/en/en.json b/client/lang/src/en/en.json
@@ -5,7 +5,8 @@
     "SessionManager.CURRENT": "Current",
     "SessionManager.AUTHENTICATED": "authenticated {createdElapsed}...",
     "SessionManager.LAST_ACTIVE": "last active {lastAccessedElapsed}...",
-    "SessionManager.LOG_OUT": "Log Out",
+    "SessionManager.LOG_OUT": "Log out",
+    "SessionManager.LOGGING_OUT": "Logging out...",
     "SessionManager.LOG_OUT_CONFIRMED": "Successfully logged out of device.",
     "SessionManager.ACTIVITY_TOOLTIP_TEXT": "Signed in {signedIn}, Last active {lastActive}",
 }
diff --git a/client/src/components/LoginSession/LoginSession.js b/client/src/components/LoginSession/LoginSession.js
@@ -6,6 +6,7 @@ import backend from 'lib/Backend';
 import moment from 'moment';
 import i18n from 'i18n';
 import PropTypes from 'prop-types';
+import jQuery from 'jquery';
 
 function LoginSession(props) {
     const [loading, setLoading] = useState({ complete: false, failed: false, submitting: false });
@@ -45,25 +46,33 @@ function LoginSession(props) {
                     submitting: false
                 });
                 if (response.success) {
-                    jQuery.noticeAdd({
-                        text: i18n._t(
-                            'SessionManager.LOG_OUT_CONFIRMED',
-                            'Successfully logged out of device.'
-                        ),
-                        stay: false,
-                        type: 'success'
-                    });
+                    setTimeout(() => {
+                        setLoading({
+                            complete: true,
+                            failed: !!response.error && !response.success,
+                            fadeOutComplete: true,
+                            submitting: false
+                        });
+                        jQuery.noticeAdd({
+                            text: i18n._t(
+                                'SessionManager.LOG_OUT_CONFIRMED',
+                                'Successfully logged out of device.'
+                            ),
+                            stay: false,
+                            type: 'success'
+                        });
+                    }, 2000);
                 }
             })
             .catch((error) => {
                 setLoading({ complete: true, failed: true, submitting: false });
                 error.response.json().then(response => {
-                    jQuery.noticeAdd({text: response.errors, stay: false, type: 'error'});
+                    jQuery.noticeAdd({ text: response.errors, stay: false, type: 'error' });
                 });
             });
     }
 
-    if ((loading.complete && !loading.failed) || loading.submitting) {
+    if (loading.fadeOutComplete) {
         return null;
     }
 
@@ -75,13 +84,15 @@ function LoginSession(props) {
     const lastActiveStr = props.IsCurrent ?
         i18n.inject(
             i18n._t('SessionManager.AUTHENTICATED', 'authenticated {createdElapsed}...'),
-            {createdElapsed}
+            { createdElapsed }
         )
         : i18n.inject(
             i18n._t('SessionManager.LAST_ACTIVE', 'last active {lastAccessedElapsed}...'),
-            {lastAccessedElapsed}
+            { lastAccessedElapsed }
         );
-    const logOutStr = i18n._t('SessionManager.LOG_OUT', 'Log Out');
+    const logOutStr = (loading.submitting || (loading.complete && !loading.failed)) ?
+        i18n._t('SessionManager.LOGGING_OUT', 'Logging out...')
+        : i18n._t('SessionManager.LOG_OUT', 'Log out');
 
     const activityTooltip = i18n.inject(
         i18n._t('Admin.ACTIVITY_TOOLTIP_TEXT', 'Signed in {signedIn}, Last active {lastActive}'),
@@ -92,26 +103,28 @@ function LoginSession(props) {
     );
 
     return (
-      <div className="login-session">
-        <div>{props.UserAgent}</div>
-        {props.IsCurrent &&
-        <strong className={'text-success'} data-toggle="tooltip" data-placement="top" title={activityTooltip}>
-          {currentStr}
-        </strong>
-            }
-        <div className="text-muted">
+      <li className={`login-session ${(loading.complete && !loading.failed) ? 'hidden' : ''}`}>
+        <p>{props.UserAgent}</p>
+        <p className="text-muted">
           {props.IPAddress}
           <span data-toggle="tooltip" data-placement="top" title={activityTooltip}>
             , {lastActiveStr}
           </span>
-        </div>
+        </p>
+        {props.IsCurrent &&
+        <p>
+            <strong className={'text-success'}>
+                {currentStr}
+            </strong>
+        </p>
+            }
         {!props.IsCurrent && <a
           role={'button'}
           tabIndex={'0'}
           className={'login-session__logout'}
-          onClick={logOut}
+          onClick={loading.submitting ? null : logOut}
         >{logOutStr}</a>}
-      </div>
+      </li>
     );
 }
 

diff --git a/client/src/components/LoginSession/LoginSession.scss b/client/src/components/LoginSession/LoginSession.scss
@@ -1,3 +1,15 @@
+.login-session {
+    &.hidden {
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0s 2s, opacity 2s linear;
+    }
+
+    p {
+        margin: 0;
+    }
+}
+
 .login-session__logout:not([href]) {
     cursor: pointer;
     color: $link-color;

diff --git a/client/src/components/SessionManagerField/SessionManagerField.js b/client/src/components/SessionManagerField/SessionManagerField.js
@@ -4,11 +4,11 @@ import LoginSession from '../LoginSession/LoginSession';
 
 function SessionManagerField(props) {
     return (
-      <div className={'session-manager-field'}>
+      <ul className={'session-manager-field list-unstyled'}>
         {props.loginSessions.map((loginSession) =>
           <LoginSession key={loginSession.ID} {...loginSession} />
             )}
-      </div>
+      </ul>
     );
 }
 

diff --git a/client/src/components/SessionManagerField/SessionManagerField.scss b/client/src/components/SessionManagerField/SessionManagerField.scss
@@ -1,3 +1,7 @@
-.session-manager-field .login-session:not(:last-of-type) {
-    margin-bottom: 20px;
+.session-manager-field {
+    padding: $input-padding-y 0;
+
+    .login-session:not(:last-of-type) {
+        margin-bottom: 20px;
+    }
 }
diff --git a/src/Extensions/MemberExtension.php b/src/Extensions/MemberExtension.php
@@ -40,7 +40,7 @@ public function updateCMSFields(FieldList $fields)
             'Root.Main',
             $sessionManagerField = SessionManagerField::create(
                 'SessionManagerField',
-                _t(__CLASS__ . '.SESSION_MANAGER_SETTINGS_FIELD_LABEL', 'Devices'),
+                _t(__CLASS__ . '.SESSION_MANAGER_SETTINGS_FIELD_LABEL', 'Authenticated devices'),
                 $this->owner->ID
             )
         );