Skip to content

Commit

Permalink
Small tweaks to work on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandhose
sandhose committed Sep 20, 2024
1 parent 9f67a92 commit 1befe57
Show file tree
Hide file tree
Showing 3 changed files with 174 additions and 154 deletions.
1 change: 1 addition & 0 deletions src/layouts/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,5 +96,6 @@ main {

& code {
font-family: var(--cpd-font-family-mono);
word-break: break-all;
}
}
314 changes: 163 additions & 151 deletions src/pages/client-implementation-guide/interactive.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,26 +66,28 @@ export const CsApiInput = () => {
};

return (
<Form.Root onSubmit={onSubmit} className={cx(styles.form)}>
<Form.Field name="cs-api">
<Form.Label>Matrix C-S API root</Form.Label>
<Form.TextControl
type="url"
required
defaultValue={$csApi}
placeholder="https://matrix-client.matrix.org/"
/>
<Form.ErrorMessage match="valueMissing">
This field is required
</Form.ErrorMessage>
<Form.ErrorMessage match="typeMismatch">
This must be a valid URL
</Form.ErrorMessage>
</Form.Field>
<Form.Submit size="sm" kind="secondary">
Save
</Form.Submit>
</Form.Root>
<div className={cx(styles["form-wrapper"])}>
<Form.Root onSubmit={onSubmit} className={cx(styles.form)}>
<Form.Field name="cs-api">
<Form.Label>Matrix C-S API root</Form.Label>
<Form.TextControl
type="url"
required
defaultValue={$csApi}
placeholder="https://matrix-client.matrix.org/"
/>
<Form.ErrorMessage match="valueMissing">
This field is required
</Form.ErrorMessage>
<Form.ErrorMessage match="typeMismatch">
This must be a valid URL
</Form.ErrorMessage>
</Form.Field>
<Form.Submit size="sm" kind="secondary">
Save
</Form.Submit>
</Form.Root>
</div>
);
};

Expand Down Expand Up @@ -122,37 +124,39 @@ const Fetcher: React.FC<FetcherProps> = ({
};

return (
<Form.Root onSubmit={onSubmit} className={cx(styles.form)}>
<Form.Field name="cs-api">
<Form.Label>Endpoint</Form.Label>
<Form.TextControl type="url" readOnly value={url} />
<Form.ErrorMessage match="valueMissing">
This field is required
</Form.ErrorMessage>
<Form.ErrorMessage match="typeMismatch">
This must be a valid URL
</Form.ErrorMessage>
</Form.Field>

{data && (
<pre className={cx(styles["fetcher-output"])}>
{JSON.stringify(data, null, 2)}
</pre>
)}

{isError && (
<Alert type="critical" title="There was an error fetching">
{error.toString()}
</Alert>
)}

<div className={cx(styles["button-stack"])}>
<Form.Submit disabled={isFetching} size="sm" kind="secondary">
{isFetching && <LoadingIndicator />}
{label}
</Form.Submit>
</div>
</Form.Root>
<div className={cx(styles["form-wrapper"])}>
<Form.Root onSubmit={onSubmit} className={cx(styles.form)}>
<Form.Field name="cs-api">
<Form.Label>Endpoint</Form.Label>
<Form.TextControl type="url" readOnly value={url} />
<Form.ErrorMessage match="valueMissing">
This field is required
</Form.ErrorMessage>
<Form.ErrorMessage match="typeMismatch">
This must be a valid URL
</Form.ErrorMessage>
</Form.Field>

{data && (
<pre className={cx(styles["fetcher-output"])}>
{JSON.stringify(data, null, 2)}
</pre>
)}

{isError && (
<Alert type="critical" title="There was an error fetching">
{error.toString()}
</Alert>
)}

<div className={cx(styles["button-stack"])}>
<Form.Submit disabled={isFetching} size="sm" kind="secondary">
{isFetching && <LoadingIndicator />}
{label}
</Form.Submit>
</div>
</Form.Root>
</div>
);
};

