Skip to content
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

Add additional_scope/require_verification to providers + redirect_to_on_signup to ui config #264

Merged
merged 2 commits into from
Oct 20, 2023
Merged

Add additional_scope/require_verification to providers + redirect_to_on_signup to ui config #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
09e0a08
Add `additional_scope` to providers + `redirect_to_on_signup` to ui c…
jaclarke Oct 5, 2023
5bbec44
Add `require_verification` config
jaclarke Oct 20, 2023
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
33 changes: 33 additions & 0 deletions shared/studio/tabs/auth/authAdmin.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,32 @@
}
}

.checkbox {
display: flex;
padding: 7px;
margin: 0 -7px;
cursor: pointer;

input {
appearance: none;
width: 20px;
height: 20px;
margin: 0;
outline: 0;
border: 2px solid #9a9a9a;
border-radius: 4px;
background: transparent no-repeat center center;
box-sizing: border-box;
cursor: pointer;

&:checked {
background-color: #1f8aed;
border: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='%23fff' d='M0,8 5,13 14,4 12,2 5,9 2,6z'/%3E%3C/svg%3E");
}
}
}

.providersList {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -368,6 +394,13 @@
@include hideScrollbar;
}

.providerConfigValue {
span {
opacity: 0.7;
font-style: italic;
}
}

