Skip to content

Commit 6c353da

Browse files
chase-moskalchase-moskal
committed
merge: sly upgrade
2 parents a0e6340 + 02d028b commit 6c353da

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+361
-365
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@
88

99
## v0.2
1010

11+
### v0.2.0-33
12+
- 🔶 upgrade from `@benev/slate` to `@e280/sly`+`@e280/strata`
13+
- 🟥 remove <auth-button> and <auth-user> js element instance properties like `.auth` and `.on`
14+
- now these are only accessible via the `auth` object they're installed with
15+
16+
### v0.2.0-32
17+
- 🍏 update dependencies
18+
1119
### v0.2.0-31
1220
- 🟥 remove `Time` util (moved to `@e280/stz`)
1321

‎README.md‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -104,19 +104,6 @@ It's a "Login" button, that when clicked, spawns an Authlocal popup.
104104

105105
When the user is logged in, the button changes to a "Logout" button, which when clicked, will log the user out.
106106

107-
In javascript you can listen for logins/logouts via the button like this:
108-
```js
109-
const authButton = document.querySelector("auth-button")
110-
111-
authButton.on(login => console.log("auth", login))
112-
// 👆
113-
// listen to *this* specific button
114-
115-
authButton.auth.on(login => console.log("auth", login))
116-
// 👆
117-
// listen to *any* button
118-
```
119-
120107
### auth-user
121108

122109
![](https://i.imgur.com/EzWVjva.png)

‎TODO.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11

22
# authlocal todo
3-
- [ ] extract `Time` util into `@e280/stz`
4-
- [ ] consider adding a dedicated "edit passport" flow -- instead of logging in, you jump straight to editing and re-logging-in
5-
- [ ] improved story about how the ui behaves when tokens expire
6-
- [ ] users (not devs) can choose how long to authorize an app (1-hour, 24-hours, 7-days)
3+
- add a dedicated "edit passport" flow -- instead of logging in, you jump straight to editing and re-logging-in
4+
- improved story about how the ui behaves when tokens expire
5+
- users (not devs) can choose how long to authorize an app (1-hour, 24-hours, 7-days)
76

‎package-lock.json‎

Lines changed: 47 additions & 43 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,13 @@
1515
"./mock": "./x/exports.mock.js"
1616
},
1717
"dependencies": {
18-
"@benev/slate": "^0.3.10",
19-
"@e280/kv": "^0.0.0-13",
20-
"@e280/renraku": "^0.5.0-30",
21-
"@e280/science": "^0.0.6",
22-
"@e280/sly": "^0.0.1",
23-
"@e280/strata": "^0.0.1",
24-
"@e280/stz": "^0.0.0",
25-
"@noble/ed25519": "^2.3.0",
18+
"@e280/kv": "^0.1.0",
19+
"@e280/renraku": "^0.5.0",
20+
"@e280/science": "^0.1.2",
21+
"@e280/sly": "^0.2.0-3",
22+
"@e280/strata": "^0.2.0-6",
23+
"@e280/stz": "^0.2.0",
24+
"@noble/ed25519": "^3.0.0",
2625
"lit": "^3.3.1"
2726
},
2827
"devDependencies": {

‎s/app/auth.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11

22
import {sub} from "@e280/stz"
3-
import {signal} from "@benev/slate"
3+
import {signal} from "@e280/strata"
44

55
import {AuthOptions} from "./types.js"
66
import {defaults} from "./parts/defaults.js"
77
import {AuthStores} from "./parts/stores.js"
88
import {Login} from "../trust/exports/app.js"
99
import {openPopup} from "./parts/open-popup.js"
10-
import {setupInApp} from "../trust/postmessage/setup-in-app.js"
1110
import {Session} from "../trust/exports/authority.js"
1211
import {nullcatch} from "../common/utils/nullcatch.js"
12+
import {setupInApp} from "../trust/postmessage/setup-in-app.js"
1313

1414
/**
1515
* Authlocal's page-level auth control center.
@@ -55,13 +55,14 @@ export class Auth {
5555

5656
/** Set the login state manually, saving it to storage */
5757
async saveLogin(login: Login | null) {
58-
const login2 = await this.#setStoredLogin(login)
59-
return this.#updateLoginSignal(login2)
58+
await this.#setStoredLogin(login)
59+
return this.#updateLoginSignal(login)
6060
}
6161

6262
/** Shortcut for `saveLogin(null)` */
6363
async logout() {
64-
return this.saveLogin(null)
64+
await this.saveLogin(null)
65+
return null
6566
}
6667

6768
/** The current login state, either a `Login` object, or null if logged out */

‎s/app/elements/auth-button/element.ts‎

Lines changed: 34 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,42 @@
11

2-
import {sub} from "@e280/stz"
3-
import {TemplateResult, attributes, html, mixin} from "@benev/slate"
4-
2+
import {html} from "lit"
3+
import {view} from "@e280/sly"
4+
import {Auth} from "../../auth.js"
55
import stylesCss from "./styles.css.js"
6-
import {AuthElement} from "../framework.js"
7-
import {Login} from "../../../trust/exports/app.js"
86

9-
@mixin.css(stylesCss)
10-
export class AuthButton extends AuthElement {
11-
attrs = attributes(this, {
12-
"src": String,
13-
})
7+
export const AuthButton = (auth: Auth) => view.component(use => {
8+
use.css(stylesCss)
9+
const attrs = use.attrs({src: String})
1410

15-
on = sub<[Login | null]>()
11+
async function clickLogout() {
12+
await auth.logout()
13+
}
1614

17-
#clickLogout = async() => this.on.pub(
18-
await this.auth.logout()
19-
)
15+
async function clickLogin() {
16+
await auth.popup(attrs.src)
17+
}
2018

21-
#clickLogin = async() => this.on.pub(
22-
await this.auth.popup(this.attrs.src)
19+
return (auth.login
20+
21+
? html`
22+
<button
23+
class=logout
24+
theme-button=logout
25+
part="button button-logout"
26+
@click="${clickLogout}">
27+
<slot name=logout>Logout</slot>
28+
</button>
29+
`
30+
31+
: html`
32+
<button
33+
class=login
34+
theme-button=login
35+
part="button button-login"
36+
@click="${clickLogin}">
37+
<slot>Login</slot>
38+
</button>
39+
`
2340
)
24-
25-
render(): TemplateResult {
26-
const {auth} = this
27-
const {login} = auth
28-
return login
29-
30-
? html`
31-
<button
32-
class=logout
33-
theme-button=logout
34-
part="button button-logout"
35-
@click="${this.#clickLogout}">
36-
<slot name=logout>Logout</slot>
37-
</button>
38-
`
39-
40-
: html`
41-
<button
42-
class=login
43-
theme-button=login
44-
part="button button-login"
45-
@click="${this.#clickLogin}">
46-
<slot>Login</slot>
47-
</button>
48-
`
49-
}
50-
}
41+
})
5142

