Settings lock view; logic WIP

_locales/en/messages.json

@@ -943,6 +943,9 @@
   "ok": {
     "message": "OK"
   },
+  "enter": {
+    "message": "Enter"
+  },
   "yes": {
     "message": "Yes"
   },

stylesheets/_session.scss

@@ -317,11 +317,16 @@ $session_message-container-border-radius: 5px;
   &.brand {
     min-width: 165px;
     height: 45px;
-    line-height: 45px;
+    line-height: 40px;
     padding: 0;
     font-size: 15px;
     font-family: $session-font-family;
     border-radius: 500px;
+
+    &:hover {
+      color: $session-color-white;
+      border-color: $session-color-white;
+    }
   }
 
   &.default,
@@ -910,6 +915,8 @@ label {
 .session-settings {
   width: 100%;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
 
   &-list {
     overflow-y: scroll;
@@ -970,6 +977,48 @@ label {
       }
     }
   }
+
+  &__password-lock{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+  
+    &-box{
+      padding: 45px 60px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      max-width: 90%;
+      width: 600px;
+
+      background-color: $session-shade-4;
+      border: 1px solid $session-shade-8;
+      border-radius: 5px;
+
+      h3 {
+        padding: 0px;
+        margin-bottom: $session-margin-lg;
+      }
+
+      input {
+        width: 100%;
+        color: $session-color-white;
+        background-color: $session-shade-7;
+        padding: $session-margin-xs $session-margin-md;
+        margin-bottom: $session-margin-lg;
+        outline: none;
+        border: none;
+        border-radius: 2px;
+        text-align:center;
+        font-size: 25px;
+        letter-spacing: 5px;
+        font-family: "SF Pro Text";
+      }
+      
+    }  
+  }
 }
 
 #qr svg {
@@ -1176,3 +1225,4 @@ button.module-scroll-down {
     background-color: $session-shade-8;
   }
 }
+

ts/components/session/settings/SessionSettings.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { SettingsHeader } from './SessionSettingsHeader';
 import { SessionSettingListItem } from './SessionSettingListItem';
-import { SessionButtonColor } from '../SessionButton';
+import { SessionButtonColor, SessionButton, SessionButtonType } from '../SessionButton';
 
 export enum SessionSettingCategory {
   General = 'general',
@@ -251,6 +251,31 @@ 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>
+            {window.i18n('password')}
+          </h3>
+          <input
+            type="password" 
+            id="password-modal-input"
+            placeholder=""
+          />
+          <SessionButton
+            buttonType={SessionButtonType.BrandOutline}
+            buttonColor={SessionButtonColor.Green}
+            text={window.i18n('enter')}
+          />
+          
+        </div>
+      </div>
+    );
+  }
+
   public hasPassword() {
     const hashPromise = window.Signal.Data.getPasswordHash();
 
@@ -263,13 +288,19 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
 
   public render() {
     const { category } = this.props;
+    const shouldRenderPasswordLock = this.state.hasPassword === true;
 
     return (
       <div className="session-settings">
         <SettingsHeader category={category} />
-        <div ref={this.settingsViewRef} className="session-settings-list">
-          {this.renderSettingInCategory()}
-        </div>
+        {shouldRenderPasswordLock
+            ? this.renderPasswordLock()
+            : (
+              <div ref={this.settingsViewRef} className="session-settings-list">
+                { this.renderSettingInCategory() }
+              </div>
+            )
+          }
       </div>
     );
   }