RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

support account activation code

Browse Source
This commit is contained in:
SrGooglo 2024-10-25 09:37:48 +00:00
parent 45075ee8a8
commit a986804cd1
2 changed files with 121 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
packages/app/src/components/Login/index.jsx
View File

@ -40,7 +40,9 @@ class Login extends React.Component {
loginInputs: {},
error: null,
phase: 0,
mfa_required: null,
activation: null,
forbidden: false,
}
@ -67,6 +69,15 @@ class Login extends React.Component {
forbidden: error.response.data.violation
})
}
if (error.response.data.activation_required) {
return this.setState({
activation: {
required: true,
user_id: error.response.data.user_id,
},
})
}
}
console.error(error, error.response)
@ -95,12 +106,61 @@ class Login extends React.Component {
}
if (typeof this.props.onDone === "function") {
this.props.onDone()
await this.props.onDone()
}
return true
}
onClickActivateAccount = async () => {
const activationObj = this.state.activation
if (!activationObj) {
return null
}
try {
await AuthModel.activateAccount(
this.state.activation.user_id,
this.state.activation.code
)
this.handleFinish()
} catch (error) {
this.setState({
activation: {
...this.state.activation,
error: error
}
})
console.error(error)
}
}
onClickResendActivationCode = async () => {
const activationObj = this.state.activation
if (!activationObj) {
return null
}
const rensendObj = await AuthModel.resendActivationCode(activationObj.user_id)
.catch((error) => {
app.message.info(`Please try again later...`)
return null
})
if (rensendObj) {
this.setState({
activation: {
...this.state.activation,
resended: rensendObj.date,
},
})
}
}
onClickForgotPassword = () => {
if (this.props.locked) {
this.props.unlock()
@ -235,14 +295,61 @@ class Login extends React.Component {
</div>
}
if (this.state.activation) {
return <div className="login_wrapper">
<div className="content">
<h1>Activate your Account</h1>
<p>We have sent you an email with a code that you need to enter below in order to activate your account.</p>
<antd.Input.OTP
length={6}
onChange={(code) => this.setState({
activation: {
...this.state.activation,
code: code,
}
})}
/>
<div className="resend">
{
this.state.activation.resended && <antd.Alert
message={`Mail resended`}
/>
}
<a
href="#"
onClick={this.onClickResendActivationCode}
>
Didn't receive the email?
</a>
</div>
{
this.state.activation.error && <div className="field-error">
{this.state.activation.error.response.data.error}
</div>
}
<antd.Button
onClick={this.onClickActivateAccount}
>
Activate
</antd.Button>
</div>
</div>
}
return <div className="login_wrapper">
<div className="content">
<div className="header">
<h1>
Sign in
</h1>
<h3>
To continue to {config.app.siteName}
</h3>
</div>
<antd.Form
name="login"
@ -332,9 +439,11 @@ class Login extends React.Component {
</antd.Button>
</div>
<div className="field-error">
{
this.state.error && <div className="field-error">
{this.state.error}
</div>
}
<div className="field" onClick={this.onClickForgotPassword}>
<a>Forgot your password?</a>

6
packages/app/src/components/Login/index.less
View File

@ -47,20 +47,18 @@
padding: 40px 0;
gap: 20px;
border-radius: 12px;
.fields {
display: flex;
flex-direction: column;
margin-top: 20px;
.field {
display: flex;
flex-direction: column;
margin-bottom: 20px;
transition: all 150ms ease-in-out;
&.hidden {