sozsoft/sozsoft-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tenantlı uygulama için ForgotPassword, ResetPassword

Browse source
This commit is contained in:
Sedat Öztürk 2026-06-02 23:04:25 +03:00
parent f9c5910813
commit d161e0f4b9
17 changed files with 538 additions and 416 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
api/src/Sozsoft.Platform.Application/Identity/PlatformAccountAppService.cs
View file

@ -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)
await SendConfirmationCodeAsync(user);
if (user == null)
{
return false;
}
return await SendConfirmationCodeAsync(user);
}
public async Task<bool> VerifyAccountConfirmationCodeAsync(VerifyAccountConfirmationCodeInputDto input)

22
api/src/Sozsoft.Platform.Domain/Identity/TurnstileCaptchaManager.cs
View file

@ -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>();
if (!(bool)result.success)
var result = await response.GetJsonAsync<TurnstileCaptchaVerifyResponse>();
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; }
}
}

4
api/src/Sozsoft.Platform.HttpApi.Host/PlatformHttpApiHostModule.cs
View file

@ -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.PasswordReset] = "account/reset-password";
options.Applications[PlatformConsts.React].Urls[PlatformConsts.Urls.EmailConfirmation] = "confirm";
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"];

4
ui/src/components/layouts/AuthLayout/Simple.tsx
View file

@ -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

2
ui/src/components/template/Logo.tsx
View file

@ -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 },

44
ui/src/components/ui/Alert/Alert.tsx
View file

@ -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[] = [
'success',
'danger',
'info',
'warning',
]
const TYPE_ARRAY: TypeAttributes.Status[] = ['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(
onClose as () => void,
duration,
(duration as number) > 0
)
const { clear } = useTimeout(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
className="cursor-pointer"
role="presentation"
onClick={(e) => handleClose(e)}
>
<div 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'}`}>
{showIcon && (
<StatusIcon
iconColor={typeMap.iconColor}
custom={customIcon}
type={type}
/>
)}
<div className={showIcon ? 'ltr:ml-2 rtl:mr-2' : ''}>
{title ? (
<div className={`flex min-w-0 ${title ? '' : 'items-center'}`}>
{showIcon && <StatusIcon iconColor={typeMap.iconColor} custom={customIcon} type={type} />}
<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}
</div>
) : null}
{title ? <div className={`font-semibold mb-1 ${typeMap.titleColor}`}>{title}</div> : null}
{children}
</div>
</div>

55
ui/src/routes/dynamicRouter.tsx
View file

@ -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
path="/"
element={
<Navigate
to={hasSubdomain() ? ROUTES_ENUM.authenticated.login : ROUTES_ENUM.public.home}
replace
/>
}
/>
<Route path="/" element={<RootRedirect />} />
<Route path="/account/confirm/:userId/:token" element={<LegacyEmailConfirmationRedirect />} />
<Route path="/account/reset-password" element={<LegacyPasswordResetRedirect />} />
{/* public access denied (statik) */}
<Route

5
ui/src/services/account.service.ts
View file

@ -52,8 +52,8 @@ export const resetPassword = (userId: string, resetToken: string, password: stri
},
})
export const sendAccountConfirmationCode = (data: any) => {
apiService.fetchData({
export const sendAccountConfirmationCode = (data: any) =>
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({

22
ui/src/utils/hooks/useAccount.ts
View file

@ -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')

6
ui/src/views/Views.tsx
View file

@ -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>
)}

24
ui/src/views/auth/ExtendLogin.tsx
View file

@ -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 })
if (resp.data) {
setSubmitting(false)
await sendExtendLoginRequest({ email, captchaResponse })
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)}

37
ui/src/views/auth/ForgotPassword.tsx
View file

@ -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)
if (resp.data) {
setSubmitting(false)
await sendPasswordResetCode(values)
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>
</>
)

5
ui/src/views/auth/Login.tsx
View file

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

28
ui/src/views/auth/Register.tsx
View file

@ -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>
</>
)

6
ui/src/views/auth/ResetPassword.tsx
View file

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

48
ui/src/views/auth/SendConfirmationCode.tsx
View file

@ -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)
onSubmit={(values, { setSubmitting, setFieldValue }) => {
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>
</>
)

2
ui/src/views/public/Logo.tsx
View file

@ -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 },