Skip to content

Commit

Permalink
Handle auto configured cloud smtp (#412)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaclarke
jaclarke authored Feb 24, 2025
1 parent cb4708b commit d87c94a
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 97 deletions.
1 change: 1 addition & 0 deletions shared/studio/state/instance.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export interface ServerVersion {
@model("InstanceState")
export class InstanceState extends Model({
_instanceId: prop<string | null>(null),
isCloud: prop<boolean>(false),
serverUrl: prop<string>(),
serverUrlWithPort: prop<string | null>(null),
authUsername: prop<string | null>(null),
Expand Down
21 changes: 21 additions & 0 deletions shared/studio/tabs/auth/authAdmin.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -481,6 +481,21 @@
opacity: 0.5;
}
}

.cloudSmtpDesc {
color: var(--secondary_text_color);
}
.cloudSmtpNote {
color: var(--secondary_text_color);
font-style: italic;
margin-top: 8px;
}
}

.selectCurrentProvider,
.updatingSpinner {
align-self: flex-start;
margin-top: 6px;
}

.selectCurrentProvider {
Expand All @@ -504,6 +519,8 @@
.updatingSpinner {
color: var(--Grey50);
width: 32px;
height: 22px;
margin-top: 11px;
flex-shrink: 0;
}

Expand All @@ -514,6 +531,10 @@
flex-direction: row;
padding: 4px 16px 16px 16px;
}

&.isCloudProvider {
margin-bottom: 16px;
}
}

