Merge pull request #2524 from Bilb/fix-settings-and-login-copy

fix: copy of login screen with password and setting screen

_locales/en/messages.json

@@ -114,6 +114,7 @@
   "clear": "Clear",
   "clearAllData": "Clear All Data",
   "deleteAccountWarning": "This will permanently delete your messages and contacts.",
+  "deleteAccountFromLogin": "Are you sure you want to clear your device?",
   "deleteContactConfirmation": "Are you sure you want to delete this conversation?",
   "quoteThumbnailAlt": "Thumbnail of image from quoted message",
   "imageAttachmentAlt": "Image attached to message",
@@ -266,16 +267,16 @@
   "updateGroupDialogTitle": "Updating $name$...",
   "showRecoveryPhrase": "Recovery Phrase",
   "yourSessionID": "Your Session ID",
-  "setAccountPasswordTitle": "Set Account Password",
+  "setAccountPasswordTitle": "Password",
   "setAccountPasswordDescription": "Require password to unlock Session.",
-  "changeAccountPasswordTitle": "Change Account Password",
+  "changeAccountPasswordTitle": "Change Password",
   "changeAccountPasswordDescription": "Change the password required to unlock Session.",
-  "removeAccountPasswordTitle": "Remove Account Password",
+  "removeAccountPasswordTitle": "Remove Password",
   "removeAccountPasswordDescription": "Remove the password required to unlock Session.",
   "enterPassword": "Please enter your password",
   "confirmPassword": "Confirm password",
   "enterNewPassword": "Please enter your new password",
-  "confirmNewPassword": "Confirm new password",
+  "confirmNewPassword": "Confirm password",
   "showRecoveryPhrasePasswordRequest": "Please enter your password",
   "recoveryPhraseSavePromptMain": "Your recovery phrase is the master key to your Session ID — you can use it to restore your Session ID if you lose access to your device. Store your recovery phrase in a safe place, and don't give it to anyone.",
   "invalidOpenGroupUrl": "Invalid URL",
@@ -295,12 +296,12 @@
   "setPasswordInvalid": "Passwords do not match",
   "changePasswordInvalid": "The old password you entered is incorrect",
   "removePasswordInvalid": "Incorrect password",
-  "setPasswordTitle": "Set Password",
+  "setPasswordTitle": "Password Set",
-  "changePasswordTitle": "Changed Password",
+  "changePasswordTitle": "Password Changed",
-  "removePasswordTitle": "Removed Password",
+  "removePasswordTitle": "Password Removed",
   "setPasswordToastDescription": "Your password has been set. Please keep it safe.",
   "changePasswordToastDescription": "Your password has been changed. Please keep it safe.",
-  "removePasswordToastDescription": "You have removed your password.",
+  "removePasswordToastDescription": "Your password has been removed.",
   "publicChatExists": "You are already connected to this community",
   "connectToServerFail": "Couldn't join community",
   "connectingToServer": "Connecting...",
@@ -414,6 +415,9 @@
   "dialogClearAllDataDeletionFailedTitleQuestion": "Do you want to delete data from just this device?",
   "dialogClearAllDataDeletionFailedMultiple": "Data not deleted by those Service Nodes: $snodes$",
   "dialogClearAllDataDeletionQuestion": "Would you like to clear this device only, or delete your data from the network as well?",
+  "clearDevice": "Clear Device",
+  "tryAgain": "Try Again",
+  "areYouSureClearDevice": "Are you sure you want to clear your device?",
   "deviceOnly": "Clear Device Only",
   "entireAccount": "Clear Device and Network",
   "areYouSureDeleteDeviceOnly": "Are you sure you want to delete your device data only?",

stylesheets/_session_password.scss

