[DEV-1336] Fix change password page and changed password page

.changeset/silly-lizards-divide.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix change password page and changed password page

apps/nextjs-website/src/_contents/translations.ts

@@ -310,61 +310,7 @@ export const translations = {
     },
   },
   auth: {
-    login: {
-      action: 'Accedi',
-      loginToYourAccount: 'Accedi al tuo account DevPortal',
-      rememberMe: 'Ricordami',
-      forgotPassword: 'Hai dimenticato la password?',
-      noAccount: 'Non hai un account?',
-    },
-    confirmLogin: {
-      title: 'Verifica la tua identità',
-      body: (email: string) =>
-        `Abbiamo inviato un codice di verifica a ${email} Il codice scade tra 3 minuti.`,
-      code: 'Codice di verifica',
-      checkJunkMail:
-        'Non hai ricevuto alcuna email? Controlla la posta indesiderata oppure',
-      continue: 'Continua',
-      resendEmail: 'Reinvia email',
-    },
-    accountActivated: {
-      goToLogin: 'Vai al login',
-      welcomeMessage: 'Ti diamo il benvenuto su PagoPA DevPortal.',
-      yourAccountIsActive: 'Il tuo account è attivo',
-    },
     signUp: {
-      action: 'Iscriviti',
-      createYourAccount: 'Crea il tuo account',
-      confirmComunications:
-        "Inviami e-mail relative alle risorse e agli aggiornamenti sui prodotti. Se questa casella è selezionata, PagoPA ti invierà di tanto in tanto delle e-mail utili e pertinenti. Puoi annullare l'iscrizione in qualsiasi momento.",
-      acceptPolicy1:
-        'Cliccando su iscriviti dichiari di aver preso visione della nostra ',
-      acceptPolicy2: 'privacy policy',
-      acceptPolicy3: ' e dei nostri ',
-      acceptPolicy4: "termini e condizioni d'uso",
-      alreadyHaveAnAccount: 'Hai già un account?',
-      whyCreateAccount: 'Perché iscriversi a PagoPA DevPortal',
-      passwordPolicy:
-        'Minimo 8 caratteri, almeno un numero, almeno una lettera maiuscola e almeno un carattere speciale',
-      emailSent: (email: string) => `Email inviata a ${email}`,
-      advantages: [
-        {
-          title: 'Accedi a contenuti esclusivi',
-          text: 'Assisti ai webinar di PagoPA e interagisci con noi sugli argomenti del momento.',
-        },
-        {
-          title: 'Ricevi aggiornamenti sui nostri prodotti',
-          text: "Non perdere neanche un nuovo contenuto, guida o tutorial. Puoi scegliere di ricevere via email le novità sui prodotti PagoPA e sull'integrazione tecnologica. ",
-        },
-        {
-          title: 'Accedi ai tool per velocizzare i tuoi sviluppi (in arrivo)',
-          text: 'Sblocca tutto il potenziale del DevPortal con API Key, Mocker, SDK ed altro ancora.',
-        },
-        {
-          title: 'Richiedi assistenza su un canale dedicato (in arrivo)',
-          text: 'Avvicinati con facilità alle soluzioni di cui hai bisogno e risolvi le difficoltà con il nostro aiuto.',
-        },
-      ],
       companyRoles: [
         { title: 'Ente pubblico', value: 'public-authority' },
         { title: 'Partner tecnologico', value: 'tech-partner' },
@@ -377,31 +323,5 @@ export const translations = {
         { title: 'Altro', value: 'other' },
       ],
     },
-    confirmSignUp: {
-      confirmSignUp: 'Conferma che sei tu',
-      description: (email: string) =>
-        `Abbiamo inviato una e-mail a ${email}. Clicca sul bottone contenuto al suo interno per verificarla.`,
-      didntReceiveEmail:
-        "Non hai ricevuto l'e-mail? Controlla se nella posta indesiderata oppure",
-      resendEmail: 'Reinvia email',
-      wrongEmail: "L'indirizzo email è errato?",
-    },
-    resetPassword: {
-      title: 'Recupera password',
-      body: 'Inserisci il tuo indirizzo e-mail e ti invieremo le istruzioni per impostare una nuova password.',
-      goBackToLogin: 'Torna al login',
-      send: 'Invia',
-      checkEmailTitle: "Controlla l'email",
-      checkEmail: (email: string) =>
-        `Se esiste un account associato a ${email}, riceverai una e-mail con un link per impostare una nuova password.`,
-      resendEmailPrompt:
-        "Non hai ricevuto l'email? Controlla nella posta indesiderata oppure",
-      resendEmail: 'Reinvia email',
-      wrongEmail: "L'indirizzo e-mail è errato?",
-      passwordSet: 'Password impostata correttamente',
-      newPassword: 'Imposta una nuova password',
-      rememberPassword: 'Ricordi la tua password?',
-      invalidLinkError: 'Il link non è valido',
-    },
   },
 };

apps/nextjs-website/src/app/auth/change-password/page.tsx

@@ -1,19 +1,28 @@
 'use client';
-import { Alert, Box, Grid, Snackbar } from '@mui/material';
+import { Grid } from '@mui/material';
 import PasswordChangedCard from '@/components/organisms/Auth/PasswordChangedCard';
 import ChangePasswordForm from '@/components/organisms/Auth/ChangePasswordForm';
 import { ResetPasswordSteps } from '@/lib/types/resetPasswordSteps';
 import { useCallback, useState, useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Auth } from 'aws-amplify';
 import PageNotFound from '@/app/not-found';
