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