Settings lock completion

js/background.js

@@ -907,17 +907,17 @@
     };
 
     window.toggleMenuBar = () => {
-      const newValue = ! window.getSettingValue('hide-menu-bar');
+      const newValue = !window.getSettingValue('hide-menu-bar');
       window.Events.setHideMenuBar(newValue);
     };
 
     window.toggleSpellCheck = () => {
-      const newValue = ! window.getSettingValue('spell-check');
+      const newValue = !window.getSettingValue('spell-check');
       window.Events.setSpellCheck(newValue);
     };
 
     window.toggleLinkPreview = () => {
-      const newValue = ! window.getSettingValue('link-preview-setting');
+      const newValue = !window.getSettingValue('link-preview-setting');
       window.Events.setLinkPreviewSetting(newValue);
     };
 

stylesheets/_session.scss

@@ -345,7 +345,7 @@ $session_message-container-border-radius: 5px;
     border-radius: 0px;
   }
 
-  & > *:not(svg):hover {
+  & > *:hover:not(svg) {
     filter: brightness(80%);
   }
 }
@@ -978,13 +978,13 @@ label {
     }
   }
 
-  &__password-lock{
+  &__password-lock {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
 
-    &-box{
+    &-box {
       padding: 45px 60px;
       display: flex;
       flex-direction: column;
@@ -1011,12 +1011,11 @@ label {
         outline: none;
         border: none;
         border-radius: 2px;
-        text-align:center;
+        text-align: center;
         font-size: 25px;
         letter-spacing: 5px;
-        font-family: "SF Pro Text";
+        font-family: 'SF Pro Text';
       }
-      
     }
   }
 }
@@ -1225,4 +1224,3 @@ button.module-scroll-down {
     background-color: $session-shade-8;
   }
 }
-

ts/components/session/settings/SessionSettings.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 
 import { SettingsHeader } from './SessionSettingsHeader';
 import { SessionSettingListItem } from './SessionSettingListItem';
-import { SessionButtonColor, SessionButton, SessionButtonType } from '../SessionButton';
+import {
+  SessionButton,
+  SessionButtonColor,
+  SessionButtonType,
+} from '../SessionButton';
 
 export enum SessionSettingCategory {
   General = 'general',
@@ -26,6 +30,8 @@ export interface SettingsViewProps {
 
 interface State {
   hasPassword: boolean | null;
+  shouldLockSettings: boolean | null;
+  pwdLockError: string | null;
 }
 
 export class SettingsView extends React.Component<SettingsViewProps, State> {
@@ -36,10 +42,13 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
 
     this.state = {
       hasPassword: null,
+      pwdLockError: null,
+      shouldLockSettings: true,
     };
 
     this.settingsViewRef = React.createRef();
     this.onPasswordUpdated = this.onPasswordUpdated.bind(this);
+    this.validatePasswordLock = this.validatePasswordLock.bind(this);
 
     this.hasPassword();
   }
@@ -104,7 +113,8 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         content: {
           options: {
             group: 'notification-setting',
-            initalItem: window.getSettingValue('notification-setting') || 'message',
+            initalItem:
+              window.getSettingValue('notification-setting') || 'message',
             items: [
               {
                 label: window.i18n('nameAndMessage'),
@@ -251,31 +261,67 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
     );
   }
 
-
   public renderPasswordLock() {
-    
     return (
       <div className="session-settings__password-lock">
         <div className="session-settings__password-lock-box">
-          <h3>
+          <h3>{window.i18n('password')}</h3>
-            {window.i18n('password')}
-          </h3>
           <input
             type="password"
-            id="password-modal-input"
+            id="password-lock-input"
-            placeholder=""
+            defaultValue=""
+            placeholder={window.i18n('password')}
           />
+
+          {this.state.pwdLockError && (
+            <>
+              <div className="session-label warning">
+                {this.state.pwdLockError}
+              </div>
+              <div className="spacer-lg" />
+            </>
+          )}
+
           <SessionButton
             buttonType={SessionButtonType.BrandOutline}
             buttonColor={SessionButtonColor.Green}
             text={window.i18n('enter')}
+            onClick={this.validatePasswordLock}
           />
-          
         </div>
       </div>
     );
   }
 
+  public async validatePasswordLock() {
+    const enteredPassword = String($('#password-lock-input').val());
+
+    if (!enteredPassword) {
+      this.setState({
+        pwdLockError: window.i18n('noGivenPassword'),
+      });
+
+      return false;
+    }
+
+    // Check if the password matches the hash we have stored
+    const hash = await window.Signal.Data.getPasswordHash();
+    if (hash && !window.passwordUtil.matchesHash(enteredPassword, hash)) {
+      this.setState({
+        pwdLockError: window.i18n('invalidPassword'),
+      });
+
+      return false;
+    }
+
+    // Unlocked settings
+    this.setState({
+      shouldLockSettings: false,
+    });
+
+    return true;
+  }
+
   public hasPassword() {
     const hashPromise = window.Signal.Data.getPasswordHash();
 
@@ -288,19 +334,19 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
 
   public render() {
     const { category } = this.props;
-    const shouldRenderPasswordLock = this.state.hasPassword === true;
+    const shouldRenderPasswordLock =
+      this.state.shouldLockSettings && this.state.hasPassword;
 
     return (
       <div className="session-settings">
         <SettingsHeader category={category} />
-        {shouldRenderPasswordLock
+        {shouldRenderPasswordLock ? (
-            ? this.renderPasswordLock()
+          this.renderPasswordLock()
-            : (
+        ) : (
-              <div ref={this.settingsViewRef} className="session-settings-list">
+          <div ref={this.settingsViewRef} className="session-settings-list">
-                { this.renderSettingInCategory() }
+            {this.renderSettingInCategory()}
-              </div>
+          </div>
-            )
+        )}
-          }
       </div>
     );
   }
@@ -314,7 +360,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
       if (item.type === SessionSettingType.Toggle) {
         // If no custom afterClick function given, alter values in storage here
         // Switch to opposite state
-        const newValue = ! window.getSettingValue(item.id);
+        const newValue = !window.getSettingValue(item.id);
         window.setSettingValue(item.id, newValue);
       }
     }
@@ -326,9 +372,10 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
   }
 
   public onPasswordUpdated(action: string) {
-    if (action === 'set') {
+    if (action === 'set' || action === 'change') {
       this.setState({
         hasPassword: true,
+        shouldLockSettings: true,
       });
     }