feat: startup password screen now uses password modal

stylesheets/_session_password.scss

@@ -1,104 +0,0 @@
-.password {
-  height: 100vh;
-  color: var(--white-color); //TODO theming update
-
-  .clear-data-wrapper {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    background-color: var(--black-color);
-
-    .clear-data-container {
-      margin: auto;
-    }
-
-    .warning-info-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .button-group {
-      display: flex;
-      justify-content: space-around;
-    }
-  }
-
-  .password-prompt {
-    &-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: 100%;
-      height: 100%;
-
-      padding: calc(3 * var(--margins-lg));
-    }
-
-    &-error-section {
-      width: 100%;
-      color: var(--text-primary-color);
-      margin: var(--margins-sm);
-
-      .session-label {
-        padding: var(--margins-xs) var(--margins-sm);
-        text-align: center;
-      }
-    }
-
-    &-container {
-      font-family: $session-font-default;
-      color: var(--text-primary-color);
-      display: inline-flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-
-      width: 600px;
-      min-width: 420px;
-      padding: calc(3 * var(--margins-lg)) calc(2 * var(--margins-lg));
-      box-sizing: border-box;
-      background-color: var(--background-secondary-color);
-      border: 1px solid var(--border-color);
-      border-radius: 2px;
-
-      .warning-info-area,
-      .password-info-area {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-
-        h1 {
-          color: var(--text-primary-color);
-        }
-        svg {
-          margin-inline-end: var(--margins-lg);
-        }
-      }
-
-      p,
-      input {
-        margin: var(--margins-lg) 0px;
-      }
-
-      .button-group {
-        display: inline-flex;
-      }
-
-      #password-prompt-input {
-        width: 65%;
-        background-color: var(--text-box-background-color);
-        color: var(--text-box-text-user-color);
-        margin-top: calc(2 * var(--margins-lg));
-        padding: var(--margins-xs) var(--margins-lg);
-        outline: none;
-        border: 1px solid var(--border-color);
-        border-radius: 7px;
-        text-align: center;
-        font-size: 18px;
-        font-family: $session-font-default;
-      }
-    }
-  }
-}

stylesheets/manifest.scss

@@ -34,7 +34,6 @@
 
 // Separate screens
 @import 'session_signin';
-@import 'session_password';
 
 @import 'session_theme';
 @import 'session_left_pane';

ts/components/SessionPasswordPrompt.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
 
-import { SessionIcon } from './icon';
 import autoBind from 'auto-bind';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
 import { SessionSpinner } from './basic/SessionSpinner';
@@ -11,6 +10,7 @@ import styled from 'styled-components';
 import { ToastUtils } from '../session/utils';
 import { isString } from 'lodash';
 import { SessionToastContainer } from './SessionToastContainer';
+import { SessionWrapperModal } from './SessionWrapperModal';
 
 interface State {
   errorCount: number;
@@ -29,7 +29,7 @@ const TextPleaseWait = (props: { isLoading: boolean }) => {
 };
 
 const StyledContent = styled.div`
-  background-color: var(--background-primary-color);
+  background-color: var(--background-secondary-color);
   height: 100%;
   width: 100%;
 `;
@@ -57,56 +57,36 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
 
   public render() {
     const isLoading = this.state.loading;
-
+    const spinner = isLoading ? <SessionSpinner loading={true} /> : null;
-    const wrapperClass = this.state.clearDataView
-      ? 'clear-data-wrapper'
-      : 'password-prompt-wrapper';
-    const containerClass = this.state.clearDataView
-      ? 'clear-data-container'
-      : 'password-prompt-container';
-    const infoAreaClass = this.state.clearDataView ? 'warning-info-area' : 'password-info-area';
-    const infoTitle = this.state.clearDataView
-      ? 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('deleteAccountFromLogin')}</p>
+      <p>{window.i18n('deleteAccountFromLogin')}</p>
     ) : (
-      <input
+      <div className="session-modal__input-group">
-        id="password-prompt-input"
+        <input
-        type="password"
+          type="password"
-        defaultValue=""
+          id="password-prompt-input"
-        placeholder={window.i18n('enterPassword')}
+          defaultValue=""
-        onKeyUp={this.onKeyUp}
+          placeholder={window.i18n('enterPassword')}
-        ref={input => {
+          onKeyUp={this.onKeyUp}
-          this.inputRef = input;
+          ref={input => {
-        }}
+            this.inputRef = input;
-      />
+          }}
-    );
+        />
-    const infoIcon = this.state.clearDataView ?? (
+      </div>
-      <SessionIcon iconType="warning" iconSize={35} iconColor="var(--danger-color)" />
     );
 
-    const spinner = isLoading ? <SessionSpinner loading={true} /> : null;
-
     return (
-      <div className="password">
+      <SessionWrapperModal
-        <div className={wrapperClass}>
+        title={
-          <div className={containerClass}>
+          this.state.clearDataView ? window.i18n('clearDevice') : window.i18n('passwordViewTitle')
-            <div className={infoAreaClass}>
+        }
-              {infoIcon}
+      >
-
+        {spinner || featureElement}
-              <h1>{infoTitle}</h1>
+        <TextPleaseWait isLoading={isLoading} />
-            </div>
+        {this.state.clearDataView
-            {spinner || featureElement}
+          ? this.renderClearDataViewButtons()
-            <TextPleaseWait isLoading={isLoading} />
+          : this.renderPasswordViewButtons()}
-
+      </SessionWrapperModal>
-            {buttonGroup}
-          </div>
-        </div>
-      </div>
     );
   }
 
@@ -168,7 +148,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
     const showResetElements = this.state.errorCount >= MAX_LOGIN_TRIES;
 
     return (
-      <div className={classNames(showResetElements && 'button-group')}>
+      <div className={classNames(showResetElements && 'session-modal__button-group')}>
         {showResetElements && (
           <>
             <SessionButton
@@ -179,7 +159,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
             />
           </>
         )}
-        {/* TODO Theming - Fix */}
         <SessionButton
           text={showResetElements ? window.i18n('tryAgain') : window.i18n('done')}
           buttonType={SessionButtonType.Simple}
@@ -191,7 +170,7 @@ class SessionPasswordPromptInner extends React.PureComponent<{}, State> {
 
   private renderClearDataViewButtons(): JSX.Element {
     return (
-      <div className="button-group">
+      <div className="session-modal__button-group">
         <SessionButton
           text={window.i18n('clearDevice')}
           buttonColor={SessionButtonColor.Danger}

ts/mains/main_node.ts

@@ -957,8 +957,8 @@ ipc.on('password-window-login', async (event, passPhrase) => {
     await showMainWindow(passPhrase, passwordAttempt);
     sendResponse(undefined);
   } catch (e) {
-    const localisedError = locale.messages.invalidPassword;
+    const localisedError = locale.messages.removePasswordInvalid;
-    sendResponse(localisedError || 'Invalid password');
+    sendResponse(localisedError);
   }
 });
 

ts/themes/SessionTheme.tsx

@@ -489,7 +489,6 @@ export const SessionGlobalStyles = createGlobalStyle`
     --border-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
 
     /* Text Box */
-    /* Also used for inputs specifically password box input */
     --text-box-background-color: var(--background-primary-color);
     --text-box-text-control-color: var(--text-secondary-color);
     --text-box-text-user-color: var(--text-primary-color);