fix: copy of login screen with password and setting screen

Author: Bilb

_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",
-  "changePasswordTitle": "Changed Password",
-  "removePasswordTitle": "Removed Password",
+  "setPasswordTitle": "Password Set",
+  "changePasswordTitle": "Password Changed",
+  "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"
-              buttonType={SessionButtonType.BrandOutline}
+              text={window.i18n('clearDevice')}
+              buttonType={SessionButtonType.BrandOutline} // TODO: theming update
               buttonColor={SessionButtonColor.Danger}
               onClick={this.initClearDataView}
             />
           </>
         )}
         <SessionButton
-          text={window.i18n('done')}
-          buttonType={SessionButtonType.BrandOutline}
-          buttonColor={SessionButtonColor.Green}
+          text={showResetElements ? window.i18n('tryAgain') : window.i18n('done')}
+          buttonType={SessionButtonType.BrandOutline} // TODO: theming update
+          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}
-          buttonColor={SessionButtonColor.Primary}
+          buttonType={SessionButtonType.BrandOutline}
+          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`