feat: Security updates, minor UI fixes

backend/data/src/main/kotlin/io/tolgee/dtos/request/UserMfaRecoveryRequestDto.kt

@@ -7,6 +7,6 @@ import jakarta.validation.constraints.Size
 @JsonIgnoreProperties(ignoreUnknown = true)
 data class UserMfaRecoveryRequestDto(
  @field:NotBlank
- @field:Size(max = 50)
+ @field:Size(max = 200)
  var password: String = ""
 )

backend/data/src/main/kotlin/io/tolgee/dtos/request/UserTotpEnableRequestDto.kt

@@ -17,6 +17,6 @@ data class UserTotpEnableRequestDto(
  var otp: String = "",
 
  @field:NotBlank
- @field:Size(max = 50)
+ @field:Size(max = 200)
  var password: String = ""
 )

backend/data/src/main/kotlin/io/tolgee/dtos/request/UserUpdatePasswordRequestDto.kt

@@ -7,9 +7,9 @@ import jakarta.validation.constraints.Size
 @JsonIgnoreProperties(ignoreUnknown = true)
 data class UserUpdatePasswordRequestDto(
  @field:NotBlank
- @field:Size(max = 50)
+ @field:Size(max = 200)
  var currentPassword: String = "",
 
- @field:Size(min = 8, max = 50)
+ @field:Size(min = 8, max = 200)
  var password: String = ""
 )

backend/data/src/main/kotlin/io/tolgee/dtos/request/UserUpdateRequestDto.kt