Expand Down Expand Up @@ -229,29 +233,31 @@ export const AuthParametersForm = () => {
}, [$codeVerifier]);

return (
<Form.Root className={cx(styles.form)}>
<Form.Field name="state">
<Form.Label>State</Form.Label>
<RandomStringField length={16} atom={state} />
</Form.Field>

<Form.Field name="code-verifier">
<Form.Label>Code verifier</Form.Label>
<RandomStringField minLength={43} length={43} atom={codeVerifier} />
</Form.Field>

<Form.Field name="code-challenge">
<Form.Label>
Code challenge = <code>BASE64URL(SHA256(code verifier))</code>
</Form.Label>
<Form.TextControl
className={cx(styles.mono)}
type="text"
readOnly
value={$codeChallenge}
/>
</Form.Field>
</Form.Root>
<div className={cx(styles["form-wrapper"])}>
<Form.Root className={cx(styles.form)}>
<Form.Field name="state">
<Form.Label>State</Form.Label>
<RandomStringField length={16} atom={state} />
</Form.Field>

<Form.Field name="code-verifier">
<Form.Label>Code verifier</Form.Label>
<RandomStringField minLength={43} length={43} atom={codeVerifier} />
</Form.Field>

<Form.Field name="code-challenge">
<Form.Label>
Code challenge = <code>BASE64URL(SHA256(code verifier))</code>
</Form.Label>
<Form.TextControl
className={cx(styles.mono)}
type="text"
readOnly
value={$codeChallenge}
/>
</Form.Field>
</Form.Root>
</div>
);
};

Expand Down Expand Up @@ -344,44 +350,46 @@ export const ClientMetadataForm = () => {
};

return (
<Form.Root className={cx(styles.form)} onSubmit={onSubmit}>
<Form.Field name="client-name">
<Form.Label>Client name</Form.Label>
<Form.TextControl
type="text"
required
value={clientName}
onChange={onChange}
placeholder="Client implementation guide"
/>
<Form.ErrorMessage match="valueMissing">
This field is required
</Form.ErrorMessage>
</Form.Field>

<Form.Field name="endpoint">
<Form.Label>Registration endpoint</Form.Label>
<Form.TextControl
type="url"
readOnly
value={$serverMetadata.registration_endpoint}
/>
</Form.Field>

<pre className={cx(styles["fetcher-output"])}>
{JSON.stringify(clientMetadata, null, 2)}
</pre>
<div className={cx(styles["form-wrapper"])}>
<Form.Root className={cx(styles.form)} onSubmit={onSubmit}>
<Form.Field name="client-name">
<Form.Label>Client name</Form.Label>
<Form.TextControl
type="text"
required
value={clientName}
onChange={onChange}
placeholder="Client implementation guide"
/>
<Form.ErrorMessage match="valueMissing">
This field is required
</Form.ErrorMessage>
</Form.Field>

<Form.Submit size="sm" kind="secondary">
Submit client metadata
</Form.Submit>
<Form.Field name="endpoint">
<Form.Label>Registration endpoint</Form.Label>
<Form.TextControl
type="url"
readOnly
value={$serverMetadata.registration_endpoint}
/>
</Form.Field>

{response && (
<pre className={cx(styles["fetcher-output"])}>
{JSON.stringify(response, null, 2)}
{JSON.stringify(clientMetadata, null, 2)}
</pre>
)}
</Form.Root>

<Form.Submit size="sm" kind="secondary">
Submit client metadata
</Form.Submit>

{response && (
<pre className={cx(styles["fetcher-output"])}>
{JSON.stringify(response, null, 2)}
</pre>
)}
</Form.Root>
</div>
);
};

Expand Down Expand Up @@ -430,50 +438,52 @@ export const CodeExchangeForm = () => {
};

