Tenantlı uygulama için ForgotPassword, ResetPassword

api/src/Sozsoft.Platform.Application/Identity/PlatformAccountAppService.cs

@@ -138,11 +138,15 @@ User Detail: {string.Format(userDetailUrl, user.Id)}";
     }
 
     [Captcha]
-    public async Task SendAccountConfirmationCodeAsync(SendAccountConfirmationCodeInputDto input)
+    public async Task<bool> SendAccountConfirmationCodeAsync(SendAccountConfirmationCodeInputDto input)
     {
         var user = await UserManager.FindByEmailAsync(input.EmailAddress);
-        if (user != null)
+        if (user == null)
-            await SendConfirmationCodeAsync(user);
+        {
+            return false;
+        }
+
+        return await SendConfirmationCodeAsync(user);
     }
 
     public async Task<bool> VerifyAccountConfirmationCodeAsync(VerifyAccountConfirmationCodeInputDto input)

api/src/Sozsoft.Platform.Domain/Identity/TurnstileCaptchaManager.cs

@@ -1,4 +1,5 @@
-using System;
+using System;
+using System.Text.Json.Serialization;
 using System.Threading.Tasks;
 using Flurl.Http;
 using Sozsoft.Platform.Localization;
@@ -23,6 +24,11 @@ public class TurnstileCaptchaManager : PlatformDomainService, ICaptchaManager
 
     public async Task<bool> VerifyCaptchaAsync(string CaptchaResponse, bool throwOnFailure = false)
     {
+        if (CaptchaResponse.IsNullOrWhiteSpace())
+        {
+            return false;
+        }
+
         var endPoint = await SettingProvider.GetOrNullAsync(PlatformConsts.AbpAccount.Captcha.EndPoint);
         var privateKey = await SettingProvider.GetOrNullAsync(PlatformConsts.AbpAccount.Captcha.SecretKey);
         if (endPoint.IsNullOrWhiteSpace() || privateKey.IsNullOrWhiteSpace())
@@ -46,18 +52,24 @@ public class TurnstileCaptchaManager : PlatformDomainService, ICaptchaManager
 
         if (response != null && response.StatusCode == 200)
         {
-            var result = await response.GetJsonAsync<dynamic>();
+            var result = await response.GetJsonAsync<TurnstileCaptchaVerifyResponse>();
-            if (!(bool)result.success)
+            if (result?.Success != true)
             {
                 if (throwOnFailure)
                 {
                     throw new UserFriendlyException(Localizer[PlatformConsts.AbpIdentity.User.CaptchaWrongCode]);
                 }
             }
-            return (bool)result.success;
+
+            return result?.Success == true;
         }
 
         return false;
     }
-}
 
+    private class TurnstileCaptchaVerifyResponse
+    {
+        [JsonPropertyName("success")]
+        public bool Success { get; set; }
+    }
+}

api/src/Sozsoft.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs

@@ -187,8 +187,8 @@ public class PlatformHttpApiHostModule : AbpModule
             options.RedirectAllowedUrls.AddRange(configuration["App:RedirectAllowedUrls"]?.Split(',') ?? Array.Empty<string>());
 
             options.Applications[PlatformConsts.React].RootUrl = configuration["App:ClientUrl"];
-            options.Applications[PlatformConsts.React].Urls[PlatformConsts.Urls.EmailConfirmation] = "account/confirm";
+            options.Applications[PlatformConsts.React].Urls[PlatformConsts.Urls.EmailConfirmation] = "confirm";
-            options.Applications[PlatformConsts.React].Urls[PlatformConsts.Urls.PasswordReset] = "account/reset-password";
+            options.Applications[PlatformConsts.React].Urls[PlatformConsts.Urls.PasswordReset] = "reset-password";
             options.Applications[PlatformConsts.React].Urls[PlatformConsts.Urls.UserDetail] = "account/{0}";
 
             //options.Applications["MVC"].RootUrl = configuration["App:SelfUrl"];

ui/src/components/layouts/AuthLayout/Simple.tsx

@@ -4,7 +4,7 @@ import Card from '@/components/ui/Card'
 import Logo from '@/components/template/Logo'
 import type { ReactNode, ReactElement } from 'react'
 import type { CommonProps } from '@/proxy/common'
-import { FaArrowLeft, FaCheck } from 'react-icons/fa';
+import { FaArrowLeft, FaCheck } from 'react-icons/fa'
 import { Avatar, Select } from '@/components/ui'
 import { useStoreActions, useStoreState } from '@/store'
 import appConfig from '@/proxy/configs/app.config'
@@ -90,7 +90,7 @@ const Simple = ({ children, content, ...rest }: SimpleProps) => {
   return (
     <div className="h-full">
       <Container className="flex flex-col flex-auto items-center justify-center min-w-0 h-full">
-        <Card className="min-w-[320px] md:min-w-[450px]" bodyClass="md:p-5">
+        <Card className="w-full min-w-[320px] max-w-[360px] md:min-w-[450px]" bodyClass="md:p-5">
           <div className="flex justify-between items-center mb-2">
             {!hasSubdomain() && (
               <a

ui/src/components/template/Logo.tsx

@@ -28,7 +28,7 @@ const Logo = (props: LogoProps) => {
 
   return (
     <div
-      className={classNames('logo', 'my-1', className)}
+      className={classNames('logo', 'my-2', className)}
       style={{
         ...style,
         ...{ width: logoWidth },

ui/src/components/ui/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import { useState, forwardRef } from 'react'
 import classNames from 'classnames'
 import useTimeout from '../hooks/useTimeout'
-import { FaCheckCircle, FaInfoCircle, FaExclamation, FaTimesCircle } from 'react-icons/fa';
+import { FaCheckCircle, FaInfoCircle, FaExclamation, FaTimesCircle } from 'react-icons/fa'
 import { motion } from 'framer-motion'
 import CloseButton from '../CloseButton'
 import StatusIcon from '../StatusIcon'
@@ -54,12 +54,7 @@ const TYPE_MAP = {
   },
 }
 
-const TYPE_ARRAY: TypeAttributes.Status[] = [
+const TYPE_ARRAY: TypeAttributes.Status[] = ['success', 'danger', 'info', 'warning']
-    'success',
-    'danger',
-    'info',
-    'warning',
-]
 
 const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
   const {
@@ -90,11 +85,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
 
   const [display, setDisplay] = useState('show')
 
-    const { clear } = useTimeout(
+  const { clear } = useTimeout(onClose as () => void, duration, (duration as number) > 0)
-        onClose as () => void,
-        duration,
-        (duration as number) > 0
-    )
 
   const handleClose = (e: MouseEvent<HTMLDivElement>) => {
     setDisplay('hiding')
@@ -109,11 +100,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
 
   const renderClose = () => {
     return (
-            <div
+      <div className="cursor-pointer" role="presentation" onClick={(e) => handleClose(e)}>
-                className="cursor-pointer"
-                role="presentation"
-                onClick={(e) => handleClose(e)}
-            >
         {customClose || <CloseButton defaultStyle={false} />}
       </div>
     )
@@ -130,7 +117,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
     closable ? 'justify-between' : '',
     closable && !title ? 'items-center' : '',
     rounded && 'rounded-lg',
-        className
+    className,
   )
 
   if (display === 'hide') {
@@ -154,22 +141,15 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
       }}
       {...rest}
     >
-            <div className={`flex ${title ? '' : 'items-center'}`}>
+      <div className={`flex min-w-0 ${title ? '' : 'items-center'}`}>
-                {showIcon && (
+        {showIcon && <StatusIcon iconColor={typeMap.iconColor} custom={customIcon} type={type} />}
-                    <StatusIcon
-                        iconColor={typeMap.iconColor}
-                        custom={customIcon}
-                        type={type}
-                    />
-                )}
-                <div className={showIcon ? 'ltr:ml-2 rtl:mr-2' : ''}>
-                    {title ? (
         <div
-                            className={`font-semibold mb-1 ${typeMap.titleColor}`}
+          className={classNames(
+            'min-w-0 flex-1 whitespace-normal break-words leading-6',
+            showIcon ? 'ltr:ml-2 rtl:mr-2' : '',
+          )}
         >
-                            {title}
+          {title ? <div className={`font-semibold mb-1 ${typeMap.titleColor}`}>{title}</div> : null}
-                        </div>
-                    ) : null}
           {children}
         </div>
       </div>

ui/src/routes/dynamicRouter.tsx

@@ -15,6 +15,37 @@ const AccessDenied = React.lazy(() => import('@/views/AccessDenied'))
 const NotFound = React.lazy(() => import('@/views/NotFound'))
 const DatabaseSetup = React.lazy(() => import('@/views/setup/DatabaseSetup'))
 
+const RootRedirect = () => {
+  const location = useLocation()
+  const searchParams = new URLSearchParams(location.search)
+  const isPasswordResetLink = searchParams.has('userId') && searchParams.has('resetToken')
+
+  return (
+    <Navigate
+      to={
+        isPasswordResetLink
+          ? `${ROUTES_ENUM.authenticated.resetPassword}${location.search}`
+          : hasSubdomain()
+            ? ROUTES_ENUM.authenticated.login
+            : ROUTES_ENUM.public.home
+      }
+      replace
+    />
+  )
+}
+
+const LegacyPasswordResetRedirect = () => {
+  const location = useLocation()
+
+  return <Navigate to={`${ROUTES_ENUM.authenticated.resetPassword}${location.search}`} replace />
+}
+
+const LegacyEmailConfirmationRedirect = () => {
+  const location = useLocation()
+
+  return <Navigate to={location.pathname.replace(/^\/account/, '')} replace />
+}
+
 export const DynamicRouter: React.FC = () => {
   const { routes, loading, error } = useDynamicRoutes()
   const { registeredComponents, renderComponent, isComponentRegistered } = useComponents()
@@ -33,7 +64,11 @@ export const DynamicRouter: React.FC = () => {
         {dynamicRoutes
           .filter((r) => r.routeType === 'protected')
           .map((route) => {
-            const Component = route.getComponent(registeredComponents, renderComponent, isComponentRegistered)
+            const Component = route.getComponent(
+              registeredComponents,
+              renderComponent,
+              isComponentRegistered,
+            )
             return (
               <Route
                 key={route.key}
@@ -85,7 +120,11 @@ export const DynamicRouter: React.FC = () => {
           hasSubdomain() ? r.routeType === 'authenticated' : r.routeType !== 'protected',
         )
         .map((route) => {
-          const Component = route.getComponent(registeredComponents, renderComponent, isComponentRegistered)
+          const Component = route.getComponent(
+            registeredComponents,
+            renderComponent,
+            isComponentRegistered,
+          )
           return (
             <Route
               key={route.key}
@@ -100,15 +139,9 @@ export const DynamicRouter: React.FC = () => {
         })}
 
       {/* root redirect */}
-      <Route
+      <Route path="/" element={<RootRedirect />} />
-        path="/"
+      <Route path="/account/confirm/:userId/:token" element={<LegacyEmailConfirmationRedirect />} />
-        element={
+      <Route path="/account/reset-password" element={<LegacyPasswordResetRedirect />} />
-          <Navigate
-            to={hasSubdomain() ? ROUTES_ENUM.authenticated.login : ROUTES_ENUM.public.home}
-            replace
-          />
-        }
-      />
 
       {/* public access denied (statik) */}
       <Route

ui/src/services/account.service.ts

@@ -52,8 +52,8 @@ export const resetPassword = (userId: string, resetToken: string, password: stri
     },
   })
 
-export const sendAccountConfirmationCode = (data: any) => {
+export const sendAccountConfirmationCode = (data: any) =>
-  apiService.fetchData({
+  apiService.fetchData<boolean>({
     method: 'POST',
     url: 'api/app/platform-account/send-account-confirmation-code',
     data: {
@@ -61,7 +61,6 @@ export const sendAccountConfirmationCode = (data: any) => {
       captchaResponse: data.captchaResponse,
     },
   })
-}
 
 export const verifyAccountConfirmationCode = (userId: string, token: string) =>
   apiService.fetchData({

ui/src/utils/hooks/useAccount.ts

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { ROUTES_ENUM } from '@/routes/route.constant'
 import {
   sendAccountConfirmationCode,
   verifyAccountConfirmationCode,
@@ -12,15 +13,28 @@ function useAccount() {
 
   const sendConfirmationCode = async (values: any) => {
     try {
-      await sendAccountConfirmationCode(values)
+      const result = await sendAccountConfirmationCode(values)
+      if (result.data !== true) {
+        throw new Error('This email is already confirmed or no account was found.')
+      }
+
       setError('')
       setMessage('Verification code has been sent to your e-mail address.')
+      return {
+        status: 'success',
+      }
     } catch (error: any) {
+      const err =
+        error?.response?.data?.error?.message ||
+        error?.response?.data?.message ||
+        error?.message ||
+        error.toString()
+
       setMessage('')
-      setError(error?.response?.data?.message || error.toString())
+      setError(err)
       return {
         status: 'failed',
-        message: error?.response?.data?.message || error.toString(),
+        message: err,
       }
     }
   }
@@ -38,7 +52,7 @@ function useAccount() {
         setError('')
         setMessage('Your account is confirmed')
         setTimeout(() => {
-          navigate('/account/login')
+          navigate(ROUTES_ENUM.authenticated.login)
         }, 3000)
       } else {
         throw new Error('Invalid token')

ui/src/views/Views.tsx

@@ -46,9 +46,11 @@ const Views = (props: ViewsProps) => {
     <ErrorBoundary fallbackRender={fallbackRender}>
       <Suspense fallback={<Loading loading={true} />}>
         {!!warning?.length && (
-          <Alert showIcon className="mb-4" type="warning">
+          <Alert showIcon className="mb-4 text-sm text-left" type="warning">
             {warning.map((w, i) => (
-              <div key={i}>{w}</div>
+              <div key={i} className="whitespace-normal break-words">
+                {w}
+              </div>
             ))}
           </Alert>
         )}

ui/src/views/auth/ExtendLogin.tsx

@@ -11,8 +11,9 @@ import { sendExtendLoginRequest } from '@/services/account.service'
 import { store } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import useTimeOutMessage from '@/utils/hooks/useTimeOutMessage'
+import { TurnstileInstance } from '@marsidev/react-turnstile'
 import { Field, Form, Formik } from 'formik'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import * as Yup from 'yup'
 
@@ -35,21 +36,23 @@ const ExtendLogin = () => {
 
   const [message, setMessage] = useTimeOutMessage(10000)
   const { translate } = useLocalization()
+  const captchaRef = useRef<TurnstileInstance>(null)
 
   const onSendMail = async (
     values: ExtendLoginFormSchema,
     setSubmitting: (isSubmitting: boolean) => void,
+    setFieldValue: (field: string, value: string) => void,
   ) => {
     const { email, captchaResponse } = values
     setSubmitting(true)
     try {
-      const resp = await sendExtendLoginRequest({ email, captchaResponse })
+      await sendExtendLoginRequest({ email, captchaResponse })
-      if (resp.data) {
-        setSubmitting(false)
       setEmailSent(true)
-      }
     } catch (error: any) {
       setMessage(error?.response?.data || error.toString())
+    } finally {
+      setFieldValue('captchaResponse', '')
+      captchaRef.current?.reset()
       setSubmitting(false)
     }
   }
@@ -63,11 +66,13 @@ const ExtendLogin = () => {
       ></Helmet>
       <div>
         <h3 className="mb-1">{translate('::Abp.Account.ExtendLogin.Title')}</h3>
-        <p>{translate('::Abp.Account.ExtendLogin.Description')}</p>
+        <Alert showIcon className="mt-4 mb-4" type="success">
+          {translate('::Abp.Account.ExtendLogin.Description')}
+        </Alert>
         <div className="mt-4 text-center">
           <span>{translate('::Abp.Account.Backto')} </span>
           <ActionLink to={signInUrl}>{translate('::Abp.Account.SignIn')}</ActionLink>
-        </div>{' '}
+        </div>
       </div>
     </>
   ) : (
@@ -92,9 +97,9 @@ const ExtendLogin = () => {
           captchaResponse: '',
         }}
         validationSchema={validationSchema}
-        onSubmit={(values, { setSubmitting }) => {
+        onSubmit={(values, { setSubmitting, setFieldValue }) => {
           if (!disableSubmit) {
-            onSendMail(values, setSubmitting)
+            onSendMail(values, setSubmitting, setFieldValue)
           } else {
             setSubmitting(false)
           }
@@ -115,6 +120,7 @@ const ExtendLogin = () => {
                 </FormItem>
               </div>
               <Captcha
+                ref={captchaRef}
                 onError={() => setFieldValue('captchaResponse', '')}
                 onExpire={() => setFieldValue('captchaResponse', '')}
                 onSuccess={(token: string) => setFieldValue('captchaResponse', token)}

ui/src/views/auth/ForgotPassword.tsx

@@ -11,10 +11,11 @@ import { sendPasswordResetCode } from '@/services/account.service'
 import { store } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import useTimeOutMessage from '@/utils/hooks/useTimeOutMessage'
+import { TurnstileInstance } from '@marsidev/react-turnstile'
 import type { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
 import { motion } from 'framer-motion'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { Helmet } from 'react-helmet'
 import * as Yup from 'yup'
 
@@ -37,23 +38,25 @@ const ForgotPassword = () => {
 
   const [message, setMessage] = useTimeOutMessage()
   const { translate } = useLocalization()
+  const captchaRef = useRef<TurnstileInstance>(null)
 
   const onSendMail = async (
     values: ForgotPasswordFormSchema,
     setSubmitting: (isSubmitting: boolean) => void,
+    setFieldValue: (field: string, value: string) => void,
   ) => {
     setSubmitting(true)
     try {
-      const resp = await sendPasswordResetCode(values)
+      await sendPasswordResetCode(values)
-      if (resp.data) {
-        setSubmitting(false)
       setEmailSent(true)
-      }
     } catch (errors) {
       setMessage(
         (errors as AxiosError<{ message: string }>)?.response?.data?.message ||
           (errors as Error).toString(),
       )
+    } finally {
+      setFieldValue('captchaResponse', '')
+      captchaRef.current?.reset()
       setSubmitting(false)
     }
   }
@@ -74,7 +77,6 @@ const ForgotPassword = () => {
           {emailSent ? (
             <>
               <h3 className="mb-1">{translate('::Abp.Account.ForgotPassword.Checkyouremail')}</h3>
-              <p>{translate('::Abp.Account.ForgotPassword.Checkyouremail.Message')}</p>
             </>
           ) : (
             <>
@@ -88,6 +90,18 @@ const ForgotPassword = () => {
             {message}
           </Alert>
         )}
+        {emailSent ? (
+          <>
+            <Alert showIcon className="mb-4" type="success">
+              {translate('::Abp.Account.ForgotPassword.Checkyouremail.Message')}
+            </Alert>
+            <div className="mt-4 text-center">
+              <span>{translate('::Abp.Account.Backto')} </span>
+              <ActionLink to={signInUrl}>{translate('::Abp.Account.SignIn')}</ActionLink>
+            </div>
+          </>
+        ) : (
+          <>
             <TenantSelector />
             <Formik
               initialValues={{
@@ -95,9 +109,9 @@ const ForgotPassword = () => {
                 captchaResponse: '',
               }}
               validationSchema={validationSchema}
-          onSubmit={(values, { setSubmitting }) => {
+              onSubmit={(values, { setSubmitting, setFieldValue }) => {
                 if (!disableSubmit) {
-              onSendMail(values, setSubmitting)
+                  onSendMail(values, setSubmitting, setFieldValue)
                 } else {
                   setSubmitting(false)
                 }
@@ -106,7 +120,6 @@ const ForgotPassword = () => {
               {({ touched, errors, isSubmitting, setFieldValue }) => (
                 <Form>
                   <FormContainer>
-                <div className={emailSent ? 'hidden' : ''}>
                     <FormItem invalid={errors.email && touched.email} errorMessage={errors.email}>
                       <Field
                         type="email"
@@ -116,14 +129,14 @@ const ForgotPassword = () => {
                         component={Input}
                       />
                     </FormItem>
-                </div>
                     <Captcha
+                      ref={captchaRef}
                       onError={() => setFieldValue('captchaResponse', '')}
                       onExpire={() => setFieldValue('captchaResponse', '')}
                       onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
                     />
                     <Button block loading={isSubmitting} variant="solid" type="submit">
-                  {emailSent ? 'Resend Email' : 'Send Email'}
+                      Send Email
                     </Button>
                     <div className="mt-4 text-center">
                       <span>{translate('::Abp.Account.Backto')} </span>
@@ -133,6 +146,8 @@ const ForgotPassword = () => {
                 </Form>
               )}
             </Formik>
+          </>
+        )}
       </motion.div>
     </>
   )

ui/src/views/auth/Login.tsx

@@ -153,6 +153,11 @@ const Login = () => {
       findUiVersion()
     }
 
+    if (showCaptcha) {
+      setFieldValue('captchaResponse', '')
+      captchaRef.current?.reset()
+    }
+
     setSubmitting(false)
   }
 

ui/src/views/auth/Register.tsx

@@ -9,8 +9,9 @@ import { ROUTES_ENUM } from '@/routes/route.constant'
 import useAuth from '@/utils/hooks/useAuth'
 import useTimeOutMessage from '@/utils/hooks/useTimeOutMessage'
 import Captcha from '@/components/shared/Captcha'
+import { TurnstileInstance } from '@marsidev/react-turnstile'
 import { Field, Form, Formik } from 'formik'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import * as Yup from 'yup'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Helmet } from 'react-helmet'
@@ -30,6 +31,7 @@ const validationSchema = Yup.object().shape({
   confirmPassword: Yup.string().oneOf([Yup.ref('password')], 'Your passwords do not match'),
   name: Yup.string().required(),
   surname: Yup.string().required(),
+  captchaResponse: Yup.string().required(),
 })
 
 const Register = () => {
@@ -41,15 +43,18 @@ const Register = () => {
 
   const [message, setMessage] = useState('')
   const [error, setError] = useTimeOutMessage(10000)
+  const captchaRef = useRef<TurnstileInstance>(null)
 
   const onSignUp = async (
     values: SignUpFormSchema,
     setSubmitting: (isSubmitting: boolean) => void,
+    setFieldValue: (field: string, value: string) => void,
   ) => {
     setSubmitting(true)
+    try {
       const result = await signUp(values)
 
-    if (result?.status === 'failed') {
+      if (result?.status === 'failed' || result?.status === 'error') {
         setError(result.message)
         setMessage('')
       } else {
@@ -57,9 +62,12 @@ const Register = () => {
         window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
         setError('')
       }
-
+    } finally {
+      setFieldValue('captchaResponse', '')
+      captchaRef.current?.reset()
       setSubmitting(false)
     }
+  }
 
   return (
     <>
@@ -84,6 +92,13 @@ const Register = () => {
             {error}
           </Alert>
         )}
+        {message ? (
+          <div className="mt-4 text-center">
+            <span>{translate('::Abp.Account.Register.AlreadyHaveAnAccount')} </span>
+            <ActionLink to={signInUrl}>{translate('::Abp.Account.SignIn')}</ActionLink>
+          </div>
+        ) : (
+          <>
             <TenantSelector />
             <Formik
               initialValues={{
@@ -95,9 +110,9 @@ const Register = () => {
                 captchaResponse: '',
               }}
               validationSchema={validationSchema}
-          onSubmit={(values, { setSubmitting }) => {
+              onSubmit={(values, { setSubmitting, setFieldValue }) => {
                 if (!disableSubmit) {
-              onSignUp(values, setSubmitting)
+                  onSignUp(values, setSubmitting, setFieldValue)
                 } else {
                   setSubmitting(false)
                 }
@@ -170,6 +185,7 @@ const Register = () => {
                       />
                     </FormItem>
                     <Captcha
+                      ref={captchaRef}
                       onError={() => setFieldValue('captchaResponse', '')}
                       onExpire={() => setFieldValue('captchaResponse', '')}
                       onSuccess={(token) => setFieldValue('captchaResponse', token)}
@@ -185,6 +201,8 @@ const Register = () => {
                 </Form>
               )}
             </Formik>
+          </>
+        )}
       </div>
     </>
   )

ui/src/views/auth/ResetPassword.tsx

@@ -59,16 +59,14 @@ const ResetPassword = () => {
     const { password } = values
     setSubmitting(true)
     try {
-      const resp = await resetPassword(userId, resetToken, password)
+      await resetPassword(userId, resetToken, password)
-      if (resp.data) {
-        setSubmitting(false)
       setResetComplete(true)
-      }
     } catch (errors) {
       setMessage(
         (errors as AxiosError<{ message: string }>)?.response?.data?.message ||
           (errors as Error).toString(),
       )
+    } finally {
       setSubmitting(false)
     }
   }

ui/src/views/auth/SendConfirmationCode.tsx

@@ -4,11 +4,13 @@ import { Field, Form, Formik } from 'formik'
 import * as Yup from 'yup'
 import { ActionLink, TenantSelector } from '@/components/shared'
 import { ROUTES_ENUM } from '@/routes/route.constant'
-import { store } from '@/store'
+import { store, useStoreActions } from '@/store'
 import Captcha from '@/components/shared/Captcha'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { Helmet } from 'react-helmet'
 import { APP_NAME } from '@/constants/app.constant'
+import { TurnstileInstance } from '@marsidev/react-turnstile'
+import { useEffect, useRef, useState } from 'react'
 
 type FormSchema = {
   email: string
@@ -25,14 +27,33 @@ const SendConfirmationCode = () => {
   const { translate } = useLocalization()
 
   const { message, error, sendConfirmationCode } = useAccount()
+  const { setWarning } = useStoreActions((actions) => actions.base.messages)
+  const captchaRef = useRef<TurnstileInstance>(null)
+  const [captchaKey, setCaptchaKey] = useState(0)
 
-  const onSubmit = async (values: FormSchema, setSubmitting: (isSubmitting: boolean) => void) => {
+  useEffect(() => {
+    setWarning('')
+  }, [setWarning])
+
+  const onSubmit = async (
+    values: FormSchema,
+    setSubmitting: (isSubmitting: boolean) => void,
+    setFieldValue: (field: string, value: string) => void,
+  ) => {
     setSubmitting(true)
 
-    await sendConfirmationCode(values)
+    try {
-
+      const result = await sendConfirmationCode(values)
+      if (result?.status !== 'failed') {
+        setWarning('')
+      }
+    } finally {
+      setFieldValue('captchaResponse', '')
+      captchaRef.current?.reset()
+      setCaptchaKey((key) => key + 1)
       setSubmitting(false)
     }
+  }
 
   return (
     <>
@@ -42,10 +63,12 @@ const SendConfirmationCode = () => {
         defaultTitle={APP_NAME}
       ></Helmet>
 
+      {!message && (
         <div className="mb-8">
           <h3 className="mb-1">{translate('::Abp.Account.SendConfirmationCode')}</h3>
           <p>{translate('::Abp.Account.SendConfirmationCode.Message')}</p>
         </div>
+      )}
       <div>
         {message && (
           <Alert showIcon className="mb-4" type="success">
@@ -57,6 +80,15 @@ const SendConfirmationCode = () => {
             {error}
           </Alert>
         )}
+        {message ? (
+          <div className="mt-4 text-center">
+            <span>{translate('::Abp.Account.Backto')} </span>
+            <ActionLink to={ROUTES_ENUM.authenticated.login}>
+              {translate('::Abp.Account.SignIn')}
+            </ActionLink>
+          </div>
+        ) : (
+          <>
             <TenantSelector />
             <Formik
               initialValues={{
@@ -64,8 +96,8 @@ const SendConfirmationCode = () => {
                 captchaResponse: '',
               }}
               validationSchema={validationSchema}
-          onSubmit={(values, { setSubmitting }) => {
+              onSubmit={(values, { setSubmitting, setFieldValue }) => {
-            onSubmit(values, setSubmitting)
+                onSubmit(values, setSubmitting, setFieldValue)
               }}
             >
               {({ touched, errors, isSubmitting, setFieldValue }) => (
@@ -85,6 +117,8 @@ const SendConfirmationCode = () => {
                       />
                     </FormItem>
                     <Captcha
+                      key={captchaKey}
+                      ref={captchaRef}
                       onError={() => setFieldValue('captchaResponse', '')}
                       onExpire={() => setFieldValue('captchaResponse', '')}
                       onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
@@ -102,6 +136,8 @@ const SendConfirmationCode = () => {
                 </Form>
               )}
             </Formik>
+          </>
+        )}
       </div>
     </>
   )

ui/src/views/public/Logo.tsx

@@ -19,7 +19,7 @@ const Logo = (props: LogoProps) => {
 
   return (
     <div
-      className={classNames('logo', 'my-1', className)}
+      className={classNames('logo', 'my-2', className)}
       style={{
         ...style,
         ...{ width: logoWidth },