feat: implement credentials information on Prefs -> Account pane (#632)

* feat: implement prefs -> credentials section UI (w/o backend integration) * feat: implement credentials information on Prefs -> Account pane - implement email changing UI (w/o backend integration) - implement password changing UI and reuse existing change password logic - replace 2FA dialog with shared one - implement React hook for preventing window refresh * fix: provide correct types * refactor: reuse styles from stylekit, rename components and create enum for input types * refactor: update default exports to named ones, correct texts * chore: remove unnecessary depenedency * chore: yarn.lock without unnecessary packages * Revert "chore: yarn.lock without unnecessary packages" This reverts commit 64aa75e8408b06884d6e7383180292a4a9a3e8ad.
2021-09-09 19:23:21 +04:00
parent 7b1499d75e
commit b0ed19d6a3
23 changed files with 551 additions and 108 deletions
--- a/app/assets/javascripts/preferences/panes/account/ChangeEmail.tsx
+++ b/app/assets/javascripts/preferences/panes/account/ChangeEmail.tsx
@@ -0,0 +1,79 @@
+import {
+  ModalDialog,
+  ModalDialogButtons,
+  ModalDialogDescription,
+  ModalDialogLabel
+} from '@/components/shared/ModalDialog';
+import { FunctionalComponent } from 'preact';
+import { DecoratedInput } from '@/components/DecoratedInput';
+import { Button } from '@/components/Button';
+import { useState } from 'preact/hooks';
+import { SNAlertService } from '@node_modules/@standardnotes/snjs';
+import { HtmlInputTypes } from '@/enums';
+import { isEmailValid } from '@/utils';
+
+type Props = {
+  onCloseDialog: () => void;
+  snAlert: SNAlertService['alert']
+};
+
+export const ChangeEmail: FunctionalComponent<Props> = ({ onCloseDialog, snAlert }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = () => {
+    let errorMessage = '';
+    if (email.trim() === '' || password.trim() === '') {
+      errorMessage = 'Some fields have not been filled out. Please fill out all fields and try again.';
+    } else if (!isEmailValid(email)) {
+      errorMessage = 'The email you entered has an invalid format. Please review your input and try again.';
+    }
+
+    if (errorMessage) {
+      snAlert(errorMessage);
+      return;
+    }
+  };
+
+  return (
+    <div>
+      <ModalDialog>
+        <ModalDialogLabel closeDialog={onCloseDialog}>
+          Change Email
+        </ModalDialogLabel>
+        <ModalDialogDescription>
+          <div className={'mt-2 mb-3'}>
+            <DecoratedInput
+              onChange={(newEmail) => {
+                setEmail(newEmail);
+              }}
+              text={email}
+              placeholder={'New Email'}
+            />
+          </div>
+          <div className={'mt-2 mb-3'}>
+            <DecoratedInput
+              type={HtmlInputTypes.Password}
+              placeholder={'Password'}
+              onChange={password => setPassword(password)}
+            />
+          </div>
+        </ModalDialogDescription>
+        <ModalDialogButtons>
+          <Button
+            className="min-w-20"
+            type="normal"
+            label="Cancel"
+            onClick={onCloseDialog}
+          />
+          <Button
+            className="min-w-20"
+            type="primary"
+            label="Submit"
+            onClick={handleSubmit}
+          />
+        </ModalDialogButtons>
+      </ModalDialog>
+    </div>
+  );
+};
--- a/app/assets/javascripts/preferences/panes/account/Credentials.tsx
+++ b/app/assets/javascripts/preferences/panes/account/Credentials.tsx
@@ -0,0 +1,73 @@
+import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/preferences/components';
+import { Button } from '@/components/Button';
+import { WebApplication } from '@/ui_models/application';
+import { observer } from '@node_modules/mobx-react-lite';
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { dateToLocalizedString } from '@/utils';
+import { useState } from 'preact/hooks';
+import { ChangeEmail } from '@/preferences/panes/account/ChangeEmail';
+import { ChangePassword } from '@/preferences/panes/account/changePassword';
+
+type Props = {
+  application: WebApplication;
+};
+
+export const Credentials = observer(({ application }: Props) => {
+  const [isChangePasswordDialogOpen, setIsChangePasswordDialogOpen] = useState(false);
+  const [isChangeEmailDialogOpen, setIsChangeEmailDialogOpen] = useState(false);
+
+  const user = application.getUser();
+
+  const passwordCreatedAtTimestamp = application.getUserPasswordCreationDate() as Date;
+  const passwordCreatedOn = dateToLocalizedString(passwordCreatedAtTimestamp);
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Credentials</Title>
+        <div className={'text-input mt-2'}>
+          Email
+        </div>
+        <Text>
+          You're signed in as <span className='font-bold'>{user?.email}</span>
+        </Text>
+        <Button
+          className='min-w-20 mt-3'
+          type='normal'
+          label='Change email'
+          onClick={() => {
+            setIsChangeEmailDialogOpen(true);
+          }}
+        />
+        <HorizontalSeparator classes='mt-5 mb-3' />
+        <div className={'text-input mt-2'}>
+          Password
+        </div>
+        <Text>
+          Current password was set on <span className='font-bold'>{passwordCreatedOn}</span>
+        </Text>
+        <Button
+          className='min-w-20 mt-3'
+          type='normal'
+          label='Change password'
+          onClick={() => {
+            setIsChangePasswordDialogOpen(true);
+          }}
+        />
+        {isChangeEmailDialogOpen && (
+          <ChangeEmail
+            onCloseDialog={() => setIsChangeEmailDialogOpen(false)}
+            snAlert={application.alertService.alert}
+          />
+        )}
+        {
+          isChangePasswordDialogOpen && (
+            <ChangePassword
+              onCloseDialog={() => setIsChangePasswordDialogOpen(false)}
+              application={application}
+            />
+          )}
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+});
--- a/app/assets/javascripts/preferences/panes/account/Sync.tsx
+++ b/app/assets/javascripts/preferences/panes/account/Sync.tsx
@@ -11,7 +11,7 @@ type Props = {
  application: WebApplication;
 };

-const Sync = observer(({ application }: Props) => {
+export const Sync = observer(({ application }: Props) => {
  const formatLastSyncDate = (lastUpdatedDate: Date) => {
    return dateToLocalizedString(lastUpdatedDate);
  };
@@ -56,5 +56,3 @@ const Sync = observer(({ application }: Props) => {
    </PreferencesGroup>
  );
 });
-
-export default Sync;
--- a/app/assets/javascripts/preferences/panes/account/changePassword/ChangePasswordForm.tsx
+++ b/app/assets/javascripts/preferences/panes/account/changePassword/ChangePasswordForm.tsx
@@ -0,0 +1,45 @@
+import { DecoratedInput } from '@/components/DecoratedInput';
+import { StateUpdater } from 'preact/hooks';
+import { FunctionalComponent } from 'preact';
+import { HtmlInputTypes } from '@/enums';
+
+type Props = {
+  setCurrentPassword: StateUpdater<string>
+  setNewPassword: StateUpdater<string>
+  setNewPasswordConfirmation: StateUpdater<string>
+}
+export const ChangePasswordForm: FunctionalComponent<Props> = ({
+  setCurrentPassword,
+  setNewPassword,
+  setNewPasswordConfirmation
+}) => {
+  return (
+    (
+      <>
+        <div className={'mt-2 mb-3'}>
+          <DecoratedInput
+            type={HtmlInputTypes.Password}
+            onChange={(currentPassword) => {
+              setCurrentPassword(currentPassword);
+            }}
+            placeholder={'Current Password'}
+          />
+        </div>
+        <div className={'mt-2 mb-3'}>
+          <DecoratedInput
+            type={HtmlInputTypes.Password}
+            placeholder={'New Password'}
+            onChange={newPassword => setNewPassword(newPassword)}
+          />
+        </div>
+        <div className={'mt-2 mb-3'}>
+          <DecoratedInput
+            type={HtmlInputTypes.Password}
+            placeholder={'Confirm New Password'}
+            onChange={newPasswordConfirmation => setNewPasswordConfirmation(newPasswordConfirmation)}
+          />
+        </div>
+      </>
+    )
+  );
+};
--- a/app/assets/javascripts/preferences/panes/account/changePassword/ChangePasswordSuccess.tsx
+++ b/app/assets/javascripts/preferences/panes/account/changePassword/ChangePasswordSuccess.tsx
@@ -0,0 +1,12 @@
+import { FunctionalComponent } from 'preact';
+
+export const ChangePasswordSuccess: FunctionalComponent = () => {
+  return (
+    <>
+      <div className={'sk-label sk-bold info'}>Your password has been successfully changed.</div>
+      <p className={'sk-p'}>
+        Please ensure you are running the latest version of Standard Notes on all platforms to ensure maximum compatibility.
+      </p>
+    </>
+  );
+};
--- a/app/assets/javascripts/preferences/panes/account/changePassword/index.tsx
+++ b/app/assets/javascripts/preferences/panes/account/changePassword/index.tsx
@@ -0,0 +1,191 @@
+import { useState } from '@node_modules/preact/hooks';
+import {
+  ModalDialog,
+  ModalDialogButtons,
+  ModalDialogDescription,
+  ModalDialogLabel
+} from '@/components/shared/ModalDialog';
+import { Button } from '@/components/Button';
+import { FunctionalComponent } from 'preact';
+import { WebApplication } from '@/ui_models/application';
+import { ChangePasswordSuccess } from '@/preferences/panes/account/changePassword/ChangePasswordSuccess';
+import { ChangePasswordForm } from '@/preferences/panes/account/changePassword/ChangePasswordForm';
+import { useBeforeUnload } from '@/hooks/useBeforeUnload';
+
+enum SubmitButtonTitles {
+  Default = 'Continue',
+  GeneratingKeys = 'Generating Keys...',
+  Finish = 'Finish'
+}
+
+enum Steps {
+  InitialStep,
+  FinishStep
+}
+
+type Props = {
+  onCloseDialog: () => void;
+  application: WebApplication;
+}
+
+export const ChangePassword: FunctionalComponent<Props> = ({
+  onCloseDialog,
+  application
+}) => {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [newPasswordConfirmation, setNewPasswordConfirmation] = useState('');
+  const [isContinuing, setIsContinuing] = useState(false);
+  const [lockContinue, setLockContinue] = useState(false);
+  const [submitButtonTitle, setSubmitButtonTitle] = useState(SubmitButtonTitles.Default);
+  const [currentStep, setCurrentStep] = useState(Steps.InitialStep);
+
+  useBeforeUnload();
+
+  const applicationAlertService = application.alertService;
+
+  const validateCurrentPassword = async () => {
+    if (!currentPassword || currentPassword.length === 0) {
+      applicationAlertService.alert(
+        'Please enter your current password.'
+      );
+      return false;
+    }
+
+    if (!newPassword || newPassword.length === 0) {
+      applicationAlertService.alert(
+        'Please enter a new password.'
+      );
+      return false;
+    }
+    if (newPassword !== newPasswordConfirmation) {
+      applicationAlertService.alert(
+        'Your new password does not match its confirmation.'
+      );
+      return false;
+    }
+
+    if (!application.getUser()?.email) {
+      applicationAlertService.alert(
+        'We don\'t have your email stored. Please log out then log back in to fix this issue.'
+      );
+      return false;
+    }
+
+    /** Validate current password */
+    const success = await application.validateAccountPassword(currentPassword);
+    if (!success) {
+      applicationAlertService.alert(
+        'The current password you entered is not correct. Please try again.'
+      );
+    }
+    return success;
+  };
+
+  const resetProgressState = () => {
+    setSubmitButtonTitle(SubmitButtonTitles.Default);
+    setIsContinuing(false);
+  };
+
+  const processPasswordChange = async () => {
+    await application.downloadBackup();
+
+    setLockContinue(true);
+
+    const response = await application.changePassword(
+      currentPassword,
+      newPassword
+    );
+
+    const success = !response.error;
+
+    setLockContinue(false);
+
+    return success;
+  };
+
+  const dismiss = () => {
+    if (lockContinue) {
+      applicationAlertService.alert(
+        'Cannot close window until pending tasks are complete.'
+      );
+    } else {
+      onCloseDialog();
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (lockContinue || isContinuing) {
+      return;
+    }
+
+    if (currentStep === Steps.FinishStep) {
+      dismiss();
+      return;
+    }
+    setIsContinuing(true);
+    setSubmitButtonTitle(SubmitButtonTitles.GeneratingKeys);
+
+    const valid = await validateCurrentPassword();
+
+    if (!valid) {
+      resetProgressState();
+      return;
+    }
+
+    const success = await processPasswordChange();
+    if (!success) {
+      resetProgressState();
+      return;
+    }
+    setIsContinuing(false);
+    setSubmitButtonTitle(SubmitButtonTitles.Finish);
+    setCurrentStep(Steps.FinishStep);
+  };
+
+  const handleDialogClose = () => {
+    if (lockContinue) {
+      applicationAlertService.alert(
+        'Cannot close window until pending tasks are complete.'
+      );
+    } else {
+      onCloseDialog();
+    }
+  };
+
+  return (
+    <div>
+      <ModalDialog>
+        <ModalDialogLabel closeDialog={handleDialogClose}>
+          Change Password
+        </ModalDialogLabel>
+        <ModalDialogDescription>
+          {currentStep === Steps.InitialStep && (
+            <ChangePasswordForm
+              setCurrentPassword={setCurrentPassword}
+              setNewPassword={setNewPassword}
+              setNewPasswordConfirmation={setNewPasswordConfirmation}
+            />
+          )}
+          {currentStep === Steps.FinishStep && <ChangePasswordSuccess />}
+        </ModalDialogDescription>
+        <ModalDialogButtons>
+          {currentStep === Steps.InitialStep && (
+            <Button
+              className='min-w-20'
+              type='normal'
+              label='Cancel'
+              onClick={handleDialogClose}
+            />
+          )}
+          <Button
+            className='min-w-20'
+            type='primary'
+            label={submitButtonTitle}
+            onClick={handleSubmit}
+          />
+        </ModalDialogButtons>
+      </ModalDialog>
+    </div>
+  );
+};
--- a/app/assets/javascripts/preferences/panes/account/index.ts
+++ b/app/assets/javascripts/preferences/panes/account/index.ts
@@ -1 +1,2 @@
-export { default as Sync } from './Sync';
+export { Sync } from './Sync';
+export { Credentials } from './Credentials';