chore(front): remove unnecessary containers and reformat
This commit is contained in:
parent
41a083ba52
commit
81c65344a9
|
|
@ -15,81 +15,87 @@
|
|||
</script>
|
||||
|
||||
<BaseTemplate title="Account" description="Manage your account settings and data.">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2><Icon name="user"/> Personal information</h2>
|
||||
<div class="panel">
|
||||
<h2>
|
||||
<Icon name="user"/>
|
||||
Personal information
|
||||
</h2>
|
||||
|
||||
{#if $locals.display_email_warning && $locals.emails.length <= 0}
|
||||
<Message type="warning" content="To avoid losing access to your account, please add an email address."/>
|
||||
{/if}
|
||||
{#if $locals.display_email_warning && $locals.emails.length <= 0}
|
||||
<Message type="warning" content="To avoid losing access to your account, please add an email address."/>
|
||||
{/if}
|
||||
|
||||
{#each personalInfoFields as field}
|
||||
<p>{field.name}: {field.value}</p>
|
||||
{/each}
|
||||
{#each personalInfoFields as field}
|
||||
<p>{field.name}: {field.value}</p>
|
||||
{/each}
|
||||
|
||||
{#if mainEmail}
|
||||
<p>Contact email: {mainEmail} <a href="#emails">More...</a></p>
|
||||
{/if}
|
||||
{#if mainEmail}
|
||||
<p>Contact email: {mainEmail} <a href="#emails">More...</a></p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $locals.has_name_component}
|
||||
<NamePanel/>
|
||||
{/if}
|
||||
|
||||
{#if $locals.has_password_component}
|
||||
<PasswordPanel/>
|
||||
{/if}
|
||||
|
||||
<section class="panel">
|
||||
<h2 id="emails">
|
||||
<Icon name="shield"/>
|
||||
Email addresses
|
||||
</h2>
|
||||
|
||||
<div class="data-table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Address</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#each emails as email}
|
||||
{#if email.id === $locals.user.main_email_id}
|
||||
<tr>
|
||||
<td>Main</td>
|
||||
<td>{email.email}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#each emails as email}
|
||||
{#if email.id !== $locals.user.main_email_id}
|
||||
<tr>
|
||||
<td>Secondary</td>
|
||||
<td>{email.email}</td>
|
||||
<td class="actions">
|
||||
<Form action={route('set-main-email')} button
|
||||
submitIcon="refresh-ccw" submitText="Set as main address"
|
||||
submitClass="warning"
|
||||
confirm="Are you sure you want to set {email.email} as your main address?">
|
||||
<Field type="hidden" name="id" value={email.id}/>
|
||||
</Form>
|
||||
|
||||
<Form action={route('remove-email')} button
|
||||
submitIcon="trash" submitText="Remove" submitClass="danger"
|
||||
confirm="Are you sure you want to delete {email.email}?">
|
||||
<Field type="hidden" name="id" value={email.id}/>
|
||||
</Form>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{#if $locals.has_name_component}
|
||||
<NamePanel/>
|
||||
{/if}
|
||||
|
||||
{#if $locals.has_password_component}
|
||||
<PasswordPanel/>
|
||||
{/if}
|
||||
|
||||
<section class="panel">
|
||||
<h2 id="emails"><Icon name="shield"/> Email addresses</h2>
|
||||
|
||||
<div class="data-table-container">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Address</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#each emails as email}
|
||||
{#if email.id === $locals.user.main_email_id}
|
||||
<tr>
|
||||
<td>Main</td>
|
||||
<td>{email.email}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#each emails as email}
|
||||
{#if email.id !== $locals.user.main_email_id}
|
||||
<tr>
|
||||
<td>Secondary</td>
|
||||
<td>{email.email}</td>
|
||||
<td class="actions">
|
||||
<Form action={route('set-main-email')} button
|
||||
submitIcon="refresh-ccw" submitText="Set as main address" submitClass="warning"
|
||||
confirm="Are you sure you want to set {email.email} as your main address?">
|
||||
<Field type="hidden" name="id" value={email.id}/>
|
||||
</Form>
|
||||
|
||||
<Form action={route('remove-email')} button
|
||||
submitIcon="trash" submitText="Remove" submitClass="danger"
|
||||
confirm="Are you sure you want to delete {email.email}?">
|
||||
<Field type="hidden" name="id" value={email.id}/>
|
||||
</Form>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{#if hasRoute('add-email')}
|
||||
{#if hasRoute('add-email')}
|
||||
<Form action={route('add-email')} class="sub-panel"
|
||||
submitIcon="plus" submitText="Add email address">
|
||||
<h3>Add an email address:</h3>
|
||||
|
|
@ -98,7 +104,6 @@
|
|||
hint="An email address we can use to identify you in case you lose access to your account"
|
||||
required/>
|
||||
</Form>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</BaseTemplate>
|
||||
|
|
|
|||
|
|
@ -22,10 +22,12 @@
|
|||
description="Join {$locals.app.name} and share your files!"
|
||||
h1="Authentication and registration">
|
||||
|
||||
<div class="container">
|
||||
{#if hasRoute('login')}
|
||||
{#if hasRoute('login')}
|
||||
<section class="panel">
|
||||
<h2><Icon name="log-in"/> Log in</h2>
|
||||
<h2>
|
||||
<Icon name="log-in"/>
|
||||
Log in
|
||||
</h2>
|
||||
|
||||
<Form action={route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
|
||||
<Field type="text" name="identifier" value={$locals.query?.identifier} icon="at-sign"
|
||||
|
|
@ -34,18 +36,28 @@
|
|||
|
||||
{#if !loginUsingMagicLink}
|
||||
<Field type="password" name="password" placeholder="Your password" icon="key" required/>
|
||||
<button on:click={() => loginUsingMagicLink=true} type="button"><Icon name="mail"/> Use magic link</button>
|
||||
<button on:click={() => loginUsingMagicLink=true} type="button">
|
||||
<Icon name="mail"/>
|
||||
Use magic link
|
||||
</button>
|
||||
{:else}
|
||||
<button on:click={() => loginUsingMagicLink=false} type="button"><Icon name="key"/> Use password</button>
|
||||
<button on:click={() => loginUsingMagicLink=false} type="button">
|
||||
<Icon name="key"/>
|
||||
Use password
|
||||
</button>
|
||||
{/if}
|
||||
<Field type="checkbox" name="persist_session" icon="clock" placeholder="Stay logged in on this computer."/>
|
||||
<Field type="checkbox" name="persist_session" icon="clock"
|
||||
placeholder="Stay logged in on this computer."/>
|
||||
</Form>
|
||||
</section>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if hasRoute('register')}
|
||||
{#if hasRoute('register')}
|
||||
<section class="panel">
|
||||
<h2><Icon name="user-plus"/> Register</h2>
|
||||
<h2>
|
||||
<Icon name="user-plus"/>
|
||||
Register
|
||||
</h2>
|
||||
|
||||
<Form action={route('register') + queryStr} submitText="Register" submitIcon="check">
|
||||
<Field type="hidden" name="auth_method" value={registerUsingMagicLink ? 'magic_link': 'password'}/>
|
||||
|
|
@ -60,11 +72,18 @@
|
|||
<Field type="email" name="identifier" icon="at-sign" placeholder="Your email address"
|
||||
hint="You will receive a magic link in your mailbox. Click on the link from any device to register here."
|
||||
required/>
|
||||
<button on:click={() => registerUsingMagicLink=false} type="button"><Icon name="key"/>Use password</button>
|
||||
<button on:click={() => registerUsingMagicLink=false} type="button">
|
||||
<Icon name="key"/>
|
||||
Use password
|
||||
</button>
|
||||
{:else}
|
||||
<Field type="password" name="password" icon="key" placeholder="Choose a password" required/>
|
||||
<Field type="password" name="password_confirmation" icon="key" placeholder="Confirm your password" required/>
|
||||
<button on:click={() => registerUsingMagicLink=true} type="button"><Icon name="at-sign"/>Use email address instead</button>
|
||||
<Field type="password" name="password_confirmation" icon="key" placeholder="Confirm your password"
|
||||
required/>
|
||||
<button on:click={() => registerUsingMagicLink=true} type="button">
|
||||
<Icon name="at-sign"/>
|
||||
Use email address instead
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<Field type="checkbox" name="terms" icon="file-text" required>
|
||||
|
|
@ -72,6 +91,5 @@
|
|||
</Field>
|
||||
</Form>
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</BaseTemplate>
|
||||
|
|
|
|||
|
|
@ -8,26 +8,24 @@
|
|||
</script>
|
||||
|
||||
<BaseTemplate title="{$locals.app.name} backend" h1={false}>
|
||||
<div class="container">
|
||||
<Breadcrumb currentPageTitle="Backend"/>
|
||||
<Breadcrumb currentPageTitle="Backend"/>
|
||||
|
||||
<h1>App administration</h1>
|
||||
<h1>App administration</h1>
|
||||
|
||||
<div class="panel">
|
||||
<nav>
|
||||
<ul>
|
||||
{#each menu as element}
|
||||
<li>
|
||||
<a href={element.link}>
|
||||
{#if element.display_icon !== null}
|
||||
<Icon name={element.display_icon}/>
|
||||
{/if}
|
||||
{element.display_string}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<nav>
|
||||
<ul>
|
||||
{#each menu as element}
|
||||
<li>
|
||||
<a href={element.link}>
|
||||
{#if element.display_icon !== null}
|
||||
<Icon name={element.display_icon}/>
|
||||
{/if}
|
||||
{element.display_string}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</BaseTemplate>
|
||||
|
|
|
|||
|
|
@ -18,16 +18,16 @@
|
|||
<p>Welcome to {$locals.app.name}!</p>
|
||||
|
||||
{#if hasAnyRoute('tests', 'design')}
|
||||
<nav>
|
||||
<ul>
|
||||
{#if hasRoute('tests')}
|
||||
<li><a href={route('tests')}>Frontend tests</a></li>
|
||||
{/if}
|
||||
{#if hasRoute('design')}
|
||||
<li><a href={route('design')}>Design test</a></li>
|
||||
{/if}
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul>
|
||||
{#if hasRoute('tests')}
|
||||
<li><a href={route('tests')}>Frontend tests</a></li>
|
||||
{/if}
|
||||
{#if hasRoute('design')}
|
||||
<li><a href={route('design')}>Design test</a></li>
|
||||
{/if}
|
||||
</ul>
|
||||
</nav>
|
||||
{/if}
|
||||
</div>
|
||||
</BaseTemplate>
|
||||
|
|
|
|||
|
|
@ -8,14 +8,12 @@
|
|||
</script>
|
||||
|
||||
<BaseTemplate title="{$locals.app.name} {h1}" {h1}>
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
{#if $locals.err}
|
||||
<Message type="error" content={$locals.err}/>
|
||||
{:else}
|
||||
<Message type="success" content="Success!"/>
|
||||
<p>You can now close this page.</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="panel">
|
||||
{#if $locals.err}
|
||||
<Message type="error" content={$locals.err}/>
|
||||
{:else}
|
||||
<Message type="success" content="Success!"/>
|
||||
<p>You can now close this page.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</BaseTemplate>
|
||||
|
|
|
|||
|
|
@ -38,14 +38,12 @@
|
|||
</script>
|
||||
|
||||
<BaseTemplate h1="Authentication lobby" title="{$locals.app.name} authentication lobby">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<Message type="success" sticky
|
||||
content={`We sent a link to ${$locals.email}. To authenticate, open it from any device.`}/>
|
||||
<Message type="info" discreet sticky raw
|
||||
content={`This link will be valid for ${countdown} and can only be used once.`}/>
|
||||
<div class="panel">
|
||||
<Message type="success" sticky
|
||||
content={`We sent a link to ${$locals.email}. To authenticate, open it from any device.`}/>
|
||||
<Message type="info" discreet sticky raw
|
||||
content={`This link will be valid for ${countdown} and can only be used once.`}/>
|
||||
|
||||
<p class="center">Waiting for you to open the link...</p>
|
||||
</div>
|
||||
<p class="center">Waiting for you to open the link...</p>
|
||||
</div>
|
||||
</BaseTemplate>
|
||||
|
|
|
|||
Loading…
Reference in New Issue