You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ror-presentatie/assets/user-creation-and-authentic...

268 lines
56 KiB
HTML

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<!doctype html>
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>User Creation and Authentication</title>
<style>
:root{--color-primary: #206ea7;--color-primary-light: rgba(32,110,167,0.15);--color-page: #206ea7;--color-page-draft: #7e50b1;--color-chapter: #af4d0d;--color-book: #077b70;--color-bookshelf: #a94747}*{box-sizing:border-box;outline-color:var(--color-primary);outline-width:1px}*:focus{outline-style:dotted}html{height:100%;overflow-y:scroll;background-color:#f2f2f2}html.flexbox{overflow-y:hidden}html.dark-mode{background-color:#111}body{font-size:14px;line-height:1.6;color:#444;-webkit-font-smoothing:antialiased;height:100%;display:flex;flex-direction:column}html.dark-mode body{color:#aaa}body,button,input,select,label,textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Ubuntu","Roboto","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif}.Codemirror,pre,#markdown-editor-input,.editor-toolbar,.code-base,span.code,code{font-family:"Lucida Console","DejaVu Sans Mono","Ubuntu Mono",Monaco,monospace}h1{font-size:3.425em;line-height:1.22222222em;margin-top:.48888889em;margin-bottom:.48888889em}h2{font-size:2.8275em;line-height:1.294117647em;margin-top:.8627451em;margin-bottom:.43137255em}h3{font-size:2.333em;line-height:1.221428572em;margin-top:.78571429em;margin-bottom:.43137255em}h4{font-size:1.666em;line-height:1.375em;margin-top:.78571429em;margin-bottom:.43137255em}h1,h2,h3,h4,h5,h6{font-weight:400;position:relative;display:block;color:#222}html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode h4,html.dark-mode h5,html.dark-mode h6{color:#bbb}h1 .subheader,h2 .subheader,h3 .subheader,h4 .subheader,h5 .subheader,h6 .subheader{font-size:.5em;line-height:1em;color:#969696}h5{font-size:1.4em}h5,h6{line-height:1.2em;margin-top:.78571429em;margin-bottom:.66em}@media screen and (max-width: 600px){h1{font-size:2.8275em}h2{font-size:2.333em}h3{font-size:1.666em}h4{font-size:1.333em}h5{font-size:1.161616em}}.list-heading{font-size:2rem}h2.list-heading{font-size:1.333rem}a{color:var(--color-primary);fill:currentColor;cursor:pointer;text-decoration:none;transition:filter ease-in-out 80ms;line-height:1.6}a:hover{text-decoration:underline}a.icon{display:inline-block}a svg{position:relative;display:inline-block}a:focus img:only-child{outline:2px dashed var(--color-primary);outline-offset:2px}a.no-link-style{color:inherit}a.no-link-style:hover{text-decoration:none}.blended-links a{color:inherit}.blended-links a svg{fill:currentColor}p,ul,ol,pre,table,blockquote{margin-top:.3em;margin-bottom:1.375em}hr{border:0;height:1px;background:#eaeaea;margin-bottom:24px}html.dark-mode hr{background:#555}hr.faded{background-image:linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF)}hr.darker{background:#ddd}html.dark-mode hr.darker{background:#666}hr.margin-top,hr.even{margin-top:24px}strong,b,.bold,.strong{font-weight:bold}strong>strong,strong>b,strong>.bold,strong>.strong,b>strong,b>b,b>.bold,b>.strong,.bold>strong,.bold>b,.bold>.bold,.bold>.strong,.strong>strong,.strong>b,.strong>.bold,.strong>.strong{font-weight:bolder}em,i,.italic{font-style:italic}small,p.small,span.small,.text-small{font-size:.75rem;color:#5e5e5e}html.dark-mode small,html.dark-mode p.small,html.dark-mode span.small,html.dark-mode .text-small{color:#999}sup,.superscript{vertical-align:super;font-size:.8em}sub,.subscript{vertical-align:sub;font-size:.8em}pre{font-size:12px;border:1px solid #ddd;background-color:#f5f5f5;border-color:#ddd;padding-left:31px;position:relative;padding-top:3px;padding-bottom:3px}html.dark-mode pre{background-color:#2b2b2b}html.dark-mode pre{border-color:#111}pre:after{content:"";display:block;position:absolute;top:0;width:29px;left:0;height:100%;background-color:#f5f5f5;border-right:1px solid #ddd}html.dark-mode pre:after{background-color:#313335}html.dark-mode pre:after{border-right:none}@media print{pre{padding-left:12px}pre:after{display:none}}blockquote{display:block;position:relative;border-left:4px solid var(--color-primary);background-color:#f8f8f8;padding:12px 16px 12px 32px;overflow:auto}html.dark-mode blockquote{background-color:#333}blockquote:before{content:"“";font-size:2em;font-weight:bold;position:absolute;top:12px;left:12px;color:#777}.text-mono{font-family:"Lucida Console","DejaVu Sans Mono","Ubuntu Mono",Monaco,monospace}.text-uppercase{text-transform:uppercase}.text-capitals{text-transform:capitalize}.code-base,span.code,code{font-size:.84em;border:1px solid #ddd;border-radius:3px;background-color:#f8f8f8;border-color:#ddd}html.dark-mode .code-base,html.dark-mode span.code,html.dark-mode code{background-color:#2b2b2b}html.dark-mode .code-base,html.dark-mode span.code,html.dark-mode code{border-color:#444}code{display:inline;padding:1px 3px;white-space:pre-wrap;line-height:1.2em}span.code{padding:1px 6px}pre code{background-color:transparent;border:0;font-size:1em;display:block;line-height:1.6}span.highlight{font-weight:bold;padding:2px 4px}ul p,ol p{margin:0}ul{list-style:disc}ul ul{list-style:circle}ul label{margin:0}ol{list-style:decimal}ol,ul{padding-left:32px;padding-right:32px}li>ol,li>ul{margin-top:0;margin-bottom:0;margin-block-end:0;margin-block-start:0;padding-block-end:0;padding-block-start:0;padding-left:19.2px;padding-right:19.2px}li.checkbox-item,li.task-list-item{list-style:none;margin-left:-19.2px}li.checkbox-item input[type=checkbox],li.task-list-item input[type=checkbox]{margin-right:6px}li.checkbox-item li.checkbox-item,li.checkbox-item li.task-list-item,li.task-list-item li.checkbox-item,li.task-list-item li.task-list-item{margin-left:6px}.underlined{text-decoration:underline}.text-center{text-align:center}.text-left{text-align:start}.text-right{text-align:end}@media screen and (min-width: 360px){.text-xxs-center{text-align:center}.text-xxs-left{text-align:start}.text-xxs-right{text-align:end}}@media screen and (min-width: 400px){.text-xs-center{text-align:center}.text-xs-left{text-align:start}.text-xs-right{text-align:end}}@media screen and (min-width: 600px){.text-s-center{text-align:center}.text-s-left{text-align:start}.text-s-right{text-align:end}}@media screen and (min-width: 880px){.text-m-center{text-align:center}.text-m-left{text-align:start}.text-m-right{text-align:end}}@media screen and (min-width: 1000px){.text-l-center{text-align:center}.text-l-left{text-align:start}.text-l-right{text-align:end}}@media screen and (min-width: 1100px){.text-xl-center{text-align:center}.text-xl-left{text-align:start}.text-xl-right{text-align:end}}.text-bigger{font-size:1.1em}.text-large{font-size:1.6666em}.no-color{color:inherit}.break-text{word-wrap:break-word;overflow-wrap:break-word}.text-limit-lines-1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-limit-lines-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.header-group{margin:16px 0}.header-group h1,.header-group h2,.header-group h3,.header-group h4,.header-group h5,.header-group h6{margin:0}span.sep{color:#bbb;padding:0 6px}.list>*{display:block}.svg-icon{width:1em;height:1em;display:inline-block;position:relative;bottom:-0.105em;margin-inline-end:6px;pointer-events:none;fill:currentColor}.container{max-width:1400px;margin-inline-start:auto;margin-inline-end:auto;padding-inline-start:16px;padding-inline-end:16px}.container.small{max-width:840px}.container.very-small{max-width:480px}.grid{display:grid;grid-column-gap:24px;grid-row-gap:24px}.grid.half{grid-template-columns:1fr 1fr}.grid.third{grid-template-columns:1fr 1fr 1fr}.grid.left-focus{grid-template-columns:2fr 1fr}.grid.right-focus{grid-template-columns:1fr 3fr}.grid.gap-y-xs{grid-row-gap:6px}.grid.gap-xl{grid-column-gap:32px;grid-row-gap:32px}.grid.gap-xxl{grid-column-gap:48px;grid-row-gap:48px}.grid.v-center{align-items:center}.grid.v-end{align-items:end}.grid.no-gap{grid-row-gap:0;grid-column-gap:0}.grid.no-row-gap{grid-row-gap:0}@media screen and (max-width: 880px){.grid.third:not(.no-break){grid-template-columns:1fr 1fr}.grid.half:not(.no-break),.grid.left-focus:not(.no-break),.grid.right-focus:not(.no-break){grid-template-columns:1fr}.grid.half.collapse-xs{grid-template-columns:1fr 1fr}.grid.gap-xl{grid-column-gap:16px;grid-row-gap:16px}.grid.right-focus.reverse-collapse>*:nth-child(2){order:0}.grid.right-focus.reverse-collapse>*:nth-child(1){order:1}}@media screen and (max-width: 600px){.grid.third:not(.no-break){grid-template-columns:1fr}}@media screen and (max-width: 400px){.grid.half.collapse-xs{grid-template-columns:1fr}}#content{flex:1 0 auto}body.flexbox{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:100%;max-height:100%;overflow:hidden}body.flexbox #content{flex:1;display:flex;min-height:0}.flex-fill{display:flex;align-items:stretch;min-height:0;max-width:100%;position:relative}.flex-container-row{display:flex;flex-direction:row}.flex-container-row.v-center{align-items:center}.flex-container-column{display:flex;flex-direction:column}.flex-container-column.wrap,.flex-container-row.wrap{flex-wrap:wrap}.flex{min-height:0;flex:1;max-width:100%}.flex.fit-content{flex-basis:auto;flex-grow:0}.justify-flex-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-space-between{justify-content:space-between}.items-center{align-items:center}.block{display:block !important;position:relative}.inline{display:inline !important}.block.inline{display:inline-block !important}.relative{position:relative}.hidden{display:none !important}.fill-height{height:100%}.float{float:left}.float.right{float:right}@media screen and (max-width: 360px){.hide-under-xxs{display:none !important}}@media screen and (min-width: 360px){.hide-over-xxs{display:none !important}}@media screen and (max-width: 400px){.hide-under-xs{display:none !important}}@media screen and (min-width: 400px){.hide-over-xs{display:none !important}}@media screen and (max-width: 600px){.hide-under-s{display:none !important}}@media screen and (min-width: 600px){.hide-over-s{display:none !important}}@media screen and (max-width: 880px){.hide-under-m{display:none !important}}@media screen and (min-width: 880px){.hide-over-m{display:none !important}}@media screen and (max-width: 1000px){.hide-under-l{display:none !important}}@media screen and (min-width: 1000px){.hide-over-l{display:none !important}}@media screen and (max-width: 1100px){.hide-under-xl{display:none !important}}@media screen and (min-width: 1100px){.hide-over-xl{display:none !important}}.rounded{border-radius:4px}.dual-column-content{columns:2}@media screen and (max-width: 880px){.dual-column-content{columns:1}}.clearfix::before,.clearfix::after{content:" ";display:table}.clearfix::after{clear:both}.tri-layout-container{display:grid;margin-inline-start:32px;margin-inline-end:32px;grid-template-columns:1fr 4fr 1fr;grid-template-areas:"a b c";grid-column-gap:48px}.tri-layout-container .tri-layout-right{grid-area:c;min-width:0}.tri-layout-container .tri-layout-left{grid-area:a;min-width:0}.tri-layout-container .tri-layout-middle{grid-area:b;padding-top:16px;min-width:0}@media screen and (max-width: 1400px){.tri-layout-container{grid-template-areas:"c b b" "a b b" ". b b";grid-template-columns:1fr 3fr;grid-template-rows:min-content min-content 1fr;padding-inline-end:24px}}@media screen and (min-width: 1000px)and (max-width: 1400px){.tri-layout-left{position:sticky;top:16px}}@media screen and (min-width: 1400px){.tri-layout-left-contents,.tri-layout-right-contents{padding:16px;position:sticky;top:16px;max-height:100vh;min-height:50vh;overflow-y:scroll;overflow-x:hidden;height:100%;scrollbar-width:none;-ms-overflow-style:none}.tri-layout-left-contents::-webkit-scrollbar,.tri-layout-right-contents::-webkit-scrollbar{display:none}.tri-layout-middle-contents{max-width:940px;margin:0 auto}}@media screen and (max-width: 1000px){.tri-layout-container{grid-template-areas:none;grid-template-columns:1fr;grid-column-gap:0;padding-inline-end:6px;padding-inline-start:6px}.tri-layout-container .tri-layout-left-contents,.tri-layout-container .tri-layout-right-contents{padding-inline-start:16px;padding-inline-end:16px}.tri-layout-container .tri-layout-left>*,.tri-layout-container .tri-layout-right>*{display:none;pointer-events:none}.tri-layout-container .tri-layout-left,.tri-layout-container .tri-layout-right{grid-area:none;grid-column:1/1;grid-row:1;padding-top:0 !important}.tri-layout-container .tri-layout-middle{grid-area:none;grid-row:3;grid-column:1/1;z-index:1;overflow:hidden;transition:transform ease-in-out 240ms}.tri-layout-container .tri-layout-left{grid-row:2}.tri-layout-container.show-info{overflow:hidden}.tri-layout-container.show-info .tri-layout-middle{display:none}.tri-layout-container.show-info .tri-layout-right>*,.tri-layout-container.show-info .tri-layout-left>*{display:block;pointer-events:auto}}@media screen and (min-width: 1000px){.tri-layout-mobile-tabs{display:none}.tri-layout-left-contents>*,.tri-layout-right-contents>*{opacity:.6;transition:opacity ease-in-out 120ms}.tri-layout-left-contents>*:hover,.tri-layout-right-contents>*:hover{opacity:1}.tri-layout-left-contents>*:focus-within,.tri-layout-right-contents>*:focus-within{opacity:1}}@media screen and (min-width: 1000px)and (prefers-contrast: more){.tri-layout-left-contents>*,.tri-layout-right-contents>*{opacity:1}}@media screen and (max-width: 880px){.tri-layout-container{margin-inline-start:0;margin-inline-end:0}}.callout{border-inline-start:3px solid #bbb;background-color:#eee;padding:12px 12px 12px 32px;display:block;position:relative;overflow:auto}.callout:before{background-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+");background-repeat:no-repeat;content:"";width:1.2em;height:1.2em;left:8px;top:50%;margin-top:-9px;display:inline-block;position:absolute;line-height:1;opacity:.8}.callout.success{border-left-color:#0f7d15;background-color:#eafdeb;color:#063409}html.dark-mode .callout.success{background-color:#031904}html.dark-mode .callout.success{color:#129419}.callout.success:before{background-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+")}.callout.danger{border-left-color:#ab0f0e;background-color:#fcdbdb;color:#4d0706}html.dark-mode .callout.danger{background-color:#1e0302}html.dark-mode .callout.danger{color:#c31110}.callout.danger:before{background-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==")}.callout.info{border-left-color:#0288d1;color:#01466c;background-color:#d3efff}html.dark-mode .callout.info{color:#09a7fd}html.dark-mode .callout.info{background-color:#001520}.callout.warning{border-left-color:#cf4d03;background-color:#fee3d3;color:#6a2802}html.dark-mode .callout.warning{background-color:#1a0a00}html.dark-mode .callout.warning{color:#cf4d03}.callout.warning:before{background-image:url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=")}.callout a{color:inherit;text-decoration:underline}.card{background-color:#fff;box-shadow:0 1px 6px -1px rgba(0,0,0,.1);border-radius:3px;border:1px solid transparent}html.dark-mode .card{background-color:#222}.card .body,.card p.empty-text{padding:16px}.card a,.card p{word-wrap:break-word;word-break:break-word}.card-title{padding:16px 16px 6px;margin:0;font-size:14px;color:#222;fill:#222;font-weight:400}.card-title a{line-height:1}.card-footer-link{display:block;padding:12px 16px;line-height:1;border-top:1px solid;border-color:#ddd;border-radius:0 0 3px 3px;font-size:.9em;margin-top:6px}html.dark-mode .card-footer-link{border-color:#555}.card-footer-link:hover{text-decoration:none;background-color:#f2f2f2}html.dark-mode .card-footer-link:hover{background-color:#2d2d2d}.card.border-card{border:1px solid #ddd}.card.drag-card{border:1px solid #ddd;border-color:#ddd;background-color:#fff;border-radius:4px;display:flex;padding:0 0 0 40px;margin:12px 0;position:relative}html.dark-mode .card.drag-card{border-color:#000}html.dark-mode .card.drag-card{background-color:#333}.card.drag-card .drag-card-action{cursor:pointer}.card.drag-card .handle,.card.drag-card .drag-card-action{display:flex;align-items:center;text-align:center;justify-content:center;width:28px;flex-grow:0;padding:0 6px}.card.drag-card .handle:hover,.card.drag-card .drag-card-action:hover{background-color:#eee}.card.drag-card .handle .svg-icon,.card.drag-card .drag-card-action .svg-icon{margin-inline-end:0px}.card.drag-card .outline input{margin:12px 0;width:100%}.card.drag-card .outline{position:relative}.card.drag-card .handle{background-color:#eee;left:0;position:absolute;top:0;bottom:0}html.dark-mode .card.drag-card .handle{background-color:#2d2d2d}.card.drag-card>div{padding:0 12px;max-width:80%;flex:1}.grid-card{display:flex;flex-direction:column;border:1px solid #ddd;border-color:#ddd;margin-bottom:24px;border-radius:4px;overflow:hidden;min-width:100px;color:#444;transition:border-color ease-in-out 120ms,box-shadow ease-in-out 120ms}html.dark-mode .grid-card{border-color:#000}.grid-card:hover{color:#444;text-decoration:none;box-shadow:0 1px 6px -1px rgba(0,0,0,.1)}html.dark-mode .grid-card:hover{box-shadow:0 1px 6px -1px rgba(0,0,0,.5)}.grid-card h2{width:100%;font-size:1.5em;margin:0 0 10px}.grid-card p{font-size:.7rem;margin:0;line-height:1.6em}.grid-card .grid-card-content{flex:1;border-top:0;border-bottom-width:2px}.grid-card .grid-card-content,.grid-card .grid-card-footer{padding:24px}.grid-card .grid-card-content+.grid-card-footer{padding-top:0}.book-grid-item .grid-card-footer p.small{font-size:.8em;margin:0}.content-wrap.card{padding:16px 48px;margin-inline-start:auto;margin-inline-end:auto;margin-bottom:24px;overflow:initial;min-height:60vh}.content-wrap.card.auto-height{min-height:0}.content-wrap.card.fill-width{width:100%}@media screen and (max-width: 1400px){.content-wrap.card{padding:16px 32px}}@media screen and (max-width: 880px){.content-wrap.card{padding:16px 24px}}@media screen and (max-width: 600px){.content-wrap.card{padding:16px 16px}}.outline-hover{border:1px solid transparent !important}.outline-hover:hover{border:1px solid rgba(0,0,0,.1) !important}.fade-in-when-active{opacity:.6;transition:opacity ease-in-out 120ms}.fade-in-when-active:hover,.fade-in-when-active:focus-within{opacity:1}@media(prefers-contrast: more){.fade-in-when-active{opacity:1}}.tag-item{display:inline-flex;margin-bottom:6px;margin-inline-end:6px;border-radius:4px;border:1px solid;overflow:hidden;font-size:.85em;border-color:#ccc}html.dark-mode .tag-item{border-color:#666}.tag-item a,.tag-item span,.tag-item a:hover,.tag-item a:active{padding:4px 8px;color:rgba(0,0,0,.7);transition:background-color ease-in-out 80ms;text-decoration:none}html.dark-mode .tag-item a,html.dark-mode .tag-item span,html.dark-mode .tag-item a:hover,html.dark-mode .tag-item a:active{color:rgba(255,255,255,.8)}.tag-item a:hover{background-color:rgba(255,255,255,.7)}html.dark-mode .tag-item a:hover{background-color:rgba(255,255,255,.3)}.tag-item svg{fill:rgba(0,0,0,.5)}html.dark-mode .tag-item svg{fill:rgba(255,255,255,.5)}.tag-item .tag-value{border-inline-start:1px solid;border-color:#ddd;background-color:rgba(255,255,255,.5)}html.dark-mode .tag-item .tag-value{border-color:#666}html.dark-mode .tag-item .tag-value{background-color:rgba(255,255,255,.2)}.tag-name.highlight,.tag-value.highlight{font-weight:bold}.tag-list div:last-child .tag-item{margin-bottom:0}td .tag-item{margin-bottom:0}.pill{display:inline-block;border:1px solid currentColor;padding:.2em .8em;font-size:.8em;border-radius:1rem;position:relative;overflow:hidden;line-height:1.4}.pill:before{content:"";background-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;opacity:.1}.api-method{font-size:.75rem;background-color:#888;padding:6px;line-height:1.3;opacity:.7;vertical-align:top;border-radius:3px;color:#fff;display:inline-block;min-width:60px;text-align:center;font-weight:bold}.api-method[data-method=GET]{background-color:#077b70}.api-method[data-method=POST]{background-color:#cf4d03}.api-method[data-method=PUT]{background-color:#0288d1}.api-method[data-method=DELETE]{background-color:#ab0f0e}.sticky-sidebar{position:sticky;top:16px;max-height:calc(100vh - 16px);overflow-y:auto}table{min-width:100px;max-width:100%}table thead{background-color:#f8f8f8;font-weight:500}html.dark-mode table thead{background-color:#333}table td,table th{min-width:10px;padding:6px 8px;border:1px solid #ddd;overflow:auto;line-height:1.2;word-break:break-word}table td p,table th p{margin:0}table.table{width:100%}table.table tr td,table.table tr th{border-bottom:1px solid rgba(0,0,0,.05)}table.table th,table.table td{text-align:start;border:none;padding:12px 12px;vertical-align:middle;margin:0;overflow:visible}table.table th{font-weight:bold}table.table tr:hover{background-color:#f2f2f2}html.dark-mode table.table tr:hover{background-color:#333}table.table .text-right{text-align:end}table.table .text-center{text-align:center}table.table td.actions{overflow:visible}table.table a{display:inline-block}table.table.expand-to-padding{margin-left:-12px;margin-right:-12px;width:calc(100% + (2*12px));max-width:calc(100% + (2*12px))}table.no-style td{border:0;padding:0}table.list-table{margin:-6px}table.list-table td{border:0;vertical-align:middle;padding:6px}.book-contents .entity-list-item .icon{width:4px;border-radius:1px;justify-self:stretch;align-self:stretch;height:auto;margin-inline-end:24px}.book-contents .entity-list-item .icon:after{opacity:.5}.book-contents .entity-list-item .icon svg{display:none}.book-contents .entity-list-item p{margin-bottom:0}.book-contents .entity-list-item .inner-page{padding-top:0;padding-bottom:0}.entity-list-item+.chapter-expansion{display:flex;padding:0 16px 16px 16px;align-items:center;border:0;width:100%;position:relative}.entity-list-item+.chapter-expansion>.icon{width:4px;height:auto;border-radius:0 0 1px 1px;align-self:stretch;flex-shrink:0}.entity-list-item+.chapter-expansion>.icon:before{position:absolute;top:0;left:0;width:100%;height:1px;background-color:currentColor;content:"";opacity:.5}.entity-list-item+.chapter-expansion>.icon:after{opacity:.5}.entity-list-item+.chapter-expansion .icon svg{display:none}.entity-list-item+.chapter-expansion>.content{flex:1}.entity-list-item+.chapter-expansion .chapter-expansion-toggle{border-radius:0 4px 4px 0;padding:6px 16px;width:100%;text-align:start}.entity-list-item+.chapter-expansion .chapter-expansion-toggle:hover{background-color:rgba(0,0,0,.06)}.entity-list-item.has-children{padding-bottom:0}.entity-list-item.has-children>.icon{border-radius:4px 4px 0 0}.inset-list{display:none}.inset-list .entity-list-item-name{font-size:1rem}.inset-list .entity-list-item-children{padding-top:0;padding-bottom:0}.sidebar-page-nav{list-style:none;margin-block-start:12px;margin-block-end:16px;margin-inline-start:6px;margin-inline-end:0;position:relative}.sidebar-page-nav:after{content:"";display:block;position:absolute;left:0;background-color:rgba(0,0,0,.2);width:2px;top:5px;bottom:5px;z-index:0}html[dir=rtl] .sidebar-page-nav:after{left:auto;right:0}html.dark-mode .sidebar-page-nav:after{background-color:rgba(255,255,255,.2)}.sidebar-page-nav li{margin-bottom:4px;font-size:.95em;position:relative}.sidebar-page-nav .h1{padding-inline-start:16px}.sidebar-page-nav .h2{padding-inline-start:24px}.sidebar-page-nav .h3{padding-inline-start:32px}.sidebar-page-nav .h4{padding-inline-start:40px}.sidebar-page-nav .h5{padding-inline-start:48px}.sidebar-page-nav .h6{padding-inline-start:56px}.sidebar-page-nav .current-heading{font-weight:bold}.sidebar-page-nav li:not(.current-heading) .sidebar-page-nav-bullet{background-color:#bbb !important}html.dark-mode .sidebar-page-nav li:not(.current-heading) .sidebar-page-nav-bullet{background-color:#666 !important}.sidebar-page-nav .sidebar-page-nav-bullet{width:6px;height:6px;position:absolute;left:-2px;top:30%;border-radius:50%;box-shadow:0 0 0 6px #f2f2f2;box-shadow:0 0 0 6px #f2f2f2;z-index:1}html.dark-mode .sidebar-page-nav .sidebar-page-nav-bullet{box-shadow:0 0 0 6px #111}html[dir=rtl] .sidebar-page-nav .sidebar-page-nav-bullet{left:auto;right:-2px}.book-tree .sidebar-page-list{list-style:none;margin-block-start:6px;margin-block-end:0;margin-inline-start:-12px;margin-inline-end:-12px;padding-inline-start:0;padding-inline-end:0;position:relative}.book-tree .sidebar-page-list:after,.book-tree .sidebar-page-list .sub-menu:after{content:"";display:block;position:absolute;left:16px;top:1rem;bottom:1rem;border-inline-start:4px solid rgba(0,0,0,.1);z-index:0}html[dir=rtl] .book-tree .sidebar-page-list:after,html[dir=rtl] .book-tree .sidebar-page-list .sub-menu:after{left:auto;right:16px}.book-tree .sidebar-page-list ul{list-style:none;padding-inline-start:1rem;padding-inline-end:0}.book-tree .sidebar-page-list .entity-list-item{padding-top:3px;padding-bottom:3px;background-clip:content-box;border-radius:0 3px 3px 0;padding-inline-end:0}.book-tree .sidebar-page-list .entity-list-item .content{padding-top:6px;padding-bottom:6px;max-width:calc(100% - 20px)}.book-tree .sidebar-page-list .entity-list-item.selected{background-color:rgba(0,0,0,.08)}.book-tree .sidebar-page-list .entity-list-item.no-hover{margin-top:-6px;padding-inline-end:0}.book-tree .sidebar-page-list .entity-list-item-name{font-size:1em;margin:0;margin-inline-end:16px}.book-tree .sidebar-page-list .chapter-child-menu{font-size:.8rem;margin-top:-0.2rem;margin-inline-start:-1rem}.book-tree .sidebar-page-list [chapter-toggle]{padding-inline-start:.7rem;padding-bottom:.2rem}.book-tree .sidebar-page-list .entity-list-item .icon{z-index:2;width:4px;height:auto;align-self:stretch;flex-shrink:0;border-radius:1px;opacity:.6}.book-tree .sidebar-page-list .entity-list-item .icon:after{opacity:1}.book-tree .sidebar-page-list .entity-list-item .icon svg{display:none}.chapter-child-menu ul.sub-menu{display:none;padding-inline-start:0;position:relative}.chapter-child-menu [chapter-toggle].open+.sub-menu{display:block}.sortable-page-list,.sortable-page-list ul{list-style:none}.sort-box{margin-bottom:16px;padding:16px 32px;position:relative}.sort-box::before{pointer-events:none;content:"";border-radius:4px;opacity:.5;border:2px solid var(--color-book);display:block;top:0;bottom:0;left:0;right:0;position:absolute}.sort-box-options{display:flex;flex-wrap:wrap;justify-content:space-between}.sort-box-options .button{margin-inline-start:0}.sortable-page-list{margin-inline-start:0;padding:0}.sortable-page-list .entity-list-item>span:first-child{align-self:flex-start}.sortable-page-list .sortable-selected .entity-list-item,.sortable-page-list .sortable-selected .entity-list-item:hover{outline:1px dotted var(--color-primary);background-color:var(--color-primary-light) !important}.sortable-page-list .entity-list-item>div{display:block;flex:1}.sortable-page-list>ul{margin-inline-start:0}.sortable-page-list ul{margin-bottom:16px;margin-top:0;padding-inline-start:16px}.sortable-page-list li{border:1px solid #ddd;margin-top:-1px;min-height:38px}.sortable-page-list li.text-page,.sortable-page-list li.text-chapter{border-inline-start:2px solid currentColor}.sortable-page-list li:first-child{margin-top:6px}.sortable-page-list li.placeholder{position:relative}.sortable-page-list li.placeholder:before{position:absolute}.activity-list-item{padding:12px 0;display:grid;grid-template-columns:min-content 1fr;grid-column-gap:16px;font-size:.9em}.card .activity-list-item{padding:12px 16px}.user-list-item{display:inline-grid;padding:12px;grid-template-columns:min-content 1fr;grid-column-gap:16px;font-size:.9em;align-items:center}.user-list-item>div:first-child{line-height:0}ul.pagination{display:inline-block;list-style:none;margin:16px 0;padding-inline-start:1px}ul.pagination li{float:left}ul.pagination li:first-child a,ul.pagination li:first-child span{border-radius:3px 0 0 3px}ul.pagination li:last-child a,ul.pagination li:last-child span{border-radius:0 3px 3px 0}ul.pagination a,ul.pagination span{display:block;padding:3px 12px;border:1px solid #ccc;margin-inline-start:-1px;user-select:none;color:#555;border-color:#ccc}html.dark-mode ul.pagination a,html.dark-mode ul.pagination span{color:#eee}html.dark-mode ul.pagination a,html.dark-mode ul.pagination span{border-color:#666}ul.pagination li.disabled{cursor:not-allowed}ul.pagination li.active span{color:#111;background-color:rgba(0,0,0,.05)}html.dark-mode ul.pagination li.active span{color:#eee}html.dark-mode ul.pagination li.active span{background-color:rgba(0,0,0,.5)}.compact ul.pagination{margin:0}.entity-list,.icon-list{margin:0 -16px}.entity-list h4,.icon-list h4{margin:0}.entity-list hr,.icon-list hr{margin:0}.entity-list .text-small.text-muted,.icon-list .text-small.text-muted{color:#aaa;font-size:.75em;margin-top:6px}.entity-list .text-muted p.text-muted,.icon-list .text-muted p.text-muted{margin-top:0}.entity-list .page.draft .text-page,.icon-list .page.draft .text-page{color:var(--color-page-draft);fill:var(--color-page-draft)}.entity-list>.dropdown-container,.icon-list>.dropdown-container{display:block}.icon-list hr{margin:12px 16px;max-width:140px;opacity:.25;height:1.1px}.icon-list hr+hr,.icon-list hr:first-child,.icon-list hr:last-child{display:none}.entity-list-item,.icon-list-item{padding:12px 16px;display:flex;align-items:center;background-color:transparent;border:0;width:100%;position:relative;word-break:break-word}.entity-list-item h4 a,.icon-list-item h4 a{color:#666}.entity-list-item>span:first-child,.icon-list-item>span:first-child{margin-inline-end:16px;flex-basis:1.88em;flex:none}.entity-list-item>span:last-child,.icon-list-item>span:last-child{flex:1;text-align:start}.entity-list-item>.content,.icon-list-item>.content{min-width:0}.entity-list-item:not(.no-hover),.icon-list-item:not(.no-hover){cursor:pointer}.entity-list-item:not(.no-hover):hover,.icon-list-item:not(.no-hover):hover{text-decoration:none;background-color:rgba(0,0,0,.1);border-radius:4px}.entity-list-item.outline-hover:hover,.icon-list-item.outline-hover:hover{background-color:transparent}.entity-list-item:focus,.icon-list-item:focus{background-color:#eee;outline:1px dotted #666;outline-offset:-2px}html.dark-mode .entity-list-item:focus,html.dark-mode .icon-list-item:focus{background-color:#222}.entity-list-item-path-sep{display:inline-block;vertical-align:top;position:relative;top:1px}.entity-list-item-path-sep svg{margin-inline-end:0}.card .entity-list-item:not(.no-hover):hover{background-color:#f2f2f2}html.dark-mode .card .entity-list-item:not(.no-hover):hover{background-color:#2d2d2d}.card .entity-list-item .entity-list-item:hover{background-color:#eee}.entity-list-item-children{padding:16px}.entity-list-item-children>div{overflow:hidden;padding:6px 0;margin-top:-6px}.entity-list-item-children .entity-chip{text-overflow:ellipsis;height:2.5em;overflow:hidden;text-align:start;display:block;white-space:nowrap}.entity-list-item-image{align-self:stretch;width:140px;flex:none;background-size:cover;background-position:50% 50%;border-radius:3px;position:relative;margin-inline-end:24px}.entity-list-item-image.entity-list-item-image-wide{width:220px}.entity-list-item-image .svg-icon{color:#fff;font-size:1.66rem;margin-inline-end:0;position:absolute;bottom:6px;left:6px}html.dark-mode .entity-list-item-image .svg-icon{color:rgba(255,255,255,.6)}@media screen and (max-width: 880px){.entity-list-item-image{width:80px}}.chapter>.entity-list-item-image{width:60px}.entity-list.compact{font-size:8.4px}.entity-list.compact h4,.entity-list.compact a{line-height:1.2}.entity-list.compact .entity-item-snippet{display:none}.entity-list.compact .entity-list-item p{font-size:11.2px;padding-top:6px}.entity-list.compact p{margin:0}.entity-list.compact>p.empty-text{display:block;font-size:14px}.entity-list.compact hr{margin:0}@media screen and (max-width: 880px){.entity-list.compact h4{font-size:1.666em}}.entity-item-tags{font-size:.75rem;opacity:1}.entity-item-tags .primary-background-light{background:transparent}.entity-item-tags .tag-name{background-color:rgba(0,0,0,.05)}.dropdown-container{display:inline-block;vertical-align:top;position:relative}.dropdown-menu{display:none;position:absolute;z-index:999;top:0;list-style:none;right:0;margin:16px 0;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.18);border-radius:1px;min-width:180px;padding:6px 0;color:#555;fill:currentColor;text-align:start !important;max-height:500px;overflow-y:auto}html.dark-mode .dropdown-menu{background-color:#333}html.dark-mode .dropdown-menu{color:#eee}.dropdown-menu.wide{min-width:220px}.dropdown-menu .text-muted{color:#999;fill:#999}.dropdown-menu li.active a{font-weight:600}.dropdown-menu a,.dropdown-menu button{display:block;padding:6px 16px;color:#555;fill:currentColor;white-space:nowrap;line-height:1.6;cursor:pointer}html.dark-mode .dropdown-menu a,html.dark-mode .dropdown-menu button{color:#eee}.dropdown-menu a:hover,.dropdown-menu a:focus,.dropdown-menu button:hover,.dropdown-menu button:focus{text-decoration:none;background-color:var(--color-primary-light);color:var(--color-primary)}.dropdown-menu a:focus,.dropdown-menu button:focus{outline:1px solid var(--color-primary);outline-offset:-2px}.dropdown-menu a svg,.dropdown-menu button svg{margin-inline-end:12px;display:inline-block;width:16px}.dropdown-menu button{width:100%;text-align:start}.dropdown-menu li.border-bottom{border-bottom:1px solid #ddd}.dropdown-menu li hr{margin:6px 0}.featured-image-container{position:relative;overflow:hidden;min-height:140px;background-size:cover;background-position:50% 50%;transition:opacity ease-in-out 240ms}.featured-image-container a{display:block}.featured-image-container img{display:block;width:100%;max-width:100%;height:auto}.featured-image-container-wrap{position:relative}.featured-image-container-wrap .svg-icon{color:#fff;font-size:2rem;margin-inline-end:0;position:absolute;bottom:10px;left:6px}html.dark-mode .featured-image-container-wrap .svg-icon{color:rgba(255,255,255,.6)}.grid-card:hover .featured-image-container{opacity:.5}.action-link{background:transparent;border:none;color:currentColor;padding:16px 0}.active-link-list a{display:inline-block;padding:12px}.active-link-list a:not(.active){color:#444}html.dark-mode .active-link-list a:not(.active){color:#666}.active-link-list a:hover{background-color:rgba(0,0,0,.05);border-radius:3px;text-decoration:none}html.dark-mode .active-link-list a:hover{background-color:rgba(255,255,255,.05)}.page-editor{display:flex;flex-direction:column;align-items:stretch;overflow:hidden}.page-editor .edit-area{flex:1;flex-direction:column;z-index:10}.page-editor .mce-tinymce{box-shadow:none}.page-editor .mce-top-part::before{box-shadow:none}body.mce-fullscreen .page-editor .edit-area,body.markdown-fullscreen .page-editor .edit-area{z-index:12}body.mce-fullscreen .page-editor,body.mce-fullscreen .flex-fill,body.markdown-fullscreen .page-editor,body.markdown-fullscreen .flex-fill{overflow:visible}@media screen and (max-width: 600px){.page-edit-toolbar{overflow-x:scroll;overflow-y:visible}.page-edit-toolbar .grid.third{display:block;white-space:nowrap}.page-edit-toolbar .grid.third>div{display:inline-block}}.page-save-mobile-button{position:fixed;z-index:30;border-radius:50%;width:56px;height:56px;font-size:24px;right:16px;bottom:12px;box-shadow:0 2px 2px 1px rgba(0,0,0,.13);background-color:currentColor;text-align:center}.page-save-mobile-button svg{fill:#fff;margin-inline-end:0}.draft-notification{pointer-events:none;transform:scale(0);transition:transform ease-in-out 120ms;transform-origin:50% 50%}.draft-notification.visible{transform:scale(1)}.page-style.editor{padding:0 !important}.page-content{width:100%;max-width:840px;margin:0 auto;overflow-wrap:break-word}.page-content .align-left{text-align:left}.page-content img.align-left,.page-content table.align-left{float:left !important;margin:6px 16px 16px 0}.page-content .align-right{text-align:right !important}.page-content img.align-right,.page-content table.align-right{float:right !important;margin:6px 0 6px 12px}.page-content .align-center{text-align:center}.page-content img.align-center{display:block}.page-content img.align-center,.page-content table.align-center{margin-left:auto;margin-right:auto}.page-content img{max-width:100%;height:auto}.page-content h1,.page-content h2,.page-content h3,.page-content h4,.page-content h5,.page-content h6,.page-content pre{clear:left}.page-content hr{clear:both;margin:16px 0}.page-content table{hyphens:auto;table-layout:fixed;max-width:100%;height:auto !important}.page-content ins,.page-content del{text-decoration:none}.page-content ins{background:#dbffdb}.page-content del{background:#ffecec}.page-content.page-revision pre code{white-space:pre-wrap}.pointer-container{position:relative;display:none;left:0;z-index:10}.pointer{border:1px solid #ccc;border-color:#ccc;display:flex;align-items:center;justify-items:center;padding:12px 12px;border-radius:4px;box-shadow:0 0 12px 1px rgba(0,0,0,.1);position:absolute;top:-60px;background-color:#fff;width:275px;z-index:55}html.dark-mode .pointer{border-color:#000}html.dark-mode .pointer{background-color:#333}.pointer.is-page-editable{width:328px}.pointer:before{position:absolute;left:50%;bottom:-9px;width:16px;height:16px;margin-inline-start:-8px;content:"";display:block;transform:rotate(45deg);transform-origin:50% 50%;border-block-end:1px solid #ccc;border-inline-end:1px solid #ccc;z-index:56;background-color:#fff;border-color:#ccc}html.dark-mode .pointer:before{background-color:#333}html.dark-mode .pointer:before{border-color:#000}.pointer input,.pointer button,.pointer a{position:relative;border-radius:0;height:28px;font-size:12px;vertical-align:top;padding:5px 16px}.pointer input{background-color:#fff;border:1px solid #ddd;border-color:#ddd;color:#666;width:172px;z-index:40;padding:5px 10px}html.dark-mode .pointer input{border-color:#000}.pointer span.icon{fill:#444;cursor:pointer;user-select:none;display:inline-block;line-height:1}.pointer .input-group .button{line-height:1;margin:0 0 0 -4px;box-shadow:none}.pointer a.button{margin:0}.pointer .svg-icon{width:1.2em;height:1.2em}.pointer .button{border-color:#ddd}html.dark-mode .pointer .button{border-color:#000}.floating-toolbox{border:1px solid #ddd;background-color:#fff;border-color:#ddd;right:64px;width:48px;overflow:hidden;align-items:stretch;flex-direction:row;display:flex;transition:width ease-in-out 180ms;margin-top:-1px;min-height:0}html.dark-mode .floating-toolbox{background-color:#222}html.dark-mode .floating-toolbox{border-color:#000}.floating-toolbox.open{width:480px}.floating-toolbox [toolbox-toggle] svg{transition:transform ease-in-out 180ms}.floating-toolbox [toolbox-toggle]{transition:background-color ease-in-out 180ms}.floating-toolbox.open [toolbox-toggle]{background-color:rgba(255,0,0,.29)}.floating-toolbox.open [toolbox-toggle] svg{transform:rotate(180deg)}.floating-toolbox>div{flex:1;position:relative}.floating-toolbox .tabs{display:block;border-inline-end:1px solid #ddd;border-color:#ddd;width:48px;flex:0 1 auto}html.dark-mode .floating-toolbox .tabs{border-color:#000}.floating-toolbox .tabs svg{padding:0;margin:0}.floating-toolbox .tabs>button{color:rgba(0,0,0,.5);display:block;cursor:pointer;padding:12px 16px;font-size:16px;line-height:1.6;border-bottom:1px solid rgba(255,255,255,.3)}html.dark-mode .floating-toolbox .tabs>button{color:rgba(255,255,255,.5)}.floating-toolbox.open .tabs>button.active{color:#444;background-color:rgba(0,0,0,.1)}html.dark-mode .floating-toolbox.open .tabs>button.active{color:#eee}.floating-toolbox div[toolbox-tab-content]{padding-bottom:45px;display:flex;flex:1;flex-direction:column;min-height:0;overflow-y:scroll}.floating-toolbox h4{font-size:24px;margin:16px 0 0 0;padding:0 24px 12px 24px}.floating-toolbox .tags input{max-width:100%;width:100%;min-width:50px}.floating-toolbox .tags td,.floating-toolbox .inline-start-table>div>div>div{padding-inline-end:12px;padding-top:12px;position:relative}.floating-toolbox .handle{user-select:none;cursor:move;fill:#999}.floating-toolbox form{display:flex;flex:1;flex-direction:column;overflow-y:scroll}.floating-toolbox table td,.floating-toolbox table th{overflow:visible}[toolbox-tab-content]{display:none}.suggestion-box{top:auto;margin:-4px 0 0;right:auto;left:0;padding:0}.suggestion-box li{display:block;border-bottom:1px solid #ddd}.suggestion-box li:last-child{border-bottom:0}.comments-container h5{color:#888;font-weight:normal;margin-top:.5em}.comment-editor .CodeMirror,.comment-editor .CodeMirror-scroll{min-height:175px}.mce-floatpanel[aria-label="Insert/edit media"] .mce-open{display:none}.entity-list-item>span:first-child,.icon-list-item>span:first-child,.chapter-expansion>.icon{font-size:.8rem;width:1.88em;height:1.88em;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:1em;position:relative;overflow:hidden}.entity-list-item>span:first-child svg,.icon-list-item>span:first-child svg,.chapter-expansion>.icon svg{margin:0;bottom:0}.entity-list-item>span:first-child:after,.icon-list-item>span:first-child:after,.chapter-expansion>.icon:after{content:"";position:absolute;background-color:currentColor;opacity:.2;left:0;top:0;width:100%;height:100%}.entity-chip{display:inline-block;align-items:center;justify-content:center;text-align:center;font-size:.9em;border-radius:3px;position:relative;overflow:hidden;padding:6px 12px;fill:currentColor;opacity:.85;transition:opacity ease-in-out 120ms}.entity-chip:after{content:"";position:absolute;background-color:currentColor;opacity:.15;left:0;top:0;width:100%;height:100%}.entity-chip:hover{text-decoration:none;opacity:1}@media(prefers-contrast: more){.entity-chip{opacity:1}}html,body{background-color:#fff}body{font-family:"DejaVu Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Ubuntu","Roboto","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;margin:0;padding:0;display:block}table{border-spacing:0;border-collapse:collapse}.page-content{overflow:hidden}pre{padding-left:12px}pre:after{display:none}pre code{white-space:pre-wrap}.page-break{page-break-after:always}@media screen{.page-break{border-top:1px solid #ddd}}ul.contents ul li{list-style:circle}.chapter-hint{color:#888;margin-top:32px}.chapter-hint+h1{margin-top:0}/*# sourceMappingURL=export-styles.css.map */
</style>
</head>
<body>
<div class="page-content">
<div dir="auto">
<h1 class="break-text" id="bkmrk-page-title">User Creation and Authentication</h1>
<div style="clear:left;"></div>
<p id="bkmrk-this-feature-will-al">This feature will allow users to register an account through which they have access to the product. This feature is essential for the product, as the user accounts will be linked to essential information such as game data, payment details and crypto wallets.</p>
<h2 id="bkmrk-product-requirements">Product Requirements</h2>
<ul id="bkmrk-there-is-a-user-regi">
<li>The user can register an account
<ul>
<li>The system requires the user to provide an email address<br>
<ul>
<li>The system enforces that the provided email address is valid according to <a href="https://datatracker.ietf.org/doc/html/rfc5322" target="_blank" rel="noopener">RFC-5322</a>.</li>
</ul>
</li>
<li>The system requires the user to choose a passphrase<br>
<ul>
<li>The system requires that the chosen passphrase contains at least:
<ul>
<li>One upper case letter</li>
<li>One lower case letter</li>
<li>One number</li>
<li>One special character</li>
</ul>
</li>
<li>The system requires that the chosen passphrase is at least 16 characters long</li>
</ul>
</li>
</ul>
</li>
<li>The system only allows users to login to their account after their email has been verified.<br>
<ul id="bkmrk-if-a-user-authentica">
<li>If a user authenticates with correct credentials before their email address has been verified, they are able to request the system to send them another verification email.</li>
</ul>
</li>
<li>An email with instructions for email verification is sent to the user directly after account registration is complete.</li>
<li>The user can log into their registered account
<ul id="bkmrk-the-system-requires-">
<li>The system requires the user to enter their email address</li>
<li>The system requires the user to enter their password</li>
<li>The system requires the user to have verified their email address before being able to log in</li>
</ul>
</li>
<li>If the user provides wrong credentials, the system does not tell the user which part of their credentials was wrong.</li>
<li>On authentication failure, the system does not tell the user whether an account for the provided username exists or not.</li>
<li>The system allows the user to reset their password without logging in by providing the system with their email address.<br>
<ul id="bkmrk-%C2%A0a-password-reset-wh">
<li>When a password reset is requested, the user is sent an email with instructions.</li>
<li>The system does not provide any information about whether an account exists for the given email address.</li>
<li>The password reset email contains instructions and a special link that the user can click.
<ul id="bkmrk-the-special-link-is-">
<li>The special link is only valid for two hours.</li>
</ul>
</li>
</ul>
</li>
<li>The system is able to save, edit and provide the following information about a user:
<ul id="bkmrk-username%2Femail-passw">
<li>Username/email</li>
<li>Password</li>
<li>TOTP information</li>
</ul>
</li>
<li>The system is able to pair with a users' TOTP application for additional security.
<ul id="bkmrk-the-system-requires--0">
<li>The system requires a one-time-password for every login after the activation and setup of TOTP by a user.</li>
</ul>
</li>
</ul>
<h2 id="bkmrk-design-requirements">Design Requirements</h2>
<ul id="bkmrk-the-user-registratio">
<li>There is a graphical user registration form
<ul id="bkmrk-the-user-registratio-0">
<li>The user registration form has explanations for each field and how it will be used by the software</li>
<li>The user is required to enter their password twice before submitting the form.
<ul id="bkmrk-it-is-verified-that-">
<li>It is verified that both entered passwords are identical.</li>
</ul>
</li>
<li>The user registration form interactively validates that the user provides to the form
<ul id="bkmrk-if-the-input-for-one">
<li>If the input for one of the form fields is invalid, the software instantly notifies the user through explicit visual cues.</li>
</ul>
</li>
<li>After registration is completed, the UI explicitly tells the user that they will only be able to login after they have verified their email.</li>
<li>After registration is completed, the UI explicitly tells the user that an email has been sent to them with instructions for email verification.</li>
</ul>
</li>
<li>There is a graphical user authentication form
<ul id="bkmrk-the-user-authenticat">
<li>The user authentication form prompts the user to enter their email and password</li>
<li>The user authentication form has a "register account" button that brings the user to the user registration form.</li>
<li>The user authentication form has a "login" button that attempts to authenticate the user using their provided credentials.</li>
</ul>
</li>
<li>There is a graphical representation for TOTP password login.</li>
<li>If the user successfully authenticates before their email address has been verified, they are presented with a page that explains the email verification requirement.
<ul id="bkmrk-the-page-also-contai">
<li>The page also contains a button with which users can request a new verification email.</li>
</ul>
</li>
<li>There is a password reset page that the special links in password reset emails lead to.
<ul id="bkmrk-the-form-on-the-pass">
<li>The form on the password reset page requires the user to enter their new password twice.</li>
</ul>
</li>
<li>There is a user settings page that allows the user to change their:
<ul id="bkmrk-username-password-to">
<li>username</li>
<li>password</li>
<li>TOTP settings</li>
</ul>
</li>
</ul>
<h2 id="bkmrk-engineering-requirem">Engineering Requirements</h2>
<ul id="bkmrk-email-and-passphrase">
<li>Email and passphrase are only used to request a JSON Web Token from the system.<br>
<ul>
<li>The JWT is used as means of authentication for any other interactions with the system.</li>
</ul>
</li>
<li>The system needs to be able to save and retrieve users with unique, non-sequential identifiers.</li>
</ul>
<h2 id="bkmrk-user-stories">User Stories</h2>
<p id="bkmrk-this-section-contain">This section contains the user stories for this epic. After each user story, the accompanying requirements are defined in bullet point lists.</p>
<table id="bkmrk-user-story-%C2%A0-accepta" style="border-collapse: collapse; width: 100.123%; height: 112px;" border="1">
<tbody>
<tr style="height: 42px;">
<td style="width: 18.7654%; height: 42px;"><strong>User story</strong></td>
<td style="width: 81.2346%; height: 42px;">As a user, I want to be able to register a user account using an email address and password so that I can take part in Rise of Rulers gameplay.</td>
</tr>
<tr style="height: 70px;">
<td style="width: 18.7654%; height: 70px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.2346%; height: 70px;">
<ul>
<li>Given I am a user, I provide a correct email address and password to the system and click the register button, I am able to successfully register a user account.</li>
<li>Given I am a user, I have to enter my preferred password twice when registering an account and if both entries aren't identical I have to correct this before continuing.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user" style="border-collapse: collapse; width: 100%; height: 75px;" border="1">
<tbody>
<tr style="height: 46px;">
<td style="width: 18.642%; height: 46px;"><strong>User story</strong></td>
<td style="width: 81.358%; height: 46px;">As a user, I want to be able to verify my account within a reasonable amount of time by following the instructions in the account verification email.</td>
</tr>
<tr style="height: 29px;">
<td style="width: 18.642%; height: 29px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%; height: 29px;">
<ul>
<li>Given I am a user and I click the registration button after correctly filling out the form, the system tells me that my account registration is successful, the account needs to be verified for me to be able to use it and an email has been sent to my email address with verification instructions.</li>
<li>Given I am a user and the system tells me that an email has been sent out, the system has actually sent out the email at that instant so that I can receive it within a reasonable amount of time.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user-0" style="border-collapse: collapse; width: 100%; height: 75px;" border="1">
<tbody>
<tr style="height: 46px;">
<td style="width: 18.642%; height: 46px;"><strong>User story</strong></td>
<td style="width: 81.358%; height: 46px;">As a user, I want to be told that my email needs to be verified when I successfully authenticate through the login form before I have verified my email address.</td>
</tr>
<tr style="height: 29px;">
<td style="width: 18.642%; height: 29px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%; height: 29px;">
<ul>
<li>Given I am a user and I click the login button after providing valid credentials, I am greeted with a message about the required email verification and the option to have the system send a new verification email to my email address.</li>
<li>Given I am a user and I am logged in without my email being verified, the system does not allow me to use its core functionalities.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user-1" style="border-collapse: collapse; width: 100%; height: 251px;" border="1">
<tbody>
<tr style="height: 64px;">
<td style="width: 18.642%; height: 64px;"><strong>User story</strong></td>
<td style="width: 81.358%; height: 64px;">As a user, I want to be able to reset my account password by providing the system with the email address I used to register my account and following the instructions in a password reset email sent to my email address.</td>
</tr>
<tr style="height: 187px;">
<td style="width: 18.642%; height: 187px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%; height: 187px;">
<ul>
<li>Given I am a user and I click the reset password button after providing my email address, I am sent an email with instructions and a special link that I can use to change the password for my user account.</li>
<li>Given I am a user and I click the special link in the password reset email, I am presented with the password reset page which requires me to enter my new password twice.</li>
<li>Given I am a user and I do not enter two identical passwords into the password reset form, I am not allowed to continue before I correct this.</li>
<li>Given I am a user, I have correctly filled out the password form and I click the "reset password" button, my password is changed to the one provided in the form.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user-2" style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 18.642%;"><strong>User story</strong></td>
<td style="width: 81.358%;">As a user, I want to be able to pair the software with my TOTP application so that I can use one-time passwords for additional security.</td>
</tr>
<tr>
<td style="width: 18.642%;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%;">
<ul>
<li>Given that I am a user and I click the "enable TOTP" button on the user settings screen, I am able to go through the setup process and configure the system to work with my TOTP application.</li>
<li>Given that I am a user and I login after enabling TOTP for my account, I fill in a correct password and username and the system has verified these credentials, I am required to provide a one-time-password from the TOTP application before I am allowed to continue.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<table id="bkmrk-user-story-as-a-user-3" style="border-collapse: collapse; width: 100%; height: 58px;" border="1">
<tbody>
<tr style="height: 29px;">
<td style="width: 18.642%; height: 29px;"><strong>User story</strong></td>
<td style="width: 81.358%; height: 29px;">As a user, I want to be able to authenticate myself to the system using a username and password configured by me, so that I am able to partake in gameplay and my progress can be saved.</td>
</tr>
<tr style="height: 29px;">
<td style="width: 18.642%; height: 29px;"><strong>Acceptance criteria</strong></td>
<td style="width: 81.358%; height: 29px;">
<ul>
<li>Given that I am a user, I fill in the login form with a correct username and password and I click login, I am able to successfully authenticate to the system.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div class="text-muted text-small">
<div class="entity-meta">
<svg class="svg-icon" data-icon="history" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
</svg>Revision #12 <br>
<svg class="svg-icon" data-icon="star" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>Created 22 February 2022 11:16:51 by Hugo
<br>
<svg class="svg-icon" data-icon="edit" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>Updated 7 March 2022 15:41:02 by Hugo
</div> </div>
</div>
</body>
</html>