-import { translations } from '@/_contents/translations';
-import { snackbarAutoHideDurationMs } from '@/config';
+import { useTranslations } from 'next-intl';
+import Spinner from '@/components/atoms/Spinner/Spinner';
+import PageBackgroundWrapper from '@/components/atoms/PageBackgroundWrapper/PageBackgroundWrapper';
+import SingleCard from '@/components/atoms/SingleCard/SingleCard';
+import { IllusError } from '@pagopa/mui-italia/dist/illustrations/Error';
+
+enum State {
+  loading = 'loading',
+  error = 'error',
+  errorLink = 'errorLink',
+  success = 'success',
+}
 
 const ChangePassword = () => {
-  const {
-    auth: { resetPassword },
-  } = translations;
+  const confirmation = useTranslations('auth.confirmation');
+
   const searchParams = useSearchParams();
   const username = searchParams.get('username') || '';
   const code = searchParams.get('code') || '';
@@ -22,16 +31,15 @@ const ChangePassword = () => {
     ResetPasswordSteps.CHANGE_PASSWORD
   );
   const [password, setPassword] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [isValidLink, setIsValidLink] = useState(false);
+  const [state, setState] = useState<State>(State.loading);
 
   const onChangePassword = useCallback(async () => {
     const success = await Auth.forgotPasswordSubmit(
       username,
       code,
       password
-    ).catch((err) => {
-      setError(err.message);
+    ).catch(() => {
+      setState(State.errorLink);
       return false;
     });
 
@@ -42,28 +50,24 @@ const ChangePassword = () => {
 
   useEffect(() => {
     if (username != '' && code != '') {
-      setIsValidLink(true);
+      setState(State.success);
     } else {
-      setError(resetPassword.invalidLinkError);
+      setState(State.errorLink);
     }
   }, []);
 
-  return (
-    <>
-      {isValidLink ? (
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '100vw',
-            minHeight: '70vh',
-            backgroundImage: 'url(/images/hero.jpg)',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: 'cover',
-            backgroundPosition: 'bottom right',
-          }}
-        >
+  switch (state) {
+    case State.error:
+      return <PageNotFound />;
+    case State.errorLink:
+      return (
+        <PageBackgroundWrapper>
+          <SingleCard icon={<IllusError />} title={confirmation('title')} />
+        </PageBackgroundWrapper>
+      );
+    case State.success:
+      return (
+        <PageBackgroundWrapper>
           <Grid
             container
             justifyContent='center'
@@ -80,19 +84,11 @@ const ChangePassword = () => {
               <PasswordChangedCard />
             )}
           </Grid>
-        </Box>
-      ) : (
-        <PageNotFound />
-      )}
-      <Snackbar
-        open={!!error}
-        autoHideDuration={snackbarAutoHideDurationMs}
-        onClose={() => setError(null)}
-      >
-        <Alert severity={'error'}>{error}</Alert>
-      </Snackbar>
-    </>
-  );
+        </PageBackgroundWrapper>
+      );
+    default:
+      return <Spinner />;
+  }
 };
 
 export default ChangePassword;

apps/nextjs-website/src/app/auth/confirmation/page.tsx

@@ -10,10 +10,12 @@ import PageBackgroundWrapper from '@/components/atoms/PageBackgroundWrapper/Page
 import SingleCard from '@/components/atoms/SingleCard/SingleCard';
 import { isProduction } from '@/config';
 import { IllusError } from '@pagopa/mui-italia';
+import AccountAlreadyConfirmed from '@/components/organisms/Auth/AccountAlreadyConfirmed';
 
 enum State {
   loading = 'loading',
   resendCode = 'resendCode',
+  alreadyConfirmed = 'alreadyConfirmed',
   error = 'error',
 }
 
@@ -38,7 +40,16 @@ const Confirmation = () => {
           // TODO: remove console warn and handle errors: [CodeMismatchException, ExpiredCodeException, InternalErrorException, LimitExceededException]
           // see apps/nextjs-website/src/app/auth/email-confirmation/page.tsx
           !isProduction && console.warn(error);
-          setState(State.resendCode);
+          switch (error.code) {
+            case 'AliasExistsException':
+              setState(State.alreadyConfirmed);
+              break;
+            case 'LimitExceededException':
+              setState(State.error);
+              break;
+            default:
+              setState(State.resendCode);
+          }
         });
     } else {
       setState(State.error);
@@ -63,6 +74,8 @@ const Confirmation = () => {
   switch (state) {
     case State.error:
       return <PageNotFound />;
+    case State.alreadyConfirmed:
+      return <AccountAlreadyConfirmed />;
     case State.resendCode:
       return (
         <PageBackgroundWrapper>

apps/nextjs-website/src/components/organisms/Auth/AccountAlreadyConfirmed.tsx

@@ -0,0 +1,31 @@
+import PageBackgroundWrapper from '@/components/atoms/PageBackgroundWrapper/PageBackgroundWrapper';
+import SingleCard from '@/components/atoms/SingleCard/SingleCard';
+import { Button } from '@mui/material';
+import { IllusError } from '@pagopa/mui-italia';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+const AccountAlreadyConfirmed = () => {
+  const accountAlreadyConfirmed = useTranslations(
+    'auth.login.accountAlreadyConfirmed'
+  );
+  return (
+    <PageBackgroundWrapper>
+      <SingleCard
+        icon={<IllusError />}
+        title={accountAlreadyConfirmed('yourAccountIsAlreadyConfirmed')}
+        cta={
+          <Button
+            component={Link}
+            disabled={false}
+            variant='contained'
+            href='auth/login'
+          >
+            {accountAlreadyConfirmed('goToLogin')}
+          </Button>
+        }
+      />
+    </PageBackgroundWrapper>
+  );
+};
+export default AccountAlreadyConfirmed;