Merge pull request #1015 from ubavic/fix/ui_changes_system_setting

fix: user and session managment

new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js

@@ -61,7 +61,7 @@ const SessionManagement = () => {
     {
       header: 'Last known use',
       width: 305,
-      textAlign: 'center',
+      textAlign: 'left',
       size: 'sm',
       view: s => {
         if (R.isNil(s.sess.ua)) return 'No Record'
@@ -72,7 +72,7 @@ const SessionManagement = () => {
     {
       header: 'Last known location',
       width: 250,
-      textAlign: 'center',
+      textAlign: 'left',
       size: 'sm',
       view: s => {
         return isLocalhost(s.sess.ipAddress) ? 'This device' : s.sess.ipAddress

new-lamassu-admin/src/pages/UserManagement/UserManagement.js

@@ -6,10 +6,16 @@ import * as R from 'ramda'
 import React, { useReducer, useState, useContext } from 'react'
 
 import AppContext from 'src/AppContext'
-import { Link } from 'src/components/buttons'
+import { ActionButton, Link } from 'src/components/buttons'
 import { Switch } from 'src/components/inputs'
 import TitleSection from 'src/components/layout/TitleSection'
 import DataTable from 'src/components/tables/DataTable'
+import { ReactComponent as WhiteKeyIcon } from 'src/styling/icons/button/key/white.svg'
+import { ReactComponent as KeyIcon } from 'src/styling/icons/button/key/zodiac.svg'
+import { ReactComponent as WhiteLockIcon } from 'src/styling/icons/button/lock/white.svg'
+import { ReactComponent as LockIcon } from 'src/styling/icons/button/lock/zodiac.svg'
+import { ReactComponent as WhiteUserRoleIcon } from 'src/styling/icons/button/user-role/white.svg'
+import { ReactComponent as UserRoleIcon } from 'src/styling/icons/button/user-role/zodiac.svg'
 
 import styles from './UserManagement.styles'
 import ChangeRoleModal from './modals/ChangeRoleModal'
@@ -153,35 +159,37 @@ const Users = () => {
       size: 'sm',
       view: u => {
         return (
-          <>
+          <div className={classes.actionButtonWrapper}>
-            <Chip
+            <ActionButton
-              size="small"
+              Icon={KeyIcon}
-              label="Reset password"
+              InverseIcon={WhiteKeyIcon}
-              className={classes.actionChip}
+              color="primary"
               onClick={() => {
                 setUserInfo(u)
                 dispatch({
                   type: 'open',
                   payload: 'showResetPasswordModal'
                 })
-              }}
+              }}>
-            />
+              Reset password
-            <Chip
+            </ActionButton>
-              size="small"
+            <ActionButton
-              label="Reset 2FA"
+              Icon={LockIcon}
-              className={classes.actionChip}
+              InverseIcon={WhiteLockIcon}
+              color="primary"
               onClick={() => {
                 setUserInfo(u)
                 dispatch({
                   type: 'open',
                   payload: 'showReset2FAModal'
                 })
-              }}
+              }}>
-            />
+              Reset 2FA
-            <Chip
+            </ActionButton>
-              size="small"
+            <ActionButton
-              label="Add FIDO"
+              Icon={UserRoleIcon}
-              className={classes.actionChip}
+              InverseIcon={WhiteUserRoleIcon}
+              color="primary"
               onClick={() => {
                 setUserInfo(u)
                 generateAttestationOptions({
@@ -189,9 +197,10 @@ const Users = () => {
                     userID: u.id
                   }
                 })
-              }}
+              }}>
-            />
+              Add FIDO
-          </>
+            </ActionButton>
+          </div>
         )
       }
     },

new-lamassu-admin/src/pages/UserManagement/UserManagement.styles.js

@@ -52,10 +52,6 @@ const styles = {
     fontFamily: fontPrimary,
     marginLeft: 10
   },
-  actionChip: {
-    backgroundColor: subheaderColor,
-    marginRight: 15
-  },
   info: {
     fontFamily: fontSecondary,
     textAlign: 'justify'
@@ -118,6 +114,10 @@ const styles = {
   },
   roleSwitch: {
     marginLeft: 15
+  },
+  actionButtonWrapper: {
+    display: 'flex',
+    gap: 12
   }
 }
 

