<div id="layout">
<input type="checkbox" id="menu-trigger">
<div id="off-screen-menu">
<nav id="main-nav">
<ul class="flat-list">
<li>
<a href="../preview/dashboard.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dashboard" />
</svg>
Dashboard
</a>
</li>
<li>
<a href="../preview/account-settings.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#settings" />
</svg>
Account settings
</a>
</li>
<li>
<a href="../preview/suppliers.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#package" />
</svg>
Suppliers
</a>
</li>
<li>
<a href="../preview/new-wine.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#upload" />
</svg>
Add wines
</a>
</li>
<li>
<a href="../preview/my-wine-cellar.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#view-list" />
</svg>
My wine cellar
</a>
</li>
<li>
<a href="../preview/wine-cellar-inventory.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inventory" />
</svg>
Wine cellar inventory
</a>
</li>
<li>
<a href="../preview/add-dishes.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dish" />
</svg>
Dishes
</a>
</li>
<li>
<a href="../preview/orders.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-check" />
</svg>
Orders
</a>
</li>
<li>
<a href="../preview/digital-sommelier.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#sommelier" />
</svg>
Digital Sommelier
</a>
</li>
<li>
<a href="../preview/login.html" class="logout">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logout" />
</svg>
Log out
</a>
</li>
</ul>
</nav>
<div class="lang-selector">
<label for="lang-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-gb" />
</svg>
English
</label>
<input type="checkbox" id="lang-trigger">
<ul class="flat-list lang-list">
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-se" />
</svg>
Svenska
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-no" />
</svg>
Norsk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-dk" />
</svg>
Dansk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-de" />
</svg>
Deutsch
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-fr" />
</svg>
Français
</a>
</li>
</ul>
</div>
</div>
<header id="header">
<div class="header-content">
<p class="main-title">
<a href="../preview/dashboard.html" class="block-link"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logo-badge" />
</svg>
Fine Wine Club</a>
</p>
</div>
<div class="header-content">
<div class="shopping-list-wrapper">
<label for="shopping-list-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-list" />
</svg>
<span class="trigger-label">Shopping list</span>
<span class="list-counter">3</span>
</label>
<input id="shopping-list-trigger" type="checkbox">
<div class="shopping-list">
<form action="#" method="post">
<div class="shopping-list-content">
<table class="shopping-list-table">
<thead>
<tr>
<th scope="col">Producer</th>
<th scope="col">Wine</th>
<th scope="col">Vintage</th>
<th scope="col"><span class="at-only">Remove</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Chateu Pontet-Canet</td>
<td>Chateu Pontet-Canet</td>
<td>2010</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Aalto</td>
<td>PS</td>
<td>2015</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Roederer</td>
<td>Cristal</td>
<td>2009</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="submit-area ">
<button type="button" data-prototype-url="../preview/orders.html">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-add" />
</svg>
<span>Create purchase orders</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<label for="menu-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#menu" />
</svg>
Menu
</label>
</div>
</header>
<main id="main-content">
<h1>Account settings</h1>
<div class="tabbed">
<ul class="flat-list">
<li>
<a href="#section-0">
<span>Contact info</span>
</a>
</li>
<li>
<a href="#section-1">
<span>Change password</span>
</a>
</li>
<li>
<a href="#section-2">
<span>Users</span>
</a>
</li>
</ul>
<section id="section-1">
<form action="#" method="post" class="form-general">
<fieldset class="">
<legend>Administrator information</legend>
<div class="fieldset-grid">
<div class="form-item ">
<label for="d492ac8a-dd2c-6352-8695-1e98471eec7b">
Work title of admin
</label>
<input type="text" id="d492ac8a-dd2c-6352-8695-1e98471eec7b" value="Restaurant manager">
</div>
<div class="form-item ">
<label for="99e084ad-0785-d57f-77e8-ad48a5247def">
First name
</label>
<input type="text" id="99e084ad-0785-d57f-77e8-ad48a5247def" value="John">
</div>
<div class="form-item ">
<label for="5a3d8160-516e-0110-1e7e-191f53ba184a">
Last name
</label>
<input type="text" id="5a3d8160-516e-0110-1e7e-191f53ba184a" value="Smith">
</div>
<div class="form-item ">
<label for="b14a7ca4-a41f-a065-b9da-a164c6cefac0">
E-mail address
</label>
<input type="email" id="b14a7ca4-a41f-a065-b9da-a164c6cefac0" value="user@domain.com">
</div>
<div class="form-item ">
<label for="cf50c701-8517-47e0-5e75-2747333d5519">
Phone number
</label>
<input type="text" id="cf50c701-8517-47e0-5e75-2747333d5519" value="+46777101010">
</div>
<div class="submit-area ">
<button type="button">
<span>
<span>Save contact info</span>
</span>
</button>
</div>
</div>
</fieldset>
<fieldset class="">
<legend>Company information</legend>
<div class="fieldset-grid">
<div class="form-item ">
<label for="50199a3b-0ab7-1b73-9557-df788b8d0086">
Company name
</label>
<input type="text" id="50199a3b-0ab7-1b73-9557-df788b8d0086" value="Good Eats Inc.">
</div>
<div class="form-item ">
<label for="10b347f9-5270-dc17-4620-62427c3c3212">
Restaurant name
<em>(if other than company name)</em>
</label>
<input type="text" id="10b347f9-5270-dc17-4620-62427c3c3212" value="The Eatery">
</div>
<div class="form-item ">
<label for="2d373766-cfe7-e52a-625a-c6086c2742f0">
Company VAT number
</label>
<input type="text" id="2d373766-cfe7-e52a-625a-c6086c2742f0" value="SE999999999901">
</div>
<div class="submit-area ">
<button type="button">
<span>
<span>Save company info</span>
</span>
</button>
</div>
</div>
</fieldset>
</form>
</section>
<section id="section-2">
<form action="#" method="post" class="form-general">
<fieldset class="">
<legend>Change account password</legend>
<div class="fieldset-grid">
<div class="form-item ">
<label for="account-password">
Your new password
</label>
<input type="password" id="account-password" value="">
</div>
<div class="form-item ">
<label for="password-confirm">
Your new password again
</label>
<input type="password" id="password-confirm" value="">
</div>
<div class="submit-area ">
<button type="button">
<span>
<span>Change password</span>
</span>
</button>
</div>
</div>
</fieldset>
</form>
</section>
<section id="section-3">
<div class="filter-group">
<div class="form-item custom-select">
<label for="b9d9dd41-70cc-854a-95b3-837ead974b46">Filter</label>
<select id="b9d9dd41-70cc-854a-95b3-837ead974b46" name="b9d9dd41-70cc-854a-95b3-837ead974b46" multiple class="custom-select">
<option value="option-0">gordon</option>
<option value="option-1">ben</option>
<option value="option-2">andrey</option>
<option value="option-3">alfredo</option>
<option value="option-4">Gordon Ramsay</option>
<option value="option-5">Ben Bernanke</option>
<option value="option-6">Andrey Ivanov</option>
<option value="option-7">Alfredo Linguini</option>
<option value="option-8">gordon@gusteaus.fr</option>
<option value="option-9">ben@gusteaus.fr</option>
<option value="option-10">andrey@gusteaus.fr</option>
<option value="option-11">alfredo@gusteaus.fr</option>
</select>
</div>
<div class="form-item custom-select">
<label for="34de2f64-a385-5415-b0c4-1cb1ab50fe25">Role</label>
<select id="34de2f64-a385-5415-b0c4-1cb1ab50fe25" name="34de2f64-a385-5415-b0c4-1cb1ab50fe25" multiple class="custom-select">
<option value="option-0">Administrator</option>
<option value="option-1">Economy</option>
<option value="option-2">Sommelier</option>
<option value="option-3">Server</option>
</select>
</div>
</div>
<div class="action-bar">
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#user-add" />
</svg>
<span>Add new user</span>
</span>
</button>
</div>
<div class="wc-grid">
<div class="wc-grid-item ">
<h2>Gordon Ramsay</h2>
<dl class="dl-grid">
<dt>Username:</dt>
<dd>gordon</dd>
<dt><em data-tippy-content="A valid e-email is required for password reset to work properly. If no e-mail is set, the administrator will have to set passwords manually.">E-mail:</em></dt>
<dd>gordon@gusteaus.fr</dd>
<dt>Role:</dt>
<dd>Administrator</dd>
<dt>Logged in:</dt>
<dd><em>3 days ago</em></dd>
</dl>
<div class="action-bar">
<button type="button" class="alt">
<span>
<span>Edit</span>
</span>
</button>
</div>
</div>
<div class="wc-grid-item ">
<h2>Ben Bernanke</h2>
<dl class="dl-grid">
<dt>Username:</dt>
<dd>ben</dd>
<dt><em data-tippy-content="A valid e-email is required for password reset to work properly. If no e-mail is set, the administrator will have to set passwords manually.">E-mail:</em></dt>
<dd>ben@gusteaus.fr</dd>
<dt>Role:</dt>
<dd>Economy</dd>
<dt>Logged in:</dt>
<dd><em>3 days ago</em></dd>
</dl>
<div class="action-bar">
<button type="button" class="alt">
<span>
<span>Edit</span>
</span>
</button>
</div>
</div>
<div class="wc-grid-item ">
<h2>Andrey Ivanov</h2>
<dl class="dl-grid">
<dt>Username:</dt>
<dd>andrey</dd>
<dt><em data-tippy-content="A valid e-email is required for password reset to work properly. If no e-mail is set, the administrator will have to set passwords manually.">E-mail:</em></dt>
<dd>andrey@gusteaus.fr</dd>
<dt>Role:</dt>
<dd>Sommelier</dd>
<dt>Logged in:</dt>
<dd><em>3 days ago</em></dd>
</dl>
<div class="action-bar">
<button type="button" class="alt">
<span>
<span>Edit</span>
</span>
</button>
</div>
</div>
<div class="wc-grid-item ">
<h2>Alfredo Linguini</h2>
<dl class="dl-grid">
<dt>Username:</dt>
<dd>alfredo</dd>
<dt><em data-tippy-content="A valid e-email is required for password reset to work properly. If no e-mail is set, the administrator will have to set passwords manually.">E-mail:</em></dt>
<dd>alfredo@gusteaus.fr</dd>
<dt>Role:</dt>
<dd>Server</dd>
<dt>Logged in:</dt>
<dd><em>3 days ago</em></dd>
</dl>
<div class="action-bar">
<button type="button" class="alt">
<span>
<span>Edit</span>
</span>
</button>
</div>
</div>
<div class="wc-grid-item edit-mode">
<h2><em>editing:</em> Fredrik Frodlund</h2>
<div class="form-item ">
<label for="a0879c2f-f148-aa94-cdfc-bbdfc8292206">
Name
</label>
<input type="text" id="a0879c2f-f148-aa94-cdfc-bbdfc8292206" value="Fredrik Frodlund">
</div>
<div class="form-item ">
<label for="e8c0ee87-33a9-d8a4-0dae-ff1d28860c4c">
Username
</label>
<input type="text" id="e8c0ee87-33a9-d8a4-0dae-ff1d28860c4c" value="fredrik">
</div>
<div class="form-item ">
<label for="5a9c913b-93ae-313e-ae73-8a9ba9bcd755">
E-mail
</label>
<input type="text" id="5a9c913b-93ae-313e-ae73-8a9ba9bcd755" value="fredrik@gusteaus.fr">
</div>
<div class="form-item ">
<label for="5c64bd40-c4ed-0565-64bc-3a3cc31ecbd4">Role</label>
<select id="5c64bd40-c4ed-0565-64bc-3a3cc31ecbd4" name="5c64bd40-c4ed-0565-64bc-3a3cc31ecbd4" class="">
<option value="option-0">Administrator</option>
<option value="option-1">Economy</option>
<option value="option-2">Sommelier</option>
<option value="option-3">Server</option>
</select>
</div>
<div class="form-item ">
<label for="2d56c0ed-6424-2cf4-a23f-ef4e43658ca4">
Change password
</label>
<input type="password" id="2d56c0ed-6424-2cf4-a23f-ef4e43658ca4" value="">
</div>
<div class="action-bar">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
<span>Delete user</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>Save</span>
</span>
</button>
</div>
</div>
<div class="wc-grid-item edit-mode">
<h2><em>Create user</em></h2>
<div class="form-item ">
<label for="bafca96c-46b8-66f6-1d70-03f1dca6bf60">
Name
</label>
<input type="text" id="bafca96c-46b8-66f6-1d70-03f1dca6bf60" value="Fredrik Frodlund">
</div>
<div class="form-item ">
<label for="e73de683-b916-babc-4dab-12aefa482fde">
Username
</label>
<input type="text" id="e73de683-b916-babc-4dab-12aefa482fde" value="fredrik">
</div>
<div class="form-item ">
<label for="8df177f7-f4ee-f211-f907-e9965db407ae">
E-mail
</label>
<input type="text" id="8df177f7-f4ee-f211-f907-e9965db407ae" value="fredrik@gusteaus.fr">
</div>
<div class="form-item ">
<label for="92769573-f736-7716-e267-8de4a4a8c99a">Role</label>
<select id="92769573-f736-7716-e267-8de4a4a8c99a" name="92769573-f736-7716-e267-8de4a4a8c99a" class="">
<option value="option-0">Administrator</option>
<option value="option-1">Economy</option>
<option value="option-2">Sommelier</option>
<option value="option-3">Server</option>
</select>
</div>
<div class="form-item ">
<label for="80ced724-a847-de62-0bb1-24e56b2b22e2">
Create password
</label>
<input type="password" id="80ced724-a847-de62-0bb1-24e56b2b22e2" value="">
</div>
<div class="action-bar">
<button type="button" class="alt">
<span>
<svg class="icon alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
<span>Delete user</span>
</span>
</button>
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#save" />
</svg>
<span>Save</span>
</span>
</button>
</div>
</div>
</div>
<div class="action-bar">
<button type="button">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#user-add" />
</svg>
<span>Add new user</span>
</span>
</button>
</div>
</section>
</div>
</main>
</div>
{{#> @regular-page}}
<h1>Account settings</h1>
{{#> @tab-interface}}
{{#> @tab-panel id="1"}}
{{#> @form-general}}
{{#> @fieldset--grid contact-info}}
{{#each inputs}}
{{> @form-item-input id=(random)}}
{{/each}}
{{> @submit-area }}
{{/ @fieldset--grid}}
{{#> @fieldset--grid company-info}}
{{#each inputs}}
{{> @form-item-input id=(random)}}
{{/each}}
{{> @submit-area }}
{{/ @fieldset--grid}}
{{/ @form-general}}
{{/ @tab-panel}}
{{#> @tab-panel id="2"}}
{{#> @form-general}}
{{#> @fieldset--grid change-password}}
{{> @form-item-input password}}
{{> @form-item-input password-confirm}}
{{> @submit-area }}
{{/ @fieldset--grid}}
{{/ @form-general}}
{{/ @tab-panel}}
{{#> @tab-panel id="3"}}
{{ render '@user-list' }}
{{/ @tab-panel}}
{{/ @tab-interface}}
{{/ @regular-page}}
{
"tabs": [
{
"title": "Contact info"
},
{
"title": "Change password"
},
{
"title": "Users"
}
],
"contact-info": {
"legend": "Administrator information",
"inputs": [
{
"label": "Work title of admin",
"value": "Restaurant manager"
},
{
"label": "First name",
"value": "John"
},
{
"label": "Last name",
"value": "Smith"
},
{
"label": "E-mail address",
"type": "email",
"value": "user@domain.com"
},
{
"label": "Phone number",
"value": "+46777101010"
}
],
"submit-button": {
"text": "Save contact info"
}
},
"company-info": {
"legend": "Company information",
"inputs": [
{
"label": "Company name",
"value": "Good Eats Inc."
},
{
"label": "Restaurant name",
"value": "The Eatery",
"help-msg": "(if other than company name)"
},
{
"label": "Company VAT number",
"value": "SE999999999901"
}
],
"submit-button": {
"text": "Save company info"
}
},
"change-password": {
"legend": "Change account password",
"password": {
"label": "Your new password",
"id": "account-password",
"type": "password"
},
"password-confirm": {
"label": "Your new password again",
"id": "password-confirm",
"type": "password"
},
"submit-button": {
"text": "Change password"
}
},
"links": {
"legend": "Other functions",
"functions": [
{
"label": "User management",
"icon": "group",
"url": "/preview/components/users"
}
]
}
}
No notes defined.