.expandedEmailProviderConfig {
Expand Down
206 changes: 119 additions & 87 deletions shared/studio/tabs/auth/smtp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {observer} from "mobx-react-lite";
import {useTabState} from "../../state";
import {
AuthAdminState,
CLOUD_SMTP_PROVIDER_NAME,
DraftSMTPConfig,
EmailProviderConfig,
smtpSecurity,
Expand Down Expand Up @@ -42,62 +43,65 @@ export const SMTPConfigTab = observer(function SMTPConfigTab() {
content = state.emailProviders ? (
<>
{state.emailProviders.length ? (
<>
{state.emailProviderWarnings.verificationNoSmtp ? (
<EmailProviderWarning>
You have auth providers requiring email verification enabled.
Select a provider below to enable sending verification emails,
or{" "}
<span
className={styles.link}
onClick={() => state.setSelectedTab("webhooks")}
>
create a webhook
</span>{" "}
for handling email verification.
</EmailProviderWarning>
) : state.emailProviderWarnings.passwordNoReset ? (
<EmailProviderWarning>
You have the 'Email + Password' auth provider enabled. Select a
provider below to enable sending password reset emails, or{" "}
<span
className={styles.link}
onClick={() => state.setSelectedTab("webhooks")}
>
create a webhook
</span>{" "}
for handling password resets.
</EmailProviderWarning>
) : state.emailProviderWarnings.magicLinkNoMethods ? (
<EmailProviderWarning>
You have the 'Magic Link' auth provider enabled. Select a
provider below to enable sending magic links via email, or{" "}
<span
className={styles.link}
onClick={() => state.setSelectedTab("webhooks")}
>
create a webhook
</span>{" "}
for handling magic links.
</EmailProviderWarning>
) : null}

<div
className={cn(styles.cardList, {
[styles.emailProvidersUpdating]: state.updatingEmailProviders,
})}
>
{state.emailProviders.map((provider) => (
<EmailProviderCard
key={provider.name}
state={state}
provider={provider}
/>
))}
</div>
</>
state.emailProviderWarnings.verificationNoSmtp ? (
<EmailProviderWarning>
You have auth providers requiring email verification enabled.
Select a provider below to enable sending verification emails, or{" "}
<span
className={styles.link}
onClick={() => state.setSelectedTab("webhooks")}
>
create a webhook
</span>{" "}
for handling email verification.
</EmailProviderWarning>
) : state.emailProviderWarnings.passwordNoReset ? (
<EmailProviderWarning>
You have the 'Email + Password' auth provider enabled. Select a
provider below to enable sending password reset emails, or{" "}
<span
className={styles.link}
onClick={() => state.setSelectedTab("webhooks")}
>
create a webhook
</span>{" "}
for handling password resets.
</EmailProviderWarning>
) : state.emailProviderWarnings.magicLinkNoMethods ? (
<EmailProviderWarning>
You have the 'Magic Link' auth provider enabled. Select a
provider below to enable sending magic links via email, or{" "}
<span
className={styles.link}
onClick={() => state.setSelectedTab("webhooks")}
>
create a webhook
</span>{" "}
for handling magic links.
</EmailProviderWarning>
) : null
) : null}

<div
className={cn(styles.cardList, {
[styles.emailProvidersUpdating]: state.updatingEmailProviders,
})}
>
{state.hasCloudSMTP ? (
<EmailProviderCard
state={state}
provider={CLOUD_SMTP_PROVIDER_NAME}
/>
) : null}
{state.emailProviders.map((provider) => (
<EmailProviderCard
key={provider.name}
state={state}
provider={provider}
/>
))}
</div>

{newDraftState ? (
<div className={styles.addDraft}>
<NewDraftSMTPProviderForm
Expand Down Expand Up @@ -150,7 +154,7 @@ export const SMTPConfigTab = observer(function SMTPConfigTab() {
function ResetCurrentProviderButton({state}: {state: AuthAdminState}) {
const [loading, setLoading] = useState(false);

return state.currentEmailProvider === null ? null : (
return state.currentEmailProvider === null || state.hasCloudSMTP ? null : (
<Button
kind="outline"
loading={loading}
Expand All @@ -173,15 +177,24 @@ const EmailProviderCard = observer(function EmailProviderCard({
provider,
}: {
state: AuthAdminState;
provider: EmailProviderConfig;
provider: EmailProviderConfig | typeof CLOUD_SMTP_PROVIDER_NAME;
}) {
const [updating, setUpdating] = useState(false);

const isSelectedProvider = state.currentEmailProvider === provider.name;
const draftState = state.draftSMTPConfigs.get(provider.name);
const isSelectedProvider =
state.currentEmailProvider ===
(provider === CLOUD_SMTP_PROVIDER_NAME ? provider : provider.name);
const draftState =
provider !== CLOUD_SMTP_PROVIDER_NAME
? state.draftSMTPConfigs.get(provider.name)
: null;

return (
<div className={cn(styles.card, styles.emailProviderCard)}>
<div
className={cn(styles.card, styles.emailProviderCard, {
[styles.isCloudProvider]: provider === CLOUD_SMTP_PROVIDER_NAME,
})}
>
<div className={styles.cardMain}>
{updating ? (
<Spinner
Expand All @@ -199,7 +212,7 @@ const EmailProviderCard = observer(function EmailProviderCard({
fill="none"
onClick={() => {
setUpdating(true);
(isSelectedProvider
(isSelectedProvider || provider === CLOUD_SMTP_PROVIDER_NAME
? state.resetCurrentEmailProvider()
: state.setCurrentEmailProvider(provider.name)
).finally(() => setUpdating(false));
Expand All @@ -218,36 +231,55 @@ const EmailProviderCard = observer(function EmailProviderCard({
</svg>
)}
<div className={styles.details}>
<div className={styles.name}>{provider.name}</div>
{provider._typename === "cfg::SMTPProviderConfig" ? (
<div className={styles.senderhost}>
{provider.sender} <span>•</span> {provider.host || "localhost"}:
{provider.port ||
(provider.security === "PlainText"
? "25"
: provider.security === "TLS"
? "465"
: provider.security === "STARTTLS"
? "587"
: "587/25")}
</div>
) : null}
</div>
<div
className={cn(styles.expandButton, {
[styles.expanded]: draftState?.expanded ?? false,
})}
onClick={() =>
draftState
? draftState.toggleExpanded()
: state.addDraftSMTPProvider(provider)
}
>
<ChevronDownIcon />
{provider === CLOUD_SMTP_PROVIDER_NAME ? (
<>
<div className={styles.name}>Cloud SMTP</div>
<div className={styles.cloudSmtpDesc}>
Auto configured SMTP provided by Gel Cloud for development use.
</div>
<div className={styles.cloudSmtpNote}>
Note: This provider is rate limited and the sender address is
non customizable, so for your production app you should
configure your own SMTP provider below.
</div>
</>
) : (
<>
<div className={styles.name}>{provider.name}</div>
{provider._typename === "cfg::SMTPProviderConfig" ? (
<div className={styles.senderhost}>
{provider.sender} <span>•</span>{" "}
{provider.host || "localhost"}:
{provider.port ||
(provider.security === "PlainText"
? "25"
: provider.security === "TLS"
? "465"
: provider.security === "STARTTLS"
? "587"
: "587/25")}
</div>
) : null}
</>
)}
</div>
{provider !== CLOUD_SMTP_PROVIDER_NAME ? (
<div
className={cn(styles.expandButton, {
[styles.expanded]: draftState?.expanded ?? false,
})}
onClick={() =>
draftState
? draftState.toggleExpanded()
: state.addDraftSMTPProvider(provider)
}
>
<ChevronDownIcon />
</div>
) : null}
</div>

{draftState?.expanded ? (
{provider !== CLOUD_SMTP_PROVIDER_NAME && draftState?.expanded ? (
<>
<div className={styles.expandedEmailProviderConfig}>
<SMTPConfigForm smtp={draftState} loaded hasName />
Expand Down
31 changes: 21 additions & 10 deletions shared/studio/tabs/auth/state/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from "mobx-keystone";
import {parsers} from "../../../components/dataEditor/parsers";
import {connCtx, dbCtx} from "../../../state";
import {instanceCtx} from "../../../state/instance";
import {
AppleIcon,
AzureIcon,
Expand All @@ -20,6 +21,8 @@ import {
SlackIcon,
} from "../icons";

export const CLOUD_SMTP_PROVIDER_NAME = "cloud";

interface AuthAppData {
app_name: string | null;
logo_url: string | null;
Expand Down Expand Up @@ -352,6 +355,11 @@ export class AuthAdminState extends Model({
@observable
updatingEmailProviders = false;

@computed
get hasCloudSMTP() {
return instanceCtx.get(this)?.isCloud ?? false;
}

@action
async removeEmailProvider(name: string) {
this.updatingEmailProviders = true;
Expand Down Expand Up @@ -431,9 +439,11 @@ export class AuthAdminState extends Model({
wh.events.includes("EmailVerificationRequested")
);

const smtpConfigured = this.emailProviders?.some(
(provider) => provider.name === this.currentEmailProvider
);
const smtpConfigured =
this.hasCloudSMTP ||
this.emailProviders?.some(
(provider) => provider.name === this.currentEmailProvider
);

return {
verificationNoSmtp:
Expand Down Expand Up @@ -711,8 +721,8 @@ export class DraftCoreConfig
return key === ""
? "Signing key is required"
: key.length < 32
? "Signing key too short"
: null;
? "Signing key too short"
: null;
}

@computed
Expand Down Expand Up @@ -1061,9 +1071,10 @@ export class DraftSMTPConfig
}
if (
val !== this.currentConfig?.name &&
this.parentState.emailProviders?.some(
(provider) => provider.name === val
)
((this.parentState.hasCloudSMTP && val === CLOUD_SMTP_PROVIDER_NAME) ||
this.parentState.emailProviders?.some(
(provider) => provider.name === val
))
) {
return "Name already exists";
}
Expand Down Expand Up @@ -1418,8 +1429,8 @@ export class DraftProviderConfig extends Model({
? this.webauthnRelyingOrigin != null &&
!this.webauthnRelyingOriginError
: this.selectedProviderType === "ext::auth::MagicLinkProviderConfig"
? !this.tokenTimeToLiveError
: true;
? !this.tokenTimeToLiveError
: true;
}
}

Expand Down

0 comments on commit d87c94a

Please sign in to comment.