new-lamassu-admin/src/styling/icons/button/key/white.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/key/white</title>
+    <g id="icon/button/key/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(0.500000, 0.500000)" stroke="#FFFFFF">
+            <circle id="Oval" cx="2.75" cy="8.25" r="2.75"></circle>
+            <line x1="5.04166667" y1="5.95833333" x2="11" y2="0" id="Path-13" stroke-linecap="round" stroke-linejoin="round"></line>
+            <line x1="8.25" y1="3.66666667" x2="10.5416667" y2="1.375" id="Path-13-Copy" stroke-width="2" stroke-linejoin="round"></line>
+        </g>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/button/key/zodiac.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/key/zodiac</title>
+    <g id="icon/button/key/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(0.500000, 0.500000)" stroke="#1B2559">
+            <circle id="Oval" cx="2.75" cy="8.25" r="2.75"></circle>
+            <line x1="5.04166667" y1="5.95833333" x2="11" y2="0" id="Path-13" stroke-linecap="round" stroke-linejoin="round"></line>
+            <line x1="8.25" y1="3.66666667" x2="10.5416667" y2="1.375" id="Path-13-Copy" stroke-width="2" stroke-linejoin="round"></line>
+        </g>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/button/lock/white.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/lock/white</title>
+    <g id="icon/button/lock/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Lock-Icon-White" transform="translate(0.500000, 0.500000)">
+            <path d="M7.98058644,2.48058644 C7.98058644,1.11059638 6.86999006,0 5.5,0 C4.13000994,0 3.01941356,1.11059638 3.01941356,2.48058644 C3.01941356,3.39391315 3.01941356,4.09482878 3.01941356,4.58333333 L7.98058644,4.58333333 C7.98058644,4.09482878 7.98058644,3.39391315 7.98058644,2.48058644 Z" id="Lock" stroke="#FFFFFF" stroke-linejoin="round"></path>
+            <rect id="Body" stroke="#FFFFFF" stroke-linejoin="round" x="0" y="4.58333333" width="11" height="6.41666667"></rect>
+            <circle id="Key-Hole" fill="#FFFFFF" cx="5.5" cy="7.33333333" r="1"></circle>
+        </g>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/button/lock/zodiac.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/lock/zodiac</title>
+    <g id="icon/button/lock/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Lock-Icon-Zodiac" transform="translate(0.500000, 0.500000)">
+            <path d="M7.98058644,2.48058644 C7.98058644,1.11059638 6.86999006,0 5.5,0 C4.13000994,0 3.01941356,1.11059638 3.01941356,2.48058644 C3.01941356,3.39391315 3.01941356,4.09482878 3.01941356,4.58333333 L7.98058644,4.58333333 C7.98058644,4.09482878 7.98058644,3.39391315 7.98058644,2.48058644 Z" id="Lock" stroke="#1B2559" stroke-linejoin="round"></path>
+            <rect id="Body" stroke="#1B2559" stroke-linejoin="round" x="0" y="4.58333333" width="11" height="6.41666667"></rect>
+            <circle id="Key-Hole" fill="#1B2559" cx="5.5" cy="7.33333333" r="1"></circle>
+        </g>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/button/user-role/white.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/user-role/white</title>
+    <g id="icon/button/user-role/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="User-Role-Icon-White" transform="translate(2.500000, 0.500000)" stroke="#FFFFFF">
+            <path d="M5.50008791,6.84274776 L5.5,11 L3.66666667,9.35927189 L1.83333333,11 L1.83223109,6.84216075 C2.37179795,7.15453375 2.99835187,7.33333333 3.66666667,7.33333333 C4.33456272,7.33333333 4.96075021,7.15475774 5.50008791,6.84274776 Z" id="Bottom"></path>
+            <circle id="Top" cx="3.66666667" cy="3.66666667" r="3.66666667"></circle>
+        </g>
+    </g>
+</svg>

new-lamassu-admin/src/styling/icons/button/user-role/zodiac.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/user-role/zodiac</title>
+    <g id="icon/button/user-role/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="User-Role-Icon-Zodiac" transform="translate(2.500000, 0.500000)" stroke="#1B2559">
+            <path d="M5.50008791,6.84274776 L5.5,11 L3.66666667,9.35927189 L1.83333333,11 L1.83223109,6.84216075 C2.37179795,7.15453375 2.99835187,7.33333333 3.66666667,7.33333333 C4.33456272,7.33333333 4.96075021,7.15475774 5.50008791,6.84274776 Z" id="Bottom"></path>
+            <circle id="Top" cx="3.66666667" cy="3.66666667" r="3.66666667"></circle>
+        </g>
+    </g>
+</svg>