@include darkTheme {
background-color: #2f2f2f;

Expand Down
99 changes: 90 additions & 9 deletions shared/studio/tabs/auth/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
DraftUIConfig,
ProviderKind,
OAuthProviderData,
LocalEmailPasswordProviderData,
} from "./state";
import {useTabState} from "../../state";
import {encodeB64} from "edgedb/dist/primitives/buffer";
Expand Down Expand Up @@ -268,7 +269,26 @@ const UIConfigForm = observer(function UIConfig({
/>
</div>
<div className={styles.configExplain}>
The url to redirect to after successful login.
The url to redirect to after successful sign in.
</div>
</div>
</div>

<div className={styles.gridItem}>
<div className={styles.configName}>redirect_to_on_signup</div>
<div className={styles.configInputWrapper}>
<div className={styles.configInput}>
<Input
size={32}
value={draft.getConfigValue("redirect_to_on_signup")}
onChange={(val) =>
draft.setConfigValue("redirect_to_on_signup", val)
}
/>
</div>
<div className={styles.configExplain}>
The url to redirect to after a new user signs up. If not set,
'redirect_to' will be used instead.
</div>
</div>
</div>
Expand Down Expand Up @@ -573,7 +593,44 @@ const DraftProviderConfigForm = observer(function DraftProviderConfigForm({
</div>
</div>
</div>
<div className={styles.gridItem}>
<div className={styles.configName}>additional_scope</div>
<div className={styles.configInputWrapper}>
<div className={styles.configInput}>
<Input
size={32}
value={draftState.additionalScope}
onChange={(val) => draftState.setAdditionalScope(val)}
/>
</div>
<div className={styles.configExplain}>
Space-separated list of scopes to be included in the
authorize request to the OAuth provider.
</div>
</div>
</div>
</>
) : providerKind === "Local" ? (
<div className={styles.gridItem}>
<div className={styles.configName}>require_verification</div>
<div className={styles.configInputWrapper}>
<div className={styles.configInput}>
<label className={styles.checkbox}>
<input
type="checkbox"
checked={draftState.requireEmailVerification}
onChange={(e) =>
draftState.setRequireEmailVerification(e.target.checked)
}
/>
</label>
</div>
<div className={styles.configExplain}>
Whether the email needs to be verified before the user is
allowed to sign in.
</div>
</div>
</div>
) : null}
</div>

Expand Down Expand Up @@ -612,7 +669,7 @@ function ProviderCard({provider}: {provider: AuthProviderData}) {
<div
className={cn(styles.expandProvider, {
[styles.collapsed]: !expanded,
[styles.disabled]: kind !== "OAuth",
// [styles.disabled]: kind !== "OAuth",
})}
onClick={() => setExpanded(!expanded)}
>
Expand All @@ -636,15 +693,39 @@ function ProviderCard({provider}: {provider: AuthProviderData}) {
}}
/>
</div>
{expanded && kind === "OAuth" ? (
{expanded ? (
<div className={styles.providerDetails}>
<div className={styles.providerConfigName}>client_id</div>
<div className={styles.providerConfigValue}>
{(provider as OAuthProviderData).client_id}
</div>
{kind === "OAuth" ? (
<>
<div className={styles.providerConfigName}>client_id</div>
<div className={styles.providerConfigValue}>
{(provider as OAuthProviderData).client_id}
</div>

<div className={styles.providerConfigName}>secret</div>
<div className={styles.providerConfigValue}>
{secretPlaceholder}
</div>

<div className={styles.providerConfigName}>secret</div>
<div className={styles.providerConfigValue}>{secretPlaceholder}</div>
<div className={styles.providerConfigName}>additional_scope</div>
<div className={styles.providerConfigValue}>
{(provider as OAuthProviderData).additional_scope || (
<span>none</span>
)}
</div>
</>
) : kind === "Local" ? (
<>
<div className={styles.providerConfigName}>
require_verification
</div>
<div className={styles.providerConfigValue}>
{(
provider as LocalEmailPasswordProviderData
).require_verification.toString()}
</div>
</>
) : null}
</div>
) : null}
</div>
Expand Down
39 changes: 36 additions & 3 deletions shared/studio/tabs/auth/state/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,20 @@ export type OAuthProviderData = {
| "ext::auth::GitHubOAuthProvider"
| "ext::auth::GoogleOAuthProvider";
client_id: string;
additional_scope: string;
};
export type LocalEmailPasswordProviderData = {
name: string;
_typename: "ext::auth::EmailPasswordProviderConfig";
require_verification: boolean;
};
export type AuthProviderData =
| OAuthProviderData
| {name: string; _typename: "ext::auth::EmailPasswordProviderConfig"};
| LocalEmailPasswordProviderData;

export interface AuthUIConfigData {
redirect_to: string;
redirect_to_on_signup: string;
app_name: string | null;
logo_url: string | null;
dark_logo_url: string | null;
Expand Down Expand Up @@ -187,9 +194,12 @@ export class AuthAdminState extends Model({
_typename := .__type__.name,
name,
[is OAuthProviderConfig].client_id,
[is OAuthProviderConfig].additional_scope,
[is EmailPasswordProviderConfig].require_verification,
},
ui: {
redirect_to,
redirect_to_on_signup,
app_name,
logo_url,
dark_logo_url,
Expand Down Expand Up @@ -221,6 +231,7 @@ export class AuthAdminState extends Model({
@model("AdminDraftUIConfig")
export class DraftUIConfig extends Model({
_redirect_to: prop<string | null>(null),
_redirect_to_on_signup: prop<string | null>(null),
_app_name: prop<string | null>(null),
_logo_url: prop<string | null>(null),
_dark_logo_url: prop<string | null>(null),
Expand Down Expand Up @@ -257,6 +268,7 @@ export class DraftUIConfig extends Model({
get formChanged() {
return (
this._redirect_to != null ||
this._redirect_to_on_signup != null ||
this._app_name != null ||
this._logo_url != null ||
this._dark_logo_url != null ||
Expand All @@ -267,6 +279,7 @@ export class DraftUIConfig extends Model({
@modelAction
clearForm() {
this._redirect_to = null;
this._redirect_to_on_signup = null;
this._app_name = null;
this._logo_url = null;
this._dark_logo_url = null;
Expand Down Expand Up @@ -298,7 +311,13 @@ export class DraftUIConfig extends Model({
this.getConfigValue("redirect_to")
)},
${(
["app_name", "logo_url", "dark_logo_url", "brand_color"] as const
[
"redirect_to_on_signup",
"app_name",
"logo_url",
"dark_logo_url",
"brand_color",
] as const
)
.map((name) => {
const val = this.getConfigValue(name);
Expand All @@ -325,6 +344,9 @@ export class DraftProviderConfig extends Model({

oauthClientId: prop("").withSetter(),
oauthSecret: prop("").withSetter(),
additionalScope: prop("").withSetter(),

requireEmailVerification: prop(true).withSetter(),
}) {
@computed
get oauthClientIdError() {
Expand Down Expand Up @@ -372,8 +394,19 @@ export class DraftProviderConfig extends Model({
provider.kind === "OAuth"
? `
client_id := ${JSON.stringify(this.oauthClientId)},
secret := ${JSON.stringify(this.oauthSecret)}
secret := ${JSON.stringify(this.oauthSecret)},
${
this.additionalScope.trim()
? `additional_scope := ${JSON.stringify(
this.additionalScope.trim()
)}`
: ""
}
`
: provider.kind === "Local"
? `require_verification := ${
this.requireEmailVerification ? "true" : "false"
},`
: ""
}
}`
Expand Down
Loading