Skip to content

fix-verification-cards #823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
charles-ramos merged 1 commit into from
Jul 21, 2026
Merged

fix-verification-cards #823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/dashboard/Data/Browser/ImportDialog.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default class ImportDialog extends React.Component {
<B4aModal
type={B4aModal.Types.DEFAULT}
title='Import data'
subtitle={'You will receive an e-mail once your data is imported'}
subtitle={'You will receive an email once your data is imported'}
confirmText='Import'
cancelText='Cancel'
disabled={!this.valid()}
Expand All @@ -48,7 +48,7 @@ export default class ImportDialog extends React.Component {
this.props.showNote(`Import Request failed with the following error: "${res.error }".`)
} else {
this.props.onCancel();
this.props.showNote('We are importing your data. You will be notified by e-mail once it is completed.')
this.props.showNote('We are importing your data. You will be notified by email once it is completed.')
}
}).finally(() => this.setState({ startedImport: false, file: undefined }));
}}>
Expand Down
4 changes: 2 additions & 2 deletions src/dashboard/Data/Browser/ImportRelationDialog.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default class ImportRelationDialog extends React.Component {
<B4aModal
type={B4aModal.Types.DEFAULT}
title='Import relation data'
subtitle={'You will receive an e-mail once your data is imported'}
subtitle={'You will receive an email once your data is imported'}
confirmText='Import'
cancelText='Cancel'
disabled={!this.valid()}
Expand Down Expand Up @@ -76,7 +76,7 @@ export default class ImportRelationDialog extends React.Component {
}
/>
{this.state.startedImport ?
<div style={{ padding: 20 }}>We are importing your data. You will be notified by e-mail once it is completed.</div> : null }
<div style={{ padding: 20 }}>We are importing your data. You will be notified by email once it is completed.</div> : null }
{this.state.errorMessage ?
<div style={{ padding: 20, color: '#ff395e' }}>Import Request failed with the following error: "{ this.state.errorMessage }".</div> : null }
</B4aModal>
Expand Down
135 changes: 114 additions & 21 deletions src/dashboard/DomainSettings/DomainSettings.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,7 @@ import Fieldset from 'components/Fieldset/Fieldset.react';
import { amplitudeLogEvent } from 'lib/amplitudeEvents';
import B4aNotification from 'dashboard/Data/Browser/B4aNotification.react';
import browserStyles from 'dashboard/Data/Browser/Browser.scss';
import StripeValidateCard from 'components/StripeValidateCard/StripeValidateCard.react';
import { Link } from 'react-router-dom';
import back4app2 from 'lib/back4app2';