‎s/app/elements/auth-button/styles.css.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import {css} from "@benev/slate"
2+
import {css} from "lit"
33
export default css`
44
55
:host {

‎s/app/elements/auth-user/element.ts‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,27 @@
11

2-
import {html, mixin, svgSlate} from "@benev/slate"
3-
4-
import stylesCss from "./styles.css.js"
5-
import userIcon from "../../../common/icons/tabler/user.icon.js"
6-
7-
import {AuthElement} from "../framework.js"
2+
import {html} from "lit"
3+
import {view} from "@e280/sly"
4+
import {Auth} from "../../auth.js"
5+
import {svgLit} from "../../../tools/svg-lit.js"
86
import {idHsl} from "../../../common/utils/id-hue.js"
7+
import userIcon from "../../../common/icons/tabler/user.icon.js"
98

10-
@mixin.css(stylesCss)
11-
export class AuthUser extends AuthElement {
12-
13-
render() {
14-
const {login} = this.auth
15-
16-
if (!login)
17-
return html``
9+
export const AuthUser = (auth: Auth) => view.component(_use => {
10+
if (!auth.login)
11+
return html``
1812

19-
const {id, label} = login.nametag
13+
const {id, label} = auth.login.nametag
2014

21-
return html`
22-
<div part=shell>
23-
<div class=icon style="color: ${idHsl(id)};">
24-
${svgSlate(userIcon)}
25-
</div>
26-
<div class=box>
27-
<div part=label>${label}</div>
28-
<auth-sigil part=id hex="${id}"></auth-sigil>
29-
</div>
15+
return html`
16+
<div part=shell>
17+
<div class=icon style="color: ${idHsl(id)};">
18+
${svgLit(userIcon)}
19+
</div>
20+
<div class=box>
21+
<div part=label>${label}</div>
22+
<auth-sigil part=id hex="${id}"></auth-sigil>
3023
</div>
31-
`
32-
}
33-
}
24+
</div>
25+
`
26+
})
3427

0 commit comments

Comments
 (0)