Skip to content

Commit

Permalink
update with some changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@RulaKhaled
RulaKhaled committed Jul 2, 2024
1 parent afbdcdb commit 7f8a13e
Showing 1 changed file with 141 additions and 134 deletions.
275 changes: 141 additions & 134 deletions src/pages/AccountSettings/tabs/OktaAccess/OktaConfigForm/OktaConfigForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { z } from 'zod'
import Banner from 'ui/Banner'
import BannerContent from 'ui/Banner/BannerContent'
import Button from 'ui/Button'
import { Card } from 'ui/Card'
import Icon from 'ui/Icon'
import TextInput from 'ui/TextInput'
import Toggle from 'ui/Toggle'
Expand Down Expand Up @@ -33,148 +34,154 @@ export function OktaConfigForm() {
}

return (
<div className="w-5/6 border-2 border-solid border-ds-gray-primary p-4 text-ds-gray-octonary">
<form
onSubmit={handleSubmit(onSubmit)}
className="mb-4 flex flex-col gap-4"
>
<div className="flex flex-col gap-1">
<h2 className="text-base font-semibold">Step 1: Enable Okta Sync</h2>
<p>
To connect Codecov with Okta, you need to enable the
synchronization. Please enter the necessary Okta credentials below
and toggle the sync option to start the synchronization process.
</p>
</div>
<div className="flex flex-col gap-4 bg-ds-gray-primary p-4">
<Card>
<Card.Content>
<form
onSubmit={handleSubmit(onSubmit)}
className="mb-4 flex flex-col gap-4"
>
<div className="flex flex-col gap-1">
<label htmlFor="clientId" className="block font-semibold">
Client ID
</label>
<TextInput
{...register('clientId', {
required: true,
})}
type="text"
id="clientId"
placeholder="Enter Client ID"
/>
{formState.errors.clientId && (
<p className="mt-1 text-codecov-red">
{formState.errors.clientId.message}
</p>
)}
<h2 className="text-base font-semibold">
Step 1: Enable Okta Sync
</h2>
<p>
To connect Codecov with Okta, you need to enable the
synchronization. Please enter the necessary Okta credentials below
and toggle the sync option to start the synchronization process.
</p>
</div>
<div className="flex flex-col gap-1">
<label htmlFor="clientSecret" className="block font-semibold">
Client Secret
</label>
<div className="relative">
<div className="flex flex-col gap-4 bg-ds-gray-primary p-4">
<div className="flex flex-col gap-1">
<label htmlFor="clientId" className="block font-semibold">
Client ID
</label>
<TextInput
{...register('clientSecret', { required: true })}
type={showPassword ? 'text' : 'password'}
id="clientSecret"
placeholder="Enter Client Secret"
{...register('clientId', {
required: true,
})}
type="text"
id="clientId"
placeholder="Enter Client ID"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm leading-5"
>
<Icon
name={showPassword ? 'eye' : 'eyeOff'}
size="sm"
variant="solid"
{formState.errors.clientId ? (
<p className="mt-1 text-codecov-red">
{formState.errors.clientId.message}
</p>
) : null}
</div>
<div className="flex flex-col gap-1">
<label htmlFor="clientSecret" className="block font-semibold">
Client Secret
</label>
<div className="relative">
<TextInput
{...register('clientSecret', { required: true })}
type={showPassword ? 'text' : 'password'}
id="clientSecret"
placeholder="Enter Client Secret"
/>
</button>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute inset-y-0 right-0 flex items-center pr-3 text-sm leading-5"
>
<Icon
name={showPassword ? 'eye' : 'eyeOff'}
size="sm"
variant="solid"
/>
</button>
</div>
{formState.errors.clientSecret ? (
<p className="mt-1 text-codecov-red">
{formState.errors.clientSecret.message}
</p>
) : null}
</div>
{formState.errors.clientSecret && (
<p className="mt-1 text-codecov-red">
{formState.errors.clientSecret.message}
</p>
)}
</div>
<div className="flex flex-col gap-1">
<label htmlFor="redirectUri" className="block font-semibold">
Redirect URI
</label>
<TextInput
{...register('redirectUri', { required: true })}
type="text"
id="redirectUri"
placeholder="Enter Redirect URI"
/>
{formState.errors.redirectUri && (
<p className="mt-1 text-codecov-red">
{formState.errors.redirectUri.message}
</p>
)}
</div>
<div>
<Button
type="submit"
disabled={!formState.isValid}
to={undefined}
hook="save okta form changes"
>
Save
</Button>
</div>
</div>
</form>
<div className="flex flex-col gap-4">
<Banner>
<BannerContent>
<div className="flex flex-col gap-3">
<p>
Please note that we are unable to verify the Okta credentials.
After enabling sync, be sure to test the connection to ensure it
is functioning correctly. Additionally, you must toggle enforce
on to require Okta login
</p>
<Toggle
dataMarketing="okta-sync-enabled"
onClick={() => {
setOktaEnabled(!oktaEnabled)
if (oktaLoginEnforce) {
setOktaLoginEnforce(false)
}
}}
value={oktaEnabled}
label="Okta Sync Enabled"
<div className="flex flex-col gap-1">
<label htmlFor="redirectUri" className="block font-semibold">
Redirect URI
</label>
<TextInput
{...register('redirectUri', { required: true })}
type="text"
id="redirectUri"
placeholder="Enter Redirect URI"
/>
{formState.errors.redirectUri ? (
<p className="mt-1 text-codecov-red">
{formState.errors.redirectUri.message}
</p>
) : null}
</div>
</BannerContent>
</Banner>
<hr />
<h2 className="text-base font-semibold">Step 2: Enforce Okta Login</h2>
<p>
Once the synchronization with Okta is enabled, you can enforce Okta
login for all users.
</p>
<Banner>
<BannerContent>
<div className="flex flex-col gap-3">
<p>
Please note that enabling this will require all users to log in
to Codecov via Okta. Without successful verification, only
public repositories will be visible.
</p>
<Toggle
dataMarketing="okta-login-enforce"
onClick={() => {
setOktaLoginEnforce(!oktaLoginEnforce)
if (!oktaLoginEnforce) {
setOktaEnabled(true)
}
}}
value={oktaLoginEnforce}
label="Okta Login Enforced"
/>
<div>
<Button
type="submit"
disabled={!formState.isValid}
to={undefined}
hook="save okta form changes"
>
Save
</Button>
</div>
</BannerContent>
</Banner>
</div>
</div>
</div>
</form>
<div className="flex flex-col gap-4">
<Banner>
<BannerContent>
<div className="flex flex-col gap-3">
<p>
Please note that we are unable to verify the Okta credentials.
After enabling sync, be sure to test the connection to ensure
it is functioning correctly. Additionally, you must toggle
enforce on to require Okta login
</p>
<Toggle
dataMarketing="okta-sync-enabled"
onClick={() => {
setOktaEnabled(!oktaEnabled)
if (oktaLoginEnforce) {
setOktaLoginEnforce(false)
}
}}
value={oktaEnabled}
label="Okta Sync Enabled"
/>
</div>
</BannerContent>
</Banner>
<hr />
<h2 className="text-base font-semibold">
Step 2: Enforce Okta Login
</h2>
<p>
Once the synchronization with Okta is enabled, you can enforce Okta
login for all users.
</p>
<Banner>
<BannerContent>
<div className="flex flex-col gap-3">
<p>
Please note that enabling this will require all users to log
in to Codecov via Okta. Without successful verification, only
public repositories will be visible.
</p>
<Toggle
dataMarketing="okta-login-enforce"
onClick={() => {
setOktaLoginEnforce(!oktaLoginEnforce)
if (!oktaLoginEnforce) {
setOktaEnabled(true)
}
}}
value={oktaLoginEnforce}
label="Okta Login Enforced"
/>
</div>
</BannerContent>
</Banner>
</div>
</Card.Content>
</Card>
)
}

0 comments on commit 7f8a13e

Please sign in to comment.