Compare commits
1 Commits
docs-sdk-u
...
live-prep
| Author | SHA1 | Date | |
|---|---|---|---|
|
a69899dc10 |
@@ -16,10 +16,10 @@ If you want to develop websites like it was 1997, feel free to reuse this projec
|
|||||||
|
|
||||||
```
|
```
|
||||||
# clone this repo
|
# clone this repo
|
||||||
git clone https://github.com/encrypted-dev/userbase-homepage.git
|
git clone https://github.com/encrypted-dev/homepage.git
|
||||||
|
|
||||||
# go to the repo directory
|
# go to the repo directory
|
||||||
cd userbase-homepage
|
cd homepage
|
||||||
|
|
||||||
# install all dependencies
|
# install all dependencies
|
||||||
npm install
|
npm install
|
||||||
|
|||||||
99
package-lock.json
generated
99
package-lock.json
generated
@@ -1718,12 +1718,6 @@
|
|||||||
"object.assign": "^4.1.0"
|
"object.assign": "^4.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"babel-plugin-prismjs": {
|
|
||||||
"version": "1.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/babel-plugin-prismjs/-/babel-plugin-prismjs-1.1.1.tgz",
|
|
||||||
"integrity": "sha512-MmwxA//jBpXH0IhJ2FbpBJmd6Bvq5rBe3UD3udUqfkkOdh6lmQeYxoVGpkIvLuuXecrynWjpPqwM0JPxErebpQ==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"babel-polyfill": {
|
"babel-polyfill": {
|
||||||
"version": "6.26.0",
|
"version": "6.26.0",
|
||||||
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
|
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
|
||||||
@@ -2379,18 +2373,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"clipboard": {
|
|
||||||
"version": "2.0.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
|
|
||||||
"integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"good-listener": "^1.2.2",
|
|
||||||
"select": "^1.1.2",
|
|
||||||
"tiny-emitter": "^2.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"cliui": {
|
"cliui": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
|
||||||
@@ -3185,13 +3167,6 @@
|
|||||||
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
|
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"delegate": {
|
|
||||||
"version": "3.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
|
|
||||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"delegates": {
|
"delegates": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
|
||||||
@@ -4199,7 +4174,8 @@
|
|||||||
"ansi-regex": {
|
"ansi-regex": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"aproba": {
|
"aproba": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
@@ -4220,12 +4196,14 @@
|
|||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"balanced-match": "^1.0.0",
|
"balanced-match": "^1.0.0",
|
||||||
"concat-map": "0.0.1"
|
"concat-map": "0.0.1"
|
||||||
@@ -4240,17 +4218,20 @@
|
|||||||
"code-point-at": {
|
"code-point-at": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"console-control-strings": {
|
"console-control-strings": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
@@ -4367,7 +4348,8 @@
|
|||||||
"inherits": {
|
"inherits": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"ini": {
|
"ini": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
@@ -4379,6 +4361,7 @@
|
|||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"number-is-nan": "^1.0.0"
|
"number-is-nan": "^1.0.0"
|
||||||
}
|
}
|
||||||
@@ -4393,6 +4376,7 @@
|
|||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"brace-expansion": "^1.1.7"
|
"brace-expansion": "^1.1.7"
|
||||||
}
|
}
|
||||||
@@ -4400,12 +4384,14 @@
|
|||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"minipass": {
|
"minipass": {
|
||||||
"version": "2.3.5",
|
"version": "2.3.5",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"safe-buffer": "^5.1.2",
|
"safe-buffer": "^5.1.2",
|
||||||
"yallist": "^3.0.0"
|
"yallist": "^3.0.0"
|
||||||
@@ -4424,6 +4410,7 @@
|
|||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
@@ -4504,7 +4491,8 @@
|
|||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"object-assign": {
|
"object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
@@ -4516,6 +4504,7 @@
|
|||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
@@ -4601,7 +4590,8 @@
|
|||||||
"safe-buffer": {
|
"safe-buffer": {
|
||||||
"version": "5.1.2",
|
"version": "5.1.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"safer-buffer": {
|
"safer-buffer": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
@@ -4637,6 +4627,7 @@
|
|||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"code-point-at": "^1.0.0",
|
"code-point-at": "^1.0.0",
|
||||||
"is-fullwidth-code-point": "^1.0.0",
|
"is-fullwidth-code-point": "^1.0.0",
|
||||||
@@ -4656,6 +4647,7 @@
|
|||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true,
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ansi-regex": "^2.0.0"
|
"ansi-regex": "^2.0.0"
|
||||||
}
|
}
|
||||||
@@ -4699,12 +4691,14 @@
|
|||||||
"wrappy": {
|
"wrappy": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
},
|
},
|
||||||
"yallist": {
|
"yallist": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"dev": true
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -4911,16 +4905,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"good-listener": {
|
|
||||||
"version": "1.2.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
|
|
||||||
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"delegate": "^3.1.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"graceful-fs": {
|
"graceful-fs": {
|
||||||
"version": "4.2.2",
|
"version": "4.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz",
|
||||||
@@ -7963,15 +7947,6 @@
|
|||||||
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
|
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"prismjs": {
|
|
||||||
"version": "1.17.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz",
|
|
||||||
"integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"clipboard": "^2.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"private": {
|
"private": {
|
||||||
"version": "0.1.8",
|
"version": "0.1.8",
|
||||||
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
|
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
|
||||||
@@ -8661,13 +8636,6 @@
|
|||||||
"ajv-keywords": "^3.1.0"
|
"ajv-keywords": "^3.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"select": {
|
|
||||||
"version": "1.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
|
|
||||||
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"select-hose": {
|
"select-hose": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
|
||||||
@@ -9661,13 +9629,6 @@
|
|||||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
|
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"tiny-emitter": {
|
|
||||||
"version": "2.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
|
||||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"tinycolor2": {
|
"tinycolor2": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
|
||||||
|
|||||||
@@ -33,7 +33,6 @@
|
|||||||
"opn-browser-webpack-plugin": "0.0.7",
|
"opn-browser-webpack-plugin": "0.0.7",
|
||||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||||
"postcss-loader": "^3.0.0",
|
"postcss-loader": "^3.0.0",
|
||||||
"prismjs": "^1.17.1",
|
|
||||||
"source-map-loader": "^0.2.4",
|
"source-map-loader": "^0.2.4",
|
||||||
"tailwindcss": "^1.0.4",
|
"tailwindcss": "^1.0.4",
|
||||||
"terser-webpack-plugin": "^1.3.0",
|
"terser-webpack-plugin": "^1.3.0",
|
||||||
@@ -41,4 +40,4 @@
|
|||||||
"webpack-cli": "^3.3.2",
|
"webpack-cli": "^3.3.2",
|
||||||
"webpack-dev-server": "^3.5.1"
|
"webpack-dev-server": "^3.5.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,3 @@
|
|||||||
import Prism from './prism'
|
|
||||||
|
|
||||||
import './prism.css'
|
|
||||||
import './style.css'
|
import './style.css'
|
||||||
|
|
||||||
window.displayMailChimpStatus = function (data) {
|
window.displayMailChimpStatus = function (data) {
|
||||||
|
|||||||
@@ -1,853 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2>Docs</h2>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="#getting-started" class="font-semibold">Getting started</a></li>
|
|
||||||
<li><a href="#sdk" class="font-semibold">SDK</a></li>
|
|
||||||
<li><a href="#tutorial" class="font-semibold">Tutorial</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<a class="anchor" id="getting-started"></a>
|
|
||||||
<h2 id=>Getting Started</h2>
|
|
||||||
|
|
||||||
<h3>Create a free Userbase account</h3>
|
|
||||||
<p>First you need a Userbase developer account. You will be able to create a free account when Userbase gets launched. No credit card required.</p>
|
|
||||||
|
|
||||||
<h3>Install the SDK</h3>
|
|
||||||
<p>Then you need to include the Userbase SDK into your web app.</p>
|
|
||||||
<p>You can either include the SDK with a <code class="language-markup"><script></code> tag:</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-markup"><!--
|
|
||||||
<script type="text/javascript" src="https://sdk.userbase.dev/userbase-0.0.5.js"></script>
|
|
||||||
--></code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>Or else you can include the SDK into your build pipeline:</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-bash">
|
|
||||||
npm --install --save userbase-js
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3>Set the Application ID</h3>
|
|
||||||
<p>From your Userbase account, create a new App and get the Application ID. Then you just need to configure the Userbase SDK to use it:</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript"><!--
|
|
||||||
userbase.configure({ appId: 'a43ae910-fc89-43fe-a7a3-a11a53b49325' })
|
|
||||||
--></code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>And you're all set.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<a class="anchor" id="sdk"></a>
|
|
||||||
<h2>SDK</h2>
|
|
||||||
|
|
||||||
<p>You can use Userbase through a simple JavaScript SDK in the browser. The following is the complete set of Userbase APIs that let you create user accounts, handle logins, and persist user data.</p>
|
|
||||||
|
|
||||||
<h3 id="sdk-users">Users</h3>
|
|
||||||
<p>Use these APIs to create user accounts, handle logins and logouts, and resume sessions when a user returns to your web app.</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/docs/sdk/sign-up" class="font-semibold">SignUp</a></li>
|
|
||||||
<li><a href="/docs/sdk/sign-in" class="font-semibold">SignIn</a></li>
|
|
||||||
<li><a href="/docs/sdk/sign-in-with-session" class="font-semibold">SignInWithSession</a></li>
|
|
||||||
<li><a href="/docs/sdk/sign-out" class="font-semibold">SignOut</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="sdk-data">Data</h3>
|
|
||||||
<p>Use these APIs to store and retrieve user data. All data handled by these APIs is highly-durable, immediately consistent, and end-to-end encrypted.</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/docs/sdk/open-database" class="font-semibold">OpenDatabase</a></li>
|
|
||||||
<li><a href="/docs/sdk/insert" class="font-semibold">Insert</a></li>
|
|
||||||
<li><a href="/docs/sdk/update" class="font-semibold">Update</a></li>
|
|
||||||
<li><a href="/docs/sdk/delete" class="font-semibold">Delete</a></li>
|
|
||||||
<li><a href="/docs/sdk/transaction" class="font-semibold">Transaction</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="section">
|
|
||||||
<a class="anchor" id="tutorial"></a>
|
|
||||||
<h2>Tutorial</h2>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
In this tutorial we will build a simple to-do web app. Even if what you're building has nothing to do with to-dos, the techniques we'll cover here can be applied to many other kinds of web apps.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
You can think of this tutorial as a demonstration of the core functionality of Userbase in the simplest way possible. We are going to focus solely on building a fully functional web app. Making things pretty is left as an exercise to the reader.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>You can see a live demo of what we'll building <a href="https://ugliest-todo.netlify.com/" target="_blank">here</a>.</p>
|
|
||||||
|
|
||||||
<h3>Prerequisites</h3>
|
|
||||||
|
|
||||||
<p>You just need to be familiar with HTML and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript" target="_blank">JavaScript basics</a>.</p>
|
|
||||||
|
|
||||||
<h3>Setting up</h3>
|
|
||||||
|
|
||||||
<p>Let's get going. Open up a new file in your favorite code editor:</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-bash">
|
|
||||||
code ulgy-todo.html
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>And add some boilerplate HTML:</p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<pre>
|
|
||||||
<code class="language-markup">
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Ugliest To-Do</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Now open up this file in a web browser of your choosing. At this point all you'll see is a blank page. As we add functionality throughout the tutorial, you can refresh this page to see the changes.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Creating a developer account</h3>
|
|
||||||
|
|
||||||
<p>To complete this tutorial, you'll need to create a Userbase developer account, and then create an app from within your account. Take note of the Application ID of your app.</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
We're now ready to start building our web app. We'll start by implementing the sign up and login features, and then in the second part we'll implement the to-do functionality.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Installing the SDK</h3>
|
|
||||||
|
|
||||||
We're going to load the Userbase SDK from a CDN with a <code class="language-markup"><script></code> tag in the head of
|
|
||||||
our page:
|
|
||||||
|
|
||||||
<pre data-line="4">
|
|
||||||
<code class="language-markup"><!--
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Ugliest To-Do App</title>
|
|
||||||
<script type="text/javascript" src="https://sdk.userbase.dev/userbase-0.0.5.js"></script>
|
|
||||||
</head>
|
|
||||||
--></code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>The Userbase SDK will now be accessible via the <code class="language-javascript">userbase</code> variable. This will be our only dependency.</p>
|
|
||||||
|
|
||||||
<h3>Configuring the SDK</h3>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Before doing anything with the Userbase SDK, we need to let it know our Application ID.
|
|
||||||
Simply replace <code class="language-javascript">'YOUR_APP_ID'</code> with the Application ID of the app you created earlier:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<pre data-line="4">
|
|
||||||
<code class="language-markup">
|
|
||||||
<body>
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
userbase.configure({ appId: 'YOUR_APP_ID' })
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Now anything we do with the client (e.g. sign in a user, persist data) will
|
|
||||||
happen within the context of the app whose ID we specified.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Letting new users create an account</h3>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Any actions that our users take needs to happen within an authenticated session. We'll start by adding a way to for new users to create an account with our app.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>First, we'll add a sign up form:</p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<pre data-line="2-11">
|
|
||||||
<code class="language-markup">
|
|
||||||
<body>
|
|
||||||
<!-- Auth View -->
|
|
||||||
<div id="auth-view">
|
|
||||||
<h1>Create an account</h1>
|
|
||||||
<form id="signup-form">
|
|
||||||
<input id="signup-username" type="text" required placeholder="Username">
|
|
||||||
<input id="signup-password" type="password" required placeholder="Password">
|
|
||||||
<input type="submit" value="Create an account">
|
|
||||||
</form>
|
|
||||||
<div id="signup-error"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript"></script>
|
|
||||||
</body>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>Then, we'll add the code to handle the form submission:</p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<pre data-line="5-16">
|
|
||||||
<code class="language-markup">
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
userbase.configure({ appId: 'YOUR_APP_ID' })
|
|
||||||
|
|
||||||
function handleSignUp(e) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
const username = document.getElementById('signup-username').value
|
|
||||||
const password = document.getElementById('signup-password').value
|
|
||||||
|
|
||||||
userbase.signUp(username, password)
|
|
||||||
.then((user) => alert('You signed up!'))
|
|
||||||
.catch((e) => document.getElementById('signup-error').innerHTML = e)
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('signup-form').addEventListener('submit', handleSignUp)
|
|
||||||
</script>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Whenever someone submits the form, the <code class="language-javascript">handleSignUp</code> function will be called.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
The first thing we do in <code class="language-javascript">handleSignUp</code> is call <code class="language-javascript">preventDefault()</code> on the
|
|
||||||
submit event. This will prevent the page from submitting to the server. We want to handle this form completely on the client-side.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Next we get the values of the username and password inputs and call
|
|
||||||
<code class="language-javascript">userbase.signUp(username, password)</code>. This will request a new account to be created with the Userbase service, and returns a Promise that resolves with a <code class="language-javascript">user</code> object.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Go ahead and reload the web app in your browser. Enter a username and password in the form under "Sign Up" and submit. You'll get an alert saying that you signed up. And if go to your Userbase developer account, you should see the new user under your app.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Now try signing up for another account using the same username and you'll see an error message displayed under the form.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
We'll come back to this in a bit to change this function to do something more interesting.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Letting users log in</h3>
|
|
||||||
|
|
||||||
<p>Now that users can create accounts, let's give them the ability to sign in.</p>
|
|
||||||
|
|
||||||
<p>First, we'll add a "Login" form to the page above our "Create Account" form:</p>
|
|
||||||
|
|
||||||
<pre data-line="4-10">
|
|
||||||
<code class="language-markup">
|
|
||||||
<body>
|
|
||||||
<!-- Auth View -->
|
|
||||||
<div id="auth-view">
|
|
||||||
<h1>Login</h1>
|
|
||||||
<form id="login-form">
|
|
||||||
<input id="login-username" type="text" required placeholder="Username">
|
|
||||||
<input id="login-password" type="password" required placeholder="Password">
|
|
||||||
<input type="submit" value="Sign in">
|
|
||||||
</form>
|
|
||||||
<div id="login-error"></div>
|
|
||||||
|
|
||||||
<h1>Create an account</h1>
|
|
||||||
<form id="signup-form">
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>Then, we'll add code to handle the form submission:</p>
|
|
||||||
|
|
||||||
<pre data-line="5-14">
|
|
||||||
<code class="language-markup">
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
userbase.configure({ appId: 'YOUR_APP_ID' })
|
|
||||||
|
|
||||||
function handleLogin(e) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
const username = document.getElementById('login-username').value
|
|
||||||
const password = document.getElementById('login-password').value
|
|
||||||
|
|
||||||
userbase.signIn(username, password)
|
|
||||||
.then((user) => alert('You signed in!'))
|
|
||||||
.catch((e) => document.getElementById('login-error').innerHTML = e)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleSignUp(e) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>And finally, let's bind our login form within our login handler:</p>
|
|
||||||
|
|
||||||
<pre data-line="9">
|
|
||||||
<code class="language-markup">
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
.catch((e) => document.getElementById('signup-error').innerHTML = e)
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('login-form').addEventListener('submit', handleLogin)
|
|
||||||
document.getElementById('signup-form').addEventListener('submit', handleSignUp)
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
You'll notice this looks very similar to the sign up code above. The <code class="language-javascript">handleLogin</code> function prevents the default form behavior, extracts the input values from the DOM, and calls <code class="language-javascript">userbase.signIn(username, password)</code>. This will attempt to sign in the user with the Userbase service, handling a success with an alert and a failure by displaying the error.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Reload the app and you should see our new login form. Enter the username and
|
|
||||||
password you used to create an account in the step above, and submit the form.
|
|
||||||
You should get an alert saying that you signed in.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Try submitting the form again with incorrect credentials and you'll see an error
|
|
||||||
message displayed under the form.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Showing the to-do view</h3>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
After a user signs in, we'll want to hide the authentication forms, indicate
|
|
||||||
to the user they are logged in, and display their to-do list.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>First, we'll add a new container under the authentication forms:</p>
|
|
||||||
|
|
||||||
<pre data-line="3-9">
|
|
||||||
<code class="language-markup">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- To-dos View -->
|
|
||||||
<div id="todo-view">
|
|
||||||
<div id="username"></div>
|
|
||||||
|
|
||||||
<h1>To-Do List</h1>
|
|
||||||
<div id="todos"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
userbase.configure({ appId: 'YOUR_APP_ID' })
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>Then, we'll add a function to display this view and initially make it hidden:</p>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<pre data-line="1-5,10">
|
|
||||||
<code class="language-javascript">
|
|
||||||
function showTodos(username) {
|
|
||||||
document.getElementById('auth-view').style.display = 'none'
|
|
||||||
document.getElementById('todo-view').style.display = 'block'
|
|
||||||
document.getElementById('username').innerHTML = username
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('login-form').addEventListener('submit', handleLogin)
|
|
||||||
document.getElementById('signup-form').addEventListener('submit', handleSignUp)
|
|
||||||
|
|
||||||
document.getElementById('todo-view').style.display = 'none'
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Now that we have a function to show a view for signed in users, let's change
|
|
||||||
<code class="language-javascript">handleLogin</code> to call this function when it succeeds:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<pre data-line="7">
|
|
||||||
<code class="language-javascript">
|
|
||||||
function handleLogin(e) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
const password = document.getElementById('login-password').value
|
|
||||||
|
|
||||||
userbase.signIn(username, password)
|
|
||||||
.then((user) => showTodos(user.username))
|
|
||||||
.catch((e) => document.getElementById('login-error').innerHTML = e)
|
|
||||||
}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>And we do the same thing for <code class="language-javascript">handleSignUp</code>:</p>
|
|
||||||
|
|
||||||
<pre data-line="7">
|
|
||||||
<code class="language-javascript">
|
|
||||||
function handleSignUp(e) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
const password = document.getElementById('signup-password').value
|
|
||||||
|
|
||||||
userbase.signUp(username, password)
|
|
||||||
.then((user) => showTodos(user.username))
|
|
||||||
.catch((e) => document.getElementById('signup-error').innerHTML = e)
|
|
||||||
}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Reload the app and sign in again using your username and password. You should see the
|
|
||||||
authentication view disappear and your username show up along with the to-do list heading.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Using to the database</h3>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Each time a new session is started, we need to establish a connection with the
|
|
||||||
database that will hold that user's to-dos.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
First, let's add a couple of elements for showing a loading indicator and error
|
|
||||||
messages:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<pre data-line="6-7">
|
|
||||||
<code class="language-markup"><!--
|
|
||||||
<div id="todo-view">
|
|
||||||
<span id="username"></span>
|
|
||||||
|
|
||||||
<h1>To-Do List</h1>
|
|
||||||
<div id="todos"></div>
|
|
||||||
<div id="db-loading">Loading to-dos...</div>
|
|
||||||
<div id="db-error"></div>
|
|
||||||
</div>
|
|
||||||
--></code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>Then, we'll change <code class="language-javascript">showTodos</code> to open a new database with the Userbase service:</p>
|
|
||||||
|
|
||||||
<pre data-line="5,7-12,15-25">
|
|
||||||
<code class="language-javascript">
|
|
||||||
function showTodos(username) {
|
|
||||||
document.getElementById('auth-view').style.display = 'none'
|
|
||||||
document.getElementById('todo-view').style.display = 'block'
|
|
||||||
|
|
||||||
// reset the todos view
|
|
||||||
document.getElementById('username').innerHTML = username
|
|
||||||
document.getElementById('todos').innerText = ''
|
|
||||||
document.getElementById('db-loading').style.display = 'block'
|
|
||||||
document.getElementById('db-error').innerText = ''
|
|
||||||
|
|
||||||
userbase.openDatabase('todos', handleDatabaseChange)
|
|
||||||
.catch((e) => document.getElementById('db-error').innerText = e)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDatabaseChange(items) {
|
|
||||||
document.getElementById('db-loading').style.display = 'none'
|
|
||||||
|
|
||||||
const todosList = document.getElementById('todos')
|
|
||||||
|
|
||||||
if (items.length === 0) {
|
|
||||||
todosList.innerText = 'Empty'
|
|
||||||
} else {
|
|
||||||
// render to-dos, not yet implemented
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('login-form').addEventListener('submit', handleLogin)
|
|
||||||
document.getElementById('signup-form').addEventListener('submit', handleSignUp)
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
We changed <code class="language-javascript">showTodos</code> to make a call to <code class="language-javascript">userbase.openDatabase('todos',
|
|
||||||
handleDatabaseChange)</code>. The <code class="language-javascript">'todos'</code> parameter is the name of the database we want to open, and <code class="language-javascript">handleDatabaseChange</code> is a callback for receiving changes to data in the database. The Userbase service will attempt to open the user's database by the
|
|
||||||
name of <code class="language-javascript">'todos'</code> (creating one if it doesn't already exist). After the <code class="language-javascript">'todos'</code>
|
|
||||||
database is opened, our callback
|
|
||||||
function <code class="language-javascript">handleDatabaseChanges</code> will be called whenever data changes in the database. When the Promise is resolved, the database is ready for use and we hide the loading indicator.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Reload the app and sign in. You'll see the "Loading to-dos..." as a connection
|
|
||||||
to the database is established followed by "Empty" indicating there are
|
|
||||||
currently no to-dos.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Showing the to-dos</h3>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
If the database has items in it, we'll want to render those under our to-do list.
|
|
||||||
Let's implement that case in <code class="language-javascript">handleDatabaseChange</code>:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<pre data-line="9-24">
|
|
||||||
<code class="language-javascript"><!--
|
|
||||||
function handleDatabaseChange(items) {
|
|
||||||
document.getElementById('db-loading').style.display = 'none'
|
|
||||||
|
|
||||||
const todosList = document.getElementById('todos')
|
|
||||||
|
|
||||||
if (items.length === 0) {
|
|
||||||
todosList.innerText = 'Empty'
|
|
||||||
} else {
|
|
||||||
// clear the list
|
|
||||||
todosList.innerHTML = ''
|
|
||||||
|
|
||||||
// render all the to-do items
|
|
||||||
for (let i = 0; i < items.length; i++) {
|
|
||||||
|
|
||||||
// build the todo label
|
|
||||||
const todoLabel = document.createElement('label')
|
|
||||||
todoLabel.innerHTML = items[i].item.todo
|
|
||||||
todoLabel.style.textDecoration = items[i].item.complete ? 'line-through' : 'none'
|
|
||||||
|
|
||||||
// append the todo item to the list
|
|
||||||
const todoItem = document.createElement('div')
|
|
||||||
todoItem.appendChild(todoLabel)
|
|
||||||
todosList.appendChild(todoItem)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
--></code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3>Adding to-dos</h3>
|
|
||||||
|
|
||||||
<p>Let's add a form for creating new to-dos:</p>
|
|
||||||
|
|
||||||
<script type="text/plain" data-line="10-14" class="language-markup">
|
|
||||||
<!-- To-dos View -->
|
|
||||||
<div id="todo-view">
|
|
||||||
<span id="username"></span>
|
|
||||||
|
|
||||||
<h1>To-Do List</h1>
|
|
||||||
<div id="todos"></div>
|
|
||||||
<div id="db-loading">Loading to-dos...</div>
|
|
||||||
<div id="db-error"></div>
|
|
||||||
|
|
||||||
<form id="add-todo-form">
|
|
||||||
<input id="add-todo" type="text" required placeholder="To-Do">
|
|
||||||
<input type="submit" value="Add">
|
|
||||||
</form>
|
|
||||||
<div id="add-todo-error"></div>
|
|
||||||
</div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<p>Then, add code to handle the form submission:</p>
|
|
||||||
|
|
||||||
<pre data-line="5-13,17">
|
|
||||||
<code class="language-markup">
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
...
|
|
||||||
|
|
||||||
function addTodoHandler(e) {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
const todo = document.getElementById('add-todo').value
|
|
||||||
|
|
||||||
userbase.insert('todos', { 'todo': todo })
|
|
||||||
.then(() => document.getElementById('add-todo').value = '')
|
|
||||||
.catch((e) => document.getElementById('add-todo-error').innerHTML = e)
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('login-form').addEventListener('submit', handleLogin)
|
|
||||||
document.getElementById('signup-form').addEventListener('submit', handleSignUp)
|
|
||||||
document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
|
|
||||||
|
|
||||||
document.getElementById('todo-view').style.display = 'none'
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
In <code class="language-javascript">addTodoHandler</code> we first call <code class="language-javascript">preventDefault()</code> to stop the default form
|
|
||||||
behavior, pull the to-do text from the input, and then call <code class="language-javascript">userbase.insert</code>
|
|
||||||
with the database name and the object we want the persist. This
|
|
||||||
will return a Promise that resolves when the data is successfully persisted to
|
|
||||||
the database.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Reload the app and add some to-dos. Then reload the app again and the to-dos should automatically appear after you login.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Updating to-dos</h3>
|
|
||||||
|
|
||||||
<p>Let's modify how we are rendering the to-do items so we can mark them as completed:</p>
|
|
||||||
|
|
||||||
<pre data-line="4-16,26">
|
|
||||||
<code class="language-javascript">
|
|
||||||
// render all the to-do items
|
|
||||||
for (let i = 0; i < items.length; i++) {
|
|
||||||
|
|
||||||
// build the todo checkbox
|
|
||||||
const todoBox = document.createElement('input')
|
|
||||||
todoBox.type = 'checkbox'
|
|
||||||
todoBox.id = items[i].itemId
|
|
||||||
todoBox.checked = items[i].item.complete ? true : false
|
|
||||||
todoBox.onclick = (e) => {
|
|
||||||
e.preventDefault()
|
|
||||||
userbase.update('todos', {
|
|
||||||
'todo': items[i].item.todo,
|
|
||||||
'complete': !items[i].item.complete
|
|
||||||
}, items[i].itemId)
|
|
||||||
.catch((e) => document.getElementById('add-todo-error').innerHTML = e)
|
|
||||||
}
|
|
||||||
|
|
||||||
// build the todo label
|
|
||||||
const todoLabel = document.createElement('label')
|
|
||||||
todoLabel.innerHTML = items[i].item.todo
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
// append the todo item to the list
|
|
||||||
const todoItem = document.createElement('div')
|
|
||||||
todoItem.appendChild(todoBox)
|
|
||||||
todoItem.appendChild(todoLabel)
|
|
||||||
todosList.appendChild(todoItem)
|
|
||||||
}
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Reload the app and complete some to-dos. Their state should presist after you reload the app and login again.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Deleting to-dos</h3>
|
|
||||||
|
|
||||||
<p>Let's create a button for deleting a to-do:</p>
|
|
||||||
|
|
||||||
<pre data-line="4-11">
|
|
||||||
<code class="language-javascript">
|
|
||||||
// render all the to-do items
|
|
||||||
for (let i = 0; i < items.length; i++) {
|
|
||||||
|
|
||||||
// build the todo delete button
|
|
||||||
const todoDelete = document.createElement('button')
|
|
||||||
todoDelete.innerHTML = 'X'
|
|
||||||
todoDelete.style.display = 'inline-block'
|
|
||||||
todoDelete.onclick = () => {
|
|
||||||
userbase.delete('todos', items[i].itemId)
|
|
||||||
.catch((e) => document.getElementById('add-todo-error').innerHTML = e)
|
|
||||||
}
|
|
||||||
|
|
||||||
// build the todo checkbox
|
|
||||||
const todoBox = document.createElement('input')
|
|
||||||
todoBox.type = 'checkbox'
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>And append the delete button to the to-do element:</p>
|
|
||||||
|
|
||||||
<pre data-line="3">
|
|
||||||
<code class="language-javascript">
|
|
||||||
// append the todo item to the list
|
|
||||||
const todoItem = document.createElement('div')
|
|
||||||
todoItem.appendChild(todoDelete)
|
|
||||||
todoItem.appendChild(todoBox)
|
|
||||||
todoItem.appendChild(todoLabel)
|
|
||||||
todosList.appendChild(todoItem)
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Reload the app and delete some to-dos. They should no longer show up even after you reload the app and login again.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Polishing up</h3>
|
|
||||||
|
|
||||||
<p>Before we wrap up, let's add two final pieces of account functionality: user logout and automatic login for returning users.</p>
|
|
||||||
|
|
||||||
<h3>Signing out users</h3>
|
|
||||||
|
|
||||||
<p>First, let's add a logout button along with a container for displaying error messages:</p>
|
|
||||||
|
|
||||||
<script type="text/plain" data-line="4-5" class="language-markup">
|
|
||||||
<!-- To-dos View -->
|
|
||||||
<div id="todo-view">
|
|
||||||
<span id="username"></span>
|
|
||||||
<input type="button" value="Logout" id="logout-button">
|
|
||||||
<div id="logout-error"></div>
|
|
||||||
|
|
||||||
<h1>To-Do List</h1>
|
|
||||||
<div id="todos"></div>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<p>Then, add code to handle click event and log out the user:</p>
|
|
||||||
|
|
||||||
<pre data-line="9-13,21-30,40">
|
|
||||||
<code class="language-markup">
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
.catch((e) => document.getElementById('signup-error').innerHTML = e)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleLogout() {
|
|
||||||
userbase.signOut()
|
|
||||||
.then(() => showAuth())
|
|
||||||
.catch((e) => document.getElementById('logout-error').innerText = e)
|
|
||||||
}
|
|
||||||
|
|
||||||
function showTodos(username) {
|
|
||||||
document.getElementById('auth-view').style.display = 'none'
|
|
||||||
document.getElementById('todo-view').style.display = 'block'
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
function showAuth() {
|
|
||||||
document.getElementById('todo-view').style.display = 'none'
|
|
||||||
document.getElementById('auth-view').style.display = 'block'
|
|
||||||
document.getElementById('login-username').value = ''
|
|
||||||
document.getElementById('login-password').value = ''
|
|
||||||
document.getElementById('login-error').innerText = ''
|
|
||||||
document.getElementById('signup-username').value = ''
|
|
||||||
document.getElementById('signup-password').value = ''
|
|
||||||
document.getElementById('signup-error').innerText = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDatabaseChange(items) {
|
|
||||||
const todosList = document.getElementById('todos')
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
document.getElementById('login-form').addEventListener('submit', handleLogin)
|
|
||||||
document.getElementById('signup-form').addEventListener('submit', handleSignUp)
|
|
||||||
document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
|
|
||||||
document.getElementById('logout-button').addEventListener('click', handleLogout)
|
|
||||||
|
|
||||||
document.getElementById('todo-view').style.display = 'none'
|
|
||||||
</script>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>The <code class="language-javascript">handleLogout</code> function calls <code class="language-javascript">userbase.signOut</code> which sends a request to end the user's session to the Userbase service. A Promise is returned that resolves when the user was signed out, in which case we hide the to-do view and show the authentication view.</p>
|
|
||||||
|
|
||||||
<h3>Automatically resuming a session</h3>
|
|
||||||
|
|
||||||
<p>Whenever a user logs in, the Userbase SDK will store information about the session in browser to allow the session to be resumed when the user returns after having navigating away.</p>
|
|
||||||
|
|
||||||
<p>Let's modify our app to automatically sign in a user when the page loads. We'll add a view that indicates we are signing in the user:</p>
|
|
||||||
|
|
||||||
<p>Add a view to show when the app is figuring out whether it can resume a previous session:</p>
|
|
||||||
|
|
||||||
<pre data-line="4-5">
|
|
||||||
<code class="language-markup">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- Loading View -->
|
|
||||||
<div id="loading-view">Loading...</div>
|
|
||||||
|
|
||||||
<!-- Auth View -->
|
|
||||||
<div id="auth-view">
|
|
||||||
<h1>Login</h1>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>In order to automatically resume a session if one is available, we add the following to our application code:</p>
|
|
||||||
|
|
||||||
<pre data-line="12-17">
|
|
||||||
<code class="language-markup">
|
|
||||||
<!-- application code -->
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
...
|
|
||||||
|
|
||||||
document.getElementById('login-form').addEventListener('submit', handleLogin)
|
|
||||||
document.getElementById('signup-form').addEventListener('submit', handleSignUp)
|
|
||||||
document.getElementById('add-todo-form').addEventListener('submit', addTodoHandler)
|
|
||||||
document.getElementById('logout-button').addEventListener('click', handleLogout)
|
|
||||||
|
|
||||||
document.getElementById('todo-view').style.display = 'none'
|
|
||||||
document.getElementById('auth-view').style.display = 'none'
|
|
||||||
|
|
||||||
userbase.signInWithSession()
|
|
||||||
.then((session) => session.user ? showTodos(session.user.username) : showAuth())
|
|
||||||
.catch(() => showAuth())
|
|
||||||
.finally(() => document.getElementById('loading-view').style.display = 'none')
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
We hide the authentication view initially, as we'll now only show it if an existing session can't be resumed.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
We make a call to <code class="language-javascript">userbase.signInWithSession</code> to attempt to sign in the user
|
|
||||||
using an existing session as soon as our app loads.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
The <code class="language-javascript">userbase.signInWithSession</code> function returns a Promise that resolves when the SDK has determined if it can reuse the previous session. If so, the user gets automatically logged in, and the <code class="language-javascript">session.user</code> object gets set. If there was no previous session, or the session cannot be resumed, the <code class="language-javascript">session.user</code> object will not be set.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
If <code class="language-javascript">userbase.signInWithSession</code> fails, we'll just send the user
|
|
||||||
to the sign in page regardless of the reason.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>What's next?</h3>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
In a real project you'll likely want a more sophisticated approach: for instance, you may use React to control the DOM or a module bundler to package your application from multiple files, and at the very
|
|
||||||
least you'll want to display better error messages and add some styling.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
We are working on a collection of tutorials and sample applications that will
|
|
||||||
show you how to do all these things with Userbase and more. You can <a href="/mailing-list">subscribe to our mailing list</a> to get updates on these and more.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>If you have any questions, or there's anything we can do to help you with your web app, please get in touch via <a href="mailto:daniel@encrypted.dev">email</a> or <a href="https://twitter.com/UserbaseHQ">Twitter</a>. Thank you!</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2><a href="/docs/#sdk">SDK</a> : Delete</h2>
|
|
||||||
|
|
||||||
<p><span class="font-semibold">Delete</span> lets you delete an item from a user's database. This API will return a promise that gets resolved once the item has been durably deleted from the database.</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript">userbase.delete(databaseName, itemId)
|
|
||||||
.then(() => {
|
|
||||||
// item deleted
|
|
||||||
})
|
|
||||||
.catch((e) => console.error(e))</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="params">Parameters</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">databaseName</span> [string | Len: 1-50] - The database name to use.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="field">itemId</span> [string | Len: 1-100] - The unique identifier of the item to delete.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="errors">Errors</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>DatabaseNotOpen</li>
|
|
||||||
<li>DatabaseNameCannotBeBlank</li>
|
|
||||||
<li>DatabaseNameTooLong</li>
|
|
||||||
<li>DatabaseNameMustBeString</li>
|
|
||||||
<li>ItemIdCannotBeBlank</li>
|
|
||||||
<li>ItemIdMustBeString</li>
|
|
||||||
<li>ItemDoesNotExist</li>
|
|
||||||
<li>ItemUpdateConflict</li>
|
|
||||||
<li>AppIdNotSet</li>
|
|
||||||
<li>AppIdNotValid</li>
|
|
||||||
<li>ServiceUnavailable</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2><a href="/docs/#sdk">SDK</a> : Insert</h2>
|
|
||||||
|
|
||||||
<p><span class="font-semibold">Insert</span> lets you add items to a user's database. This API will return a promise that gets resolved once the item has been durably inserted into the database.</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript">userbase.insert(databaseName, item, itemId)
|
|
||||||
.then(() => {
|
|
||||||
// item inserted
|
|
||||||
})
|
|
||||||
.catch((e) => console.error(e))</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="params">Parameters</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">databaseName</span> [string | Len: 1-50] - The database name to use.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="field">itemId</span> [string | Len: 1-100] - The item's unique identifier.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="field">item</span> [object | Max size: 10 KB] - The item to insert.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="errors">Errors</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>DatabaseNotOpen</li>
|
|
||||||
<li>DatabaseNameCannotBeBlank</li>
|
|
||||||
<li>DatabaseNameTooLong</li>
|
|
||||||
<li>DatabaseNameMustBeString</li>
|
|
||||||
<li>ItemIdCannotBeBlank</li>
|
|
||||||
<li>ItemIdTooLong</li>
|
|
||||||
<li>ItemIdMustBeString</li>
|
|
||||||
<li>ItemTooLarge</li>
|
|
||||||
<li>ItemAlreadyExists</li>
|
|
||||||
<li>AppIdNotSet</li>
|
|
||||||
<li>AppIdNotValid</li>
|
|
||||||
<li>ServiceUnavailable</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2><a href="/docs/#sdk">SDK</a> : OpenDatabase</h2>
|
|
||||||
|
|
||||||
<p><span class="font-semibold">OpenDatabase</span> lets you retrieve data stored by the users of your web app. You also need to have a database open before storing or modifying user data. This API will return a promise that gets resolved once the database becomes available for use.</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript">userbase.openDatabase(databaseName, changeHandler)
|
|
||||||
.then(() => {
|
|
||||||
// the database can now be used
|
|
||||||
})
|
|
||||||
.catch((e) => console.error(e))</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="params">Parameters</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">databaseName</span> [string | Len: 1-50] - The database name to use.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="field">changeHandler</span> [function] - A callback that gets invoked when the database gets modified.
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">items</span> [Array] - The full collection of items in the database, in insertion order.
|
|
||||||
<ul>
|
|
||||||
<li><span class="field">itemId</span> [string] - The item's unique identifier.</li>
|
|
||||||
<li><span class="field">item</span> [object] - The stored item.</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="errors">Errors</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>DatabaseAlreadyOpen</li>
|
|
||||||
<li>DatabaseNameCannotBeBlank</li>
|
|
||||||
<li>DatabaseNameTooLong</li>
|
|
||||||
<li>DatabaseNameMustBeString</li>
|
|
||||||
<li>ChangeHandlerMustBeFunction</li>
|
|
||||||
<li>AppIdNotSet</li>
|
|
||||||
<li>AppIdNotValid</li>
|
|
||||||
<li>ServiceUnavailable</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2><a href="/docs/#sdk">SDK</a> : SignInWithSession</h2>
|
|
||||||
|
|
||||||
<p><span class="font-semibold">SignInWithSession</span> lets you automatically log in a user using the last used session. This API will return a promise that gets resolved once the session has been validated. If the session is valid, the user gets automatically logged in.</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript">userbase.signInWithSession()
|
|
||||||
.then((session) => {
|
|
||||||
if (session.user) {
|
|
||||||
// there is a valid active session
|
|
||||||
console.log(session.user.username)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((e) => console.error(e))</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="result">Result</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">session</span> [object] - Contains information about the last used session.
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">user</span> [object] - If set, this contains information about the logged in user.
|
|
||||||
<ul>
|
|
||||||
<li><span class="field">username</span> [string] - The user's username.</li>
|
|
||||||
<li><span class="field">key</span> [string] - The user's encryption key.</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><span class="field">lastUsedUsername</span> [string] - If set, this is the username of the last user that was logged in.</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="errors">Errors</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>AppIdNotSet</li>
|
|
||||||
<li>AppIdNotValid</li>
|
|
||||||
<li>ServiceUnavailable</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2><a href="/docs/#sdk">SDK</a> : SignIn</h2>
|
|
||||||
|
|
||||||
<p><span class="font-semibold">SignIn</span> lets your users log into your web app. This API will return a promise that gets resolved once the user has been logged in.</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript">userbase.signIn(username, password)
|
|
||||||
.then((user) => {
|
|
||||||
// user logged in
|
|
||||||
})
|
|
||||||
.catch((e) => console.error(e))</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="params">Parameters</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">username</span> [string | Len: 1-50] - The username for the account to be created.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="field">password</span> [string | Len: 6-1000] - The password for the account to be created.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="result">Result</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">user</span> [object] - Contains information about the logged in user.
|
|
||||||
<ul>
|
|
||||||
<li><span class="field">username</span> [string] - The user's username.</li>
|
|
||||||
<li><span class="field">key</span> [string] - The user's encryption key.</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="errors">Errors</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>UsernameOrPasswordMismatch</li>
|
|
||||||
<li>UsernameCannotBeBlank</li>
|
|
||||||
<li>UsernameTooLong</li>
|
|
||||||
<li>UsernameMustBeString</li>
|
|
||||||
<li>PasswordCannotBeBlank</li>
|
|
||||||
<li>PasswordTooShort</li>
|
|
||||||
<li>PasswordTooLong</li>
|
|
||||||
<li>PasswordMustBeString</li>
|
|
||||||
<li>AppIdNotSet</li>
|
|
||||||
<li>AppIdNotValid</li>
|
|
||||||
<li>ServiceUnavailable</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2><a href="/docs/#sdk">SDK</a> : SignOut</h2>
|
|
||||||
|
|
||||||
<p><span class="font-semibold">SignOut</span> lets your users log out of your web app. This API will return a promise that gets resolved once the user has been logged out.</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript">userbase.signOut()
|
|
||||||
.then(() => {
|
|
||||||
// user logged out
|
|
||||||
})
|
|
||||||
.catch((e) => console.error(e))</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="errors">Errors</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>UserNotSignedIn</li>
|
|
||||||
<li>AppIdNotSet</li>
|
|
||||||
<li>AppIdNotValid</li>
|
|
||||||
<li>ServiceUnavailable</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2><a href="/docs/#sdk">SDK</a> : SignUp</h2>
|
|
||||||
|
|
||||||
<p><span class="font-semibold">SignUp</span> lets you create user accounts for your web app. This API will return a promise that gets resolved once the user account has been created.</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript">userbase.signUp(username, password)
|
|
||||||
.then((user) => {
|
|
||||||
// user account created
|
|
||||||
})
|
|
||||||
.catch((e) => console.error(e))</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="params">Parameters</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">username</span> [string | Len: 1-50] - The username for the account to be created.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="field">password</span> [string | Len: 6-1000] - The password for the account to be created.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="result">Result</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">user</span> [object] - Contains information about the new user.
|
|
||||||
<ul>
|
|
||||||
<li><span class="field">username</span> [string] - The user's username.</li>
|
|
||||||
<li><span class="field">key</span> [string] - The user's encryption key.</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="errors">Errors</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>UsernameAlreadyExists</li>
|
|
||||||
<li>UsernameCannotBeBlank</li>
|
|
||||||
<li>UsernameTooLong</li>
|
|
||||||
<li>UsernameMustBeString</li>
|
|
||||||
<li>PasswordCannotBeBlank</li>
|
|
||||||
<li>PasswordTooShort</li>
|
|
||||||
<li>PasswordTooLong</li>
|
|
||||||
<li>PasswordMustBeString</li>
|
|
||||||
<li>AppIdNotSet</li>
|
|
||||||
<li>AppIdNotValid</li>
|
|
||||||
<li>ServiceUnavailable</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2><a href="/docs/#sdk">SDK</a> : Transaction</h2>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript">userbase.transaction(databaseName, operations)
|
|
||||||
.then(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
.catch((e) => console.error(e))</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="params">Parameters</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">databaseName</span> [string | Len: 1-50] - The database name to use.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="field">operations</span> [Array] - The Insert, Update, or Delete operations to execute in an atomic transaction.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="errors">Errors</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>DatabaseNotOpen</li>
|
|
||||||
<li>DatabaseNameCannotBeBlank</li>
|
|
||||||
<li>DatabaseNameTooLong</li>
|
|
||||||
<li>DatabaseNameMustBeString</li>
|
|
||||||
<li>OperationsMustBeArray</li>
|
|
||||||
<li>ItemIdCannotBeBlank</li>
|
|
||||||
<li>ItemIdTooLong</li>
|
|
||||||
<li>ItemIdMustBeString</li>
|
|
||||||
<li>ItemTooLarge</li>
|
|
||||||
<li>ItemAlreadyExists</li>
|
|
||||||
<li>ItemDoesNotExist</li>
|
|
||||||
<li>ItemUpdateConflict</li>
|
|
||||||
<li>AppIdNotSet</li>
|
|
||||||
<li>AppIdNotValid</li>
|
|
||||||
<li>ServiceUnavailable</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
<div class="section">
|
|
||||||
<h2><a href="/docs/#sdk">SDK</a> : Update</h2>
|
|
||||||
|
|
||||||
<p><span class="font-semibold">Update</span> lets you modify an existing item in a user's database. This API will return a promise that gets resolved once the item has been durably updated in the database.</p>
|
|
||||||
|
|
||||||
<pre>
|
|
||||||
<code class="language-javascript">userbase.update(databaseName, item, itemId)
|
|
||||||
.then(() => {
|
|
||||||
// item updated
|
|
||||||
})
|
|
||||||
.catch((e) => console.error(e))</code>
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
<h3 id="params">Parameters</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span class="field">databaseName</span> [string | Len: 1-50] - The database name to use.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="field">itemId</span> [string | Len: 1-100] - The unique identifier of the item to replace.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span class="field">item</span> [object | Max size: 10 KB] - The object to overwrite the existing item with.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h3 id="errors">Errors</h3>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>DatabaseNotOpen</li>
|
|
||||||
<li>DatabaseNameCannotBeBlank</li>
|
|
||||||
<li>DatabaseNameTooLong</li>
|
|
||||||
<li>DatabaseNameMustBeString</li>
|
|
||||||
<li>ItemIdCannotBeBlank</li>
|
|
||||||
<li>ItemIdMustBeString</li>
|
|
||||||
<li>ItemTooLarge</li>
|
|
||||||
<li>ItemDoesNotExist</li>
|
|
||||||
<li>ItemUpdateConflict</li>
|
|
||||||
<li>AppIdNotSet</li>
|
|
||||||
<li>AppIdNotValid</li>
|
|
||||||
<li>ServiceUnavailable</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
@@ -1,7 +1,3 @@
|
|||||||
<div class="flex justify-center pb-4">
|
|
||||||
<a href="/"><img alt="Userbase" id="logo" src="../img/logo.png"></a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h1>Create <span class="highlight">secure</span> and <span class="highlight">GDPR-compliant</span> web apps using only static JavaScript, HTML, and CSS.</h1>
|
<h1>Create <span class="highlight">secure</span> and <span class="highlight">GDPR-compliant</span> web apps using only static JavaScript, HTML, and CSS.</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
14
src/partials/footer.html
Normal file
14
src/partials/footer.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<footer class="sm:flex sm:justify-between sm:items-center p-4 tracking-tight text-xs">
|
||||||
|
<div class="flex items-center justify-center sm:justify-between">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="flex items-center justify-between">Copyright © 2019 Encrypted Development LLC</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="pt-2 pb-4 sm:flex sm:p-0 text-center sm:text-right menu">
|
||||||
|
<a href="#" class="block py-2 leading-none sm:px-4">Policies</a>
|
||||||
|
<a href="#" class="block py-2 leading-none sm:px-2">Status</a>
|
||||||
|
<a href="http://github.com/encrypted-dev/userbase" class="block py-2 leading-none sm:px-2">GitHub</a>
|
||||||
|
<a href="https://twitter.com/UserbaseHQ" class="block py-2 leading-none sm:px-2">Twitter</a>
|
||||||
|
<a href="#" class="block py-2 leading-none sm:px-2">About</a>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
22
src/partials/header.html
Normal file
22
src/partials/header.html
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<header class="pb-4">
|
||||||
|
<div class="sm:flex sm:justify-end sm:items-center p-4">
|
||||||
|
<div class="flex items-center justify-end">
|
||||||
|
<div class="sm:hidden">
|
||||||
|
<button onclick="toggleMenu()" type="button" class="block text-blackish hover:text-orange-700 focus:text-orange-700 focus:outline-none">
|
||||||
|
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
|
||||||
|
<path class="hidden menu-close" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
|
||||||
|
<path class="menu-open" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="pt-2 pb-4 hidden sm:flex sm:p-0 text-lg text-center menu">
|
||||||
|
<a href="#" class="menu-item">Docs</a>
|
||||||
|
<a href="#" class="menu-item">Pricing</a>
|
||||||
|
<input type="button" value="Log in / Sign up" class="rounded-lg w-48 h-10 bg-yellowish font-black cursor-pointer text-gray-900 inline-block hover:text-orange-700 relative mt-2 ml-0 sm:ml-2 sm:mt-0" style="bottom: 3px;">
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center mb-2">
|
||||||
|
<a href="/"><img alt="Userbase" id="logo" src="../img/logo.png"></a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<div>
|
|
||||||
<a href="/"><img alt="Userbase" class="h-8" src="../img/logo-horizontal.png"></a>
|
|
||||||
</div>
|
|
||||||
355
src/prism.css
355
src/prism.css
@@ -1,355 +0,0 @@
|
|||||||
/* PrismJS 1.17.1
|
|
||||||
https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript&plugins=line-highlight+toolbar+unescaped-markup+normalize-whitespace+copy-to-clipboard */
|
|
||||||
/**
|
|
||||||
* prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
|
|
||||||
* Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
|
|
||||||
* @author Tim Shedor
|
|
||||||
*/
|
|
||||||
|
|
||||||
code[class*="language-"],
|
|
||||||
pre[class*="language-"] {
|
|
||||||
color: black;
|
|
||||||
background: none;
|
|
||||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
||||||
font-size: 1em;
|
|
||||||
text-align: left;
|
|
||||||
white-space: pre;
|
|
||||||
word-spacing: normal;
|
|
||||||
word-break: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
line-height: 1.5;
|
|
||||||
|
|
||||||
-moz-tab-size: 4;
|
|
||||||
-o-tab-size: 4;
|
|
||||||
tab-size: 4;
|
|
||||||
|
|
||||||
-webkit-hyphens: none;
|
|
||||||
-moz-hyphens: none;
|
|
||||||
-ms-hyphens: none;
|
|
||||||
hyphens: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Code blocks */
|
|
||||||
pre[class*="language-"] {
|
|
||||||
position: relative;
|
|
||||||
margin: .5em 0;
|
|
||||||
overflow: visible;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
pre[class*="language-"]>code {
|
|
||||||
position: relative;
|
|
||||||
border-left: 10px solid #358ccb;
|
|
||||||
box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
|
|
||||||
background-color: #fdfdfd;
|
|
||||||
background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
|
|
||||||
background-size: 3em 3em;
|
|
||||||
background-origin: content-box;
|
|
||||||
background-attachment: local;
|
|
||||||
}
|
|
||||||
|
|
||||||
code[class*="language"] {
|
|
||||||
max-height: inherit;
|
|
||||||
height: inherit;
|
|
||||||
padding: 0 1em;
|
|
||||||
display: block;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Margin bottom to accommodate shadow */
|
|
||||||
:not(pre) > code[class*="language-"],
|
|
||||||
pre[class*="language-"] {
|
|
||||||
background-color: #fdfdfd;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Inline code */
|
|
||||||
:not(pre) > code[class*="language-"] {
|
|
||||||
position: relative;
|
|
||||||
padding: .2em;
|
|
||||||
border-radius: 0.3em;
|
|
||||||
color: #c92c2c;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
display: inline;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"]:before,
|
|
||||||
pre[class*="language-"]:after {
|
|
||||||
content: '';
|
|
||||||
z-index: -2;
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0.75em;
|
|
||||||
left: 0.18em;
|
|
||||||
width: 40%;
|
|
||||||
height: 20%;
|
|
||||||
max-height: 13em;
|
|
||||||
box-shadow: 0px 13px 8px #979797;
|
|
||||||
-webkit-transform: rotate(-2deg);
|
|
||||||
-moz-transform: rotate(-2deg);
|
|
||||||
-ms-transform: rotate(-2deg);
|
|
||||||
-o-transform: rotate(-2deg);
|
|
||||||
transform: rotate(-2deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
:not(pre) > code[class*="language-"]:after,
|
|
||||||
pre[class*="language-"]:after {
|
|
||||||
right: 0.75em;
|
|
||||||
left: auto;
|
|
||||||
-webkit-transform: rotate(2deg);
|
|
||||||
-moz-transform: rotate(2deg);
|
|
||||||
-ms-transform: rotate(2deg);
|
|
||||||
-o-transform: rotate(2deg);
|
|
||||||
transform: rotate(2deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.comment,
|
|
||||||
.token.block-comment,
|
|
||||||
.token.prolog,
|
|
||||||
.token.doctype,
|
|
||||||
.token.cdata {
|
|
||||||
color: #7D8B99;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.punctuation {
|
|
||||||
color: #5F6364;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.property,
|
|
||||||
.token.tag,
|
|
||||||
.token.boolean,
|
|
||||||
.token.number,
|
|
||||||
.token.function-name,
|
|
||||||
.token.constant,
|
|
||||||
.token.symbol,
|
|
||||||
.token.deleted {
|
|
||||||
color: #c92c2c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.selector,
|
|
||||||
.token.attr-name,
|
|
||||||
.token.string,
|
|
||||||
.token.char,
|
|
||||||
.token.function,
|
|
||||||
.token.builtin,
|
|
||||||
.token.inserted {
|
|
||||||
color: #2f9c0a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.operator,
|
|
||||||
.token.entity,
|
|
||||||
.token.url,
|
|
||||||
.token.variable {
|
|
||||||
color: #a67f59;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.atrule,
|
|
||||||
.token.attr-value,
|
|
||||||
.token.keyword,
|
|
||||||
.token.class-name {
|
|
||||||
color: #1990b8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.regex,
|
|
||||||
.token.important {
|
|
||||||
color: #e90;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-css .token.string,
|
|
||||||
.style .token.string {
|
|
||||||
color: #a67f59;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.important {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.bold {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.token.italic {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.entity {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
.namespace {
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 767px) {
|
|
||||||
pre[class*="language-"]:before,
|
|
||||||
pre[class*="language-"]:after {
|
|
||||||
bottom: 14px;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Plugin styles */
|
|
||||||
.token.tab:not(:empty):before,
|
|
||||||
.token.cr:before,
|
|
||||||
.token.lf:before {
|
|
||||||
color: #e0d7d1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Plugin styles: Line Numbers */
|
|
||||||
pre[class*="language-"].line-numbers.line-numbers {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"].line-numbers.line-numbers code {
|
|
||||||
padding-left: 3.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Plugin styles: Line Highlight */
|
|
||||||
pre[class*="language-"][data-line] {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
pre[data-line] code {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 4em;
|
|
||||||
}
|
|
||||||
pre .line-highlight {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[data-line] {
|
|
||||||
position: relative;
|
|
||||||
padding: 1em 0 1em 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-highlight {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: inherit 0;
|
|
||||||
margin-top: 1em; /* Same as .prism’s padding-top */
|
|
||||||
|
|
||||||
background: hsla(24, 20%, 50%,.08);
|
|
||||||
background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
|
|
||||||
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
line-height: inherit;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-highlight:before,
|
|
||||||
.line-highlight[data-end]:after {
|
|
||||||
content: attr(data-start);
|
|
||||||
position: absolute;
|
|
||||||
top: .4em;
|
|
||||||
left: .6em;
|
|
||||||
min-width: 1em;
|
|
||||||
padding: 0 .5em;
|
|
||||||
background-color: hsla(24, 20%, 50%,.4);
|
|
||||||
color: hsl(24, 20%, 95%);
|
|
||||||
font: bold 65%/1.5 sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: .3em;
|
|
||||||
border-radius: 999px;
|
|
||||||
text-shadow: none;
|
|
||||||
box-shadow: 0 1px white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-highlight[data-end]:after {
|
|
||||||
content: attr(data-end);
|
|
||||||
top: auto;
|
|
||||||
bottom: .4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-numbers .line-highlight:before,
|
|
||||||
.line-numbers .line-highlight:after {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar {
|
|
||||||
position: absolute;
|
|
||||||
top: .3em;
|
|
||||||
right: .2em;
|
|
||||||
transition: opacity 0.3s ease-in-out;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar:hover > .toolbar {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Separate line b/c rules are thrown out if selector is invalid.
|
|
||||||
IE11 and old Edge versions don't support :focus-within. */
|
|
||||||
div.code-toolbar:focus-within > .toolbar {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar .toolbar-item {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar a {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar button {
|
|
||||||
background: none;
|
|
||||||
border: 0;
|
|
||||||
color: inherit;
|
|
||||||
font: inherit;
|
|
||||||
line-height: normal;
|
|
||||||
overflow: visible;
|
|
||||||
padding: 0;
|
|
||||||
-webkit-user-select: none; /* for button */
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar a,
|
|
||||||
div.code-toolbar > .toolbar button,
|
|
||||||
div.code-toolbar > .toolbar span {
|
|
||||||
color: #bbb;
|
|
||||||
font-size: .8em;
|
|
||||||
padding: 0 .5em;
|
|
||||||
background: #f5f2f0;
|
|
||||||
background: rgba(224, 224, 224, 0.2);
|
|
||||||
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
|
|
||||||
border-radius: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.code-toolbar > .toolbar a:hover,
|
|
||||||
div.code-toolbar > .toolbar a:focus,
|
|
||||||
div.code-toolbar > .toolbar button:hover,
|
|
||||||
div.code-toolbar > .toolbar button:focus,
|
|
||||||
div.code-toolbar > .toolbar span:hover,
|
|
||||||
div.code-toolbar > .toolbar span:focus {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fallback, in case JS does not run, to ensure the code is at least visible */
|
|
||||||
[class*='lang-'] script[type='text/plain'],
|
|
||||||
[class*='language-'] script[type='text/plain'],
|
|
||||||
script[type='text/plain'][class*='lang-'],
|
|
||||||
script[type='text/plain'][class*='language-'] {
|
|
||||||
display: block;
|
|
||||||
font: 100% Consolas, Monaco, monospace;
|
|
||||||
white-space: pre;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
12
src/prism.js
12
src/prism.js
File diff suppressed because one or more lines are too long
@@ -53,11 +53,7 @@ h2 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
@apply font-bold text-xl tracking-tight mt-4;
|
@apply font-bold text-xl tracking-tight;
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
@apply font-bold text-xl tracking-tight mt-3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@screen sm {
|
@screen sm {
|
||||||
@@ -66,22 +62,12 @@ h4 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@apply text-4xl;
|
@apply text-5xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
@apply text-3xl;
|
@apply text-3xl;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
|
||||||
@apply text-2xl;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@screen lg {
|
|
||||||
h2 {
|
|
||||||
@apply text-5xl;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@@ -114,54 +100,4 @@ ul {
|
|||||||
background-image: linear-gradient(119deg, rgb(255, 255, 255), rgb(255, 246, 151) 10.5%, #fdf59d 85.29%, #ffffff);
|
background-image: linear-gradient(119deg, rgb(255, 255, 255), rgb(255, 246, 151) 10.5%, #fdf59d 85.29%, #ffffff);
|
||||||
}
|
}
|
||||||
|
|
||||||
.field {
|
|
||||||
@apply font-semibold
|
|
||||||
}
|
|
||||||
|
|
||||||
a.anchor {
|
|
||||||
@apply block relative;
|
|
||||||
top: -50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"]:before, pre[class*="language-"]:after {
|
|
||||||
content: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"], :not(pre) > code[class*="language-"], pre[class*="language-"] {
|
|
||||||
line-height: 24px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
code[class*="language"] {
|
|
||||||
padding-top: 16px;
|
|
||||||
padding-bottom: 16px;
|
|
||||||
margin-top: 1em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[class*="language-"]>code {
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
box-shadow: none;
|
|
||||||
background-image: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-highlight:before, .line-highlight[data-end]:after {
|
|
||||||
content: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre[data-line] code {
|
|
||||||
padding-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre .line-highlight {
|
|
||||||
margin-top: 16px;
|
|
||||||
background-image: none;
|
|
||||||
background-color: rgba(0, 255, 0, 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.token.operator, .token.entity, .token.url, .token.variable {
|
|
||||||
color: #ff8000;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|||||||
@@ -8,41 +8,10 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="sticky top-0 bg-white z-50">
|
<%= require('html-loader!./partials/' + header + '.html') %>
|
||||||
<div class="sm:flex sm:justify-between sm:items-center py-2 px-4">
|
|
||||||
<div class="flex items-center justify-between h-10">
|
|
||||||
<div class="flex-shrink-0">
|
|
||||||
<%= page !== 'index' ? require('html-loader!./partials/logo.html') : null %>
|
|
||||||
</div>
|
|
||||||
<div class="sm:hidden">
|
|
||||||
<button onclick="toggleMenu()" type="button" class="block text-blackish hover:text-orange-700 focus:text-orange-700 focus:outline-none">
|
|
||||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
|
|
||||||
<path class="hidden menu-close" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
|
|
||||||
<path class="menu-open" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<nav class="pt-2 pb-4 hidden sm:flex sm:p-0 text-lg text-center menu">
|
|
||||||
<a href="/docs" class="menu-item">Docs</a>
|
|
||||||
<a href="/mailing-list" class="menu-item">Mailing list</a>
|
|
||||||
<a href="mailto:daniel@encrypted.dev" class="menu-item">Contact</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div class="container mx-auto max-w-4xl px-4">
|
<div class="container mx-auto max-w-4xl px-4">
|
||||||
<%= require('html-loader!./pages/' + page + '.html') %>
|
<%= require('html-loader!./pages/' + page + '.html') %>
|
||||||
<footer class="text-center py-4 tracking-tight text-sm">
|
<%= require('html-loader!./partials/' + footer + '.html') %>
|
||||||
<div>
|
|
||||||
<nav class="pt-2 pb-4 text-center menu">
|
|
||||||
<a href="http://github.com/encrypted-dev/userbase" class="py-2 leading-none px-2">GitHub</a>
|
|
||||||
<a href="https://twitter.com/UserbaseHQ" class="py-2 leading-none px-2">Twitter</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="text-gray-500 text-xs">
|
|
||||||
Copyright © 2019 Encrypted Development LLC
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@@ -3,17 +3,16 @@ module.exports = {
|
|||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
yellowish: '#ffe77a',
|
yellowish: '#ffe77a',
|
||||||
blackish: '#1a2a30',
|
blackish: '#1a2a30'
|
||||||
blue: '#358ccb'
|
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
'72': '18rem',
|
'72': '18rem',
|
||||||
'84': '21rem',
|
'84': '21rem',
|
||||||
'96': '24rem'
|
'96': '24rem'
|
||||||
},
|
|
||||||
fontFamily: {
|
|
||||||
'logo': 'Tahoma, Geneva, Verdana, sans-serif'
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
'logo': 'Tahoma, Geneva, Verdana, sans-serif'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
variants: {},
|
variants: {},
|
||||||
|
|||||||
@@ -15,22 +15,10 @@ module.exports = (env, argv) => {
|
|||||||
const pages = []
|
const pages = []
|
||||||
|
|
||||||
fs.readdirSync('./src/pages/').forEach(file => {
|
fs.readdirSync('./src/pages/').forEach(file => {
|
||||||
const page = file.split('.')[0]
|
|
||||||
let filename = './'
|
|
||||||
|
|
||||||
if (page !== 'index') {
|
|
||||||
const pagePath = page.split('_')
|
|
||||||
for (let i = 0; i < pagePath.length; i++) {
|
|
||||||
filename += pagePath[i] + '/'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
filename += 'index.html'
|
|
||||||
|
|
||||||
pages.push(new HtmlWebPackPlugin({
|
pages.push(new HtmlWebPackPlugin({
|
||||||
template: './src/template.html',
|
template: './src/template.html',
|
||||||
filename,
|
filename: './' + file,
|
||||||
templateParameters() { return { page } }
|
templateParameters() { return { header: 'header', footer: 'footer', page: file.split('.')[0] } }
|
||||||
}))
|
}))
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -105,8 +93,10 @@ module.exports = (env, argv) => {
|
|||||||
|
|
||||||
config.devServer = {
|
config.devServer = {
|
||||||
watchContentBase: true,
|
watchContentBase: true,
|
||||||
|
historyApiFallback: true,
|
||||||
hot: true,
|
hot: true,
|
||||||
inline: true,
|
inline: true,
|
||||||
|
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
port: 3000
|
port: 3000
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user