feat: implement new card & some refactoring

This commit is contained in:
Arman
2022-06-22 11:08:48 +02:00
parent ad635361a9
commit 6b842e3d90
@@ -1,5 +1,5 @@
<script lang="ts">
import { Card } from '$lib/components';
import { CardGrid } from '$lib/components';
import { Pill } from '$lib/elements/';
import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
import { Container } from '$lib/layout';
@@ -11,7 +11,6 @@
let isLimited = $project.authLimit === 0 ? 'unlimited' : 'limited';
let newLimit = $project.authLimit === 0 ? 100 : $project.authLimit;
let btnActive = false;
let first = true;
let options = [
{ label: 'years', value: 'years' },
@@ -21,8 +20,10 @@
$: {
if (isLimited) {
if (first) {
first = false;
if (isLimited === 'unlimited' && $project.authLimit === 0) {
btnActive = false;
} else if (isLimited === 'limited' && $project.authLimit === newLimit) {
btnActive = false;
} else {
btnActive = true;
}
@@ -52,7 +53,7 @@
}
async function updateSessionLength() {
try {
//Some SDK call
//TODO: implement correct SDK call
addNotification({
type: 'success',
@@ -68,18 +69,14 @@
</script>
<Container>
<Card>
<div class="u-flex u-main-space-between u-gap-12 common-section">
<div class="u-flex u-main-space-between u-gap-12 common-section">
<div>
<h2 class="heading-level-6">Users Limit</h2>
<p>
This limits new users from signing up for your project, regardless of
authentication method. You can still create users from your Appwrite
console.
</p>
</div>
</div>
<CardGrid>
<h2 class="heading-level-6">Users Limit</h2>
<p>
This limits new users from signing up for your project, regardless of authentication
method. You can still create users from your Appwrite console.
</p>
<svelte:fragment slot="right">
<ul class="u-flex u-gap-12">
<li>
<div class="input-text-wrapper">
@@ -112,38 +109,44 @@
bind:value={newLimit} />
</li>
</ul>
</div>
<div class="u-flex u-main-space-end common-section">
</svelte:fragment>
<svelte:fragment slot="actions">
<Button
disabled={!btnActive}
on:click={() => {
updateLimit();
}}>Update</Button>
</div>
</Card>
</svelte:fragment>
</CardGrid>
<Card>
<div class="u-flex u-main-space-between u-gap-12 common-section">
<div class="u-flex u-main-space-between u-gap-12 common-section">
<div>
<h2 class="heading-level-6">Session Length</h2>
<p>
If you reduce the limit, users who are currently logged in will be logged
out of the application.
</p>
</div>
</div>
<ul class="u-flex u-gap-12">
<InputNumber id="length" label="Length" value={1} />
<InputSelect id="period" {options} label="Time Period" value={options[0].value} />
</ul>
</div>
<div class="u-flex u-main-space-end common-section">
<CardGrid>
<h2 class="heading-level-6">Session Length</h2>
<p>
If you reduce the limit, users who are currently logged in will be logged out of the
application.
</p>
<svelte:fragment slot="right">
<form class="form u-grid u-gap-16">
<ul class="form-list">
<li class="form-item is-multiple">
<InputNumber id="length" label="Length" value={1} />
<InputSelect
id="period"
{options}
label="Time Period"
value={options[0].value} />
</li>
</ul>
</form>
</svelte:fragment>
<svelte:fragment slot="actions">
<Button
disabled={true}
on:click={() => {
updateSessionLength();
}}>Update</Button>
</div>
</Card>
</svelte:fragment>
</CardGrid>
</Container>