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

Jump to bottom

Reorder IDP form elements #2511

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Reorder IDP form elements #2511

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
83 changes: 51 additions & 32 deletions app/forms/idp/create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ import { useNavigate } from 'react-router-dom'

import { useApiMutation, useApiQueryClient } from '@oxide/api'

import { CheckboxField } from '~/components/form/fields/CheckboxField'
import { DescriptionField } from '~/components/form/fields/DescriptionField'
import { FileField } from '~/components/form/fields/FileField'
import { NameField } from '~/components/form/fields/NameField'
import { TextField } from '~/components/form/fields/TextField'
import { SideModalForm } from '~/components/form/SideModalForm'
import { useSiloSelector } from '~/hooks/use-params'
import { addToast } from '~/stores/toast'
import { FormDivider } from '~/ui/lib/Divider'
import { readBlobAsBase64 } from '~/util/file'
import { pb } from '~/util/path-builder'

Expand Down Expand Up @@ -59,6 +61,8 @@ export function CreateIdpSideModalForm() {
})

const form = useForm({ defaultValues })
const signedRequestsForm = useForm({ defaultValues: { signedRequests: false } })
const signedRequests = signedRequestsForm.watch('signedRequests')

return (
<SideModalForm
Expand Down Expand Up @@ -105,24 +109,19 @@ export function CreateIdpSideModalForm() {
submitError={createIdp.error}
submitLabel="Create provider"
>
<h3 className="text-sans-2xl">General</h3>
<NameField name="name" control={form.control} />
<DescriptionField name="description" control={form.control} required />
<TextField
name="acsUrl"
label="ACS URL"
description="Service provider endpoint for the IdP to send the SAML response"
required
control={form.control}
/>
{/* TODO: help text */}
<TextField name="idpEntityId" label="Entity ID" required control={form.control} />
<TextField
name="sloUrl"
label="Single Logout (SLO) URL"
description="Service provider endpoint for log out requests"
name="technicalContactEmail"
label="Technical contact email"
required
control={form.control}
/>

<FormDivider />

<h3 className="text-sans-2xl">Service provider</h3>
{/* TODO: help text */}
<TextField
name="spClientId"
Expand All @@ -131,36 +130,56 @@ export function CreateIdpSideModalForm() {
control={form.control}
/>
<TextField
name="groupAttributeName"
label="Group attribute name"
description="Name of SAML attribute where we can find a comma-separated list of names of groups the user belongs to"
name="acsUrl"
label="ACS URL"
description="Service provider endpoint for the IdP to send the SAML response"
required
control={form.control}
/>
{/* TODO: Email field, probably */}
<TextField
name="technicalContactEmail"
label="Technical contact email"
name="sloUrl"
label="Single Logout (SLO) URL"
description="Service provider endpoint for log out requests"
required
control={form.control}
/>
<MetadataSourceField control={form.control} />
{/* We don't bother validating that you have both of these or neither even
<CheckboxField name="signedRequests" control={signedRequestsForm.control}>
Signed requests (optional)
</CheckboxField>
{signedRequests && (
<>
{/* We don't bother validating that you have both of these or neither even
though the API requires that because we are going to change the API to
always require both, at which point these become simple `required` fields */}
<FileField
id="public-cert-file-input"
name="signingKeypair.publicCert"
description="DER-encoded X.509 certificate"
label="Public cert"
control={form.control}
/>
<FileField
id="private-key-file-input"
name="signingKeypair.privateKey"
description="DER-encoded private key"
label="Private key"
<FileField
id="public-cert-file-input"
name="signingKeypair.publicCert"
description="DER-encoded X.509 certificate"
label="Public cert"
control={form.control}
/>
<FileField
id="private-key-file-input"
name="signingKeypair.privateKey"
description="DER-encoded private key"
label="Private key"
control={form.control}
/>
</>
)}

<FormDivider />

<h3 className="text-sans-2xl">Identity Provider</h3>
{/* TODO: help text */}
<TextField name="idpEntityId" label="Entity ID" required control={form.control} />
<TextField
name="groupAttributeName"
label="Group attribute name"
description="Name of SAML attribute where we can find a comma-separated list of names of groups the user belongs to"
control={form.control}
/>
<MetadataSourceField control={form.control} />
</SideModalForm>
)
}
Loading