@withRouter
class DomainSettings extends DashboardView {
Expand All @@ -40,9 +38,12 @@ class DomainSettings extends DashboardView {
domainSettingsError: null,

isUserVerified: false,
emailVerified: false,
cardValidated: false,
isResendingVerificationEmail: false,
resendVerificationMessage: null,
canChangeCustomDomain: false,
canChangeSubdomain: false,
showCardValidation: true,

subdomainName: '',
currentSubdomain: '',
Expand Down Expand Up @@ -96,10 +97,8 @@ class DomainSettings extends DashboardView {
}

async loadData() {
console.log("STATE", this.state);
try {
const response = await this.context.getCustomDomain();
console.log("RESPONSE", response);
this.setState({ domainSettings: response });
await this.loadHostSettings(response);
} catch (error) {
Expand All @@ -119,6 +118,10 @@ class DomainSettings extends DashboardView {
let isActivated = false;
let hasPermission = false;
let isUserVerified = false;
const currentUser = AccountManager.currentUser();
const verification = (currentUser && currentUser.verification) || {};
const emailVerified = !!verification.emailVerified;
const cardValidated = !!verification.cardValidation;

if (domains && domains.length > 0) {
customDomainArray = domains;
Expand All @@ -141,8 +144,6 @@ class DomainSettings extends DashboardView {

hasPermission = (!response.featuresPermission || response.featuresPermission.webHostLiveQuery === 'Write');

console.log("response", createdAt);

if (response && ((appHostSettings.serverURL && appHostSettings.activated) || (createdAt && ((new Date() - new Date(createdAt)) > (6 * 30 * 24 * 60 * 60 * 1000))))) {
isUserVerified = true;
}
Expand All @@ -152,22 +153,20 @@ class DomainSettings extends DashboardView {
const plan = await this.context.getAppPlanData();
if (plan && plan.planName && (plan.planName.indexOf('Free') < 0) && (plan.planName.indexOf('Public') < 0)) {
isUserVerified = true;
} else {
const currentUser = AccountManager.currentUser();
if (currentUser && currentUser.verification.cardValidation) {
isUserVerified = true;
}
} else if (emailVerified && cardValidated) {
isUserVerified = true;
}
} catch (planError) {
const currentUser = AccountManager.currentUser();
if (currentUser && currentUser.verification.cardValidation) {
if (emailVerified && cardValidated) {
isUserVerified = true;
}
}
}

this.setState({
isUserVerified,
emailVerified,
cardValidated,

subdomainName,
currentSubdomain,
Expand Down Expand Up @@ -296,17 +295,109 @@ class DomainSettings extends DashboardView {
}
}

async verifyUser() {
async handleResendEmailVerification() {
if (this.state.isResendingVerificationEmail) {
return;
}

this.setState({
isResendingVerificationEmail: true,
resendVerificationMessage: null,
});

try {
const user = await back4app2.me();
if (user) {
this.setState({ isUserVerified: true });
}
} catch (e) {
console.log('user validation failed!')
const result = await this.context.resendEmailVerification();
this.setState({
isResendingVerificationEmail: false,
resendVerificationMessage: {
type: 'success',
text: typeof result === 'string' && result.trim()
? result
: 'Verification email sent.',
},
});
} catch (err) {
this.setState({
isResendingVerificationEmail: false,
resendVerificationMessage: {
type: 'error',
text: typeof err === 'string' && err.trim()
? err
: (err && err.message) || 'Failed to resend verification email',
},
});
}
}

renderVerificationRequired() {
const { emailVerified, cardValidated, isResendingVerificationEmail, resendVerificationMessage } = this.state;

return (
<>
{!emailVerified && (
<div style={{ padding: '12px 16px', marginBottom: '16px', background: '#fff3cd', borderRadius: '6px', color: '#856404' }}>
Please verify your email to enable this feature.{' '}
<button
type="button"
onClick={() => this.handleResendEmailVerification()}
disabled={isResendingVerificationEmail}
style={{
padding: 0,
border: 'none',
background: 'transparent',
color: '#15A9FF',
textDecoration: 'underline',
cursor: isResendingVerificationEmail ? 'default' : 'pointer',
font: 'inherit',
}}
>
{isResendingVerificationEmail ? 'Sending...' : 'Resend email'}
</button>
{resendVerificationMessage && (
<div
style={{
marginTop: '8px',
color: resendVerificationMessage.type === 'error' ? '#b02a37' : '#0f5132',
}}
>
{resendVerificationMessage.text}
</div>
)}
</div>
)}

{!cardValidated && (
<Fieldset>
<Field
label={
<Label
text="Validate your card"
dark={true}
description="In order to enable this feature, you must validate your card."
/>
}
input={
<div style={{ width: '100%', padding: '0 1rem', textAlign: 'right' }}>
<a
href="https://checkout.back4app.io/subscription/VU0VZpDrHh"
target="_blank"
rel="noopener noreferrer"
>
<Button
value="Validate Card"
primary={true}
/>
</a>
</div>
}
theme={Field.Theme.BLUE}
/>
</Fieldset>
)}
</>
);
}

getDisplayContent() {
let content = null;

Expand Down Expand Up @@ -527,6 +618,8 @@ class DomainSettings extends DashboardView {
{this.state.errorCustomDomain && <div className={styles.error}>{this.state.errorCustomDomain}</div>}
</Fieldset>
</>
} else {
content = this.renderVerificationRequired();
}

return (
Expand Down
8 changes: 4 additions & 4 deletions src/dashboard/Notification/EmailVerification.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { amplitudeLogEvent } from 'lib/amplitudeEvents';

const DEFAULT_VERIFICATION_BODY =
'Hi,\n\n' +
'You are being asked to confirm the e-mail address *|email|* with *|appname|*\n\n' +
'You are being asked to confirm the email address *|email|* with *|appname|*\n\n' +
'Click here to confirm it:\n' +
'*|link|*';

Expand All @@ -30,7 +30,7 @@ const DEFAULT_FIELDS = {
preventLoginWithUnverifiedEmail: false,
replyTo: 'no-reply@b4a.app',
displayName: '',
verificationEmailSubject: 'Please verify your e-mail for *|appname|*',
verificationEmailSubject: 'Please verify your email for *|appname|*',
verificationEmailBody: DEFAULT_VERIFICATION_BODY,
};

Expand Down Expand Up @@ -379,7 +379,7 @@ class EmailVerification extends DashboardView {
input={
<div style={{ width: '100%', padding: '0 1rem', textAlign: 'right' }}>
<a
href="https://checkout.back4app.io/subscription/r4bsfi5CNH"
href="https://checkout.back4app.io/subscription/Ecti8S7JZh"
target="_blank"
rel="noopener noreferrer"
>
Expand Down Expand Up @@ -546,7 +546,7 @@ class EmailVerification extends DashboardView {
input={
<div className={`${styles.emailTextField} ${styles.emailTextFieldRight}`}>
<TextInputSettings
placeholder="Please verify your e-mail for *|appname|*"
placeholder="Please verify your email for *|appname|*"
value={fields.verificationEmailSubject ?? ''}
onChange={valueOrEvent =>
canEditTemplateFields && trackSetField('verificationEmailSubject', getInputValue(valueOrEvent))
Expand Down
Loading
Loading