@@ -1,8 +1,16 @@
 .password {
   height: 100vh;
+  color: white; //TODO theming update
 
   .clear-data-wrapper {
-    margin: auto;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    background-color: $session-color-black;
+
+    .clear-data-container {
+      margin: auto;
+    }
 
     .warning-info-area {
       display: flex;

ts/components/SessionPasswordPrompt.tsx

@@ -7,15 +7,17 @@ import autoBind from 'auto-bind';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
 import { SessionSpinner } from './basic/SessionSpinner';
 import { switchHtmlToDarkTheme } from '../state/ducks/SessionTheme';
+import { ToastUtils } from '../session/utils';
+import { isString } from 'lodash';
 
 interface State {
-  error: string;
   errorCount: number;
   clearDataView: boolean;
   loading: boolean;
 }
 
 export const MAX_LOGIN_TRIES = 3;
+// tslint:disable: use-simple-attributes
 
 const TextPleaseWait = (props: { isLoading: boolean }) => {
   if (!props.isLoading) {
@@ -31,7 +33,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
     super(props);
 
     this.state = {
-      error: '',
       errorCount: 0,
       clearDataView: false,
       loading: false,
@@ -48,7 +49,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
   }
 
   public render() {
-    const showResetElements = this.state.errorCount >= MAX_LOGIN_TRIES;
     const isLoading = this.state.loading;
 
     const wrapperClass = this.state.clearDataView
@@ -59,13 +59,13 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
       : 'password-prompt-container';
     const infoAreaClass = this.state.clearDataView ? 'warning-info-area' : 'password-info-area';
     const infoTitle = this.state.clearDataView
-      ? window.i18n('clearAllData')
+      ? window.i18n('clearDevice')
       : window.i18n('passwordViewTitle');
     const buttonGroup = this.state.clearDataView
       ? this.renderClearDataViewButtons()
       : this.renderPasswordViewButtons();
     const featureElement = this.state.clearDataView ? (
-      <p className="text-center">{window.i18n('deleteAccountWarning')}</p>
+      <p className="text-center">{window.i18n('deleteAccountFromLogin')}</p>
     ) : (
       <input
         id="password-prompt-input"
@@ -81,19 +81,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
     const infoIcon = this.state.clearDataView ?? (
       <SessionIcon iconType="warning" iconSize={35} iconColor="#ce0000" />
     );
-    const errorSection = !this.state.clearDataView && (
+
-      <div className="password-prompt-error-section">
-        {this.state.error && (
-          <>
-            {showResetElements ? (
-              <div className="session-label warning">{window.i18n('maxPasswordAttempts')}</div>
-            ) : (
-              <div className="session-label primary">{this.state.error}</div>
-            )}
-          </>
-        )}
-      </div>
-    );
     const spinner = isLoading ? <SessionSpinner loading={true} /> : null;
 
     return (
@@ -108,7 +96,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
             {spinner || featureElement}
             <TextPleaseWait isLoading={isLoading} />
 
-            {errorSection}
             {buttonGroup}
           </div>
         </div>
@@ -137,7 +124,12 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
         errorCount: this.state.errorCount + 1,
       });
 
-      this.setState({ error });
+      if (error && isString(error)) {
+        ToastUtils.pushToastError('onLogin', error);
+      } else if (error?.message && isString(error.message)) {
+        ToastUtils.pushToastError('onLogin', error.message);
+      }
+
       global.setTimeout(() => {
         document.getElementById('password-prompt-input')?.focus();
       }, 50);
@@ -160,7 +152,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
 
   private initClearDataView() {
     this.setState({
-      error: '',
       errorCount: 0,
       clearDataView: true,
     });
@@ -174,17 +165,17 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
         {showResetElements && (
           <>
             <SessionButton
-              text="Reset Database"
+              text={window.i18n('clearDevice')}
-              buttonType={SessionButtonType.BrandOutline}
+              buttonType={SessionButtonType.BrandOutline} // TODO: theming update
               buttonColor={SessionButtonColor.Danger}
               onClick={this.initClearDataView}
             />
           </>
         )}
         <SessionButton
-          text={window.i18n('done')}
+          text={showResetElements ? window.i18n('tryAgain') : window.i18n('done')}
-          buttonType={SessionButtonType.BrandOutline}
+          buttonType={SessionButtonType.BrandOutline} // TODO: theming update
-          buttonColor={SessionButtonColor.Green}
+          buttonColor={SessionButtonColor.White}
           onClick={this.initLogin}
         />
       </div>
@@ -194,21 +185,20 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
   private renderClearDataViewButtons(): JSX.Element {
     return (
       <div className="button-group">
+        <SessionButton
+          text={window.i18n('clearDevice')}
+          buttonType={SessionButtonType.BrandOutline}
+          buttonColor={SessionButtonColor.Danger}
+          onClick={window.clearLocalData}
+        />
         <SessionButton
           text={window.i18n('cancel')}
-          buttonType={SessionButtonType.Default}
+          buttonType={SessionButtonType.BrandOutline}
-          buttonColor={SessionButtonColor.Primary}
+          buttonColor={SessionButtonColor.White} // TODO: theming update
           onClick={() => {
             this.setState({ clearDataView: false });
           }}
         />
-
-        <SessionButton
-          text={window.i18n('clearAllData')}
-          buttonType={SessionButtonType.Default}
-          buttonColor={SessionButtonColor.Danger}
-          onClick={window.clearLocalData}
-        />
       </div>
     );
   }

ts/components/conversation/message/message-content/MessageAuthorText.tsx

@@ -20,7 +20,9 @@ type Props = {
   messageId: string;
 };
 
-const StyledAuthorContainer = styled(Flex)`color: var(--color-text)`;
+const StyledAuthorContainer = styled(Flex)`
+  color: var(--color-text);
+`;
 
 export const MessageAuthorText = (props: Props) => {
   const selected = useSelector(state => getMessageAuthorProps(state as any, props.messageId));

ts/components/dialog/SessionPasswordDialog.tsx

@@ -117,7 +117,7 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
         <div className="session-modal__button-group">
           <SessionButton text={window.i18n('cancel')} onClick={this.closeDialog} />
           <SessionButton
-            text={window.i18n('ok')}
+            text={window.i18n('done')}
             buttonColor={confirmButtonColor}
             onClick={this.setPassword}
           />

ts/components/settings/BlockedList.tsx

@@ -18,14 +18,15 @@ const BlockedEntriesContainer = styled.div`
   overflow: auto;
   min-height: 40px;
   max-height: 100%;
-  background: var(--color-input-background); // TODO theming update
+  background: inherit; // TODO theming update
 `;
 
 const BlockedEntriesRoundedContainer = styled.div`
   overflow: hidden;
   border-radius: 16px;
   padding: var(--margins-lg);
-  background: var(--color-input-background); // TODO theming update
+  background: none; // TODO theming update
+  border: 1px solid #e5e5ea; // TODO Theming update
 `;
 
 const BlockedContactsSection = styled.div`

ts/components/settings/SessionSettings.tsx

@@ -15,6 +15,7 @@ import { matchesHash } from '../../util/passwordUtils';
 import { SettingsCategoryPermissions } from './section/CategoryPermissions';
 import { SettingsCategoryHelp } from './section/CategoryHelp';
 import styled from 'styled-components';
+import { ToastUtils } from '../../session/utils';
 
 export function getMediaPermissionsSettings() {
   return window.getSettingValue('media-permissions');
@@ -42,9 +43,6 @@ export interface SettingsViewProps {
 
 interface State {
   hasPassword: boolean | null;
-  pwdLockError: string | null;
-  mediaSetting: boolean | null;
-  callMediaSetting: boolean | null;
   shouldLockSettings: boolean | null;
 }
 
@@ -93,8 +91,7 @@ const StyledPasswordInput = styled.input`
   border: none;
   border-radius: 2px;
   text-align: center;
-  font-size: 24px;
+  font-size: 16px;
-  letter-spacing: 5px;
   font-family: var(--font-default);
 `;
 
@@ -104,31 +101,27 @@ const StyledH3 = styled.h3`
 `;
 
 const PasswordLock = ({
-  pwdLockError,
   validatePasswordLock,
 }: {
-  pwdLockError: string | null;
   validatePasswordLock: () => Promise<boolean>;
 }) => {
   return (
     <div className="session-settings__password-lock">
       <div className="session-settings__password-lock-box">
-        <StyledH3>{window.i18n('password')}</StyledH3>
+        <StyledH3>{window.i18n('passwordViewTitle')}</StyledH3>
         <StyledPasswordInput
           type="password"
           id="password-lock-input"
           defaultValue=""
-          placeholder="Password"
+          placeholder={window.i18n('enterPassword')}
           data-testid="password-lock-input"
           autoFocus={true}
         />
 
-        {pwdLockError && <div className="session-label warning">{pwdLockError}</div>}
-
         <SessionButton
           buttonType={SessionButtonType.BrandOutline}
           buttonColor={SessionButtonColor.Green}
-          text={window.i18n('ok')}
+          text={window.i18n('done')}
           onClick={validatePasswordLock}
         />
       </div>
@@ -195,9 +188,6 @@ export class SessionSettingsView extends React.Component<SettingsViewProps, Stat
 
     this.state = {
       hasPassword: null,
-      pwdLockError: null,
-      mediaSetting: null,
-      callMediaSetting: null,
       shouldLockSettings: true,
     };
 
@@ -213,10 +203,6 @@ export class SessionSettingsView extends React.Component<SettingsViewProps, Stat
 
   public componentDidMount() {
     window.addEventListener('keyup', this.onKeyUp);
-
-    const mediaSetting = getMediaPermissionsSettings();
-    const callMediaSetting = getCallMediaPermissionsSettings();
-    this.setState({ mediaSetting, callMediaSetting });
   }
 
   public componentWillUnmount() {
@@ -229,9 +215,7 @@ export class SessionSettingsView extends React.Component<SettingsViewProps, Stat
     );
 
     if (!enteredPassword) {
-      this.setState({
+      ToastUtils.pushToastError('validatePassword', window.i18n('noGivenPassword'));
-        pwdLockError: window.i18n('noGivenPassword'),
-      });
 
       return false;
     }
@@ -239,17 +223,13 @@ export class SessionSettingsView extends React.Component<SettingsViewProps, Stat
     // Check if the password matches the hash we have stored
     const hash = await Data.getPasswordHash();
     if (hash && !matchesHash(enteredPassword, hash)) {
-      this.setState({
+      ToastUtils.pushToastError('validatePassword', window.i18n('invalidPassword'));
-        pwdLockError: window.i18n('invalidPassword'),
-      });
-
       return false;
     }
 
     // Unlocked settings
     this.setState({
       shouldLockSettings: false,
-      pwdLockError: null,
     });
 
     return true;
@@ -265,10 +245,7 @@ export class SessionSettingsView extends React.Component<SettingsViewProps, Stat
 
         <StyledSettingsView>
           {shouldRenderPasswordLock ? (
-            <PasswordLock
+            <PasswordLock validatePasswordLock={this.validatePasswordLock} />
-              pwdLockError={this.state.pwdLockError}
-              validatePasswordLock={this.validatePasswordLock}
-            />
           ) : (
             <StyledSettingsList ref={this.settingsViewRef}>
               <SettingInCategory
@@ -289,7 +266,6 @@ export class SessionSettingsView extends React.Component<SettingsViewProps, Stat
       this.setState({
         hasPassword: true,
         shouldLockSettings: true,
-        pwdLockError: null,
       });
     }
 

ts/mains/password_start.tsx

@@ -3,10 +3,12 @@
 
 import React from 'react';
 import { SessionPasswordPrompt } from '../components/SessionPasswordPrompt';
+import { SessionToastContainer } from '../components/SessionToastContainer';
 import { SessionTheme } from '../state/ducks/SessionTheme';
 
 window.ReactDOM.render(
   <SessionTheme>
+    <SessionToastContainer />
     <SessionPasswordPrompt />
   </SessionTheme>,
   document.getElementById('root')

ts/types/LocalizerKeys.ts

@@ -162,6 +162,7 @@ export type LocalizerKeys =
   | 'spellCheckDirty'
   | 'debugLogExplanation'
   | 'closedGroupInviteFailTitle'
+  | 'areYouSureClearDevice'
   | 'setAccountPasswordDescription'
   | 'removeAccountPasswordDescription'
   | 'establishingConnection'
@@ -348,6 +349,8 @@ export type LocalizerKeys =
   | 'openGroupInvitation'
   | 'callMissedCausePermission'
   | 'mediaPermissionsDescription'
+  | 'tryAgain'
+  | 'clearDevice'
   | 'media'
   | 'noMembersInThisGroup'
   | 'saveLogToDesktop'
@@ -478,6 +481,7 @@ export type LocalizerKeys =
   | 'titleIsNow'
   | 'removePasswordToastDescription'
   | 'recoveryPhrase'
+  | 'deleteAccountFromLogin'
   | 'newMessages'
   | 'you'
   | 'pruneSettingTitle'