feat(ui): add reset password page (#1961)

* feat(ui): add reset password form page add reset passsword form page * fix(ui): fix ut fix ut * fix(ui): fix ut typo fix ut typo
logto-io · Sep 20, 2022 · ff81b0f · ff81b0f
1 parent a1aef26
commit ff81b0f
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 0 deletions.
diff --git a/packages/phrases-ui/src/locales/en.ts b/packages/phrases-ui/src/locales/en.ts
@@ -55,6 +55,7 @@ const translation = {
       'Enter the email address associated with your account, and we’ll email you the verification code to reset your password.',
     reset_password_description_sms:
       'Enter the phone number associated with your account, and we’ll text you the verification code to reset your password.',
+    new_password: 'New password',
   },
   error: {
     username_password_mismatch: 'Username and password do not match',

diff --git a/packages/phrases-ui/src/locales/fr.ts b/packages/phrases-ui/src/locales/fr.ts
@@ -59,6 +59,7 @@ const translation = {
       "Entrez l'adresse e-mail associée à votre compte et nous vous enverrons par e-mail le code de vérification pour réinitialiser votre mot de passe.",
     reset_password_description_sms:
       'Entrez le numéro de téléphone associé à votre compte et nous vous enverrons le code de vérification par SMS pour réinitialiser votre mot de passe.',
+    new_password: 'Nouveau mot de passe',
   },
   error: {
     username_password_mismatch: "Le nom d'utilisateur et le mot de passe ne correspondent pas",

diff --git a/packages/phrases-ui/src/locales/ko-kr.ts b/packages/phrases-ui/src/locales/ko-kr.ts
@@ -55,6 +55,7 @@ const translation = {
       '계정과 연결된 이메일 주소를 입력하면 비밀번호 재설정을 위한 인증 코드를 이메일로 보내드립니다.',
     reset_password_description_sms:
       '계정과 연결된 전화번호를 입력하면 비밀번호 재설정을 위한 인증 코드를 문자로 보내드립니다.',
+    new_password: '새 비밀번호',
   },
   error: {
     username_password_mismatch: '사용자 이름 또는 비밀번호가 일치하지 않아요.',

diff --git a/packages/phrases-ui/src/locales/pt-pt.ts b/packages/phrases-ui/src/locales/pt-pt.ts
@@ -55,6 +55,7 @@ const translation = {
       'Digite o endereço de email associado à sua conta e enviaremos um email com o código de verificação para redefinir sua senha.',
     reset_password_description_sms:
       'Digite o número de telefone associado à sua conta e enviaremos uma mensagem de texto com o código de verificação para redefinir sua senha.',
+    new_password: 'Nova Senha',
   },
   error: {
     username_password_mismatch: 'O Utilizador e a password não correspondem',

diff --git a/packages/phrases-ui/src/locales/tr-tr.ts b/packages/phrases-ui/src/locales/tr-tr.ts
@@ -56,6 +56,7 @@ const translation = {
       'Hesabınızla ilişkili e-posta adresini girin, şifrenizi sıfırlamak için size doğrulama kodunu e-posta ile gönderelim.',
     reset_password_description_sms:
       'Hesabınızla ilişkili telefon numarasını girin, şifrenizi sıfırlamak için size doğrulama kodunu kısa mesajla gönderelim.',
+    new_password: 'Yeni Şifre',
   },
   error: {
     username_password_mismatch: 'Kullanıcı adı ve şifre eşleşmiyor.',

diff --git a/packages/phrases-ui/src/locales/zh-cn.ts b/packages/phrases-ui/src/locales/zh-cn.ts
@@ -55,6 +55,7 @@ const translation = {
       '输入与你的帐户关联的电子邮箱地址，我们将通过电子邮件向您发送验证码以重置你的密码。',
     reset_password_description_sms:
       '输入与你的帐户关联的电话号码，我们将向您发送验证码以重置你的密码。',
+    new_password: '新密码',
   },
   error: {
     username_password_mismatch: '用户名和密码不匹配',

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
@@ -12,6 +12,7 @@ import ErrorPage from './pages/ErrorPage';
 import ForgotPassword from './pages/ForgotPassword';
 import Passcode from './pages/Passcode';
 import Register from './pages/Register';
+import ResetPassword from './pages/ResetPassword';
 import SecondarySignIn from './pages/SecondarySignIn';
 import SignIn from './pages/SignIn';
 import SocialLanding from './pages/SocialLanding';
@@ -69,6 +70,7 @@ const App = () => {
 
               {/* forgot password */}
               <Route path="/forgot-password/:method" element={<ForgotPassword />} />
+              <Route path="/reset-password" element={<ResetPassword />} />
 
               {/* social sign-in pages */}
 

diff --git a/packages/ui/src/pages/ResetPassword/index.module.scss b/packages/ui/src/pages/ResetPassword/index.module.scss
@@ -0,0 +1,39 @@
+@use '@/scss/underscore' as _;
+
+.wrapper {
+  @include _.full-page;
+}
+
+.container {
+  @include _.full-width;
+  margin-top: _.unit(2);
+}
+
+.title {
+  @include _.title;
+}
+
+:global(body.mobile) {
+  .container {
+    margin-top: _.unit(2);
+  }
+
+  .title {
+    margin-bottom: _.unit(6);
+  }
+}
+
+:global(body.desktop) {
+  .container {
+    margin-top: _.unit(12);
+  }
+
+  .title {
+    font: var(--font-title-medium);
+    margin-bottom: _.unit(4);
+  }
+
+  .description {
+    font: var(--font-caption);
+  }
+}
diff --git a/packages/ui/src/pages/ResetPassword/index.test.tsx b/packages/ui/src/pages/ResetPassword/index.test.tsx
@@ -0,0 +1,18 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+
+import ResetPassword from '.';
+
+describe('ForgotPassword', () => {
+  it('render reset-password page properly', () => {
+    const { queryByText } = render(
+      <MemoryRouter initialEntries={['/reset-password']}>
+        <Routes>
+          <Route path="/reset-password" element={<ResetPassword />} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    expect(queryByText('description.new_password')).not.toBeNull();
+  });
+});
diff --git a/packages/ui/src/pages/ResetPassword/index.tsx b/packages/ui/src/pages/ResetPassword/index.tsx
@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next';
+
+import NavBar from '@/components/NavBar';
+
+import * as styles from './index.module.scss';
+
+const ResetPassword = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.wrapper}>
+      <NavBar />
+      <div className={styles.container}>
+        <div className={styles.title}>{t('description.new_password')}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;