return (
<Form.Root className={cx(styles.form)} onSubmit={onSubmit}>
<Form.Field name="endpoint">
<Form.Label>Token endpoint</Form.Label>
<Form.TextControl
type="url"
readOnly
value={$serverMetadata.token_endpoint}
/>
</Form.Field>
<Form.Field name="grant-type">
<Form.Label>Grant type</Form.Label>
<Form.TextControl type="text" readOnly value="authorization_code" />
</Form.Field>
<Form.Field name="client-id">
<Form.Label>Client ID</Form.Label>
<Form.TextControl type="text" required readOnly value={$clientId} />
{!$clientId && (
<Form.ErrorMessage>
Client must be registered to get one
<div className={cx(styles["form-wrapper"])}>
<Form.Root className={cx(styles.form)} onSubmit={onSubmit}>
<Form.Field name="endpoint">
<Form.Label>Token endpoint</Form.Label>
<Form.TextControl
type="url"
readOnly
value={$serverMetadata.token_endpoint}
/>
</Form.Field>
<Form.Field name="grant-type">
<Form.Label>Grant type</Form.Label>
<Form.TextControl type="text" readOnly value="authorization_code" />
</Form.Field>
<Form.Field name="client-id">
<Form.Label>Client ID</Form.Label>
<Form.TextControl type="text" required readOnly value={$clientId} />
{!$clientId && (
<Form.ErrorMessage>
Client must be registered to get one
</Form.ErrorMessage>
)}
</Form.Field>
<Form.Field name="code-verifier">
<Form.Label>Code verifier</Form.Label>
<Form.TextControl type="text" readOnly value={$codeVerifier} />
</Form.Field>
<Form.Field name="code">
<Form.Label>Code</Form.Label>
<Form.TextControl type="text" required />
<Form.ErrorMessage match="valueMissing">
This field is required
</Form.ErrorMessage>
</Form.Field>

<Form.Submit size="sm" kind="secondary" disabled={!$clientId}>
Exchange code for access token
</Form.Submit>

{response && (
<pre className={cx(styles["fetcher-output"])}>
{JSON.stringify(response, null, 2)}
</pre>
)}
</Form.Field>
<Form.Field name="code-verifier">
<Form.Label>Code verifier</Form.Label>
<Form.TextControl type="text" readOnly value={$codeVerifier} />
</Form.Field>
<Form.Field name="code">
<Form.Label>Code</Form.Label>
<Form.TextControl type="text" required />
<Form.ErrorMessage match="valueMissing">
This field is required
</Form.ErrorMessage>
</Form.Field>

<Form.Submit size="sm" kind="secondary" disabled={!$clientId}>
Exchange code for access token
</Form.Submit>

{response && (
<pre className={cx(styles["fetcher-output"])}>
{JSON.stringify(response, null, 2)}
</pre>
)}
</Form.Root>
</Form.Root>
</div>
);
};

Expand Down Expand Up @@ -526,12 +536,14 @@ export const DisplayAuthorizationUrl: React.FC = () => {
{Object.entries(params).map(([key, value], index) => (
<div key={key} className={cx(styles.param)}>
{index === 0 ? "?" : "&"}
{key} = {encodeURIComponent(value)}
{key} ={" "}
{value === "" ? <b>{"<missing>"}</b> : encodeURIComponent(value)}
</div>
))}

<Button
as="a"
disabled={$clientId === null}
href={fullUrl.toString()}
size="sm"
kind="primary"
Expand Down
13 changes: 10 additions & 3 deletions src/pages/client-implementation-guide/style.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
.form-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
min-width: 0;
}

.form {
max-width: 100%;
min-width: 0;
width: 60ch;
margin: var(--cpd-space-4x) 0;
margin: var(--cpd-space-4x);
border: solid 1px var(--cpd-color-border-interactive-primary);
border-radius: var(--cpd-space-1x);
padding: var(--cpd-space-4x);
Expand Down Expand Up @@ -59,7 +66,7 @@
display: flex;
flex-direction: column;
gap: var(--cpd-space-1x);
margin: 0;
margin: var(--cpd-space-4x) 0;
font-family: var(--cpd-font-family-mono);
padding: var(--cpd-space-6x);
background-color: var(--cpd-color-bg-canvas-default);
Expand Down

0 comments on commit 1befe57

Please sign in to comment.