mirror of
https://github.com/warp-tech/warpgate.git
synced 2025-09-16 19:44:30 +08:00
modals UI update
This commit is contained in:
Eugene
parent
7d4305cb90
commit
5c7e2aa71b
8 changed files with 115 additions and 89 deletions
|
|
@ -9,7 +9,6 @@
|
|||
ModalFooter,
|
||||
} from '@sveltestrap/sveltestrap'
|
||||
|
||||
import ModalHeader from 'common/sveltestrap-s5-ports/ModalHeader.svelte'
|
||||
import QRCode from 'qrcode'
|
||||
import * as OTPAuth from 'otpauth'
|
||||
import base32Encode from 'base32-encode'
|
||||
|
|
@ -113,9 +112,6 @@
|
|||
_save()
|
||||
e.preventDefault()
|
||||
}}>
|
||||
<ModalHeader toggle={_cancel}>
|
||||
One-time password
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<img class="qr mb-3" bind:this={qrImage} alt="OTP QR code" />
|
||||
|
||||
|
|
@ -126,7 +122,7 @@
|
|||
</Button>
|
||||
<CopyButton class="d-flex align-items-center" color="secondary" text={totpUri!} label={'Copy URI'} />
|
||||
</div>
|
||||
<FormGroup floating label="Paste the generated OTP code" class="mt-3">
|
||||
<FormGroup floating label="Paste the generated OTP code" class="mt-3" spacing="0">
|
||||
<Input
|
||||
required
|
||||
bind:feedback={validationFeedback}
|
||||
|
|
@ -140,19 +136,18 @@
|
|||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<div class="d-flex">
|
||||
<Button
|
||||
class="ms-auto"
|
||||
disabled={!totpValid}
|
||||
on:click={() => validated = true}
|
||||
>Create</Button>
|
||||
<Button
|
||||
class="modal-button"
|
||||
color="primary"
|
||||
disabled={!totpValid}
|
||||
on:click={() => validated = true}
|
||||
>Create</Button>
|
||||
|
||||
<Button
|
||||
class="ms-2"
|
||||
color="danger"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</div>
|
||||
<Button
|
||||
class="modal-button"
|
||||
color="danger"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@
|
|||
ModalFooter,
|
||||
} from '@sveltestrap/sveltestrap'
|
||||
|
||||
import ModalHeader from 'common/sveltestrap-s5-ports/ModalHeader.svelte'
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean
|
||||
create: (password: string) => void
|
||||
|
|
@ -44,11 +42,8 @@
|
|||
_save()
|
||||
e.preventDefault()
|
||||
}}>
|
||||
<ModalHeader toggle={_cancel}>
|
||||
Password
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<FormGroup floating label="Enter a new password">
|
||||
<FormGroup floating label="Enter a new password" spacing="0">
|
||||
<Input
|
||||
bind:inner={field}
|
||||
type="password"
|
||||
|
|
@ -58,18 +53,17 @@
|
|||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<div class="d-flex">
|
||||
<Button
|
||||
class="ms-auto"
|
||||
on:click={() => validated = true}
|
||||
>Create</Button>
|
||||
<Button
|
||||
class="modal-button"
|
||||
color="primary"
|
||||
on:click={() => validated = true}
|
||||
>Create</Button>
|
||||
|
||||
<Button
|
||||
class="ms-2"
|
||||
color="danger"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</div>
|
||||
<Button
|
||||
class="modal-button"
|
||||
color="danger"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
ModalFooter,
|
||||
} from '@sveltestrap/sveltestrap'
|
||||
|
||||
import ModalHeader from 'common/sveltestrap-s5-ports/ModalHeader.svelte'
|
||||
import { type ExistingPublicKeyCredential } from './lib/api'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -74,9 +73,6 @@
|
|||
_save()
|
||||
e.preventDefault()
|
||||
}}>
|
||||
<ModalHeader toggle={_cancel}>
|
||||
Add an SSH public key
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<FormGroup floating label="Label">
|
||||
<Input
|
||||
|
|
@ -85,7 +81,7 @@
|
|||
required
|
||||
bind:value={label} />
|
||||
</FormGroup>
|
||||
<FormGroup floating label="Public key in OpenSSH format">
|
||||
<FormGroup floating label="Public key in OpenSSH format" spacing="0">
|
||||
<Input
|
||||
style="font-family: monospace; height: 15rem"
|
||||
bind:inner={field}
|
||||
|
|
@ -96,19 +92,18 @@
|
|||
</FormGroup>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<div class="d-flex">
|
||||
<Button
|
||||
type="submit"
|
||||
class="ms-auto"
|
||||
on:click={() => validated = true}
|
||||
>Save</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="modal-button"
|
||||
on:click={() => validated = true}
|
||||
>Save</Button>
|
||||
|
||||
<Button
|
||||
class="ms-2"
|
||||
color="danger"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</div>
|
||||
<Button
|
||||
class="modal-button"
|
||||
color="danger"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
ModalFooter,
|
||||
} from '@sveltestrap/sveltestrap'
|
||||
|
||||
import ModalHeader from 'common/sveltestrap-s5-ports/ModalHeader.svelte'
|
||||
import { type ExistingSsoCredential } from './lib/api'
|
||||
import { api } from 'gateway/lib/api'
|
||||
import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
|
||||
|
|
@ -54,9 +53,6 @@
|
|||
_save()
|
||||
e.preventDefault()
|
||||
}}>
|
||||
<ModalHeader toggle={_cancel}>
|
||||
Single sign-on
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<FormGroup floating label="E-mail">
|
||||
<Input
|
||||
|
|
@ -72,7 +68,7 @@
|
|||
You don't have any SSO providers configured. Add them to your config file first.
|
||||
</Alert>
|
||||
{/if}
|
||||
<FormGroup floating label="SSO provider">
|
||||
<FormGroup floating label="SSO provider" spacing="0">
|
||||
<Input
|
||||
bind:value={provider}
|
||||
type="select"
|
||||
|
|
@ -87,19 +83,18 @@
|
|||
</Loadable>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<div class="d-flex">
|
||||
<Button
|
||||
type="submit"
|
||||
class="ms-auto"
|
||||
on:click={() => validated = true}
|
||||
>Save</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="modal-button"
|
||||
on:click={() => validated = true}
|
||||
>Save</Button>
|
||||
|
||||
<Button
|
||||
class="ms-2"
|
||||
color="danger"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</div>
|
||||
<Button
|
||||
class="modal-button"
|
||||
color="danger"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import { TargetKind } from 'gateway/lib/api'
|
||||
import { serverInfo } from 'gateway/lib/store'
|
||||
import { replace } from 'svelte-spa-router'
|
||||
import { Button, FormGroup, Input, Modal, ModalBody } from '@sveltestrap/sveltestrap'
|
||||
import { Button, FormGroup, Input, Modal, ModalBody, ModalFooter } from '@sveltestrap/sveltestrap'
|
||||
import TlsConfiguration from '../../TlsConfiguration.svelte'
|
||||
import { stringifyError } from 'common/errors'
|
||||
import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
<Loadable promise={init()}>
|
||||
{#if target}
|
||||
<Modal isOpen={connectionsInstructionsModalOpen} toggle={() => connectionsInstructionsModalOpen = false}>
|
||||
<ModalHeader toggle={() => connectionsInstructionsModalOpen = false}>
|
||||
<ModalHeader>
|
||||
Access instructions
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
|
|
@ -111,6 +111,16 @@
|
|||
targetExternalHost={target.options.kind === 'Http' ? target.options.externalHost : undefined}
|
||||
/>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
color="secondary"
|
||||
class="modal-button"
|
||||
block
|
||||
on:click={() => connectionsInstructionsModalOpen = false }
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
||||
<div class="page-summary-bar">
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
_save()
|
||||
e.preventDefault()
|
||||
}}>
|
||||
<ModalHeader toggle={_cancel}>
|
||||
<ModalHeader>
|
||||
New API token
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
|
|
@ -52,26 +52,24 @@
|
|||
bind:value={label} />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup floating label="Expiry">
|
||||
<FormGroup floating label="Expiry" spacing="0">
|
||||
<Input
|
||||
type="datetime-local"
|
||||
bind:value={expiry} />
|
||||
</FormGroup>
|
||||
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<div class="d-flex">
|
||||
<Button
|
||||
class="ms-auto"
|
||||
on:click={() => validated = true}
|
||||
>Create</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
class="modal-button"
|
||||
on:click={() => validated = true}
|
||||
>Create</Button>
|
||||
|
||||
<Button
|
||||
class="ms-2"
|
||||
color="danger"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</div>
|
||||
<Button
|
||||
color="danger"
|
||||
class="modal-button"
|
||||
on:click={_cancel}
|
||||
>Cancel</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,9 @@ import ConnectionInstructions from 'common/ConnectionInstructions.svelte'
|
|||
import ItemList, { type LoadOptions, type PaginatedResponse } from 'common/ItemList.svelte'
|
||||
import { api, type TargetSnapshot, TargetKind } from 'gateway/lib/api'
|
||||
import Fa from 'svelte-fa'
|
||||
import { Modal, ModalBody } from '@sveltestrap/sveltestrap'
|
||||
import { Button, Modal, ModalBody, ModalFooter } from '@sveltestrap/sveltestrap'
|
||||
import { serverInfo } from './lib/store'
|
||||
import { firstBy } from 'thenby'
|
||||
import ModalHeader from 'common/sveltestrap-s5-ports/ModalHeader.svelte'
|
||||
import GettingStarted from 'common/GettingStarted.svelte'
|
||||
import EmptyState from 'common/EmptyState.svelte'
|
||||
|
||||
|
|
@ -105,9 +104,6 @@ function loadURL (url: string) {
|
|||
</ItemList>
|
||||
|
||||
<Modal isOpen={!!selectedTarget} toggle={() => selectedTarget = undefined}>
|
||||
<ModalHeader toggle={() => selectedTarget = undefined}>
|
||||
<div>Connection instructions for {selectedTarget?.name}</div>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<ConnectionInstructions
|
||||
targetName={selectedTarget?.name}
|
||||
|
|
@ -115,6 +111,16 @@ function loadURL (url: string) {
|
|||
targetKind={selectedTarget?.kind ?? TargetKind.Ssh}
|
||||
/>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
color="secondary"
|
||||
class="modal-button"
|
||||
block
|
||||
on:click={() => { selectedTarget = undefined }}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -224,6 +224,39 @@ ul.pagination {
|
|||
max-width: 960px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding-bottom: 0;
|
||||
|
||||
h5 {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border: none;
|
||||
display: flex;
|
||||
padding-top: 0;
|
||||
|
||||
.modal-button {
|
||||
display: block;
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.modal-button {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
// #1271: sveltestrap modals are broken when `prefers-reduced-motion` is on
|
||||
.modal.fade {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue