Merge pull request #142 from secretin/new_colors_and_autocomplete

Add icons, colors and autocomplete on sharing
secretin · Mar 30, 2022 · 5dcb92e · 5dcb92e
2 parents e90f543 + 4ff696b
commit 5dcb92e
Show file tree

Hide file tree

Showing 27 changed files with 186 additions and 32 deletions.
diff --git a/public/icons/icon-192x192.png b/public/icons/icon-192x192.png
diff --git a/public/icons/icon-256x256.png b/public/icons/icon-256x256.png
diff --git a/public/icons/icon-384x384.png b/public/icons/icon-384x384.png
diff --git a/public/icons/icon-512x512.png b/public/icons/icon-512x512.png
diff --git a/public/icons/icon.svg b/public/icons/icon.svg
diff --git a/public/index.html b/public/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="theme-color" content="#3498db" />
+    <meta name="theme-color" content="#001769" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, user-scalable=no"
     />
-    <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -->
+    <link rel="shortcut icon" href="%PUBLIC_URL%/icons/icon.svg">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Secret-in</title>
     <script src="%PUBLIC_URL%/app-version.js"></script>

diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,8 +1,38 @@
 {
-  "short_name": "Secret-in.me",
-  "name": "Secret-in.me - Open source secret manager with sharing capability",
-  "start_url": "./index.html",
+  "categories": ["security"],
+  "theme_color": "#001769",
+  "background_color": "#001769",
   "display": "standalone",
-  "theme_color": "#3498db",
-  "background_color": "#fafafa"
-}
+  "scope": "/",
+  "start_url": "./index.html",
+  "name": "Secret-in.me - Open source secret manager with sharing capability",
+  "short_name": "Secret-in.me",
+  "description": "A team-oriented open source password manager with a focus on transparency, usability and security.",
+  "icons": [
+      {
+          "src": "/icons/icon.svg",
+          "sizes": "any",
+          "type": "image/svg+xml"
+      },
+      {
+          "src": "/icons/icon-192x192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+      },
+      {
+          "src": "/icons/icon-256x256.png",
+          "sizes": "256x256",
+          "type": "image/png"
+      },
+      {
+          "src": "/icons/icon-384x384.png",
+          "sizes": "384x384",
+          "type": "image/png"
+      },
+      {
+          "src": "/icons/icon-512x512.png",
+          "sizes": "512x512",
+          "type": "image/png"
+      }
+  ]
+}
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -67,7 +67,12 @@ function Sidebar() {
     <div className="sidebar">
       <div className="sidebar-header">
         <Link to="/" title={isOnline && secretin.api.db}>
-          {isOnline ? 'Secret-In.me' : 'Offline'}
+          <img
+            src="/logo.svg"
+            style={{ width: '100%' }}
+            alt="logo"
+            title={isOnline ? 'Secret-In.me' : 'Offline'}
+          ></img>
         </Link>
       </div>
       <div className="sidebar-content">

diff --git a/src/components/secrets/SecretUserListNew.js b/src/components/secrets/SecretUserListNew.js
@@ -15,6 +15,7 @@ import Icon from 'components/utilities/Icon';
 
 class SecretUserListNew extends Component {
   static propTypes = {
+    knownFriendList: PropTypes.array,
     secret: PropTypes.instanceOf(Secret),
     errors: PropTypes.object,
     dispatch: PropTypes.func,
@@ -84,6 +85,7 @@ class SecretUserListNew extends Component {
           value={this.state.user.username}
           size="small"
           onChange={this.handleChange}
+          autoCompleteFromList={this.props.knownFriendList}
           error={this.props.errors.username}
         />
         <Select
@@ -107,4 +109,11 @@ class SecretUserListNew extends Component {
   }
 }
 
-export default connect()(SecretUserListNew);
+const mapStateToProps = state => {
+  const { knownFriendList } = state.Metadata;
+  return {
+    knownFriendList,
+  };
+};
+
+export default connect(mapStateToProps)(SecretUserListNew);
diff --git a/src/components/users/UserAvatar.js b/src/components/users/UserAvatar.js
@@ -4,12 +4,12 @@ import classNames from 'classnames';
 import User from 'models/User';
 
 const COLORS = [
-  'green-sea',
+  'emerland',
   'nephritis',
   'belize-hole',
   'wisteria',
   'midnight-blue',
-  'orange',
+  'sun-flower',
   'pumpkin',
   'pomegranate',
   'silver',

diff --git a/src/components/users/UserConnectForm.js b/src/components/users/UserConnectForm.js
@@ -82,8 +82,12 @@ class UserConnectForm extends Component {
           className="user-connect-title"
           title={this.props.isOnline && secretin.api.db}
         >
-          Secret-in.me
-          <small>{status}</small>
+          <img
+            src="/logo.svg"
+            style={{ width: '70%' }}
+            alt="logo"
+            title={this.props.isOnline ? 'Secret-In.me' : 'Offline'}
+          />
         </h2>
 
         <Input

diff --git a/src/components/utilities/Input.js b/src/components/utilities/Input.js
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 import Icon from 'components/utilities/Icon';
 import Button from 'components/utilities/Button';
+import Dropdown from 'components/utilities/Dropdown';
 
 class Input extends Component {
   static propTypes = {
@@ -25,6 +26,7 @@ class Input extends Component {
     autoFocus: PropTypes.bool,
     autoSelect: PropTypes.bool,
     autoComplete: PropTypes.bool,
+    autoCompleteFromList: PropTypes.array,
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
     actions: PropTypes.array,
@@ -43,6 +45,7 @@ class Input extends Component {
     autoFocus: false,
     autoSelect: false,
     autoComplete: false,
+    autoCompleteFromList: [],
     disabled: false,
     readOnly: false,
     actions: [],
@@ -57,6 +60,7 @@ class Input extends Component {
     this.onTogglePasswordShow = this.onTogglePasswordShow.bind(this);
     this.id = uniqueId(`${this.props.name}_input_`);
     this.state = {
+      autoCompleteSelected: false,
       showPassword: false,
     };
   }
@@ -77,12 +81,18 @@ class Input extends Component {
   }
 
   handleChange(event) {
+    this.setState({ autoCompleteSelected: false });
     this.props.onChange({
       name: this.props.name,
       value: event.target.value,
     });
   }
 
+  handleAutoCompleteSelect(value) {
+    this.setState({ autoCompleteSelected: true });
+    this.props.onChange({ name: this.props.name, value });
+  }
+
   select() {
     this.input.select();
   }
@@ -109,8 +119,16 @@ class Input extends Component {
       readOnly,
       actions,
       inputProps,
+      autoCompleteFromList,
     } = this.props;
 
+    const filteredAutoCompleteList =
+      this.props.value.length > 0
+        ? autoCompleteFromList.filter(elem =>
+            elem.toLowerCase().includes(this.props.value.toLowerCase())
+          )
+        : [];
+
     return (
       <div className={className}>
         {label && (
@@ -136,12 +154,30 @@ class Input extends Component {
             value={this.props.value}
             onChange={this.handleChange}
             placeholder={placeholder}
-            autoComplete={autoComplete ? null : 'new-password'}
+            autoComplete={autoComplete ? 'on' : 'off'}
             autoFocus={autoFocus}
             disabled={disabled}
             readOnly={readOnly}
             {...inputProps}
           />
+          {!this.state.autoCompleteSelected &&
+            filteredAutoCompleteList.length > 0 && (
+              <Dropdown
+                id="input--auto-complete-list"
+                open={Boolean(this.props.value.length > 0)}
+              >
+                <Dropdown.Menu>
+                  {filteredAutoCompleteList.slice(0, 5).map(elem => (
+                    <Dropdown.MenuItem
+                      key={elem}
+                      onSelect={() => this.handleAutoCompleteSelect(elem)}
+                    >
+                      {elem}
+                    </Dropdown.MenuItem>
+                  ))}
+                </Dropdown.Menu>
+              </Dropdown>
+            )}
           {type === 'password' && (
             <div className="input--password-show">
               <Button

diff --git a/src/slices/MetadataSlice.js b/src/slices/MetadataSlice.js
@@ -34,6 +34,13 @@ const getById = (state, secretId) =>
 const _rebuildMetadata = (state, action) => {
   const { metadata } = action.payload;
   state.metadata = buildSecrets(Object.values(metadata));
+  const friendList = new Set();
+  Object.values(metadata).forEach(metadatum => {
+    Object.values(metadatum.users).forEach(user => {
+      friendList.add(user.username);
+    });
+  });
+  state.knownFriendList = Array.from(friendList).sort();
 };
 
 export const MetadataSlice = createSlice({

diff --git a/src/stylesheets/_common.sass b/src/stylesheets/_common.sass
@@ -37,7 +37,7 @@ h1, h2, h3, h4, h5, h6
 a
   text-decoration: none
   cursor: pointer
-  color: $color-turquoise
+  color: $color-turquoise-my-secret-in
   outline: none
 
 a:hover

diff --git a/src/stylesheets/_vars.sass b/src/stylesheets/_vars.sass
@@ -18,10 +18,13 @@ $color-sun-flower: #f1c40f
 $color-turquoise: #1abc9c
 $color-wet-asphalt: #34495e
 $color-wisteria: #8e44ad
+$color-turquoise-my-secret-in: #0cc7ab
+$color-sun-flower-my-secret-in: #edb824
+$color-ocean-my-secret-in: #001769
 
 $color-brand: #334149
 $color-text: #333
-$color-success: $color-emerland
+$color-success: $color-turquoise-my-secret-in
 $color-error: $color-alizarin
 
 $color-background: #fafafa

diff --git a/src/stylesheets/components/Sidebar.sass b/src/stylesheets/components/Sidebar.sass
@@ -9,7 +9,7 @@
     right: 0
     top: 0
     bottom: 0
-    border-left: 1px solid rgba($color-brand, .05)
+    border-left: 1px solid rgba($color-ocean-my-secret-in, .05)
 
 .sidebar-header
   display: flex
@@ -19,7 +19,7 @@
   font-weight: $font-weight-semibold
   height: 50px
   color: rgba($color-brand, .4)
-  border-bottom: 1px solid rgba($color-brand, .05)
+  border-bottom: 1px solid rgba($color-ocean-my-secret-in, .05)
   a
     color: inherit
     text-decoration: inherit
@@ -39,6 +39,12 @@
   margin: 0
   padding: 0
 
+.sidebar-menu-item .icon
+  fill: $color-ocean-my-secret-in
+
+.sidebar-menu-item .icon--id-logout
+  fill: $color-error
+
 .sidebar-menu-item--home
   @media screen and (max-width: $width-small)
     display: none
@@ -70,4 +76,4 @@
 .sidebar-separator
   margin-top: 20px
   margin-bottom: 20px
-  border-bottom: 1px solid rgba($color-brand, 0.05)
+  border-bottom: 1px solid rgba($color-ocean-my-secret-in, 0.05)
diff --git a/src/stylesheets/components/options/ImportKeepass.sass b/src/stylesheets/components/options/ImportKeepass.sass
@@ -9,7 +9,7 @@
     margin: 0 0 20px
 
   .spinner
-    color: $color-peter-river
+    color: $color-turquoise-my-secret-in
   .icon--id-done
     color: $color-success
 

diff --git a/src/stylesheets/components/secrets/SecretListItem.sass b/src/stylesheets/components/secrets/SecretListItem.sass
@@ -9,7 +9,7 @@
 .secret-list-item
   td
     padding: 0 0 0 10px
-    border-bottom: 1px solid rgba($color-brand, .05)
+    border-bottom: 1px solid rgba($color-ocean-my-secret-in, .05)
     vertical-align: middle
     @media screen and (max-width: $width-small)
       padding: 0 0 0 2px
@@ -94,5 +94,5 @@
   font-size: 18px
   td
     padding: 40px 0 10px 10px
-    border-bottom: 1px solid rgba($color-brand, .05)
+    border-bottom: 1px solid rgba($color-ocean-my-secret-in, .05)
     vertical-align: middle
diff --git a/src/stylesheets/components/users/UserAvatar.sass b/src/stylesheets/components/users/UserAvatar.sass
@@ -27,7 +27,7 @@
   line-height: 12px
 
 .user-avatar--color-turquoise
-  background-color: $color-turquoise
+  background-color: $color-turquoise-my-secret-in
 .user-avatar--color-emerland
   background-color: $color-emerland
 .user-avatar--color-peter-river
@@ -42,6 +42,12 @@
   background-color: $color-nephritis
 .user-avatar--color-belize-hole
   background-color: $color-belize-hole
+.user-avatar--color-ocean-my-secret-in
+  background-color: $color-ocean-my-secret-in
+.user-avatar--color-sun-flower-my-secret-in
+  background-color: $color-sun-flower-my-secret-in
+.user-avatar--color-turquoise-my-secret-in
+  background-color: $color-turquoise-my-secret-in
 .user-avatar--color-wisteria
   background-color: $color-wisteria
 .user-avatar--color-midnight-blue