style: area chart

src/pages/login/components/password-form.tsx

@@ -47,8 +47,21 @@ const PasswordForm: React.FC = () => {
         style={{ width: '400px', margin: '0 auto', paddingTop: '5%' }}
         onFinish={handleSubmit}
       >
-        <h2 className="justify-center m-b-20">
-          {intl.formatMessage({ id: 'users.password.modify.title' })}
+        <h2 className="justify-center m-b-20 flex-column flex-center">
+          <span>
+            {' '}
+            {intl.formatMessage({ id: 'users.password.modify.title' })}
+          </span>
+          <span
+            style={{
+              padding: '6px 0',
+              fontSize: 'var(--font-size-base)',
+              fontWeight: 'var(--font-weight-normal)',
+              color: 'var(--ant-color-text-tertiary)'
+            }}
+          >
+            {intl.formatMessage({ id: 'users.password.modify.description' })}
+          </span>
         </h2>
 
         <Form.Item
@@ -87,8 +100,42 @@ const PasswordForm: React.FC = () => {
             label={intl.formatMessage({ id: 'users.form.newpassword' })}
           />
         </Form.Item>
+        <Form.Item
+          name="confirm_password"
+          dependencies={['new_password']}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'users.password.confirm.empty'
+              })
+            },
+            ({ getFieldValue }) => ({
+              validator(_, value) {
+                if (!value || getFieldValue('new_password') === value) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(
+                  new Error(
+                    intl.formatMessage({ id: 'users.password.confirm.error' })
+                  )
+                );
+              }
+            })
+          ]}
+        >
+          <SealInput.Password
+            prefix={<LockOutlined />}
+            label={intl.formatMessage({ id: 'users.password.confirm' })}
+          />
+        </Form.Item>
 
-        <Button htmlType="submit" type="primary" block>
+        <Button
+          htmlType="submit"
+          type="primary"
+          block
+          style={{ marginTop: 20 }}
+        >
           {intl.formatMessage({ id: 'common.button.submit' })}
         </Button>
       </Form>