@@ -13,7 +13,7 @@ data class UserUpdateRequestDto(
  @field:NotBlank
  var email: String = "",
 
- @field:Size(max = 50)
+ @field:Size(max = 200)
  var currentPassword: String? = null,
 
  @Schema(

backend/data/src/main/kotlin/io/tolgee/dtos/request/auth/ResetPassword.kt

@@ -10,6 +10,6 @@ data class ResetPassword(
  @field:NotBlank
  var code: String? = null,
 
- @field:Size(min = 8, max = 50)
+ @field:Size(min = 8, max = 200)
  var password: String? = null,
 )

backend/data/src/main/kotlin/io/tolgee/dtos/request/auth/SignUpDto.kt

@@ -14,7 +14,7 @@ data class SignUpDto(
  @field:Size(min = 3, max = 50)
  var organizationName: String? = null,
 
- @field:Size(min = 8, max = 50)
+ @field:Size(min = 8, max = 200)
  @field:NotBlank
  var password: String? = null,
 

backend/data/src/main/kotlin/io/tolgee/service/security/UserAccountService.kt

@@ -323,7 +323,7 @@ class UserAccountService(
  }
 
  val matches = passwordEncoder.matches(dto.currentPassword, userAccount.password)
- if (!matches) throw PermissionException()
+ if (!matches) throw PermissionException(Message.WRONG_CURRENT_PASSWORD)
 
  userAccount.tokensValidNotBefore = DateUtils.truncate(Date(), Calendar.SECOND)
  userAccount.password = passwordEncoder.encode(dto.password)

e2e/cypress/common/login.ts

@@ -72,8 +72,7 @@ export const fillAndSubmitSignUpForm = (
  if (withOrganization) {
  cy.xpath(getInput('organizationName')).type('organization');
  }
- cy.xpath(getInput('password')).type('password');
- cy.xpath(getInput('passwordRepeat')).type('password');
+ cy.xpath(getInput('password')).type('password1!');
  gcy('sign-up-submit-button').click();
 };
 

e2e/cypress/e2e/security/login.cy.ts

@@ -86,9 +86,8 @@ context('Login', () => {
  getParsedResetPasswordEmail().then((r) => {
  cy.visit(r.resetLink);
  });
- const newPassword = 'new_password';
+ const newPassword = 'new_password1!';
  cy.xpath("//*[@name='password']").type(newPassword);
- cy.xpath("//*[@name='passwordRepeat']").type(newPassword);
  cy.contains('Save new password').click();
  assertMessage('Password successfully reset');
  login(username, newPassword);

e2e/cypress/e2e/userSettings/accountSecurity.cy.ts

@@ -26,16 +26,14 @@ describe('Account security', () => {
  });
 
  it('changes password', () => {
- const superNewPassword = 'super_new_password';
+ const superNewPassword = 'super_new_password!1';
  cy.xpath("//*[@name='currentPassword']").clear().type(INITIAL_PASSWORD);
  cy.xpath("//*[@name='password']").clear().type(superNewPassword);
- cy.xpath("//*[@name='passwordRepeat']").clear().type(superNewPassword);
  cy.contains('Save').click();
  assertMessage('updated');
 
  cy.xpath("//*[@name='currentPassword']").should('not.have.value');
  cy.xpath("//*[@name='password']").should('not.have.value');
- cy.xpath("//*[@name='passwordRepeat']").should('not.have.value');
 
  // Ensure we're still logged in
  cy.reload();

webapp/package.json

@@ -59,6 +59,7 @@
  "uuid": "9.0.0",
  "web-vitals": "^2.1.0",
  "yup": "^0.32.9",
+ "yup-password": "0.2.2",
  "zustand": "4.1.2"
  },
  "scripts": {

webapp/src/component/common/avatar/AvatarImg.tsx

@@ -1,16 +1,14 @@
 import { AutoAvatar } from './AutoAvatar';
 import { AvatarOwner } from './ProfileAvatar';
-import { styled, useTheme } from '@mui/material';
+import { styled } from '@mui/material';
 
 const StyledContainer = styled('div')`
  overflow: hidden;
  display: flex;
 `;
 
 export const AvatarImg = (props: { size: number; owner: AvatarOwner }) => {
- const theme = useTheme();
- const background =
- theme.palette.mode === 'dark' ? 'rgb(239, 239, 239)' : 'rgb(230, 230, 230)';
+ const background = 'rgb(242, 242, 242)';
  const avatarPath =
  props.size <= 50
  ? props.owner.avatar?.thumbnail

webapp/src/component/layout/CompactView.tsx

@@ -17,6 +17,7 @@ const StyledContainer = styled('div')`
  align-items: space-between;
  justify-items: stretch;
  grid-template-rows: 1fr auto;
+ padding: 0 32px 0 32px;
 `;
 
 const StyledInner = styled('div')`

webapp/src/component/security/ResetPasswordSetView.tsx

@@ -16,14 +16,13 @@ import LoadingButton from 'tg.component/common/form/LoadingButton';
 import { Alert } from '../common/Alert';
 import { StandardForm } from '../common/form/StandardForm';
 import { DashboardPage } from '../layout/DashboardPage';
-import { SetPasswordFields } from './SetPasswordFields';
+import { NewPasswordLabel, SetPasswordField } from './SetPasswordField';
 import { useLogout } from 'tg.hooks/useLogout';
 
 const globalActions = container.resolve(GlobalActions);
 
 type ValueType = {
  password: string;
- passwordRepeat: string;
 };
 
 const PasswordResetSetView: FunctionComponent = () => {
@@ -81,10 +80,11 @@ const PasswordResetSetView: FunctionComponent = () => {
  }
  windowTitle={t('reset_password_set_title')}
  title={t('reset_password_set_title')}
+ maxWidth={650}
  content={
  <StandardForm
- initialValues={{ password: '', passwordRepeat: '' } as ValueType}
- validationSchema={Validation.USER_PASSWORD_WITH_REPEAT}
+ initialValues={{ password: '' } as ValueType}
+ validationSchema={Validation.PASSWORD_RESET(t)}
  submitButtons={
  <>
  <Box display="flex">
@@ -111,7 +111,7 @@ const PasswordResetSetView: FunctionComponent = () => {
  );
  }}
  >
- <SetPasswordFields />
+ <SetPasswordField label={<NewPasswordLabel />} />
  </StandardForm>
  }
  />

webapp/src/component/security/ResetPasswordView.tsx

@@ -61,6 +61,7 @@ const PasswordResetView: FunctionComponent<LoginProps> = () => {
  windowTitle={t('reset_password_title')}
  title={t('reset_password_title')}
  backLink={LINKS.LOGIN.build()}
+ maxWidth={650}
  content={
  loadable.loaded ? (
  <Alert severity="success">

webapp/src/component/security/SetPasswordField.tsx

@@ -0,0 +1,31 @@
+import { default as React, FunctionComponent, ReactNode } from 'react';
+import { T } from '@tolgee/react';
+
+import { TextField } from '../common/form/fields/TextField';
+
+interface SetPasswordFieldsProps {
+ label: ReactNode;
+}
+
+export const PasswordLabel = () => {
+ return <T keyName="Password" />;
+};
+
+export const NewPasswordLabel = () => {
+ return <T keyName="new-password-input-label" />;
+};
+
+export const SetPasswordField: FunctionComponent<SetPasswordFieldsProps> = (
+ props
+) => {
+ return (
+ <>
+ <TextField
+ name="password"
+ type="password"
+ label={props.label}
+ variant="standard"
+ />
+ </>
+ );
+};

webapp/src/component/security/SignUp/SignUpForm.tsx

@@ -9,7 +9,7 @@ import {
 import { TextField } from 'tg.component/common/form/fields/TextField';
 import { InvitationCodeService } from 'tg.service/InvitationCodeService';
 import { Validation } from 'tg.constants/GlobalValidationSchema';
-import { SetPasswordFields } from '../SetPasswordFields';
+import { PasswordLabel, SetPasswordField } from '../SetPasswordField';
 import { useConfig } from 'tg.globalContext/helpers';
 import { ResourceErrorComponent } from '../../common/form/ResourceErrorComponent';
 import { Alert } from '../../common/Alert';
@@ -19,7 +19,6 @@ export type SignUpType = {
  name: string;
  email: string;
  password: string;
- passwordRepeat?: string;
  organizationName: string;
  invitationCode?: string;
 };
@@ -64,7 +63,6 @@ export const SignUpForm = (props: Props) => {
  initialValues={
  {
  password: '',
- passwordRepeat: '',
  name: '',
  email: '',
  organizationName: orgRequired ? '' : undefined,
@@ -104,7 +102,7 @@ export const SignUpForm = (props: Props) => {
  variant="standard"
  />
  )}
- <SetPasswordFields />
+ <SetPasswordField label={<PasswordLabel />} />
  <Box mt={2} mb={3}>
  <Typography variant="body2">
  <T

webapp/src/component/security/SignUp/SignUpView.tsx

@@ -27,7 +27,6 @@ export type SignUpType = {
  name: string;
  email: string;
  password: string;
- passwordRepeat?: string;
  organizationName: string;
  invitationCode?: string;
 };
@@ -72,8 +71,6 @@ export const SignUpView: FunctionComponent = () => {
  recaptchaToken: await getRecaptchaToken(),
  } as SignUpType;
 
- delete request.passwordRepeat;
-
  signUpMutation.mutate(
  { content: { 'application/json': request } },
  {