Merge branch 'thirdroom/dev' into bwindels/calls

This commit is contained in:
Robert Long 2022-09-26 10:27:25 -07:00 committed by GitHub
commit a1f91d932c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
94 changed files with 3851 additions and 787 deletions

View File

@ -23,6 +23,9 @@ jobs:
- name: Checkout repository - name: Checkout repository
uses: actions/checkout@v2 uses: actions/checkout@v2
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v1
- name: Log into registry ${{ env.REGISTRY }} - name: Log into registry ${{ env.REGISTRY }}
uses: docker/login-action@v1 uses: docker/login-action@v1
with: with:
@ -39,6 +42,7 @@ jobs:
- name: Build and push Docker image - name: Build and push Docker image
uses: docker/build-push-action@v2 uses: docker/build-push-action@v2
with: with:
platforms: linux/amd64,linux/arm64,linux/arm/v7
push: ${{ github.event_name != 'pull_request' }} push: ${{ github.event_name != 'pull_request' }}
tags: ${{ steps.meta.outputs.tags }} tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }} labels: ${{ steps.meta.outputs.labels }}

View File

@ -19,6 +19,7 @@ module.exports = {
], ],
rules: { rules: {
"@typescript-eslint/no-floating-promises": 2, "@typescript-eslint/no-floating-promises": 2,
"@typescript-eslint/no-misused-promises": 2 "@typescript-eslint/no-misused-promises": 2,
"semi": ["error", "always"]
} }
}; };

View File

@ -1,9 +1,30 @@
FROM docker.io/node:alpine as builder FROM --platform=${BUILDPLATFORM} docker.io/library/node:16.13-alpine3.15 as builder
RUN apk add --no-cache git python3 build-base RUN apk add --no-cache git python3 build-base
COPY . /app
WORKDIR /app WORKDIR /app
RUN yarn install \
&& yarn build
FROM docker.io/nginx:alpine # Install the dependencies first
COPY yarn.lock package.json ./
RUN yarn install
# Copy the rest and build the app
COPY . .
RUN yarn build
# Remove the default config, replace it with a symlink to somewhere that will be updated at runtime
RUN rm -f target/config.json \
&& ln -sf /tmp/config.json target/config.json
FROM --platform=${TARGETPLATFORM} docker.io/nginxinc/nginx-unprivileged:1.21-alpine
# Copy the config template as well as the templating script
COPY ./docker/config.json.tmpl /config.json.tmpl
COPY ./docker/config-template.sh /docker-entrypoint.d/99-config-template.sh
# Copy the built app from the first build stage
COPY --from=builder /app/target /usr/share/nginx/html COPY --from=builder /app/target /usr/share/nginx/html
# Values from the default config that can be overridden at runtime
ENV PUSH_APP_ID="io.element.hydrogen.web" \
PUSH_GATEWAY_URL="https://matrix.org" \
PUSH_APPLICATION_SERVER_KEY="BC-gpSdVHEXhvHSHS0AzzWrQoukv2BE7KzpoPO_FfPacqOo3l1pdqz7rSgmB04pZCWaHPz7XRe6fjLaC-WPDopM" \
DEFAULT_HOMESERVER="matrix.org"

11
doc/IMPORT-ISSUES.md Normal file
View File

@ -0,0 +1,11 @@
## How to import common-js dependency using ES6 syntax
---
Until [#6632](https://github.com/vitejs/vite/issues/6632) is fixed, such imports should be done as follows:
```ts
import * as pkg from "off-color";
// @ts-ignore
const offColor = pkg.offColor ?? pkg.default.offColor;
```
This way build, dev server and unit tests should all work.

View File

@ -167,3 +167,38 @@ To find the theme-id of some theme, you can look at the built-asset section of t
This default theme will render as "Default" option in the theme-chooser dropdown. If the device preference is for dark theme, the dark default is selected and vice versa. This default theme will render as "Default" option in the theme-chooser dropdown. If the device preference is for dark theme, the dark default is selected and vice versa.
**You'll need to reload twice so that Hydrogen picks up the config changes!** **You'll need to reload twice so that Hydrogen picks up the config changes!**
# Derived Theme(Collection)
This allows users to theme Hydrogen without the need for rebuilding. Derived theme collections can be thought of as extensions (derivations) of some existing build time theme.
## Creating a derived theme:
Here's how you create a new derived theme:
1. You create a new theme manifest file (eg: theme-awesome.json) and mention which build time theme you're basing your new theme on using the `extends` field. The base css file of the mentioned theme is used for your new theme.
2. You configure the theme manifest as usual by populating the `variants` field with your desired colors.
3. You add your new theme manifest to the list of themes in `config.json`.
Refresh Hydrogen twice (once to refresh cache, and once to load) and the new theme should show up in the theme chooser.
## How does it work?
For every theme collection in hydrogen, the build process emits a runtime css file which like the built theme css file contains variables in the css code. But unlike the theme css file, the runtime css file lacks the definition for these variables:
CSS for the built theme:
```css
:root {
--background-color-primary: #f2f20f;
}
body {
background-color: var(--background-color-primary);
}
```
and the corresponding runtime theme:
```css
/* Notice the lack of definiton for --background-color-primary here! */
body {
background-color: var(--background-color-primary);
}
```
When hydrogen loads a derived theme, it takes the runtime css file of the extended theme and dynamically adds the variable definition based on the values specified in the manifest. Icons are also colored dynamically and injected as variables using Data URIs.

206
doc/UI/ui.md Normal file
View File

@ -0,0 +1,206 @@
## IView components
The [interface](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/types.ts) adopted by view components is agnostic of how they are rendered to the DOM. This has several benefits:
- it allows Hydrogen to not ship a [heavy view framework](https://bundlephobia.com/package/react-dom@18.2.0) that may or may not be used by its SDK users, and also keep bundle size of the app down.
- Given the interface is quite simple, is should be easy to integrate this interface into the render lifecycle of other frameworks.
- The main implementations used in Hydrogen are [`ListView`](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/ListView.ts) (rendering [`ObservableList`](https://github.com/vector-im/hydrogen-web/blob/master/src/observable/list/BaseObservableList.ts)s) and [`TemplateView`](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/TemplateView.ts) (templating and one-way databinding), each only a few 100 lines of code and tailored towards their specific use-case. They work straight with the DOM API and have no other dependencies.
- a common inteface allows us to mix and match between these different implementations (and gradually shift if need be in the future) with the code.
## Templates
### Template language
Templates use a mini-DSL language in pure javascript to express declarative templates. This is basically a very thin wrapper around `document.createElement`, `document.createTextNode`, `node.setAttribute` and `node.appendChild` to quickly create DOM trees. The general syntax is as follows:
```js
t.tag_name({attribute1: value, attribute2: value, ...}, [child_elements]);
t.tag_name(child_element);
t.tag_name([child_elements]);
```
**tag_name** can be [most HTML or SVG tags](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/html.ts#L102-L110).
eg:
Here is an example HTML segment followed with the code to create it in Hydrogen.
```html
<section class="main-section">
<h1>Demo</h1>
<button class="btn_cool">Click me</button>
</section>
```
```js
t.section({className: "main-section"},[
t.h1("Demo"),
t.button({className:"btn_cool"}, "Click me")
]);
```
All these functions return DOM element nodes, e.g. the result of `document.createElement`.
### TemplateView
`TemplateView` builds on top of templating by adopting the IView component model and adding event handling attributes, sub views and one-way databinding.
In views based on `TemplateView`, you will see a render method with a `t` argument.
`t` is `TemplateBuilder` object passed to the render function in `TemplateView`. It also takes a data object to render and bind to, often called `vm`, short for view model from the MVVM pattern Hydrogen uses.
You either subclass `TemplateView` and override the `render` method:
```js
class MyView extends TemplateView {
render(t, vm) {
return t.div(...);
}
}
```
Or you pass a render function to `InlineTemplateView`:
```js
new InlineTemplateView(vm, (t, vm) => {
return t.div(...);
});
```
**Note:** the render function is only called once to build the initial DOM tree and setup bindings, etc ... Any subsequent updates to the DOM of a component happens through bindings.
#### Event handlers
Any attribute starting with `on` and having a function as a value will be attached as an event listener on the given node. The event handler will be removed during unmounting.
```js
t.button({onClick: evt => {
vm.doSomething(evt.target.value);
}}, "Click me");
```
#### Subviews
`t.view(instance)` will mount the sub view (can be any IView) and return its root node so it can be attached in the DOM tree.
All subviews will be unmounted when the parent view gets unmounted.
```js
t.div({className: "Container"}, t.view(new ChildView(vm.childViewModel)));
```
#### One-way data-binding
A binding couples a part of the DOM to a value on the view model. The view model emits an update when any of its properties change, to which the view can subscribe. When an update is received by the view, it will reevaluate all the bindings, and update the DOM accordingly.
A binding can appear in many places where a static value can usually be used in the template tree.
To create a binding, you pass a function that maps the view value to a static value.
##### Text binding
```js
t.p(["I've got ", vm => vm.counter, " beans"])
```
##### Attribute binding
```js
t.button({disabled: vm => vm.isBusy}, "Submit");
```
##### Class-name binding
```js
t.div({className: {
button: true,
active: vm => vm.isActive
}})
```
##### Subview binding
So far, all the bindings can only change node values within our tree, but don't change the structure of the DOM. A sub view binding allows you to conditionally add a subview based on the result of a binding function.
All sub view bindings return a DOM (element or comment) node and can be directly added to the DOM tree by including them in your template.
###### map
`t.mapView` allows you to choose a view based on the result of the binding function:
```js
t.mapView(vm => vm.count, count => {
return count > 5 ? new LargeView(count) : new SmallView(count);
});
```
Every time the first or binding function returns a different value, the second function is run to create a new view to replace the previous view.
You can also return `null` or `undefined` from the second function to indicate a view should not be rendered. In this case a comment node will be used as a placeholder.
There is also a `t.map` which will create a new template view (with the same value) and you directly provide a render function for it:
```js
t.map(vm => vm.shape, (shape, t, vm) => {
switch (shape) {
case "rect": return t.rect();
case "circle": return t.circle();
}
})
```
###### if
`t.ifView` will render the subview if the binding returns a truthy value:
```js
t.ifView(vm => vm.isActive, vm => new View(vm.someValue));
```
You equally have `t.if`, which creates a `TemplateView` and passes you the `TemplateBuilder`:
```js
t.if(vm => vm.isActive, (t, vm) => t.div("active!"));
```
##### Side-effects
Sometimes you want to imperatively modify your DOM tree based on the value of a binding.
`mapSideEffect` makes this easy to do:
```js
let node = t.div();
t.mapSideEffect(vm => vm.color, (color, oldColor) => node.style.background = color);
return node;
```
**Note:** you shouldn't add any bindings, subviews or event handlers from the side-effect callback,
the safest is to not use the `t` argument at all.
If you do, they will be added every time the callback is run and only cleaned up when the view is unmounted.
#### `tag` vs `t`
If you don't need a view component with data-binding, sub views and event handler attributes, the template language also is available in `ui/general/html.js` without any of these bells and whistles, exported as `tag`. As opposed to static templates with `tag`, you always use
`TemplateView` as an instance of a class, as there is some extra state to keep track (bindings, event handlers and subviews).
Although syntactically similar, `TemplateBuilder` and `tag` are not functionally equivalent.
Primarily `t` **supports** bindings and event handlers while `tag` **does not**. This is because to remove event listeners, we need to keep track of them, and thus we need to keep this state somewhere which
we can't do with a simple function call but we can insite the TemplateView class.
```js
// The onClick here wont work!!
tag.button({className:"awesome-btn", onClick: () => this.foo()});
class MyView extends TemplateView {
render(t, vm){
// The onClick works here.
t.button({className:"awesome-btn", onClick: () => this.foo()});
}
}
```
## ListView
A view component that renders and updates a list of sub views for every item in a `ObservableList`.
```js
const list = new ListView({
list: someObservableList
}, listValue => return new ChildView(listValue))
```
As items are added, removed, moved (change position) and updated, the DOM will be kept in sync.
There is also a `LazyListView` that only renders items in and around the current viewport, with the restriction that all items in the list must be rendered with the same height.
### Sub view updates
Unless the `parentProvidesUpdates` option in the constructor is set to `false`, the ListView will call the `update` method on the child `IView` component when it receives an update event for one of the items in the `ObservableList`.
This way, not every sub view has to have an individual listener on it's view model (a value from the observable list), and all updates go from the observable list to the list view, who then notifies the correct sub view.

View File

@ -35,15 +35,17 @@ To stop the container, simply hit `ctrl+c`.
In this repository, create a Docker image: In this repository, create a Docker image:
``` ```sh
# Enable BuildKit https://docs.docker.com/develop/develop-images/build_enhancements/
export DOCKER_BUILDKIT=1
docker build -t hydrogen . docker build -t hydrogen .
``` ```
Or, pull the docker image from GitLab: Or, pull the Docker image the GitHub Container Registry:
``` ```
docker pull registry.gitlab.com/jcgruenhage/hydrogen-web docker pull ghcr.io/vector-im/hydrogen
docker tag registry.gitlab.com/jcgruenhage/hydrogen-web hydrogen docker tag ghcr.io/vector-im/hydrogen hydrogen
``` ```
### Start container image ### Start container image
@ -53,6 +55,6 @@ Then, start up a container from that image:
``` ```
docker run \ docker run \
--name hydrogen \ --name hydrogen \
--publish 80:80 \ --publish 8080:80 \
hydrogen hydrogen
``` ```

7
docker/config-template.sh Executable file
View File

@ -0,0 +1,7 @@
#!/bin/sh
set -eux
envsubst '$PUSH_APP_ID,$PUSH_GATEWAY_URL,$PUSH_APPLICATION_SERVER_KEY,$DEFAULT_HOMESERVER' \
< /config.json.tmpl \
> /tmp/config.json

16
docker/config.json.tmpl Normal file
View File

@ -0,0 +1,16 @@
{
"push": {
"appId": "$PUSH_APP_ID",
"gatewayUrl": "$PUSH_GATEWAY_URL",
"applicationServerKey": "$PUSH_APPLICATION_SERVER_KEY"
},
"defaultHomeServer": "$DEFAULT_HOMESERVER",
"bugReportEndpointUrl": "https://element.io/bugreports/submit",
"themeManifests": [
"assets/theme-element.json"
],
"defaultTheme": {
"light": "element-light",
"dark": "element-dark"
}
}

View File

@ -1,6 +1,6 @@
{ {
"name": "hydrogen-web", "name": "hydrogen-web",
"version": "0.2.33", "version": "0.3.0",
"description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB", "description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
"directories": { "directories": {
"doc": "doc" "doc": "doc"
@ -51,8 +51,9 @@
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-value-parser": "^4.2.0", "postcss-value-parser": "^4.2.0",
"regenerator-runtime": "^0.13.7", "regenerator-runtime": "^0.13.7",
"svgo": "^2.8.0",
"text-encoding": "^0.7.0", "text-encoding": "^0.7.0",
"typescript": "^4.4", "typescript": "^4.7.0",
"vite": "^2.9.8", "vite": "^2.9.8",
"xxhashjs": "^0.2.2" "xxhashjs": "^0.2.2"
}, },

View File

@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
const path = require('path').posix; const path = require('path').posix;
const {optimize} = require('svgo');
async function readCSSSource(location) { async function readCSSSource(location) {
const fs = require("fs").promises; const fs = require("fs").promises;
const path = require("path");
const resolvedLocation = path.resolve(__dirname, "../../", `${location}/theme.css`); const resolvedLocation = path.resolve(__dirname, "../../", `${location}/theme.css`);
const data = await fs.readFile(resolvedLocation); const data = await fs.readFile(resolvedLocation);
return data; return data;
@ -43,29 +43,54 @@ function addThemesToConfig(bundle, manifestLocations, defaultThemes) {
} }
} }
function parseBundle(bundle) { /**
* Returns an object where keys are the svg file names and the values
* are the svg code (optimized)
* @param {*} icons Object where keys are css variable names and values are locations of the svg
* @param {*} manifestLocation Location of manifest used for resolving path
*/
async function generateIconSourceMap(icons, manifestLocation) {
const sources = {};
const fileNames = [];
const promises = [];
const fs = require("fs").promises;
for (const icon of Object.values(icons)) {
const [location] = icon.split("?");
// resolve location against manifestLocation
const resolvedLocation = path.resolve(manifestLocation, location);
const iconData = fs.readFile(resolvedLocation);
promises.push(iconData);
const fileName = path.basename(resolvedLocation);
fileNames.push(fileName);
}
const results = await Promise.all(promises);
for (let i = 0; i < results.length; ++i) {
const svgString = results[i].toString();
const result = optimize(svgString, {
plugins: [
{
name: "preset-default",
params: {
overrides: { convertColors: false, },
},
},
],
});
const optimizedSvgString = result.data;
sources[fileNames[i]] = optimizedSvgString;
}
return sources;
}
/**
* Returns a mapping from location (of manifest file) to an array containing all the chunks (of css files) generated from that location.
* To understand what chunk means in this context, see https://rollupjs.org/guide/en/#generatebundle.
* @param {*} bundle Mapping from fileName to AssetInfo | ChunkInfo
*/
function getMappingFromLocationToChunkArray(bundle) {
const chunkMap = new Map(); const chunkMap = new Map();
const assetMap = new Map();
let runtimeThemeChunk;
for (const [fileName, info] of Object.entries(bundle)) { for (const [fileName, info] of Object.entries(bundle)) {
if (!fileName.endsWith(".css")) { if (!fileName.endsWith(".css") || info.type === "asset" || info.facadeModuleId?.includes("type=runtime")) {
continue;
}
if (info.type === "asset") {
/**
* So this is the css assetInfo that contains the asset hashed file name.
* We'll store it in a separate map indexed via fileName (unhashed) to avoid
* searching through the bundle array later.
*/
assetMap.set(info.name, info);
continue;
}
if (info.facadeModuleId?.includes("type=runtime")) {
/**
* We have a separate field in manifest.source just for the runtime theme,
* so store this separately.
*/
runtimeThemeChunk = info;
continue; continue;
} }
const location = info.facadeModuleId?.match(/(.+)\/.+\.css/)?.[1]; const location = info.facadeModuleId?.match(/(.+)\/.+\.css/)?.[1];
@ -80,7 +105,56 @@ function parseBundle(bundle) {
array.push(info); array.push(info);
} }
} }
return { chunkMap, assetMap, runtimeThemeChunk }; return chunkMap;
}
/**
* Returns a mapping from unhashed file name (of css files) to AssetInfo.
* To understand what AssetInfo means in this context, see https://rollupjs.org/guide/en/#generatebundle.
* @param {*} bundle Mapping from fileName to AssetInfo | ChunkInfo
*/
function getMappingFromFileNameToAssetInfo(bundle) {
const assetMap = new Map();
for (const [fileName, info] of Object.entries(bundle)) {
if (!fileName.endsWith(".css")) {
continue;
}
if (info.type === "asset") {
/**
* So this is the css assetInfo that contains the asset hashed file name.
* We'll store it in a separate map indexed via fileName (unhashed) to avoid
* searching through the bundle array later.
*/
assetMap.set(info.name, info);
}
}
return assetMap;
}
/**
* Returns a mapping from location (of manifest file) to ChunkInfo of the runtime css asset
* To understand what ChunkInfo means in this context, see https://rollupjs.org/guide/en/#generatebundle.
* @param {*} bundle Mapping from fileName to AssetInfo | ChunkInfo
*/
function getMappingFromLocationToRuntimeChunk(bundle) {
let runtimeThemeChunkMap = new Map();
for (const [fileName, info] of Object.entries(bundle)) {
if (!fileName.endsWith(".css") || info.type === "asset") {
continue;
}
const location = info.facadeModuleId?.match(/(.+)\/.+\.css/)?.[1];
if (!location) {
throw new Error("Cannot find location of css chunk!");
}
if (info.facadeModuleId?.includes("type=runtime")) {
/**
* We have a separate field in manifest.source just for the runtime theme,
* so store this separately.
*/
runtimeThemeChunkMap.set(location, info);
}
}
return runtimeThemeChunkMap;
} }
module.exports = function buildThemes(options) { module.exports = function buildThemes(options) {
@ -88,6 +162,7 @@ module.exports = function buildThemes(options) {
let isDevelopment = false; let isDevelopment = false;
const virtualModuleId = '@theme/' const virtualModuleId = '@theme/'
const resolvedVirtualModuleId = '\0' + virtualModuleId; const resolvedVirtualModuleId = '\0' + virtualModuleId;
const themeToManifestLocation = new Map();
return { return {
name: "build-themes", name: "build-themes",
@ -100,37 +175,34 @@ module.exports = function buildThemes(options) {
}, },
async buildStart() { async buildStart() {
if (isDevelopment) { return; }
const { themeConfig } = options; const { themeConfig } = options;
for (const [name, location] of Object.entries(themeConfig.themes)) { for (const location of themeConfig.themes) {
manifest = require(`${location}/manifest.json`); manifest = require(`${location}/manifest.json`);
const themeCollectionId = manifest.id;
themeToManifestLocation.set(themeCollectionId, location);
variants = manifest.values.variants; variants = manifest.values.variants;
for (const [variant, details] of Object.entries(variants)) { for (const [variant, details] of Object.entries(variants)) {
const fileName = `theme-${name}-${variant}.css`; const fileName = `theme-${themeCollectionId}-${variant}.css`;
if (name === themeConfig.default && details.default) { if (themeCollectionId === themeConfig.default && details.default) {
// This is the default theme, stash the file name for later // This is the default theme, stash the file name for later
if (details.dark) { if (details.dark) {
defaultDark = fileName; defaultDark = fileName;
defaultThemes["dark"] = `${name}-${variant}`; defaultThemes["dark"] = `${themeCollectionId}-${variant}`;
} }
else { else {
defaultLight = fileName; defaultLight = fileName;
defaultThemes["light"] = `${name}-${variant}`; defaultThemes["light"] = `${themeCollectionId}-${variant}`;
} }
} }
// emit the css as built theme bundle // emit the css as built theme bundle
this.emitFile({ if (!isDevelopment) {
type: "chunk", this.emitFile({ type: "chunk", id: `${location}/theme.css?variant=${variant}${details.dark ? "&dark=true" : ""}`, fileName, });
id: `${location}/theme.css?variant=${variant}${details.dark? "&dark=true": ""}`, }
fileName,
});
} }
// emit the css as runtime theme bundle // emit the css as runtime theme bundle
this.emitFile({ if (!isDevelopment) {
type: "chunk", this.emitFile({ type: "chunk", id: `${location}/theme.css?type=runtime`, fileName: `theme-${themeCollectionId}-runtime.css`, });
id: `${location}/theme.css?type=runtime`, }
fileName: `theme-${name}-runtime.css`,
});
} }
}, },
@ -152,7 +224,7 @@ module.exports = function buildThemes(options) {
if (theme === "default") { if (theme === "default") {
theme = options.themeConfig.default; theme = options.themeConfig.default;
} }
const location = options.themeConfig.themes[theme]; const location = themeToManifestLocation.get(theme);
const manifest = require(`${location}/manifest.json`); const manifest = require(`${location}/manifest.json`);
const variants = manifest.values.variants; const variants = manifest.values.variants;
if (!variant || variant === "default") { if (!variant || variant === "default") {
@ -245,30 +317,53 @@ module.exports = function buildThemes(options) {
]; ];
}, },
generateBundle(_, bundle) { async generateBundle(_, bundle) {
// assetMap: Mapping from asset-name (eg: element-dark.css) to AssetInfo const assetMap = getMappingFromFileNameToAssetInfo(bundle);
// chunkMap: Mapping from theme-location (eg: hydrogen-web/src/.../css/themes/element) to a list of ChunkInfo const chunkMap = getMappingFromLocationToChunkArray(bundle);
// types of AssetInfo and ChunkInfo can be found at https://rollupjs.org/guide/en/#generatebundle const runtimeThemeChunkMap = getMappingFromLocationToRuntimeChunk(bundle);
const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
const manifestLocations = []; const manifestLocations = [];
// Location of the directory containing manifest relative to the root of the build output
const manifestLocation = "assets";
for (const [location, chunkArray] of chunkMap) { for (const [location, chunkArray] of chunkMap) {
const manifest = require(`${location}/manifest.json`); const manifest = require(`${location}/manifest.json`);
const compiledVariables = options.compiledVariables.get(location); const compiledVariables = options.compiledVariables.get(location);
const derivedVariables = compiledVariables["derived-variables"]; const derivedVariables = compiledVariables["derived-variables"];
const icon = compiledVariables["icon"]; const icon = compiledVariables["icon"];
const builtAssets = {}; const builtAssets = {};
let themeKey;
for (const chunk of chunkArray) { for (const chunk of chunkArray) {
const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/); const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/);
builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName; themeKey = name;
const locationRelativeToBuildRoot = assetMap.get(chunk.fileName).fileName;
const locationRelativeToManifest = path.relative(manifestLocation, locationRelativeToBuildRoot);
builtAssets[`${name}-${variant}`] = locationRelativeToManifest;
} }
// Emit the base svg icons as asset
const nameToAssetHashedLocation = [];
const nameToSource = await generateIconSourceMap(icon, location);
for (const [name, source] of Object.entries(nameToSource)) {
const ref = this.emitFile({ type: "asset", name, source });
const assetHashedName = this.getFileName(ref);
nameToAssetHashedLocation[name] = assetHashedName;
}
// Update icon section in output manifest with paths to the icon in build output
for (const [variable, location] of Object.entries(icon)) {
const [locationWithoutQueryParameters, queryParameters] = location.split("?");
const name = path.basename(locationWithoutQueryParameters);
const locationRelativeToBuildRoot = nameToAssetHashedLocation[name];
const locationRelativeToManifest = path.relative(manifestLocation, locationRelativeToBuildRoot);
icon[variable] = `${locationRelativeToManifest}?${queryParameters}`;
}
const runtimeThemeChunk = runtimeThemeChunkMap.get(location);
const runtimeAssetLocation = path.relative(manifestLocation, assetMap.get(runtimeThemeChunk.fileName).fileName);
manifest.source = { manifest.source = {
"built-assets": builtAssets, "built-assets": builtAssets,
"runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName, "runtime-asset": runtimeAssetLocation,
"derived-variables": derivedVariables, "derived-variables": derivedVariables,
"icon": icon "icon": icon,
}; };
const name = `theme-${manifest.name}.json`; const name = `theme-${themeKey}.json`;
manifestLocations.push(`assets/${name}`); manifestLocations.push(`${manifestLocation}/${name}`);
this.emitFile({ this.emitFile({
type: "asset", type: "asset",
name, name,

View File

@ -112,7 +112,14 @@ function populateMapWithDerivedVariables(map, cssFileLocation, {resolvedMap, ali
...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))), ...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))),
...([...aliasMap.entries()].map(([alias, variable]) => `${alias}=${variable}`)) ...([...aliasMap.entries()].map(([alias, variable]) => `${alias}=${variable}`))
]; ];
map.set(location, { "derived-variables": derivedVariables }); const sharedObject = map.get(location);
const output = { "derived-variables": derivedVariables };
if (sharedObject) {
Object.assign(sharedObject, output);
}
else {
map.set(location, output);
}
} }
/** /**

View File

@ -61,7 +61,13 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVari
function populateMapWithIcons(map, cssFileLocation, urlVariables) { function populateMapWithIcons(map, cssFileLocation, urlVariables) {
const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1]; const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
const sharedObject = map.get(location); const sharedObject = map.get(location);
sharedObject["icon"] = Object.fromEntries(urlVariables); const output = {"icon": Object.fromEntries(urlVariables)};
if (sharedObject) {
Object.assign(sharedObject, output);
}
else {
map.set(location, output);
}
} }
function *createCounter() { function *createCounter() {
@ -81,7 +87,8 @@ module.exports = (opts = {}) => {
const urlVariables = new Map(); const urlVariables = new Map();
const counter = createCounter(); const counter = createCounter();
root.walkDecls(decl => findAndReplaceUrl(decl, urlVariables, counter)); root.walkDecls(decl => findAndReplaceUrl(decl, urlVariables, counter));
if (urlVariables.size) { const cssFileLocation = root.source.input.from;
if (urlVariables.size && !cssFileLocation.includes("type=runtime")) {
addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables); addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables);
} }
if (opts.compiledVariables){ if (opts.compiledVariables){

View File

@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
const fs = require("fs"); import {readFileSync, mkdirSync, writeFileSync} from "fs";
const path = require("path"); import {resolve} from "path";
const xxhash = require('xxhashjs'); import {h32} from "xxhashjs";
import {getColoredSvgString} from "../../src/platform/web/theming/shared/svg-colorizer.mjs";
function createHash(content) { function createHash(content) {
const hasher = new xxhash.h32(0); const hasher = new h32(0);
hasher.update(content); hasher.update(content);
return hasher.digest(); return hasher.digest();
} }
@ -30,18 +31,14 @@ function createHash(content) {
* @param {string} primaryColor Primary color for the new svg * @param {string} primaryColor Primary color for the new svg
* @param {string} secondaryColor Secondary color for the new svg * @param {string} secondaryColor Secondary color for the new svg
*/ */
module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondaryColor) { export function buildColorizedSVG(svgLocation, primaryColor, secondaryColor) {
const svgCode = fs.readFileSync(svgLocation, { encoding: "utf8"}); const svgCode = readFileSync(svgLocation, { encoding: "utf8"});
let coloredSVGCode = svgCode.replaceAll("#ff00ff", primaryColor); const coloredSVGCode = getColoredSvgString(svgCode, primaryColor, secondaryColor);
coloredSVGCode = coloredSVGCode.replaceAll("#00ffff", secondaryColor);
if (svgCode === coloredSVGCode) {
throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
}
const fileName = svgLocation.match(/.+[/\\](.+\.svg)/)[1]; const fileName = svgLocation.match(/.+[/\\](.+\.svg)/)[1];
const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`; const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`;
const outputPath = path.resolve(__dirname, "../../.tmp"); const outputPath = resolve(__dirname, "./.tmp");
try { try {
fs.mkdirSync(outputPath); mkdirSync(outputPath);
} }
catch (e) { catch (e) {
if (e.code !== "EEXIST") { if (e.code !== "EEXIST") {
@ -49,6 +46,6 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar
} }
} }
const outputFile = `${outputPath}/${outputName}`; const outputFile = `${outputPath}/${outputName}`;
fs.writeFileSync(outputFile, coloredSVGCode); writeFileSync(outputFile, coloredSVGCode);
return outputFile; return outputFile;
} }

View File

@ -1,7 +1,7 @@
{ {
"name": "hydrogen-view-sdk", "name": "@thirdroom/hydrogen-view-sdk",
"description": "Embeddable matrix client library, including view components", "description": "Embeddable matrix client library, including view components",
"version": "0.0.13", "version": "0.0.23",
"main": "./lib-build/hydrogen.cjs.js", "main": "./lib-build/hydrogen.cjs.js",
"exports": { "exports": {
".": { ".": {

View File

@ -0,0 +1,5 @@
#!/bin/sh
cp scripts/test-derived-theme/theme.json target/assets/theme-customer.json
cat target/config.json | jq '.themeManifests += ["assets/theme-customer.json"]' | cat > target/config.temp.json
rm target/config.json
mv target/config.temp.json target/config.json

View File

@ -0,0 +1,51 @@
{
"name": "Customer",
"extends": "element",
"id": "customer",
"values": {
"variants": {
"dark": {
"dark": true,
"default": true,
"name": "Dark",
"variables": {
"background-color-primary": "#21262b",
"background-color-secondary": "#2D3239",
"text-color": "#fff",
"accent-color": "#F03F5B",
"error-color": "#FF4B55",
"fixed-white": "#fff",
"room-badge": "#61708b",
"link-color": "#238cf5"
}
},
"light": {
"default": true,
"name": "Dark",
"variables": {
"background-color-primary": "#21262b",
"background-color-secondary": "#2D3239",
"text-color": "#fff",
"accent-color": "#F03F5B",
"error-color": "#FF4B55",
"fixed-white": "#fff",
"room-badge": "#61708b",
"link-color": "#238cf5"
}
},
"red": {
"name": "Gruvbox",
"variables": {
"background-color-primary": "#282828",
"background-color-secondary": "#3c3836",
"text-color": "#fbf1c7",
"accent-color": "#8ec07c",
"error-color": "#fb4934",
"fixed-white": "#fff",
"room-badge": "#cc241d",
"link-color": "#fe8019"
}
}
}
}
}

View File

@ -14,18 +14,19 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import {Options, ViewModel} from "./ViewModel"; import {Options as BaseOptions, ViewModel} from "./ViewModel";
import {Client} from "../matrix/Client.js"; import {Client} from "../matrix/Client.js";
import {SegmentType} from "./navigation/index";
type LogoutOptions = { sessionId: string; } & Options; type Options = { sessionId: string; } & BaseOptions;
export class LogoutViewModel extends ViewModel<LogoutOptions> { export class LogoutViewModel extends ViewModel<SegmentType, Options> {
private _sessionId: string; private _sessionId: string;
private _busy: boolean; private _busy: boolean;
private _showConfirm: boolean; private _showConfirm: boolean;
private _error?: Error; private _error?: Error;
constructor(options: LogoutOptions) { constructor(options: Options) {
super(options); super(options);
this._sessionId = options.sessionId; this._sessionId = options.sessionId;
this._busy = false; this._busy = false;
@ -41,7 +42,7 @@ export class LogoutViewModel extends ViewModel<LogoutOptions> {
return this._busy; return this._busy;
} }
get cancelUrl(): string { get cancelUrl(): string | undefined {
return this.urlCreator.urlForSegment("session", true); return this.urlCreator.urlForSegment("session", true);
} }

View File

@ -17,7 +17,7 @@ limitations under the License.
import {Client} from "../matrix/Client.js"; import {Client} from "../matrix/Client.js";
import {SessionViewModel} from "./session/SessionViewModel.js"; import {SessionViewModel} from "./session/SessionViewModel.js";
import {SessionLoadViewModel} from "./SessionLoadViewModel.js"; import {SessionLoadViewModel} from "./SessionLoadViewModel.js";
import {LoginViewModel} from "./login/LoginViewModel.js"; import {LoginViewModel} from "./login/LoginViewModel";
import {LogoutViewModel} from "./LogoutViewModel"; import {LogoutViewModel} from "./LogoutViewModel";
import {SessionPickerViewModel} from "./SessionPickerViewModel.js"; import {SessionPickerViewModel} from "./SessionPickerViewModel.js";
import {ViewModel} from "./ViewModel"; import {ViewModel} from "./ViewModel";
@ -38,6 +38,7 @@ export class RootViewModel extends ViewModel {
this.track(this.navigation.observe("login").subscribe(() => this._applyNavigation())); this.track(this.navigation.observe("login").subscribe(() => this._applyNavigation()));
this.track(this.navigation.observe("session").subscribe(() => this._applyNavigation())); this.track(this.navigation.observe("session").subscribe(() => this._applyNavigation()));
this.track(this.navigation.observe("sso").subscribe(() => this._applyNavigation())); this.track(this.navigation.observe("sso").subscribe(() => this._applyNavigation()));
this.track(this.navigation.observe("oidc").subscribe(() => this._applyNavigation()));
this._applyNavigation(true); this._applyNavigation(true);
} }
@ -46,6 +47,7 @@ export class RootViewModel extends ViewModel {
const logoutSessionId = this.navigation.path.get("logout")?.value; const logoutSessionId = this.navigation.path.get("logout")?.value;
const sessionId = this.navigation.path.get("session")?.value; const sessionId = this.navigation.path.get("session")?.value;
const loginToken = this.navigation.path.get("sso")?.value; const loginToken = this.navigation.path.get("sso")?.value;
const oidcCallback = this.navigation.path.get("oidc")?.value;
if (isLogin) { if (isLogin) {
if (this.activeSection !== "login") { if (this.activeSection !== "login") {
this._showLogin(); this._showLogin();
@ -77,7 +79,18 @@ export class RootViewModel extends ViewModel {
} else if (loginToken) { } else if (loginToken) {
this.urlCreator.normalizeUrl(); this.urlCreator.normalizeUrl();
if (this.activeSection !== "login") { if (this.activeSection !== "login") {
this._showLogin(loginToken); this._showLogin({loginToken});
}
} else if (oidcCallback) {
if (oidcCallback.error) {
this._setSection(() => this._error = new Error(`OIDC error: ${oidcCallback.error}`));
} else {
this.urlCreator.normalizeUrl();
if (this.activeSection !== "login") {
this._showLogin({
oidc: oidcCallback,
});
}
} }
} }
else { else {
@ -109,7 +122,7 @@ export class RootViewModel extends ViewModel {
} }
} }
_showLogin(loginToken) { _showLogin({loginToken, oidc} = {}) {
this._setSection(() => { this._setSection(() => {
this._loginViewModel = new LoginViewModel(this.childOptions({ this._loginViewModel = new LoginViewModel(this.childOptions({
defaultHomeserver: this.platform.config["defaultHomeServer"], defaultHomeserver: this.platform.config["defaultHomeServer"],
@ -125,7 +138,8 @@ export class RootViewModel extends ViewModel {
this._pendingClient = client; this._pendingClient = client;
this.navigation.push("session", client.sessionId); this.navigation.push("session", client.sessionId);
}, },
loginToken loginToken,
oidc,
})); }));
}); });
} }

View File

@ -154,7 +154,8 @@ export class SessionLoadViewModel extends ViewModel {
} }
async logout() { async logout() {
await this._client.logout(); const sessionId = this.navigation.path.get("session")?.value;
await this._client.startLogout(sessionId);
this.navigation.push("session", true); this.navigation.push("session", true);
} }

View File

@ -27,17 +27,19 @@ import type {Platform} from "../platform/web/Platform";
import type {Clock} from "../platform/web/dom/Clock"; import type {Clock} from "../platform/web/dom/Clock";
import type {ILogger} from "../logging/types"; import type {ILogger} from "../logging/types";
import type {Navigation} from "./navigation/Navigation"; import type {Navigation} from "./navigation/Navigation";
import type {URLRouter} from "./navigation/URLRouter"; import type {SegmentType} from "./navigation/index";
import type {IURLRouter} from "./navigation/URLRouter";
export type Options = { export type Options<T extends object = SegmentType> = {
platform: Platform platform: Platform;
logger: ILogger logger: ILogger;
urlCreator: URLRouter urlCreator: IURLRouter<T>;
navigation: Navigation navigation: Navigation<T>;
emitChange?: (params: any) => void emitChange?: (params: any) => void;
} }
export class ViewModel<O extends Options = Options> extends EventEmitter<{change: never}> {
export class ViewModel<N extends object = SegmentType, O extends Options<N> = Options<N>> extends EventEmitter<{change: never}> {
private disposables?: Disposables; private disposables?: Disposables;
private _isDisposed = false; private _isDisposed = false;
private _options: Readonly<O>; private _options: Readonly<O>;
@ -47,7 +49,7 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
this._options = options; this._options = options;
} }
childOptions<T extends Object>(explicitOptions: T): T & O { childOptions<T extends Object>(explicitOptions: T): T & Options<N> {
return Object.assign({}, this._options, explicitOptions); return Object.assign({}, this._options, explicitOptions);
} }
@ -58,11 +60,11 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
return this._options[name]; return this._options[name];
} }
observeNavigation(type: string, onChange: (value: string | true | undefined, type: string) => void) { observeNavigation<T extends keyof N>(type: T, onChange: (value: N[T], type: T) => void): void {
const segmentObservable = this.navigation.observe(type); const segmentObservable = this.navigation.observe(type);
const unsubscribe = segmentObservable.subscribe((value: string | true | undefined) => { const unsubscribe = segmentObservable.subscribe((value: N[T]) => {
onChange(value, type); onChange(value, type);
}) });
this.track(unsubscribe); this.track(unsubscribe);
} }
@ -103,7 +105,7 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
// //
// translated string should probably always be bindings, unless we're fine with a refresh when changing the language? // translated string should probably always be bindings, unless we're fine with a refresh when changing the language?
// we probably are, if we're using routing with a url, we could just refresh. // we probably are, if we're using routing with a url, we could just refresh.
i18n(parts: TemplateStringsArray, ...expr: any[]) { i18n(parts: TemplateStringsArray, ...expr: any[]): string {
// just concat for now // just concat for now
let result = ""; let result = "";
for (let i = 0; i < parts.length; ++i) { for (let i = 0; i < parts.length; ++i) {
@ -135,11 +137,12 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
return this.platform.logger; return this.platform.logger;
} }
get urlCreator(): URLRouter { get urlCreator(): IURLRouter<N> {
return this._options.urlCreator; return this._options.urlCreator;
} }
get navigation(): Navigation { get navigation(): Navigation<N> {
return this._options.navigation; // typescript needs a little help here
return this._options.navigation as unknown as Navigation<N>;
} }
} }

View File

@ -0,0 +1,90 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {OidcApi} from "../../matrix/net/OidcApi";
import {ViewModel} from "../ViewModel";
import {OIDCLoginMethod} from "../../matrix/login/OIDCLoginMethod";
import {LoginFailure} from "../../matrix/Client";
export class CompleteOIDCLoginViewModel extends ViewModel {
constructor(options) {
super(options);
const {
state,
code,
attemptLogin,
} = options;
this._request = options.platform.request;
this._encoding = options.platform.encoding;
this._crypto = options.platform.crypto;
this._state = state;
this._code = code;
this._attemptLogin = attemptLogin;
this._errorMessage = "";
this.performOIDCLoginCompletion();
}
get errorMessage() { return this._errorMessage; }
_showError(message) {
this._errorMessage = message;
this.emitChange("errorMessage");
}
async performOIDCLoginCompletion() {
if (!this._state || !this._code) {
return;
}
const code = this._code;
// TODO: cleanup settings storage
const [startedAt, nonce, codeVerifier, redirectUri, homeserver, issuer, clientId, accountManagementUrl] = await Promise.all([
this.platform.settingsStorage.getInt(`oidc_${this._state}_started_at`),
this.platform.settingsStorage.getString(`oidc_${this._state}_nonce`),
this.platform.settingsStorage.getString(`oidc_${this._state}_code_verifier`),
this.platform.settingsStorage.getString(`oidc_${this._state}_redirect_uri`),
this.platform.settingsStorage.getString(`oidc_${this._state}_homeserver`),
this.platform.settingsStorage.getString(`oidc_${this._state}_issuer`),
this.platform.settingsStorage.getString(`oidc_${this._state}_client_id`),
this.platform.settingsStorage.getString(`oidc_${this._state}_account_management_url`),
]);
const oidcApi = new OidcApi({
issuer,
clientConfigs: this.platform.config.oidc.clientConfigs,
clientId,
request: this._request,
encoding: this._encoding,
crypto: this._crypto,
});
const method = new OIDCLoginMethod({oidcApi, nonce, codeVerifier, code, homeserver, startedAt, redirectUri, accountManagementUrl});
const status = await this._attemptLogin(method);
let error = "";
switch (status) {
case LoginFailure.Credentials:
error = this.i18n`Your login token is invalid.`;
break;
case LoginFailure.Connection:
error = this.i18n`Can't connect to ${homeserver}.`;
break;
case LoginFailure.Unknown:
error = this.i18n`Something went wrong while checking your login token.`;
break;
}
if (error) {
this._showError(error);
}
}
}

View File

@ -15,101 +15,189 @@ limitations under the License.
*/ */
import {Client} from "../../matrix/Client.js"; import {Client} from "../../matrix/Client.js";
import {ViewModel} from "../ViewModel"; import {OidcApi} from "../../matrix/net/OidcApi.js";
import {Options as BaseOptions, ViewModel} from "../ViewModel";
import {PasswordLoginViewModel} from "./PasswordLoginViewModel.js"; import {PasswordLoginViewModel} from "./PasswordLoginViewModel.js";
import {StartSSOLoginViewModel} from "./StartSSOLoginViewModel.js"; import {StartSSOLoginViewModel} from "./StartSSOLoginViewModel.js";
import {CompleteSSOLoginViewModel} from "./CompleteSSOLoginViewModel.js"; import {CompleteSSOLoginViewModel} from "./CompleteSSOLoginViewModel.js";
import {StartOIDCLoginViewModel} from "./StartOIDCLoginViewModel.js";
import {CompleteOIDCLoginViewModel} from "./CompleteOIDCLoginViewModel.js";
import {LoadStatus} from "../../matrix/Client.js"; import {LoadStatus} from "../../matrix/Client.js";
import {SessionLoadViewModel} from "../SessionLoadViewModel.js"; import {SessionLoadViewModel} from "../SessionLoadViewModel.js";
import {SegmentType} from "../navigation/index";
export class LoginViewModel extends ViewModel { import type {PasswordLoginMethod, SSOLoginHelper, TokenLoginMethod, ILoginMethod} from "../../matrix/login";
constructor(options) { import { OIDCLoginMethod } from "../../matrix/login/OIDCLoginMethod.js";
type Options = {
defaultHomeserver: string;
ready: ReadyFn;
oidc?: { state: string, code: string };
loginToken?: string;
} & BaseOptions;
export class LoginViewModel extends ViewModel<SegmentType, Options> {
private _ready: ReadyFn;
private _loginToken?: string;
private _client: Client;
private _oidc?: { state: string, code: string };
private _loginOptions?: LoginOptions;
private _passwordLoginViewModel?: PasswordLoginViewModel;
private _startSSOLoginViewModel?: StartSSOLoginViewModel;
private _completeSSOLoginViewModel?: CompleteSSOLoginViewModel;
private _startOIDCLoginViewModel?: StartOIDCLoginViewModel;
private _completeOIDCLoginViewModel?: CompleteOIDCLoginViewModel;
private _loadViewModel?: SessionLoadViewModel;
private _loadViewModelSubscription?: () => void;
private _homeserver: string;
private _queriedHomeserver?: string;
private _abortHomeserverQueryTimeout?: () => void;
private _abortQueryOperation?: () => void;
private _hideHomeserver: boolean = false;
private _isBusy: boolean = false;
private _errorMessage: string = "";
constructor(options: Readonly<Options>) {
super(options); super(options);
const {ready, defaultHomeserver, loginToken} = options; const {ready, defaultHomeserver, loginToken, oidc} = options;
this._ready = ready; this._ready = ready;
this._loginToken = loginToken; this._loginToken = loginToken;
this._oidc = oidc;
this._client = new Client(this.platform); this._client = new Client(this.platform);
this._loginOptions = null;
this._passwordLoginViewModel = null;
this._startSSOLoginViewModel = null;
this._completeSSOLoginViewModel = null;
this._loadViewModel = null;
this._loadViewModelSubscription = null;
this._homeserver = defaultHomeserver; this._homeserver = defaultHomeserver;
this._queriedHomeserver = null;
this._errorMessage = "";
this._hideHomeserver = false;
this._isBusy = false;
this._abortHomeserverQueryTimeout = null;
this._abortQueryOperation = null;
this._initViewModels(); this._initViewModels();
} }
get passwordLoginViewModel() { return this._passwordLoginViewModel; } get passwordLoginViewModel(): PasswordLoginViewModel {
get startSSOLoginViewModel() { return this._startSSOLoginViewModel; } return this._passwordLoginViewModel;
get completeSSOLoginViewModel(){ return this._completeSSOLoginViewModel; } }
get homeserver() { return this._homeserver; }
get resolvedHomeserver() { return this._loginOptions?.homeserver; }
get errorMessage() { return this._errorMessage; }
get showHomeserver() { return !this._hideHomeserver; }
get loadViewModel() {return this._loadViewModel; }
get isBusy() { return this._isBusy; }
get isFetchingLoginOptions() { return !!this._abortQueryOperation; }
goBack() { get startSSOLoginViewModel(): StartSSOLoginViewModel {
return this._startSSOLoginViewModel;
}
get completeSSOLoginViewModel(): CompleteSSOLoginViewModel {
return this._completeSSOLoginViewModel;
}
get startOIDCLoginViewModel(): StartOIDCLoginViewModel {
return this._startOIDCLoginViewModel;
}
get completeOIDCLoginViewModel(): CompleteOIDCLoginViewModel {
return this._completeOIDCLoginViewModel;
}
get homeserver(): string {
return this._homeserver;
}
get resolvedHomeserver(): string | undefined {
return this._loginOptions?.homeserver;
}
get errorMessage(): string {
return this._errorMessage;
}
get showHomeserver(): boolean {
return !this._hideHomeserver;
}
get loadViewModel(): SessionLoadViewModel {
return this._loadViewModel;
}
get isBusy(): boolean {
return this._isBusy;
}
get isFetchingLoginOptions(): boolean {
return !!this._abortQueryOperation;
}
goBack(): void {
this.navigation.push("session"); this.navigation.push("session");
} }
async _initViewModels() { private _initViewModels(): void {
if (this._loginToken) { if (this._loginToken) {
this._hideHomeserver = true; this._hideHomeserver = true;
this._completeSSOLoginViewModel = this.track(new CompleteSSOLoginViewModel( this._completeSSOLoginViewModel = this.track(new CompleteSSOLoginViewModel(
this.childOptions( this.childOptions(
{ {
client: this._client, client: this._client,
attemptLogin: loginMethod => this.attemptLogin(loginMethod), attemptLogin: (loginMethod: TokenLoginMethod) => this.attemptLogin(loginMethod),
loginToken: this._loginToken loginToken: this._loginToken
}))); })));
this.emitChange("completeSSOLoginViewModel"); this.emitChange("completeSSOLoginViewModel");
} }
else if (this._oidc) {
this._hideHomeserver = true;
this._completeOIDCLoginViewModel = this.track(new CompleteOIDCLoginViewModel(
this.childOptions(
{
client: this._client,
attemptLogin: (loginMethod: OIDCLoginMethod) => this.attemptLogin(loginMethod),
state: this._oidc.state,
code: this._oidc.code,
})));
this.emitChange("completeOIDCLoginViewModel");
}
else { else {
await this.queryHomeserver(); void this.queryHomeserver();
} }
} }
_showPasswordLogin() { private _showPasswordLogin(): void {
this._passwordLoginViewModel = this.track(new PasswordLoginViewModel( this._passwordLoginViewModel = this.track(new PasswordLoginViewModel(
this.childOptions({ this.childOptions({
loginOptions: this._loginOptions, loginOptions: this._loginOptions,
attemptLogin: loginMethod => this.attemptLogin(loginMethod) attemptLogin: (loginMethod: PasswordLoginMethod) => this.attemptLogin(loginMethod)
}))); })));
this.emitChange("passwordLoginViewModel"); this.emitChange("passwordLoginViewModel");
} }
_showSSOLogin() { private _showSSOLogin(): void {
this._startSSOLoginViewModel = this.track( this._startSSOLoginViewModel = this.track(
new StartSSOLoginViewModel(this.childOptions({loginOptions: this._loginOptions})) new StartSSOLoginViewModel(this.childOptions({loginOptions: this._loginOptions}))
); );
this.emitChange("startSSOLoginViewModel"); this.emitChange("startSSOLoginViewModel");
} }
_showError(message) { private async _showOIDCLogin(): Promise<void> {
this._startOIDCLoginViewModel = this.track(
new StartOIDCLoginViewModel(this.childOptions({loginOptions: this._loginOptions}))
);
this.emitChange("startOIDCLoginViewModel");
try {
await this._startOIDCLoginViewModel.discover();
} catch (err) {
this._showError(err.message);
this._disposeViewModels();
}
}
private _showError(message: string): void {
this._errorMessage = message; this._errorMessage = message;
this.emitChange("errorMessage"); this.emitChange("errorMessage");
} }
_setBusy(status) { private _setBusy(status: boolean): void {
this._isBusy = status; this._isBusy = status;
this._passwordLoginViewModel?.setBusy(status); this._passwordLoginViewModel?.setBusy(status);
this._startSSOLoginViewModel?.setBusy(status); this._startSSOLoginViewModel?.setBusy(status);
this._startOIDCLoginViewModel?.setBusy(status);
this.emitChange("isBusy"); this.emitChange("isBusy");
} }
async attemptLogin(loginMethod) { async attemptLogin(loginMethod: ILoginMethod): Promise<null> {
this._setBusy(true); this._setBusy(true);
this._client.startWithLogin(loginMethod, {inspectAccountSetup: true}); void this._client.startWithLogin(loginMethod, {inspectAccountSetup: true});
const loadStatus = this._client.loadStatus; const loadStatus = this._client.loadStatus;
const handle = loadStatus.waitFor(status => status !== LoadStatus.Login); const handle = loadStatus.waitFor((status: LoadStatus) => status !== LoadStatus.Login);
await handle.promise; await handle.promise;
this._setBusy(false); this._setBusy(false);
const status = loadStatus.get(); const status = loadStatus.get();
@ -119,11 +207,11 @@ export class LoginViewModel extends ViewModel {
this._hideHomeserver = true; this._hideHomeserver = true;
this.emitChange("hideHomeserver"); this.emitChange("hideHomeserver");
this._disposeViewModels(); this._disposeViewModels();
this._createLoadViewModel(); void this._createLoadViewModel();
return null; return null;
} }
_createLoadViewModel() { private _createLoadViewModel(): void {
this._loadViewModelSubscription = this.disposeTracked(this._loadViewModelSubscription); this._loadViewModelSubscription = this.disposeTracked(this._loadViewModelSubscription);
this._loadViewModel = this.disposeTracked(this._loadViewModel); this._loadViewModel = this.disposeTracked(this._loadViewModel);
this._loadViewModel = this.track( this._loadViewModel = this.track(
@ -139,7 +227,7 @@ export class LoginViewModel extends ViewModel {
}) })
) )
); );
this._loadViewModel.start(); void this._loadViewModel.start();
this.emitChange("loadViewModel"); this.emitChange("loadViewModel");
this._loadViewModelSubscription = this.track( this._loadViewModelSubscription = this.track(
this._loadViewModel.disposableOn("change", () => { this._loadViewModel.disposableOn("change", () => {
@ -151,22 +239,23 @@ export class LoginViewModel extends ViewModel {
); );
} }
_disposeViewModels() { private _disposeViewModels(): void {
this._startSSOLoginViewModel = this.disposeTracked(this._ssoLoginViewModel); this._startSSOLoginViewModel = this.disposeTracked(this._startSSOLoginViewModel);
this._passwordLoginViewModel = this.disposeTracked(this._passwordLoginViewModel); this._passwordLoginViewModel = this.disposeTracked(this._passwordLoginViewModel);
this._completeSSOLoginViewModel = this.disposeTracked(this._completeSSOLoginViewModel); this._completeSSOLoginViewModel = this.disposeTracked(this._completeSSOLoginViewModel);
this._startOIDCLoginViewModel = this.disposeTracked(this._startOIDCLoginViewModel);
this.emitChange("disposeViewModels"); this.emitChange("disposeViewModels");
} }
async setHomeserver(newHomeserver) { async setHomeserver(newHomeserver: string): Promise<void> {
this._homeserver = newHomeserver; this._homeserver = newHomeserver;
// clear everything set by queryHomeserver // clear everything set by queryHomeserver
this._loginOptions = null; this._loginOptions = undefined;
this._queriedHomeserver = null; this._queriedHomeserver = undefined;
this._showError(""); this._showError("");
this._disposeViewModels(); this._disposeViewModels();
this._abortQueryOperation = this.disposeTracked(this._abortQueryOperation); this._abortQueryOperation = this.disposeTracked(this._abortQueryOperation);
this.emitChange(); // multiple fields changing this.emitChange("loginViewModels"); // multiple fields changing
// also clear the timeout if it is still running // also clear the timeout if it is still running
this.disposeTracked(this._abortHomeserverQueryTimeout); this.disposeTracked(this._abortHomeserverQueryTimeout);
const timeout = this.clock.createTimeout(1000); const timeout = this.clock.createTimeout(1000);
@ -181,10 +270,10 @@ export class LoginViewModel extends ViewModel {
} }
} }
this._abortHomeserverQueryTimeout = this.disposeTracked(this._abortHomeserverQueryTimeout); this._abortHomeserverQueryTimeout = this.disposeTracked(this._abortHomeserverQueryTimeout);
this.queryHomeserver(); void this.queryHomeserver();
} }
async queryHomeserver() { async queryHomeserver(): Promise<void> {
// don't repeat a query we've just done // don't repeat a query we've just done
if (this._homeserver === this._queriedHomeserver || this._homeserver === "") { if (this._homeserver === this._queriedHomeserver || this._homeserver === "") {
return; return;
@ -210,7 +299,7 @@ export class LoginViewModel extends ViewModel {
if (e.name === "AbortError") { if (e.name === "AbortError") {
return; //aborted, bail out return; //aborted, bail out
} else { } else {
this._loginOptions = null; this._loginOptions = undefined;
} }
} finally { } finally {
this._abortQueryOperation = this.disposeTracked(this._abortQueryOperation); this._abortQueryOperation = this.disposeTracked(this._abortQueryOperation);
@ -219,8 +308,9 @@ export class LoginViewModel extends ViewModel {
if (this._loginOptions) { if (this._loginOptions) {
if (this._loginOptions.sso) { this._showSSOLogin(); } if (this._loginOptions.sso) { this._showSSOLogin(); }
if (this._loginOptions.password) { this._showPasswordLogin(); } if (this._loginOptions.password) { this._showPasswordLogin(); }
if (!this._loginOptions.sso && !this._loginOptions.password) { if (this._loginOptions.oidc) { this._showOIDCLogin(); }
this._showError("This homeserver supports neither SSO nor password based login flows"); if (!this._loginOptions.sso && !this._loginOptions.password && !this._loginOptions.oidc) {
this._showError("This homeserver supports neither SSO nor password based login flows or has a usable OIDC Provider");
} }
} }
else { else {
@ -228,12 +318,23 @@ export class LoginViewModel extends ViewModel {
} }
} }
dispose() { dispose(): void {
super.dispose(); super.dispose();
if (this._client) { if (this._client) {
// if we move away before we're done with initial sync // if we move away before we're done with initial sync
// delete the session // delete the session
this._client.deleteSession(); void this._client.deleteSession();
} }
} }
} }
type ReadyFn = (client: Client) => void;
// TODO: move to Client.js when its converted to typescript.
type LoginOptions = {
homeserver: string;
password?: (username: string, password: string) => PasswordLoginMethod;
sso?: SSOLoginHelper;
oidc?: { issuer: string };
token?: (loginToken: string) => TokenLoginMethod;
};

View File

@ -0,0 +1,81 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {OidcApi} from "../../matrix/net/OidcApi";
import {ViewModel} from "../ViewModel";
export class StartOIDCLoginViewModel extends ViewModel {
constructor(options) {
super(options);
this._isBusy = true;
this._issuer = options.loginOptions.oidc.issuer;
this._accountManagementUrl = options.loginOptions.oidc.account;
this._homeserver = options.loginOptions.homeserver;
this._api = new OidcApi({
issuer: this._issuer,
clientConfigs: this._platform.config.oidc.clientConfigs,
request: this.platform.request,
encoding: this.platform.encoding,
crypto: this.platform.crypto,
urlCreator: this.urlCreator,
});
}
get isBusy() { return this._isBusy; }
setBusy(status) {
this._isBusy = status;
this.emitChange("isBusy");
}
async discover() {
// Ask for the metadata once so it gets discovered and cached
try {
await this._api.metadata()
} catch (err) {
this.logger.log("Failed to discover OIDC metadata: " + err);
throw new Error("Failed to discover OIDC metadata: " + err.message );
}
try {
await this._api.registration();
} catch (err) {
this.logger.log("Failed to register OIDC client: " + err);
throw new Error("Failed to register OIDC client: " + err.message );
}
}
async startOIDCLogin() {
const deviceScope = this._api.generateDeviceScope();
const p = this._api.generateParams({
scope: `openid urn:matrix:org.matrix.msc2967.client:api:* ${deviceScope}`,
redirectUri: this.urlCreator.createOIDCRedirectURL(),
});
const clientId = await this._api.clientId();
await Promise.all([
this.platform.settingsStorage.setInt(`oidc_${p.state}_started_at`, Date.now()),
this.platform.settingsStorage.setString(`oidc_${p.state}_nonce`, p.nonce),
this.platform.settingsStorage.setString(`oidc_${p.state}_code_verifier`, p.codeVerifier),
this.platform.settingsStorage.setString(`oidc_${p.state}_redirect_uri`, p.redirectUri),
this.platform.settingsStorage.setString(`oidc_${p.state}_homeserver`, this._homeserver),
this.platform.settingsStorage.setString(`oidc_${p.state}_issuer`, this._issuer),
this.platform.settingsStorage.setString(`oidc_${p.state}_client_id`, clientId),
this.platform.settingsStorage.setString(`oidc_${p.state}_account_management_url`, this._accountManagementUrl),
]);
const link = await this._api.authorizationEndpoint(p);
this.platform.openUrl(link);
}
}

View File

@ -17,27 +17,49 @@ limitations under the License.
import {ObservableValue} from "../../observable/value/ObservableValue"; import {ObservableValue} from "../../observable/value/ObservableValue";
import {BaseObservableValue} from "../../observable/value/BaseObservableValue"; import {BaseObservableValue} from "../../observable/value/BaseObservableValue";
export class Navigation {
constructor(allowsChild) { type AllowsChild<T> = (parent: Segment<T> | undefined, child: Segment<T>) => boolean;
/**
* OptionalValue is basically stating that if SegmentType[type] = true:
* - Allow this type to be optional
* - Give it a default value of undefined
* - Also allow it to be true
* This lets us do:
* const s: Segment<SegmentType> = new Segment("create-room");
* instead of
* const s: Segment<SegmentType> = new Segment("create-room", undefined);
*/
export type OptionalValue<T> = T extends true? [(undefined | true)?]: [T];
export class Navigation<T extends object> {
private readonly _allowsChild: AllowsChild<T>;
private _path: Path<T>;
private readonly _observables: Map<keyof T, SegmentObservable<T>> = new Map();
private readonly _pathObservable: ObservableValue<Path<T>>;
constructor(allowsChild: AllowsChild<T>) {
this._allowsChild = allowsChild; this._allowsChild = allowsChild;
this._path = new Path([], allowsChild); this._path = new Path([], allowsChild);
this._observables = new Map();
this._pathObservable = new ObservableValue(this._path); this._pathObservable = new ObservableValue(this._path);
} }
get pathObservable() { get pathObservable(): ObservableValue<Path<T>> {
return this._pathObservable; return this._pathObservable;
} }
get path() { get path(): Path<T> {
return this._path; return this._path;
} }
push(type, value = undefined) { push<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): void {
return this.applyPath(this.path.with(new Segment(type, value))); const newPath = this.path.with(new Segment(type, ...value));
if (newPath) {
this.applyPath(newPath);
}
} }
applyPath(path) { applyPath(path: Path<T>): void {
// Path is not exported, so you can only create a Path through Navigation, // Path is not exported, so you can only create a Path through Navigation,
// so we assume it respects the allowsChild rules // so we assume it respects the allowsChild rules
const oldPath = this._path; const oldPath = this._path;
@ -61,7 +83,7 @@ export class Navigation {
this._pathObservable.set(this._path); this._pathObservable.set(this._path);
} }
observe(type) { observe(type: keyof T): SegmentObservable<T> {
let observable = this._observables.get(type); let observable = this._observables.get(type);
if (!observable) { if (!observable) {
observable = new SegmentObservable(this, type); observable = new SegmentObservable(this, type);
@ -70,9 +92,9 @@ export class Navigation {
return observable; return observable;
} }
pathFrom(segments) { pathFrom(segments: Segment<any>[]): Path<T> {
let parent; let parent: Segment<any> | undefined;
let i; let i: number;
for (i = 0; i < segments.length; i += 1) { for (i = 0; i < segments.length; i += 1) {
if (!this._allowsChild(parent, segments[i])) { if (!this._allowsChild(parent, segments[i])) {
return new Path(segments.slice(0, i), this._allowsChild); return new Path(segments.slice(0, i), this._allowsChild);
@ -82,12 +104,12 @@ export class Navigation {
return new Path(segments, this._allowsChild); return new Path(segments, this._allowsChild);
} }
segment(type, value) { segment<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): Segment<T> {
return new Segment(type, value); return new Segment(type, ...value);
} }
} }
function segmentValueEqual(a, b) { function segmentValueEqual<T>(a?: T[keyof T], b?: T[keyof T]): boolean {
if (a === b) { if (a === b) {
return true; return true;
} }
@ -104,24 +126,29 @@ function segmentValueEqual(a, b) {
return false; return false;
} }
export class Segment {
constructor(type, value) { export class Segment<T, K extends keyof T = any> {
this.type = type; public value: T[K];
this.value = value === undefined ? true : value;
constructor(public type: K, ...value: OptionalValue<T[K]>) {
this.value = (value[0] === undefined ? true : value[0]) as unknown as T[K];
} }
} }
class Path { class Path<T> {
constructor(segments = [], allowsChild) { private readonly _segments: Segment<T, any>[];
private readonly _allowsChild: AllowsChild<T>;
constructor(segments: Segment<T>[] = [], allowsChild: AllowsChild<T>) {
this._segments = segments; this._segments = segments;
this._allowsChild = allowsChild; this._allowsChild = allowsChild;
} }
clone() { clone(): Path<T> {
return new Path(this._segments.slice(), this._allowsChild); return new Path(this._segments.slice(), this._allowsChild);
} }
with(segment) { with(segment: Segment<T>): Path<T> | undefined {
let index = this._segments.length - 1; let index = this._segments.length - 1;
do { do {
if (this._allowsChild(this._segments[index], segment)) { if (this._allowsChild(this._segments[index], segment)) {
@ -133,10 +160,10 @@ class Path {
index -= 1; index -= 1;
} while(index >= -1); } while(index >= -1);
// allow -1 as well so we check if the segment is allowed as root // allow -1 as well so we check if the segment is allowed as root
return null; return undefined;
} }
until(type) { until(type: keyof T): Path<T> {
const index = this._segments.findIndex(s => s.type === type); const index = this._segments.findIndex(s => s.type === type);
if (index !== -1) { if (index !== -1) {
return new Path(this._segments.slice(0, index + 1), this._allowsChild) return new Path(this._segments.slice(0, index + 1), this._allowsChild)
@ -144,11 +171,11 @@ class Path {
return new Path([], this._allowsChild); return new Path([], this._allowsChild);
} }
get(type) { get(type: keyof T): Segment<T> | undefined {
return this._segments.find(s => s.type === type); return this._segments.find(s => s.type === type);
} }
replace(segment) { replace(segment: Segment<T>): Path<T> | undefined {
const index = this._segments.findIndex(s => s.type === segment.type); const index = this._segments.findIndex(s => s.type === segment.type);
if (index !== -1) { if (index !== -1) {
const parent = this._segments[index - 1]; const parent = this._segments[index - 1];
@ -161,10 +188,10 @@ class Path {
} }
} }
} }
return null; return undefined;
} }
get segments() { get segments(): Segment<T>[] {
return this._segments; return this._segments;
} }
} }
@ -173,43 +200,49 @@ class Path {
* custom observable so it always returns what is in navigation.path, even if we haven't emitted the change yet. * custom observable so it always returns what is in navigation.path, even if we haven't emitted the change yet.
* This ensures that observers of a segment can also read the most recent value of other segments. * This ensures that observers of a segment can also read the most recent value of other segments.
*/ */
class SegmentObservable extends BaseObservableValue { class SegmentObservable<T extends object> extends BaseObservableValue<T[keyof T] | undefined> {
constructor(navigation, type) { private readonly _navigation: Navigation<T>;
private _type: keyof T;
private _lastSetValue?: T[keyof T];
constructor(navigation: Navigation<T>, type: keyof T) {
super(); super();
this._navigation = navigation; this._navigation = navigation;
this._type = type; this._type = type;
this._lastSetValue = navigation.path.get(type)?.value; this._lastSetValue = navigation.path.get(type)?.value;
} }
get() { get(): T[keyof T] | undefined {
const path = this._navigation.path; const path = this._navigation.path;
const segment = path.get(this._type); const segment = path.get(this._type);
const value = segment?.value; const value = segment?.value;
return value; return value;
} }
emitIfChanged() { emitIfChanged(): void {
const newValue = this.get(); const newValue = this.get();
if (!segmentValueEqual(newValue, this._lastSetValue)) { if (!segmentValueEqual<T>(newValue, this._lastSetValue)) {
this._lastSetValue = newValue; this._lastSetValue = newValue;
this.emit(newValue); this.emit(newValue);
} }
} }
} }
export type {Path};
export function tests() { export function tests() {
function createMockNavigation() { function createMockNavigation() {
return new Navigation((parent, {type}) => { return new Navigation((parent, {type}) => {
switch (parent?.type) { switch (parent?.type) {
case undefined: case undefined:
return type === "1" || "2"; return type === "1" || type === "2";
case "1": case "1":
return type === "1.1"; return type === "1.1";
case "1.1": case "1.1":
return type === "1.1.1"; return type === "1.1.1";
case "2": case "2":
return type === "2.1" || "2.2"; return type === "2.1" || type === "2.2";
default: default:
return false; return false;
} }
@ -217,7 +250,7 @@ export function tests() {
} }
function observeTypes(nav, types) { function observeTypes(nav, types) {
const changes = []; const changes: {type:string, value:any}[] = [];
for (const type of types) { for (const type of types) {
nav.observe(type).subscribe(value => { nav.observe(type).subscribe(value => {
changes.push({type, value}); changes.push({type, value});
@ -226,6 +259,12 @@ export function tests() {
return changes; return changes;
} }
type SegmentType = {
"foo": number;
"bar": number;
"baz": number;
}
return { return {
"applying a path emits an event on the observable": assert => { "applying a path emits an event on the observable": assert => {
const nav = createMockNavigation(); const nav = createMockNavigation();
@ -243,18 +282,18 @@ export function tests() {
assert.equal(changes[1].value, 8); assert.equal(changes[1].value, 8);
}, },
"path.get": assert => { "path.get": assert => {
const path = new Path([new Segment("foo", 5), new Segment("bar", 6)], () => true); const path = new Path<SegmentType>([new Segment("foo", 5), new Segment("bar", 6)], () => true);
assert.equal(path.get("foo").value, 5); assert.equal(path.get("foo")!.value, 5);
assert.equal(path.get("bar").value, 6); assert.equal(path.get("bar")!.value, 6);
}, },
"path.replace success": assert => { "path.replace success": assert => {
const path = new Path([new Segment("foo", 5), new Segment("bar", 6)], () => true); const path = new Path<SegmentType>([new Segment("foo", 5), new Segment("bar", 6)], () => true);
const newPath = path.replace(new Segment("foo", 1)); const newPath = path.replace(new Segment("foo", 1));
assert.equal(newPath.get("foo").value, 1); assert.equal(newPath!.get("foo")!.value, 1);
assert.equal(newPath.get("bar").value, 6); assert.equal(newPath!.get("bar")!.value, 6);
}, },
"path.replace not found": assert => { "path.replace not found": assert => {
const path = new Path([new Segment("foo", 5), new Segment("bar", 6)], () => true); const path = new Path<SegmentType>([new Segment("foo", 5), new Segment("bar", 6)], () => true);
const newPath = path.replace(new Segment("baz", 1)); const newPath = path.replace(new Segment("baz", 1));
assert.equal(newPath, null); assert.equal(newPath, null);
} }

View File

@ -14,28 +14,58 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
export class URLRouter { import type {History} from "../../platform/web/dom/History.js";
constructor({history, navigation, parseUrlPath, stringifyPath}) { import type {Navigation, Segment, Path, OptionalValue} from "./Navigation";
import type {SubscriptionHandle} from "../../observable/BaseObservable";
type ParseURLPath<T> = (urlPath: string, currentNavPath: Path<T>, defaultSessionId?: string) => Segment<T>[];
type StringifyPath<T> = (path: Path<T>) => string;
export interface IURLRouter<T> {
attach(): void;
dispose(): void;
pushUrl(url: string): void;
tryRestoreLastUrl(): boolean;
urlForSegments(segments: Segment<T>[]): string | undefined;
urlForSegment<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): string | undefined;
urlUntilSegment(type: keyof T): string;
urlForPath(path: Path<T>): string;
openRoomActionUrl(roomId: string): string;
createSSOCallbackURL(): string;
createOIDCRedirectURL(): string;
absoluteAppUrl(): string;
absoluteUrlForAsset(asset: string): string;
normalizeUrl(): void;
}
export class URLRouter<T extends {session: string | boolean}> implements IURLRouter<T> {
private readonly _history: History;
private readonly _navigation: Navigation<T>;
private readonly _parseUrlPath: ParseURLPath<T>;
private readonly _stringifyPath: StringifyPath<T>;
private _subscription?: SubscriptionHandle;
private _pathSubscription?: SubscriptionHandle;
private _isApplyingUrl: boolean = false;
private _defaultSessionId?: string;
constructor(history: History, navigation: Navigation<T>, parseUrlPath: ParseURLPath<T>, stringifyPath: StringifyPath<T>) {
this._history = history; this._history = history;
this._navigation = navigation; this._navigation = navigation;
this._parseUrlPath = parseUrlPath; this._parseUrlPath = parseUrlPath;
this._stringifyPath = stringifyPath; this._stringifyPath = stringifyPath;
this._subscription = null;
this._pathSubscription = null;
this._isApplyingUrl = false;
this._defaultSessionId = this._getLastSessionId(); this._defaultSessionId = this._getLastSessionId();
} }
_getLastSessionId() { private _getLastSessionId(): string | undefined {
const navPath = this._urlAsNavPath(this._history.getLastUrl() || ""); const navPath = this._urlAsNavPath(this._history.getLastSessionUrl() || "");
const sessionId = navPath.get("session")?.value; const sessionId = navPath.get("session")?.value;
if (typeof sessionId === "string") { if (typeof sessionId === "string") {
return sessionId; return sessionId;
} }
return null; return undefined;
} }
attach() { attach(): void {
this._subscription = this._history.subscribe(url => this._applyUrl(url)); this._subscription = this._history.subscribe(url => this._applyUrl(url));
// subscribe to path before applying initial url // subscribe to path before applying initial url
// so redirects in _applyNavPathToHistory are reflected in url bar // so redirects in _applyNavPathToHistory are reflected in url bar
@ -43,12 +73,12 @@ export class URLRouter {
this._applyUrl(this._history.get()); this._applyUrl(this._history.get());
} }
dispose() { dispose(): void {
this._subscription = this._subscription(); if (this._subscription) { this._subscription = this._subscription(); }
this._pathSubscription = this._pathSubscription(); if (this._pathSubscription) { this._pathSubscription = this._pathSubscription(); }
} }
_applyNavPathToHistory(path) { private _applyNavPathToHistory(path: Path<T>): void {
const url = this.urlForPath(path); const url = this.urlForPath(path);
if (url !== this._history.get()) { if (url !== this._history.get()) {
if (this._isApplyingUrl) { if (this._isApplyingUrl) {
@ -60,7 +90,7 @@ export class URLRouter {
} }
} }
_applyNavPathToNavigation(navPath) { private _applyNavPathToNavigation(navPath: Path<T>): void {
// this will cause _applyNavPathToHistory to be called, // this will cause _applyNavPathToHistory to be called,
// so set a flag whether this request came from ourselves // so set a flag whether this request came from ourselves
// (in which case it is a redirect if the url does not match the current one) // (in which case it is a redirect if the url does not match the current one)
@ -69,22 +99,22 @@ export class URLRouter {
this._isApplyingUrl = false; this._isApplyingUrl = false;
} }
_urlAsNavPath(url) { private _urlAsNavPath(url: string): Path<T> {
const urlPath = this._history.urlAsPath(url); const urlPath = this._history.urlAsPath(url);
return this._navigation.pathFrom(this._parseUrlPath(urlPath, this._navigation.path, this._defaultSessionId)); return this._navigation.pathFrom(this._parseUrlPath(urlPath, this._navigation.path, this._defaultSessionId));
} }
_applyUrl(url) { private _applyUrl(url: string): void {
const navPath = this._urlAsNavPath(url); const navPath = this._urlAsNavPath(url);
this._applyNavPathToNavigation(navPath); this._applyNavPathToNavigation(navPath);
} }
pushUrl(url) { pushUrl(url: string): void {
this._history.pushUrl(url); this._history.pushUrl(url);
} }
tryRestoreLastUrl() { tryRestoreLastUrl(): boolean {
const lastNavPath = this._urlAsNavPath(this._history.getLastUrl() || ""); const lastNavPath = this._urlAsNavPath(this._history.getLastSessionUrl() || "");
if (lastNavPath.segments.length !== 0) { if (lastNavPath.segments.length !== 0) {
this._applyNavPathToNavigation(lastNavPath); this._applyNavPathToNavigation(lastNavPath);
return true; return true;
@ -92,8 +122,8 @@ export class URLRouter {
return false; return false;
} }
urlForSegments(segments) { urlForSegments(segments: Segment<T>[]): string | undefined {
let path = this._navigation.path; let path: Path<T> | undefined = this._navigation.path;
for (const segment of segments) { for (const segment of segments) {
path = path.with(segment); path = path.with(segment);
if (!path) { if (!path) {
@ -103,29 +133,41 @@ export class URLRouter {
return this.urlForPath(path); return this.urlForPath(path);
} }
urlForSegment(type, value) { urlForSegment<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): string | undefined {
return this.urlForSegments([this._navigation.segment(type, value)]); return this.urlForSegments([this._navigation.segment(type, ...value)]);
} }
urlUntilSegment(type) { urlUntilSegment(type: keyof T): string {
return this.urlForPath(this._navigation.path.until(type)); return this.urlForPath(this._navigation.path.until(type));
} }
urlForPath(path) { urlForPath(path: Path<T>): string {
return this._history.pathAsUrl(this._stringifyPath(path)); return this._history.pathAsUrl(this._stringifyPath(path));
} }
openRoomActionUrl(roomId) { openRoomActionUrl(roomId: string): string {
// not a segment to navigation knowns about, so append it manually // not a segment to navigation knowns about, so append it manually
const urlPath = `${this._stringifyPath(this._navigation.path.until("session"))}/open-room/${roomId}`; const urlPath = `${this._stringifyPath(this._navigation.path.until("session"))}/open-room/${roomId}`;
return this._history.pathAsUrl(urlPath); return this._history.pathAsUrl(urlPath);
} }
createSSOCallbackURL() { createSSOCallbackURL(): string {
return window.location.origin; return window.location.origin;
} }
normalizeUrl() { createOIDCRedirectURL(): string {
return window.location.origin;
}
absoluteAppUrl(): string {
return window.location.origin;
}
absoluteUrlForAsset(asset: string): string {
return (new URL('/assets/' + asset, window.location.origin)).toString();
}
normalizeUrl(): void {
// Remove any queryParameters from the URL // Remove any queryParameters from the URL
// Gets rid of the loginToken after SSO // Gets rid of the loginToken after SSO
this._history.replaceUrlSilently(`${window.location.origin}/${window.location.hash}`); this._history.replaceUrlSilently(`${window.location.origin}/${window.location.hash}`);

View File

@ -14,23 +14,51 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import {Navigation, Segment} from "./Navigation.js"; import {Navigation, Segment} from "./Navigation";
import {URLRouter} from "./URLRouter.js"; import {URLRouter} from "./URLRouter";
import type {Path, OptionalValue} from "./Navigation";
export function createNavigation() { export type SegmentType = {
"login": true;
"session": string | boolean;
"sso": string;
"logout": true;
"room": string;
"rooms": string[];
"settings": true;
"create-room": true;
"empty-grid-tile": number;
"lightbox": string;
"right-panel": true;
"details": true;
"members": true;
"member": string;
"oidc": {
state: string,
} &
({
code: string,
} | {
error: string,
errorDescription: string | null,
errorUri: string | null ,
});
};
export function createNavigation(): Navigation<SegmentType> {
return new Navigation(allowsChild); return new Navigation(allowsChild);
} }
export function createRouter({history, navigation}) { export function createRouter({history, navigation}: {history: History, navigation: Navigation<SegmentType>}): URLRouter<SegmentType> {
return new URLRouter({history, navigation, stringifyPath, parseUrlPath}); return new URLRouter(history, navigation, parseUrlPath, stringifyPath);
} }
function allowsChild(parent, child) { function allowsChild(parent: Segment<SegmentType> | undefined, child: Segment<SegmentType>): boolean {
const {type} = child; const {type} = child;
switch (parent?.type) { switch (parent?.type) {
case undefined: case undefined:
// allowed root segments // allowed root segments
return type === "login" || type === "session" || type === "sso" || type === "logout"; return type === "login" || type === "session" || type === "sso" || type === "logout" || type === "oidc";
case "session": case "session":
return type === "room" || type === "rooms" || type === "settings" || type === "create-room"; return type === "room" || type === "rooms" || type === "settings" || type === "create-room";
case "rooms": case "rooms":
@ -39,14 +67,15 @@ function allowsChild(parent, child) {
case "room": case "room":
return type === "lightbox" || type === "right-panel"; return type === "lightbox" || type === "right-panel";
case "right-panel": case "right-panel":
return type === "details"|| type === "members" || type === "member"; return type === "details" || type === "members" || type === "member";
default: default:
return false; return false;
} }
} }
export function removeRoomFromPath(path, roomId) { export function removeRoomFromPath(path: Path<SegmentType>, roomId: string): Path<SegmentType> | undefined {
const rooms = path.get("rooms"); let newPath: Path<SegmentType> | undefined = path;
const rooms = newPath.get("rooms");
let roomIdGridIndex = -1; let roomIdGridIndex = -1;
// first delete from rooms segment // first delete from rooms segment
if (rooms) { if (rooms) {
@ -54,22 +83,22 @@ export function removeRoomFromPath(path, roomId) {
if (roomIdGridIndex !== -1) { if (roomIdGridIndex !== -1) {
const idsWithoutRoom = rooms.value.slice(); const idsWithoutRoom = rooms.value.slice();
idsWithoutRoom[roomIdGridIndex] = ""; idsWithoutRoom[roomIdGridIndex] = "";
path = path.replace(new Segment("rooms", idsWithoutRoom)); newPath = newPath.replace(new Segment("rooms", idsWithoutRoom));
} }
} }
const room = path.get("room"); const room = newPath!.get("room");
// then from room (which occurs with or without rooms) // then from room (which occurs with or without rooms)
if (room && room.value === roomId) { if (room && room.value === roomId) {
if (roomIdGridIndex !== -1) { if (roomIdGridIndex !== -1) {
path = path.with(new Segment("empty-grid-tile", roomIdGridIndex)); newPath = newPath!.with(new Segment("empty-grid-tile", roomIdGridIndex));
} else { } else {
path = path.until("session"); newPath = newPath!.until("session");
} }
} }
return path; return newPath;
} }
function roomsSegmentWithRoom(rooms, roomId, path) { function roomsSegmentWithRoom(rooms: Segment<SegmentType, "rooms">, roomId: string, path: Path<SegmentType>): Segment<SegmentType, "rooms"> {
if(!rooms.value.includes(roomId)) { if(!rooms.value.includes(roomId)) {
const emptyGridTile = path.get("empty-grid-tile"); const emptyGridTile = path.get("empty-grid-tile");
const oldRoom = path.get("room"); const oldRoom = path.get("room");
@ -87,28 +116,55 @@ function roomsSegmentWithRoom(rooms, roomId, path) {
} }
} }
function pushRightPanelSegment(array, segment, value = true) { function pushRightPanelSegment<T extends keyof SegmentType>(array: Segment<SegmentType>[], segment: T, ...value: OptionalValue<SegmentType[T]>): void {
array.push(new Segment("right-panel")); array.push(new Segment("right-panel"));
array.push(new Segment(segment, value)); array.push(new Segment(segment, ...value));
} }
export function addPanelIfNeeded(navigation, path) { export function addPanelIfNeeded<T extends SegmentType>(navigation: Navigation<T>, path: Path<T>): Path<T> {
const segments = navigation.path.segments; const segments = navigation.path.segments;
const i = segments.findIndex(segment => segment.type === "right-panel"); const i = segments.findIndex(segment => segment.type === "right-panel");
let _path = path; let _path = path;
if (i !== -1) { if (i !== -1) {
_path = path.until("room"); _path = path.until("room");
_path = _path.with(segments[i]); _path = _path.with(segments[i])!;
_path = _path.with(segments[i + 1]); _path = _path.with(segments[i + 1])!;
} }
return _path; return _path;
} }
export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) { export function parseUrlPath(urlPath: string, currentNavPath: Path<SegmentType>, defaultSessionId?: string): Segment<SegmentType>[] {
// substr(1) to take of initial / const segments: Segment<SegmentType>[] = [];
const parts = urlPath.substr(1).split("/");
// Special case for OIDC callback
if (urlPath.includes("state")) {
const params = new URLSearchParams(urlPath);
const state = params.get("state");
const code = params.get("code");
const error = params.get("error");
if (state) {
// This is a proper OIDC callback
if (code) {
segments.push(new Segment("oidc", {
state,
code,
}));
return segments;
} else if (error) {
segments.push(new Segment("oidc", {
state,
error,
errorDescription: params.get("error_description"),
errorUri: params.get("error_uri"),
}));
return segments;
}
}
}
// substring(1) to take of initial /
const parts = urlPath.substring(1).split("/");
const iterator = parts[Symbol.iterator](); const iterator = parts[Symbol.iterator]();
const segments = [];
let next; let next;
while (!(next = iterator.next()).done) { while (!(next = iterator.next()).done) {
const type = next.value; const type = next.value;
@ -170,9 +226,9 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
return segments; return segments;
} }
export function stringifyPath(path) { export function stringifyPath(path: Path<SegmentType>): string {
let urlPath = ""; let urlPath = "";
let prevSegment; let prevSegment: Segment<SegmentType> | undefined;
for (const segment of path.segments) { for (const segment of path.segments) {
switch (segment.type) { switch (segment.type) {
case "rooms": case "rooms":
@ -191,6 +247,8 @@ export function stringifyPath(path) {
break; break;
case "right-panel": case "right-panel":
case "sso": case "sso":
case "oidc-callback":
case "oidc-error":
// Do not put these segments in URL // Do not put these segments in URL
continue; continue;
default: default:
@ -205,9 +263,15 @@ export function stringifyPath(path) {
} }
export function tests() { export function tests() {
function createEmptyPath() {
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([]);
return path;
}
return { return {
"stringify grid url with focused empty tile": assert => { "stringify grid url with focused empty tile": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
@ -217,7 +281,7 @@ export function tests() {
assert.equal(urlPath, "/session/1/rooms/a,b,c/3"); assert.equal(urlPath, "/session/1/rooms/a,b,c/3");
}, },
"stringify grid url with focused room": assert => { "stringify grid url with focused room": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
@ -227,7 +291,7 @@ export function tests() {
assert.equal(urlPath, "/session/1/rooms/a,b,c/1"); assert.equal(urlPath, "/session/1/rooms/a,b,c/1");
}, },
"stringify url with right-panel and details segment": assert => { "stringify url with right-panel and details segment": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
@ -239,13 +303,15 @@ export function tests() {
assert.equal(urlPath, "/session/1/rooms/a,b,c/1/details"); assert.equal(urlPath, "/session/1/rooms/a,b,c/1/details");
}, },
"Parse loginToken query parameter into SSO segment": assert => { "Parse loginToken query parameter into SSO segment": assert => {
const segments = parseUrlPath("?loginToken=a1232aSD123"); const path = createEmptyPath();
const segments = parseUrlPath("?loginToken=a1232aSD123", path);
assert.equal(segments.length, 1); assert.equal(segments.length, 1);
assert.equal(segments[0].type, "sso"); assert.equal(segments[0].type, "sso");
assert.equal(segments[0].value, "a1232aSD123"); assert.equal(segments[0].value, "a1232aSD123");
}, },
"parse grid url path with focused empty tile": assert => { "parse grid url path with focused empty tile": assert => {
const segments = parseUrlPath("/session/1/rooms/a,b,c/3"); const path = createEmptyPath();
const segments = parseUrlPath("/session/1/rooms/a,b,c/3", path);
assert.equal(segments.length, 3); assert.equal(segments.length, 3);
assert.equal(segments[0].type, "session"); assert.equal(segments[0].type, "session");
assert.equal(segments[0].value, "1"); assert.equal(segments[0].value, "1");
@ -255,7 +321,8 @@ export function tests() {
assert.equal(segments[2].value, 3); assert.equal(segments[2].value, 3);
}, },
"parse grid url path with focused room": assert => { "parse grid url path with focused room": assert => {
const segments = parseUrlPath("/session/1/rooms/a,b,c/1"); const path = createEmptyPath();
const segments = parseUrlPath("/session/1/rooms/a,b,c/1", path);
assert.equal(segments.length, 3); assert.equal(segments.length, 3);
assert.equal(segments[0].type, "session"); assert.equal(segments[0].type, "session");
assert.equal(segments[0].value, "1"); assert.equal(segments[0].value, "1");
@ -265,7 +332,8 @@ export function tests() {
assert.equal(segments[2].value, "b"); assert.equal(segments[2].value, "b");
}, },
"parse empty grid url": assert => { "parse empty grid url": assert => {
const segments = parseUrlPath("/session/1/rooms/"); const path = createEmptyPath();
const segments = parseUrlPath("/session/1/rooms/", path);
assert.equal(segments.length, 3); assert.equal(segments.length, 3);
assert.equal(segments[0].type, "session"); assert.equal(segments[0].type, "session");
assert.equal(segments[0].value, "1"); assert.equal(segments[0].value, "1");
@ -275,7 +343,8 @@ export function tests() {
assert.equal(segments[2].value, 0); assert.equal(segments[2].value, 0);
}, },
"parse empty grid url with focus": assert => { "parse empty grid url with focus": assert => {
const segments = parseUrlPath("/session/1/rooms//1"); const path = createEmptyPath();
const segments = parseUrlPath("/session/1/rooms//1", path);
assert.equal(segments.length, 3); assert.equal(segments.length, 3);
assert.equal(segments[0].type, "session"); assert.equal(segments[0].type, "session");
assert.equal(segments[0].value, "1"); assert.equal(segments[0].value, "1");
@ -285,7 +354,7 @@ export function tests() {
assert.equal(segments[2].value, 1); assert.equal(segments[2].value, 1);
}, },
"parse open-room action replacing the current focused room": assert => { "parse open-room action replacing the current focused room": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
@ -301,7 +370,7 @@ export function tests() {
assert.equal(segments[2].value, "d"); assert.equal(segments[2].value, "d");
}, },
"parse open-room action changing focus to an existing room": assert => { "parse open-room action changing focus to an existing room": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
@ -317,7 +386,7 @@ export function tests() {
assert.equal(segments[2].value, "a"); assert.equal(segments[2].value, "a");
}, },
"parse open-room action changing focus to an existing room with details open": assert => { "parse open-room action changing focus to an existing room with details open": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
@ -339,7 +408,7 @@ export function tests() {
assert.equal(segments[4].value, true); assert.equal(segments[4].value, true);
}, },
"open-room action should only copy over previous segments if there are no parts after open-room": assert => { "open-room action should only copy over previous segments if there are no parts after open-room": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
@ -361,7 +430,7 @@ export function tests() {
assert.equal(segments[4].value, "foo"); assert.equal(segments[4].value, "foo");
}, },
"parse open-room action setting a room in an empty tile": assert => { "parse open-room action setting a room in an empty tile": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
@ -377,83 +446,104 @@ export function tests() {
assert.equal(segments[2].value, "d"); assert.equal(segments[2].value, "d");
}, },
"parse session url path without id": assert => { "parse session url path without id": assert => {
const segments = parseUrlPath("/session"); const path = createEmptyPath();
const segments = parseUrlPath("/session", path);
assert.equal(segments.length, 1); assert.equal(segments.length, 1);
assert.equal(segments[0].type, "session"); assert.equal(segments[0].type, "session");
assert.strictEqual(segments[0].value, true); assert.strictEqual(segments[0].value, true);
}, },
"remove active room from grid path turns it into empty tile": assert => { "remove active room from grid path turns it into empty tile": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
new Segment("room", "b") new Segment("room", "b")
]); ]);
const newPath = removeRoomFromPath(path, "b"); const newPath = removeRoomFromPath(path, "b");
assert.equal(newPath.segments.length, 3); assert.equal(newPath?.segments.length, 3);
assert.equal(newPath.segments[0].type, "session"); assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1); assert.equal(newPath?.segments[0].value, 1);
assert.equal(newPath.segments[1].type, "rooms"); assert.equal(newPath?.segments[1].type, "rooms");
assert.deepEqual(newPath.segments[1].value, ["a", "", "c"]); assert.deepEqual(newPath?.segments[1].value, ["a", "", "c"]);
assert.equal(newPath.segments[2].type, "empty-grid-tile"); assert.equal(newPath?.segments[2].type, "empty-grid-tile");
assert.equal(newPath.segments[2].value, 1); assert.equal(newPath?.segments[2].value, 1);
}, },
"remove inactive room from grid path": assert => { "remove inactive room from grid path": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]), new Segment("rooms", ["a", "b", "c"]),
new Segment("room", "b") new Segment("room", "b")
]); ]);
const newPath = removeRoomFromPath(path, "a"); const newPath = removeRoomFromPath(path, "a");
assert.equal(newPath.segments.length, 3); assert.equal(newPath?.segments.length, 3);
assert.equal(newPath.segments[0].type, "session"); assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1); assert.equal(newPath?.segments[0].value, 1);
assert.equal(newPath.segments[1].type, "rooms"); assert.equal(newPath?.segments[1].type, "rooms");
assert.deepEqual(newPath.segments[1].value, ["", "b", "c"]); assert.deepEqual(newPath?.segments[1].value, ["", "b", "c"]);
assert.equal(newPath.segments[2].type, "room"); assert.equal(newPath?.segments[2].type, "room");
assert.equal(newPath.segments[2].value, "b"); assert.equal(newPath?.segments[2].value, "b");
}, },
"remove inactive room from grid path with empty tile": assert => { "remove inactive room from grid path with empty tile": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("rooms", ["a", "b", ""]), new Segment("rooms", ["a", "b", ""]),
new Segment("empty-grid-tile", 3) new Segment("empty-grid-tile", 3)
]); ]);
const newPath = removeRoomFromPath(path, "b"); const newPath = removeRoomFromPath(path, "b");
assert.equal(newPath.segments.length, 3); assert.equal(newPath?.segments.length, 3);
assert.equal(newPath.segments[0].type, "session"); assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1); assert.equal(newPath?.segments[0].value, 1);
assert.equal(newPath.segments[1].type, "rooms"); assert.equal(newPath?.segments[1].type, "rooms");
assert.deepEqual(newPath.segments[1].value, ["a", "", ""]); assert.deepEqual(newPath?.segments[1].value, ["a", "", ""]);
assert.equal(newPath.segments[2].type, "empty-grid-tile"); assert.equal(newPath?.segments[2].type, "empty-grid-tile");
assert.equal(newPath.segments[2].value, 3); assert.equal(newPath?.segments[2].value, 3);
}, },
"remove active room": assert => { "remove active room": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("room", "b") new Segment("room", "b")
]); ]);
const newPath = removeRoomFromPath(path, "b"); const newPath = removeRoomFromPath(path, "b");
assert.equal(newPath.segments.length, 1); assert.equal(newPath?.segments.length, 1);
assert.equal(newPath.segments[0].type, "session"); assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1); assert.equal(newPath?.segments[0].value, 1);
}, },
"remove inactive room doesn't do anything": assert => { "remove inactive room doesn't do anything": assert => {
const nav = new Navigation(allowsChild); const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([ const path = nav.pathFrom([
new Segment("session", 1), new Segment("session", 1),
new Segment("room", "b") new Segment("room", "b")
]); ]);
const newPath = removeRoomFromPath(path, "a"); const newPath = removeRoomFromPath(path, "a");
assert.equal(newPath.segments.length, 2); assert.equal(newPath?.segments.length, 2);
assert.equal(newPath.segments[0].type, "session"); assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1); assert.equal(newPath?.segments[0].value, 1);
assert.equal(newPath.segments[1].type, "room"); assert.equal(newPath?.segments[1].type, "room");
assert.equal(newPath.segments[1].value, "b"); assert.equal(newPath?.segments[1].value, "b");
},
"Parse OIDC callback": assert => {
const path = createEmptyPath();
const segments = parseUrlPath("state=tc9CnLU7&code=cnmUnwIYtY7V8RrWUyhJa4yvX72jJ5Yx", path);
assert.equal(segments.length, 1);
assert.equal(segments[0].type, "oidc");
assert.deepEqual(segments[0].value, {state: "tc9CnLU7", code: "cnmUnwIYtY7V8RrWUyhJa4yvX72jJ5Yx"});
},
"Parse OIDC error": assert => {
const path = createEmptyPath();
const segments = parseUrlPath("state=tc9CnLU7&error=invalid_request", path);
assert.equal(segments.length, 1);
assert.equal(segments[0].type, "oidc");
assert.deepEqual(segments[0].value, {state: "tc9CnLU7", error: "invalid_request", errorUri: null, errorDescription: null});
},
"Parse OIDC error with description": assert => {
const path = createEmptyPath();
const segments = parseUrlPath("state=tc9CnLU7&error=invalid_request&error_description=Unsupported%20response_type%20value", path);
assert.equal(segments.length, 1);
assert.equal(segments[0].type, "oidc");
assert.deepEqual(segments[0].value, {state: "tc9CnLU7", error: "invalid_request", errorDescription: "Unsupported response_type value", errorUri: null});
}, },
} }
} }

View File

@ -16,7 +16,7 @@ limitations under the License.
import {ViewModel} from "../ViewModel"; import {ViewModel} from "../ViewModel";
import {imageToInfo} from "./common.js"; import {imageToInfo} from "./common.js";
import {RoomType} from "../../matrix/room/common"; import {RoomVisibility} from "../../matrix/room/common";
export class CreateRoomViewModel extends ViewModel { export class CreateRoomViewModel extends ViewModel {
constructor(options) { constructor(options) {
@ -89,7 +89,7 @@ export class CreateRoomViewModel extends ViewModel {
} }
} }
const roomBeingCreated = this._session.createRoom({ const roomBeingCreated = this._session.createRoom({
type: this.isPublic ? RoomType.Public : RoomType.Private, type: this.isPublic ? RoomVisibility.Public : RoomVisibility.Private,
name: this._name ?? undefined, name: this._name ?? undefined,
topic: this._topic ?? undefined, topic: this._topic ?? undefined,
isEncrypted: !this.isPublic && this._isEncrypted, isEncrypted: !this.isPublic && this._isEncrypted,

View File

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import {ViewModel} from "../ViewModel"; import {ViewModel} from "../ViewModel";
import {addPanelIfNeeded} from "../navigation/index.js"; import {addPanelIfNeeded} from "../navigation/index";
function dedupeSparse(roomIds) { function dedupeSparse(roomIds) {
return roomIds.map((id, idx) => { return roomIds.map((id, idx) => {
@ -185,7 +185,7 @@ export class RoomGridViewModel extends ViewModel {
} }
} }
import {createNavigation} from "../navigation/index.js"; import {createNavigation} from "../navigation/index";
import {ObservableValue} from "../../observable/value/ObservableValue"; import {ObservableValue} from "../../observable/value/ObservableValue";
export function tests() { export function tests() {

View File

@ -21,7 +21,7 @@ import {InviteTileViewModel} from "./InviteTileViewModel.js";
import {RoomBeingCreatedTileViewModel} from "./RoomBeingCreatedTileViewModel.js"; import {RoomBeingCreatedTileViewModel} from "./RoomBeingCreatedTileViewModel.js";
import {RoomFilter} from "./RoomFilter.js"; import {RoomFilter} from "./RoomFilter.js";
import {ApplyMap} from "../../../observable/map/ApplyMap.js"; import {ApplyMap} from "../../../observable/map/ApplyMap.js";
import {addPanelIfNeeded} from "../../navigation/index.js"; import {addPanelIfNeeded} from "../../navigation/index";
export class LeftPanelViewModel extends ViewModel { export class LeftPanelViewModel extends ViewModel {
constructor(options) { constructor(options) {

View File

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import {ViewModel} from "../../ViewModel"; import {ViewModel} from "../../ViewModel";
import {RoomType} from "../../../matrix/room/common"; import {RoomVisibility} from "../../../matrix/room/common";
import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar"; import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
export class MemberDetailsViewModel extends ViewModel { export class MemberDetailsViewModel extends ViewModel {
@ -87,7 +87,7 @@ export class MemberDetailsViewModel extends ViewModel {
let roomId = room?.id; let roomId = room?.id;
if (!roomId) { if (!roomId) {
const roomBeingCreated = await this._session.createRoom({ const roomBeingCreated = await this._session.createRoom({
type: RoomType.DirectMessage, type: RoomVisibility.DirectMessage,
invites: [this.userId] invites: [this.userId]
}); });
roomId = roomBeingCreated.id; roomId = roomBeingCreated.id;

View File

@ -16,6 +16,7 @@ limitations under the License.
import {AvatarSource} from "../../AvatarSource"; import {AvatarSource} from "../../AvatarSource";
import {ViewModel, Options as BaseOptions} from "../../ViewModel"; import {ViewModel, Options as BaseOptions} from "../../ViewModel";
import { SegmentType } from "../../navigation";
import {getStreamVideoTrack, getStreamAudioTrack} from "../../../matrix/calls/common"; import {getStreamVideoTrack, getStreamAudioTrack} from "../../../matrix/calls/common";
import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar"; import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
import {EventObservableValue} from "../../../observable/value/EventObservableValue"; import {EventObservableValue} from "../../../observable/value/EventObservableValue";
@ -34,13 +35,13 @@ type Options = BaseOptions & {
room: Room, room: Room,
}; };
export class CallViewModel extends ViewModel<Options> { export class CallViewModel extends ViewModel<SegmentType, Options> {
public readonly memberViewModels: BaseObservableList<IStreamViewModel>; public readonly memberViewModels: BaseObservableList<IStreamViewModel>;
constructor(options: Options) { constructor(options: Options) {
super(options); super(options);
const ownMemberViewModelMap = new ObservableValueMap("self", new EventObservableValue(this.call, "change")) const ownMemberViewModelMap = new ObservableValueMap("self", new EventObservableValue(this.call, "change"))
.mapValues((call, emitChange) => new OwnMemberViewModel(this.childOptions({call, emitChange})), () => {}); .mapValues((call, emitChange) => new OwnMemberViewModel(this.childOptions({call, room: options.room, emitChange})), () => {});
this.memberViewModels = this.call.members this.memberViewModels = this.call.members
.filterValues(member => member.isConnected) .filterValues(member => member.isConnected)
.mapValues(member => new CallMemberViewModel(this.childOptions({member, mediaRepository: this.getOption("room").mediaRepository}))) .mapValues(member => new CallMemberViewModel(this.childOptions({member, mediaRepository: this.getOption("room").mediaRepository})))
@ -119,7 +120,7 @@ export class CallViewModel extends ViewModel<Options> {
} }
} }
class OwnMemberViewModel extends ViewModel<Options> implements IStreamViewModel { class OwnMemberViewModel extends ViewModel<SegmentType, Options> implements IStreamViewModel {
private memberObservable: undefined | BaseObservableValue<RoomMember>; private memberObservable: undefined | BaseObservableValue<RoomMember>;
constructor(options: Options) { constructor(options: Options) {
@ -190,7 +191,7 @@ type MemberOptions = BaseOptions & {
mediaRepository: MediaRepository mediaRepository: MediaRepository
}; };
export class CallMemberViewModel extends ViewModel<MemberOptions> implements IStreamViewModel { export class CallMemberViewModel extends ViewModel<SegmentType, MemberOptions> implements IStreamViewModel {
get stream(): Stream | undefined { get stream(): Stream | undefined {
return this.member.remoteMedia?.userMedia; return this.member.remoteMedia?.userMedia;
} }

View File

@ -26,6 +26,7 @@ import {LocalMedia} from "../../../matrix/calls/LocalMedia";
// TODO: remove fallback so default isn't included in bundle for SDK users that have their custom tileClassForEntry // TODO: remove fallback so default isn't included in bundle for SDK users that have their custom tileClassForEntry
// this is a breaking SDK change though to make this option mandatory // this is a breaking SDK change though to make this option mandatory
import {tileClassForEntry as defaultTileClassForEntry} from "./timeline/tiles/index"; import {tileClassForEntry as defaultTileClassForEntry} from "./timeline/tiles/index";
import {RoomStatus} from "../../../matrix/room/common";
export class RoomViewModel extends ViewModel { export class RoomViewModel extends ViewModel {
constructor(options) { constructor(options) {
@ -40,9 +41,9 @@ export class RoomViewModel extends ViewModel {
this._sendError = null; this._sendError = null;
this._composerVM = null; this._composerVM = null;
if (room.isArchived) { if (room.isArchived) {
this._composerVM = new ArchivedViewModel(this.childOptions({archivedRoom: room})); this._composerVM = this.track(new ArchivedViewModel(this.childOptions({archivedRoom: room})));
} else { } else {
this._composerVM = new ComposerViewModel(this); this._recreateComposerOnPowerLevelChange();
} }
this._clearUnreadTimout = null; this._clearUnreadTimout = null;
this._closeUrl = this.urlCreator.urlUntilSegment("session"); this._closeUrl = this.urlCreator.urlUntilSegment("session");
@ -96,6 +97,30 @@ export class RoomViewModel extends ViewModel {
this._clearUnreadAfterDelay(); this._clearUnreadAfterDelay();
} }
async _recreateComposerOnPowerLevelChange() {
const powerLevelObservable = await this._room.observePowerLevels();
const canSendMessage = () => powerLevelObservable.get().canSendType("m.room.message");
let oldCanSendMessage = canSendMessage();
const recreateComposer = newCanSendMessage => {
this._composerVM = this.disposeTracked(this._composerVM);
if (newCanSendMessage) {
this._composerVM = this.track(new ComposerViewModel(this));
}
else {
this._composerVM = this.track(new LowerPowerLevelViewModel(this.childOptions()));
}
this.emitChange("powerLevelObservable")
};
this.track(powerLevelObservable.subscribe(() => {
const newCanSendMessage = canSendMessage();
if (oldCanSendMessage !== newCanSendMessage) {
recreateComposer(newCanSendMessage);
oldCanSendMessage = newCanSendMessage;
}
}));
recreateComposer(oldCanSendMessage);
}
async _clearUnreadAfterDelay() { async _clearUnreadAfterDelay() {
if (this._room.isArchived || this._clearUnreadTimout) { if (this._room.isArchived || this._clearUnreadTimout) {
return; return;
@ -202,18 +227,89 @@ export class RoomViewModel extends ViewModel {
} }
} }
async _processCommandJoin(roomName) {
try {
const roomId = await this._options.client.session.joinRoom(roomName);
const roomStatusObserver = await this._options.client.session.observeRoomStatus(roomId);
await roomStatusObserver.waitFor(status => status === RoomStatus.Joined);
this.navigation.push("room", roomId);
} catch (err) {
let exc;
if ((err.statusCode ?? err.status) === 400) {
exc = new Error(`/join : '${roomName}' was not legal room ID or room alias`);
} else if ((err.statusCode ?? err.status) === 404 || (err.statusCode ?? err.status) === 502 || err.message == "Internal Server Error") {
exc = new Error(`/join : room '${roomName}' not found`);
} else if ((err.statusCode ?? err.status) === 403) {
exc = new Error(`/join : you're not invited to join '${roomName}'`);
} else {
exc = err;
}
this._sendError = exc;
this._timelineError = null;
this.emitChange("error");
}
}
async _processCommand (message) {
let msgtype;
const [commandName, ...args] = message.substring(1).split(" ");
switch (commandName) {
case "me":
message = args.join(" ");
msgtype = "m.emote";
break;
case "join":
if (args.length === 1) {
const roomName = args[0];
await this._processCommandJoin(roomName);
} else {
this._sendError = new Error("join syntax: /join <room-id>");
this._timelineError = null;
this.emitChange("error");
}
break;
case "shrug":
message = "¯\\_(ツ)_/¯ " + args.join(" ");
msgtype = "m.text";
break;
case "tableflip":
message = "(╯°□°)╯︵ ┻━┻ " + args.join(" ");
msgtype = "m.text";
break;
case "unflip":
message = "┬──┬ ( ゜-゜ノ) " + args.join(" ");
msgtype = "m.text";
break;
case "lenny":
message = "( ͡° ͜ʖ ͡°) " + args.join(" ");
msgtype = "m.text";
break;
default:
this._sendError = new Error(`no command name "${commandName}". To send the message instead of executing, please type "/${message}"`);
this._timelineError = null;
this.emitChange("error");
message = undefined;
}
return {type: msgtype, message: message};
}
async _sendMessage(message, replyingTo) { async _sendMessage(message, replyingTo) {
if (!this._room.isArchived && message) { if (!this._room.isArchived && message) {
let messinfo = {type : "m.text", message : message};
if (message.startsWith("//")) {
messinfo.message = message.substring(1).trim();
} else if (message.startsWith("/")) {
messinfo = await this._processCommand(message);
}
try { try {
let msgtype = "m.text"; const msgtype = messinfo.type;
if (message.startsWith("/me ")) { const message = messinfo.message;
message = message.substr(4).trim(); if (msgtype && message) {
msgtype = "m.emote"; if (replyingTo) {
} await replyingTo.reply(msgtype, message);
if (replyingTo) { } else {
await replyingTo.reply(msgtype, message); await this._room.sendEvent("m.room.message", {msgtype, body: message});
} else { }
await this._room.sendEvent("m.room.message", {msgtype, body: message});
} }
} catch (err) { } catch (err) {
console.error(`room.sendMessage(): ${err.message}:\n${err.stack}`); console.error(`room.sendMessage(): ${err.message}:\n${err.stack}`);
@ -363,6 +459,11 @@ export class RoomViewModel extends ViewModel {
} }
} }
dismissError() {
this._sendError = null;
this.emitChange("error");
}
async startCall() { async startCall() {
try { try {
const session = this.getOption("session"); const session = this.getOption("session");
@ -408,6 +509,16 @@ class ArchivedViewModel extends ViewModel {
} }
get kind() { get kind() {
return "archived"; return "disabled";
}
}
class LowerPowerLevelViewModel extends ViewModel {
get description() {
return this.i18n`You do not have the powerlevel necessary to send messages`;
}
get kind() {
return "disabled";
} }
} }

View File

@ -53,6 +53,7 @@ export class SettingsViewModel extends ViewModel {
this.pushNotifications = new PushNotificationStatus(); this.pushNotifications = new PushNotificationStatus();
this._activeTheme = undefined; this._activeTheme = undefined;
this._logsFeedbackMessage = undefined; this._logsFeedbackMessage = undefined;
this._accountManagementUrl = null;
} }
get _session() { get _session() {
@ -82,9 +83,16 @@ export class SettingsViewModel extends ViewModel {
if (!import.meta.env.DEV) { if (!import.meta.env.DEV) {
this._activeTheme = await this.platform.themeLoader.getActiveTheme(); this._activeTheme = await this.platform.themeLoader.getActiveTheme();
} }
const {accountManagementUrl} = await this.platform.sessionInfoStorage.get(this._client._sessionId);
this._accountManagementUrl = accountManagementUrl;
this.emitChange(""); this.emitChange("");
} }
get accountManagementUrl() {
return this._accountManagementUrl;
}
get closeUrl() { get closeUrl() {
return this._closeUrl; return this._closeUrl;
} }

View File

@ -19,8 +19,12 @@ export type {ILogItem} from "./logging/types";
export {IDBLogPersister} from "./logging/IDBLogPersister"; export {IDBLogPersister} from "./logging/IDBLogPersister";
export {ConsoleReporter} from "./logging/ConsoleReporter"; export {ConsoleReporter} from "./logging/ConsoleReporter";
export {Platform} from "./platform/web/Platform.js"; export {Platform} from "./platform/web/Platform.js";
export {Client, LoadStatus} from "./matrix/Client.js"; export {Client, LoadStatus, LoginFailure} from "./matrix/Client.js";
export {RoomStatus} from "./matrix/room/common"; export {RoomStatus} from "./matrix/room/common";
export {AttachmentUpload} from "./matrix/room/AttachmentUpload";
export {CallIntent} from "./matrix/calls/callEventTypes";
export {OidcApi} from "./matrix/net/OidcApi";
export {OIDCLoginMethod} from "./matrix/login/OIDCLoginMethod";
// export everything needed to observe state events on all rooms using session.observeRoomState // export everything needed to observe state events on all rooms using session.observeRoomState
export type {RoomStateHandler} from "./matrix/room/state/types"; export type {RoomStateHandler} from "./matrix/room/state/types";
export type {MemberChange} from "./matrix/room/members/RoomMember"; export type {MemberChange} from "./matrix/room/members/RoomMember";
@ -29,7 +33,7 @@ export type {Room} from "./matrix/room/Room";
export type {StateEvent} from "./matrix/storage/types"; export type {StateEvent} from "./matrix/storage/types";
// export main view & view models // export main view & view models
export {createNavigation, createRouter} from "./domain/navigation/index.js"; export {createNavigation, createRouter} from "./domain/navigation/index";
export {RootViewModel} from "./domain/RootViewModel.js"; export {RootViewModel} from "./domain/RootViewModel.js";
export {RootView} from "./platform/web/ui/RootView.js"; export {RootView} from "./platform/web/ui/RootView.js";
export {SessionViewModel} from "./domain/session/SessionViewModel.js"; export {SessionViewModel} from "./domain/session/SessionViewModel.js";
@ -79,7 +83,7 @@ export {TemplateView} from "./platform/web/ui/general/TemplateView";
export {ViewModel} from "./domain/ViewModel"; export {ViewModel} from "./domain/ViewModel";
export {LoadingView} from "./platform/web/ui/general/LoadingView.js"; export {LoadingView} from "./platform/web/ui/general/LoadingView.js";
export {AvatarView} from "./platform/web/ui/AvatarView.js"; export {AvatarView} from "./platform/web/ui/AvatarView.js";
export {RoomType} from "./matrix/room/common"; export {RoomVisibility, RoomType} from "./matrix/room/common";
export {EventEmitter} from "./utils/EventEmitter"; export {EventEmitter} from "./utils/EventEmitter";
export {Disposables} from "./utils/Disposables"; export {Disposables} from "./utils/Disposables";
export {LocalMedia} from "./matrix/calls/LocalMedia"; export {LocalMedia} from "./matrix/calls/LocalMedia";

View File

@ -185,9 +185,6 @@ export class LogItem implements ILogItem {
* @return {[type]} [description] * @return {[type]} [description]
*/ */
run<T>(callback: LogCallback<T>): T { run<T>(callback: LogCallback<T>): T {
if (this.end !== undefined) {
console.trace("log item is finished, additional logs will likely not be recorded");
}
try { try {
const result = callback(this); const result = callback(this);
if (result instanceof Promise) { if (result instanceof Promise) {
@ -239,9 +236,6 @@ export class LogItem implements ILogItem {
} }
child(labelOrValues: LabelOrValues, logLevel?: LogLevel, filterCreator?: FilterCreator): LogItem { child(labelOrValues: LabelOrValues, logLevel?: LogLevel, filterCreator?: FilterCreator): LogItem {
if (this.end) {
console.trace(`log item ${this.values.l} finished, additional log ${JSON.stringify(labelOrValues)} will likely not be recorded`);
}
if (!logLevel) { if (!logLevel) {
logLevel = this.logLevel || LogLevel.Info; logLevel = this.logLevel || LogLevel.Info;
} }

View File

@ -20,6 +20,8 @@ import {lookupHomeserver} from "./well-known.js";
import {AbortableOperation} from "../utils/AbortableOperation"; import {AbortableOperation} from "../utils/AbortableOperation";
import {ObservableValue} from "../observable/value/ObservableValue"; import {ObservableValue} from "../observable/value/ObservableValue";
import {HomeServerApi} from "./net/HomeServerApi"; import {HomeServerApi} from "./net/HomeServerApi";
import {OidcApi} from "./net/OidcApi";
import {TokenRefresher} from "./net/TokenRefresher";
import {Reconnector, ConnectionStatus} from "./net/Reconnector"; import {Reconnector, ConnectionStatus} from "./net/Reconnector";
import {ExponentialRetryDelay} from "./net/ExponentialRetryDelay"; import {ExponentialRetryDelay} from "./net/ExponentialRetryDelay";
import {MediaRepository} from "./net/MediaRepository"; import {MediaRepository} from "./net/MediaRepository";
@ -100,6 +102,8 @@ export class Client {
}); });
} }
// TODO: When converted to typescript this should return the same type
// as this._loginOptions is in LoginViewModel.ts (LoginOptions).
_parseLoginOptions(options, homeserver) { _parseLoginOptions(options, homeserver) {
/* /*
Take server response and return new object which has two props password and sso which Take server response and return new object which has two props password and sso which
@ -121,14 +125,32 @@ export class Client {
return result; return result;
} }
queryLogin(homeserver) { queryLogin(initialHomeserver) {
return new AbortableOperation(async setAbortable => { return new AbortableOperation(async setAbortable => {
homeserver = await lookupHomeserver(homeserver, (url, options) => { const { homeserver, issuer, account } = await lookupHomeserver(initialHomeserver, (url, options) => {
return setAbortable(this._platform.request(url, options)); return setAbortable(this._platform.request(url, options));
}); });
let oidc = undefined;
if (issuer) {
try {
const oidcApi = new OidcApi({
issuer,
clientConfigs: this._platform.config.oidc.clientConfigs,
request: this._platform.request,
encoding: this._platform.encoding,
crypto: this._platform.crypto,
});
await oidcApi.validate();
oidc = { issuer, account }
} catch (e) {
console.log(e);
}
}
const hsApi = new HomeServerApi({homeserver, request: this._platform.request}); const hsApi = new HomeServerApi({homeserver, request: this._platform.request});
const response = await setAbortable(hsApi.getLoginFlows()).response(); const response = await setAbortable(hsApi.getLoginFlows()).response();
return this._parseLoginOptions(response, homeserver); const result = this._parseLoginOptions(response, homeserver);
result.oidc = oidc;
return result;
}); });
} }
@ -170,6 +192,21 @@ export class Client {
accessToken: loginData.access_token, accessToken: loginData.access_token,
lastUsed: clock.now() lastUsed: clock.now()
}; };
if (loginData.refresh_token) {
sessionInfo.refreshToken = loginData.refresh_token;
}
if (loginData.expires_in) {
sessionInfo.accessTokenExpiresAt = clock.now() + loginData.expires_in * 1000;
}
if (loginData.oidc_issuer) {
sessionInfo.oidcIssuer = loginData.oidc_issuer;
sessionInfo.oidcClientId = loginData.oidc_client_id;
sessionInfo.accountManagementUrl = loginData.oidc_account_management_url;
}
log.set("id", sessionId); log.set("id", sessionId);
} catch (err) { } catch (err) {
this._error = err; this._error = err;
@ -223,9 +260,42 @@ export class Client {
retryDelay: new ExponentialRetryDelay(clock.createTimeout), retryDelay: new ExponentialRetryDelay(clock.createTimeout),
createMeasure: clock.createMeasure createMeasure: clock.createMeasure
}); });
let accessToken;
if (sessionInfo.oidcIssuer) {
const oidcApi = new OidcApi({
issuer: sessionInfo.oidcIssuer,
clientConfigs: this._platform.config.oidc.clientConfigs,
clientId: sessionInfo.oidcClientId,
request: this._platform.request,
encoding: this._platform.encoding,
crypto: this._platform.crypto,
});
this._tokenRefresher = new TokenRefresher({
oidcApi,
clock: this._platform.clock,
accessToken: sessionInfo.accessToken,
accessTokenExpiresAt: sessionInfo.accessTokenExpiresAt,
refreshToken: sessionInfo.refreshToken,
anticipation: 30 * 1000,
});
this._tokenRefresher.token.subscribe(t => {
this._platform.sessionInfoStorage.updateToken(sessionInfo.id, t.accessToken, t.accessTokenExpiresAt, t.refreshToken);
});
await this._tokenRefresher.start();
accessToken = this._tokenRefresher.accessToken;
} else {
accessToken = new ObservableValue(sessionInfo.accessToken);
}
const hsApi = new HomeServerApi({ const hsApi = new HomeServerApi({
homeserver: sessionInfo.homeServer, homeserver: sessionInfo.homeServer,
accessToken: sessionInfo.accessToken, accessToken,
request: this._platform.request, request: this._platform.request,
reconnector: this._reconnector, reconnector: this._reconnector,
}); });
@ -238,6 +308,9 @@ export class Client {
userId: sessionInfo.userId, userId: sessionInfo.userId,
homeserver: sessionInfo.homeServer, homeserver: sessionInfo.homeServer,
}; };
if (sessionInfo.accountManagementUrl) {
filteredSessionInfo.accountManagementUrl = sessionInfo.accountManagementUrl;
}
const olm = await this._olmPromise; const olm = await this._olmPromise;
let olmWorker = null; let olmWorker = null;
if (this._workerPromise) { if (this._workerPromise) {
@ -408,13 +481,37 @@ export class Client {
throw new Error(`Could not find session for id ${this._sessionId}`); throw new Error(`Could not find session for id ${this._sessionId}`);
} }
try { try {
const hsApi = new HomeServerApi({ if (sessionInfo.oidcIssuer) {
homeserver: sessionInfo.homeServer, const oidcApi = new OidcApi({
accessToken: sessionInfo.accessToken, issuer: sessionInfo.oidcIssuer,
request: this._platform.request clientConfigs: this._platform.config.oidc.clientConfigs,
}); clientId: sessionInfo.oidcClientId,
await hsApi.logout({log}).response(); request: this._platform.request,
} catch (err) {} encoding: this._platform.encoding,
crypto: this._platform.crypto,
});
// if access token revocation fails then we still want to try and revoke the refresh token
try {
await oidcApi.revokeToken({ token: sessionInfo.accessToken, type: "access_token" });
} catch (err) {
console.error(err);
}
if (sessionInfo.refreshToken) {
await oidcApi.revokeToken({ token: sessionInfo.refreshToken, type: "refresh_token" });
}
} else {
const hsApi = new HomeServerApi({
homeserver: sessionInfo.homeServer,
accessToken: sessionInfo.accessToken,
request: this._platform.request
});
await hsApi.logout({log}).response();
}
} catch (err) {
console.error(err)
}
await this.deleteSession(log); await this.deleteSession(log);
}); });
} }
@ -433,6 +530,10 @@ export class Client {
this._sync.stop(); this._sync.stop();
this._sync = null; this._sync = null;
} }
if (this._tokenRefresher) {
this._tokenRefresher.stop();
this._tokenRefresher = null;
}
if (this._session) { if (this._session) {
this._session.dispose(); this._session.dispose();
this._session = null; this._session = null;

View File

@ -134,6 +134,14 @@ export class Session {
this.needsKeyBackup = new ObservableValue(false); this.needsKeyBackup = new ObservableValue(false);
} }
get hsApi() {
return this._hsApi;
}
get sessionInfo() {
return this._sessionInfo;
}
get fingerprintKey() { get fingerprintKey() {
return this._e2eeAccount?.identityKeys.ed25519; return this._e2eeAccount?.identityKeys.ed25519;
} }
@ -954,6 +962,42 @@ export class Session {
return this._roomStateHandler.subscribe(roomStateHandler); return this._roomStateHandler.subscribe(roomStateHandler);
} }
async setAccountData(type, content) {
const txn = await this._storage.readWriteTxn([this._storage.storeNames.accountData]);
if (txn) {
txn.accountData.set({ type, content });
await txn.complete();
}
await this.hsApi.setAccountData(this.userId, type, content).response();
}
async getAccountData(type) {
const txn = await this._storage.readWriteTxn([this._storage.storeNames.accountData]);
const entry = await txn.accountData.get(type);
if (entry) {
await txn.complete();
return entry.content;
} else {
try {
const content = await this.hsApi.accountData(this.userId, type).response();
if (content) {
txn.accountData.set({ type, content });
await txn.complete();
}
return content;
} catch (error) {
txn.abort();
return undefined;
}
}
}
/** /**
Creates an empty (summary isn't loaded) the archived room if it isn't Creates an empty (summary isn't loaded) the archived room if it isn't
loaded already, assuming sync will either remove it (when rejoining) or loaded already, assuming sync will either remove it (when rejoining) or

View File

@ -221,11 +221,12 @@ export class CallHandler implements RoomStateHandler {
const userId = event.state_key; const userId = event.state_key;
const roomMemberKey = getRoomMemberKey(roomId, userId) const roomMemberKey = getRoomMemberKey(roomId, userId)
const calls = event.content["m.calls"] ?? []; const calls = event.content["m.calls"] ?? [];
const eventTimestamp = event.origin_server_ts;
for (const call of calls) { for (const call of calls) {
const callId = call["m.call_id"]; const callId = call["m.call_id"];
const groupCall = this._calls.get(callId); const groupCall = this._calls.get(callId);
// TODO: also check the member when receiving the m.call event // TODO: also check the member when receiving the m.call event
groupCall?.updateMembership(userId, member, call, log); groupCall?.updateMembership(userId, member, call, eventTimestamp, log);
}; };
const newCallIdsMemberOf = new Set<string>(calls.map(call => call["m.call_id"])); const newCallIdsMemberOf = new Set<string>(calls.map(call => call["m.call_id"]));
let previousCallIdsMemberOf = this.roomMemberToCallIds.get(roomMemberKey); let previousCallIdsMemberOf = this.roomMemberToCallIds.get(roomMemberKey);

View File

@ -1116,7 +1116,6 @@ export class PeerCall implements IDisposable {
// we really don't want to trigger any code in Member after this // we really don't want to trigger any code in Member after this
this.options.emitUpdate = (_, __, log) => { this.options.emitUpdate = (_, __, log) => {
log.log("emitting update from PeerCall after disposal", this.logItem.level.Error); log.log("emitting update from PeerCall after disposal", this.logItem.level.Error);
console.trace("emitting update from PeerCall after disposal");
}; };
} }

View File

@ -85,6 +85,9 @@ export class GroupCall extends EventEmitter<{change: never}> {
private bufferedDeviceMessages = new Map<string, Set<SignallingMessage<MGroupCallBase>>>(); private bufferedDeviceMessages = new Map<string, Set<SignallingMessage<MGroupCallBase>>>();
private joinedData?: JoinedData; private joinedData?: JoinedData;
private _deviceIndex?: number;
private _eventTimestamp?: number;
constructor( constructor(
public readonly id: string, public readonly id: string,
newCall: boolean, newCall: boolean,
@ -122,6 +125,14 @@ export class GroupCall extends EventEmitter<{change: never}> {
return this.callContent?.["m.intent"]; return this.callContent?.["m.intent"];
} }
get deviceIndex(): number | undefined {
return this._deviceIndex;
}
get eventTimestamp(): number | undefined {
return this._eventTimestamp;
}
/** /**
* Gives access the log item for this call while joined. * Gives access the log item for this call while joined.
* Can be used for call diagnostics while in the call. * Can be used for call diagnostics while in the call.
@ -294,15 +305,20 @@ export class GroupCall extends EventEmitter<{change: never}> {
} }
/** @internal */ /** @internal */
updateMembership(userId: string, roomMember: RoomMember, callMembership: CallMembership, syncLog: ILogItem) { updateMembership(userId: string, roomMember: RoomMember, callMembership: CallMembership, eventTimestamp: number, syncLog: ILogItem) {
syncLog.wrap({l: "update call membership", t: CALL_LOG_TYPE, id: this.id, userId}, log => { syncLog.wrap({l: "update call membership", t: CALL_LOG_TYPE, id: this.id, userId}, log => {
const devices = callMembership["m.devices"]; const devices = callMembership["m.devices"];
const previousDeviceIds = this.getDeviceIdsForUserId(userId); const previousDeviceIds = this.getDeviceIdsForUserId(userId);
for (const device of devices) { for (let deviceIndex = 0; deviceIndex < devices.length; deviceIndex++) {
const device = devices[deviceIndex];
const deviceId = device.device_id; const deviceId = device.device_id;
const memberKey = getMemberKey(userId, deviceId); const memberKey = getMemberKey(userId, deviceId);
log.wrap({l: "update device membership", id: memberKey, sessionId: device.session_id}, log => { log.wrap({l: "update device membership", id: memberKey, sessionId: device.session_id}, log => {
if (userId === this.options.ownUserId && deviceId === this.options.ownDeviceId) { if (userId === this.options.ownUserId && deviceId === this.options.ownDeviceId) {
this._deviceIndex = deviceIndex;
this._eventTimestamp = eventTimestamp;
if (this._state === GroupCallState.Joining) { if (this._state === GroupCallState.Joining) {
log.set("update_own", true); log.set("update_own", true);
this._state = GroupCallState.Joined; this._state = GroupCallState.Joined;
@ -313,7 +329,7 @@ export class GroupCall extends EventEmitter<{change: never}> {
const sessionIdChanged = member && member.sessionId !== device.session_id; const sessionIdChanged = member && member.sessionId !== device.session_id;
if (member && !sessionIdChanged) { if (member && !sessionIdChanged) {
log.set("update", true); log.set("update", true);
member.updateCallInfo(device, log); member.updateCallInfo(device, deviceIndex, eventTimestamp, log);
} else { } else {
if (member && sessionIdChanged) { if (member && sessionIdChanged) {
log.set("removedSessionId", member.sessionId); log.set("removedSessionId", member.sessionId);
@ -327,7 +343,7 @@ export class GroupCall extends EventEmitter<{change: never}> {
log.set("add", true); log.set("add", true);
member = new Member( member = new Member(
roomMember, roomMember,
device, this._memberOptions, device, deviceIndex, eventTimestamp, this._memberOptions,
); );
this._members.add(memberKey, member); this._members.add(memberKey, member);
if (this.joinedData) { if (this.joinedData) {
@ -488,6 +504,10 @@ export class GroupCall extends EventEmitter<{change: never}> {
["session_id"]: this.options.sessionId, ["session_id"]: this.options.sessionId,
feeds: [{purpose: "m.usermedia"}] feeds: [{purpose: "m.usermedia"}]
}); });
this._deviceIndex = callInfo["m.devices"].length;
this._eventTimestamp = Date.now();
return stateContent; return stateContent;
} }

View File

@ -73,6 +73,8 @@ export class Member {
constructor( constructor(
public member: RoomMember, public member: RoomMember,
private callDeviceMembership: CallDeviceMembership, private callDeviceMembership: CallDeviceMembership,
private _deviceIndex: number,
private _eventTimestamp: number,
private readonly options: Options, private readonly options: Options,
) {} ) {}
@ -114,6 +116,14 @@ export class Member {
return this.connection?.peerCall?.dataChannel; return this.connection?.peerCall?.dataChannel;
} }
get deviceIndex(): number {
return this._deviceIndex;
}
get eventTimestamp(): number {
return this._eventTimestamp;
}
/** @internal */ /** @internal */
connect(localMedia: LocalMedia, localMuteSettings: MuteSettings, turnServer: BaseObservableValue<RTCIceServer>, memberLogItem: ILogItem): ILogItem | undefined { connect(localMedia: LocalMedia, localMuteSettings: MuteSettings, turnServer: BaseObservableValue<RTCIceServer>, memberLogItem: ILogItem): ILogItem | undefined {
if (this.connection) { if (this.connection) {
@ -182,8 +192,16 @@ export class Member {
} }
/** @internal */ /** @internal */
updateCallInfo(callDeviceMembership: CallDeviceMembership, causeItem: ILogItem) { updateCallInfo(
callDeviceMembership: CallDeviceMembership,
deviceIndex: number,
eventTimestamp: number,
causeItem: ILogItem
) {
this.callDeviceMembership = callDeviceMembership; this.callDeviceMembership = callDeviceMembership;
this._deviceIndex = deviceIndex;
this._eventTimestamp = eventTimestamp;
if (this.connection) { if (this.connection) {
this.connection.logItem.refDetached(causeItem); this.connection.logItem.refDetached(causeItem);
} }

View File

@ -15,11 +15,13 @@ limitations under the License.
*/ */
import {verifyEd25519Signature, SIGNATURE_ALGORITHM} from "./common.js"; import {verifyEd25519Signature, SIGNATURE_ALGORITHM} from "./common.js";
import {HistoryVisibility, shouldShareKey} from "./common.js";
import {RoomMember} from "../room/members/RoomMember.js";
const TRACKING_STATUS_OUTDATED = 0; const TRACKING_STATUS_OUTDATED = 0;
const TRACKING_STATUS_UPTODATE = 1; const TRACKING_STATUS_UPTODATE = 1;
export function addRoomToIdentity(identity, userId, roomId) { function addRoomToIdentity(identity, userId, roomId) {
if (!identity) { if (!identity) {
identity = { identity = {
userId: userId, userId: userId,
@ -79,28 +81,57 @@ export class DeviceTracker {
})); }));
} }
writeMemberChanges(room, memberChanges, txn) { /** @return Promise<{added: string[], removed: string[]}> the user ids for who the room was added or removed to the userIdentity,
return Promise.all(Array.from(memberChanges.values()).map(async memberChange => { * and with who a key should be now be shared
return this._applyMemberChange(memberChange, txn); **/
async writeMemberChanges(room, memberChanges, historyVisibility, txn) {
const added = [];
const removed = [];
await Promise.all(Array.from(memberChanges.values()).map(async memberChange => {
// keys should now be shared with this member?
// add the room to the userIdentity if so
if (shouldShareKey(memberChange.membership, historyVisibility)) {
if (await this._addRoomToUserIdentity(memberChange.roomId, memberChange.userId, txn)) {
added.push(memberChange.userId);
}
} else if (shouldShareKey(memberChange.previousMembership, historyVisibility)) {
// try to remove room we were previously sharing the key with the member but not anymore
const {roomId} = memberChange;
// if we left the room, remove room from all user identities in the room
if (memberChange.userId === this._ownUserId) {
const userIds = await txn.roomMembers.getAllUserIds(roomId);
await Promise.all(userIds.map(userId => {
return this._removeRoomFromUserIdentity(roomId, userId, txn);
}));
} else {
await this._removeRoomFromUserIdentity(roomId, memberChange.userId, txn);
}
removed.push(memberChange.userId);
}
})); }));
return {added, removed};
} }
async trackRoom(room, log) { async trackRoom(room, historyVisibility, log) {
if (room.isTrackingMembers || !room.isEncrypted) { if (room.isTrackingMembers || !room.isEncrypted) {
return; return;
} }
const memberList = await room.loadMemberList(log); const memberList = await room.loadMemberList(undefined, log);
const txn = await this._storage.readWriteTxn([
this._storage.storeNames.roomSummary,
this._storage.storeNames.userIdentities,
]);
try { try {
const txn = await this._storage.readWriteTxn([
this._storage.storeNames.roomSummary,
this._storage.storeNames.userIdentities,
]);
let isTrackingChanges; let isTrackingChanges;
try { try {
isTrackingChanges = room.writeIsTrackingMembers(true, txn); isTrackingChanges = room.writeIsTrackingMembers(true, txn);
const members = Array.from(memberList.members.values()); const members = Array.from(memberList.members.values());
log.set("members", members.length); log.set("members", members.length);
await this._writeJoinedMembers(members, txn); await Promise.all(members.map(async member => {
if (shouldShareKey(member.membership, historyVisibility)) {
await this._addRoomToUserIdentity(member.roomId, member.userId, txn);
}
}));
} catch (err) { } catch (err) {
txn.abort(); txn.abort();
throw err; throw err;
@ -112,21 +143,43 @@ export class DeviceTracker {
} }
} }
async _writeJoinedMembers(members, txn) { async writeHistoryVisibility(room, historyVisibility, syncTxn, log) {
await Promise.all(members.map(async member => { const added = [];
if (member.membership === "join") { const removed = [];
await this._writeMember(member, txn); if (room.isTrackingMembers && room.isEncrypted) {
} await log.wrap("rewriting userIdentities", async log => {
})); const memberList = await room.loadMemberList(syncTxn, log);
try {
const members = Array.from(memberList.members.values());
log.set("members", members.length);
await Promise.all(members.map(async member => {
if (shouldShareKey(member.membership, historyVisibility)) {
if (await this._addRoomToUserIdentity(member.roomId, member.userId, syncTxn)) {
added.push(member.userId);
}
} else {
if (await this._removeRoomFromUserIdentity(member.roomId, member.userId, syncTxn)) {
removed.push(member.userId);
}
}
}));
} finally {
memberList.release();
}
});
}
return {added, removed};
} }
async _writeMember(member, txn) { async _addRoomToUserIdentity(roomId, userId, txn) {
const {userIdentities} = txn; const {userIdentities} = txn;
const identity = await userIdentities.get(member.userId); const identity = await userIdentities.get(userId);
const updatedIdentity = addRoomToIdentity(identity, member.userId, member.roomId); const updatedIdentity = addRoomToIdentity(identity, userId, roomId);
if (updatedIdentity) { if (updatedIdentity) {
userIdentities.set(updatedIdentity); userIdentities.set(updatedIdentity);
return true;
} }
return false;
} }
async _removeRoomFromUserIdentity(roomId, userId, txn) { async _removeRoomFromUserIdentity(roomId, userId, txn) {
@ -141,28 +194,9 @@ export class DeviceTracker {
} else { } else {
userIdentities.set(identity); userIdentities.set(identity);
} }
return true;
} }
} return false;
async _applyMemberChange(memberChange, txn) {
// TODO: depends whether we encrypt for invited users??
// add room
if (memberChange.hasJoined) {
await this._writeMember(memberChange.member, txn);
}
// remove room
else if (memberChange.hasLeft) {
const {roomId} = memberChange;
// if we left the room, remove room from all user identities in the room
if (memberChange.userId === this._ownUserId) {
const userIds = await txn.roomMembers.getAllUserIds(roomId);
await Promise.all(userIds.map(userId => {
return this._removeRoomFromUserIdentity(roomId, userId, txn);
}));
} else {
await this._removeRoomFromUserIdentity(roomId, memberChange.userId, txn);
}
}
} }
async _queryKeys(userIds, hsApi, log) { async _queryKeys(userIds, hsApi, log) {
@ -422,16 +456,18 @@ export class DeviceTracker {
import {createMockStorage} from "../../mocks/Storage"; import {createMockStorage} from "../../mocks/Storage";
import {Instance as NullLoggerInstance} from "../../logging/NullLogger"; import {Instance as NullLoggerInstance} from "../../logging/NullLogger";
import {MemberChange} from "../room/members/RoomMember";
export function tests() { export function tests() {
function createUntrackedRoomMock(roomId, joinedUserIds, invitedUserIds = []) { function createUntrackedRoomMock(roomId, joinedUserIds, invitedUserIds = []) {
return { return {
id: roomId,
isTrackingMembers: false, isTrackingMembers: false,
isEncrypted: true, isEncrypted: true,
loadMemberList: () => { loadMemberList: () => {
const joinedMembers = joinedUserIds.map(userId => {return {membership: "join", roomId, userId};}); const joinedMembers = joinedUserIds.map(userId => {return RoomMember.fromUserId(roomId, userId, "join");});
const invitedMembers = invitedUserIds.map(userId => {return {membership: "invite", roomId, userId};}); const invitedMembers = invitedUserIds.map(userId => {return RoomMember.fromUserId(roomId, userId, "invite");});
const members = joinedMembers.concat(invitedMembers); const members = joinedMembers.concat(invitedMembers);
const memberMap = members.reduce((map, member) => { const memberMap = members.reduce((map, member) => {
map.set(member.userId, member); map.set(member.userId, member);
@ -495,10 +531,29 @@ export function tests() {
} }
}; };
} }
async function writeMemberListToStorage(room, storage) {
const txn = await storage.readWriteTxn([
storage.storeNames.roomMembers,
]);
const memberList = await room.loadMemberList(txn);
try {
for (const member of memberList.members.values()) {
txn.roomMembers.set(member.serialize());
}
} catch (err) {
txn.abort();
throw err;
} finally {
memberList.release();
}
await txn.complete();
}
const roomId = "!abc:hs.tld"; const roomId = "!abc:hs.tld";
return { return {
"trackRoom only writes joined members": async assert => { "trackRoom only writes joined members with history visibility of joined": async assert => {
const storage = await createMockStorage(); const storage = await createMockStorage();
const tracker = new DeviceTracker({ const tracker = new DeviceTracker({
storage, storage,
@ -508,7 +563,7 @@ export function tests() {
ownDeviceId: "ABCD", ownDeviceId: "ABCD",
}); });
const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"], ["@charly:hs.tld"]); const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"], ["@charly:hs.tld"]);
await tracker.trackRoom(room, NullLoggerInstance.item); await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn = await storage.readTxn([storage.storeNames.userIdentities]); const txn = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual(await txn.userIdentities.get("@alice:hs.tld"), { assert.deepEqual(await txn.userIdentities.get("@alice:hs.tld"), {
userId: "@alice:hs.tld", userId: "@alice:hs.tld",
@ -532,7 +587,7 @@ export function tests() {
ownDeviceId: "ABCD", ownDeviceId: "ABCD",
}); });
const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]); const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]);
await tracker.trackRoom(room, NullLoggerInstance.item); await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const hsApi = createQueryKeysHSApiMock(); const hsApi = createQueryKeysHSApiMock();
const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item); const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item);
assert.equal(devices.length, 2); assert.equal(devices.length, 2);
@ -549,7 +604,7 @@ export function tests() {
ownDeviceId: "ABCD", ownDeviceId: "ABCD",
}); });
const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]); const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]);
await tracker.trackRoom(room, NullLoggerInstance.item); await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const hsApi = createQueryKeysHSApiMock(); const hsApi = createQueryKeysHSApiMock();
// query devices first time // query devices first time
await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item); await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item);
@ -567,6 +622,169 @@ export function tests() {
const txn2 = await storage.readTxn([storage.storeNames.deviceIdentities]); const txn2 = await storage.readTxn([storage.storeNames.deviceIdentities]);
// also check the modified key was not stored // also check the modified key was not stored
assert.equal((await txn2.deviceIdentities.get("@alice:hs.tld", "device1")).ed25519Key, "ed25519:@alice:hs.tld:device1:key"); assert.equal((await txn2.deviceIdentities.get("@alice:hs.tld", "device1")).ed25519Key, "ed25519:@alice:hs.tld:device1:key");
} },
"change history visibility from joined to invited adds invitees": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room = await createUntrackedRoomMock(roomId,
["@alice:hs.tld"], ["@bob:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
const {added, removed} = await tracker.writeHistoryVisibility(room, HistoryVisibility.Invited, txn, NullLoggerInstance.item);
assert.equal((await txn.userIdentities.get("@bob:hs.tld")).userId, "@bob:hs.tld");
assert.deepEqual(added, ["@bob:hs.tld"]);
assert.deepEqual(removed, []);
},
"change history visibility from invited to joined removes invitees": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room = await createUntrackedRoomMock(roomId,
["@alice:hs.tld"], ["@bob:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
assert.equal((await txn.userIdentities.get("@bob:hs.tld")).userId, "@bob:hs.tld");
const {added, removed} = await tracker.writeHistoryVisibility(room, HistoryVisibility.Joined, txn, NullLoggerInstance.item);
assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
assert.deepEqual(added, []);
assert.deepEqual(removed, ["@bob:hs.tld"]);
},
"adding invitee with history visibility of invited adds room to userIdentities": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
const room = await createUntrackedRoomMock(roomId, ["@alice:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
// inviting a new member
const inviteChange = new MemberChange(RoomMember.fromUserId(roomId, "@bob:hs.tld", "invite"));
const {added, removed} = await tracker.writeMemberChanges(room, [inviteChange], HistoryVisibility.Invited, txn);
assert.deepEqual(added, ["@bob:hs.tld"]);
assert.deepEqual(removed, []);
assert.equal((await txn.userIdentities.get("@bob:hs.tld")).userId, "@bob:hs.tld");
},
"adding invitee with history visibility of joined doesn't add room": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
const room = await createUntrackedRoomMock(roomId, ["@alice:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
// inviting a new member
const inviteChange = new MemberChange(RoomMember.fromUserId(roomId, "@bob:hs.tld", "invite"));
const memberChanges = new Map([[inviteChange.userId, inviteChange]]);
const {added, removed} = await tracker.writeMemberChanges(room, memberChanges, HistoryVisibility.Joined, txn);
assert.deepEqual(added, []);
assert.deepEqual(removed, []);
assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
},
"getting all devices after changing history visibility now includes invitees": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld"], ["@bob:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
const hsApi = createQueryKeysHSApiMock();
// write memberlist from room mock to mock storage,
// as devicesForTrackedRoom reads directly from roomMembers store.
await writeMemberListToStorage(room, storage);
const devices = await tracker.devicesForTrackedRoom(roomId, hsApi, NullLoggerInstance.item);
assert.equal(devices.length, 2);
assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key");
assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key");
},
"rejecting invite with history visibility of invited removes room from user identity": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room = await createUntrackedRoomMock(roomId, ["@alice:hs.tld"], ["@bob:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
// reject invite
const inviteChange = new MemberChange(RoomMember.fromUserId(roomId, "@bob:hs.tld", "leave"), "invite");
const memberChanges = new Map([[inviteChange.userId, inviteChange]]);
const {added, removed} = await tracker.writeMemberChanges(room, memberChanges, HistoryVisibility.Invited, txn);
assert.deepEqual(added, []);
assert.deepEqual(removed, ["@bob:hs.tld"]);
assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
},
"remove room from user identity sharing multiple rooms with us preserves other room": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room1 = await createUntrackedRoomMock("!abc:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
const room2 = await createUntrackedRoomMock("!def:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
await tracker.trackRoom(room1, HistoryVisibility.Joined, NullLoggerInstance.item);
await tracker.trackRoom(room2, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn1 = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual((await txn1.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld", "!def:hs.tld"]);
const leaveChange = new MemberChange(RoomMember.fromUserId(room2.id, "@bob:hs.tld", "leave"), "join");
const memberChanges = new Map([[leaveChange.userId, leaveChange]]);
const txn2 = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
await tracker.writeMemberChanges(room2, memberChanges, HistoryVisibility.Joined, txn2);
await txn2.complete();
const txn3 = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual((await txn3.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld"]);
},
"add room to user identity sharing multiple rooms with us preserves other room": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room1 = await createUntrackedRoomMock("!abc:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
const room2 = await createUntrackedRoomMock("!def:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
await tracker.trackRoom(room1, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn1 = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual((await txn1.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld"]);
await tracker.trackRoom(room2, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn2 = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual((await txn2.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld", "!def:hs.tld"]);
},
} }
} }

View File

@ -19,8 +19,10 @@ import {groupEventsBySession} from "./megolm/decryption/utils";
import {mergeMap} from "../../utils/mergeMap"; import {mergeMap} from "../../utils/mergeMap";
import {groupBy} from "../../utils/groupBy"; import {groupBy} from "../../utils/groupBy";
import {makeTxnId, formatToDeviceMessagesPayload} from "../common.js"; import {makeTxnId, formatToDeviceMessagesPayload} from "../common.js";
import {iterateResponseStateEvents} from "../room/common";
const ENCRYPTED_TYPE = "m.room.encrypted"; const ENCRYPTED_TYPE = "m.room.encrypted";
const ROOM_HISTORY_VISIBILITY_TYPE = "m.room.history_visibility";
// how often ensureMessageKeyIsShared can check if it needs to // how often ensureMessageKeyIsShared can check if it needs to
// create a new outbound session // create a new outbound session
// note that encrypt could still create a new session // note that encrypt could still create a new session
@ -45,6 +47,7 @@ export class RoomEncryption {
this._isFlushingRoomKeyShares = false; this._isFlushingRoomKeyShares = false;
this._lastKeyPreShareTime = null; this._lastKeyPreShareTime = null;
this._keySharePromise = null; this._keySharePromise = null;
this._historyVisibility = undefined;
this._disposed = false; this._disposed = false;
} }
@ -77,22 +80,68 @@ export class RoomEncryption {
this._senderDeviceCache = new Map(); // purge the sender device cache this._senderDeviceCache = new Map(); // purge the sender device cache
} }
async writeMemberChanges(memberChanges, txn, log) { async writeSync(roomResponse, memberChanges, txn, log) {
let shouldFlush = false; let historyVisibility = await this._loadHistoryVisibilityIfNeeded(this._historyVisibility, txn);
const memberChangesArray = Array.from(memberChanges.values()); const addedMembers = [];
// this also clears our session if we leave the room ourselves const removedMembers = [];
if (memberChangesArray.some(m => m.hasLeft)) { // update the historyVisibility if needed
await iterateResponseStateEvents(roomResponse, event => {
// TODO: can the same state event appear twice? Hence we would be rewriting the useridentities twice...
// we'll see in the logs
if(event.state_key === "" && event.type === ROOM_HISTORY_VISIBILITY_TYPE) {
const newHistoryVisibility = event?.content?.history_visibility;
if (newHistoryVisibility !== historyVisibility) {
return log.wrap({
l: "history_visibility changed",
from: historyVisibility,
to: newHistoryVisibility
}, async log => {
historyVisibility = newHistoryVisibility;
const result = await this._deviceTracker.writeHistoryVisibility(this._room, historyVisibility, txn, log);
addedMembers.push(...result.added);
removedMembers.push(...result.removed);
});
}
}
});
// process member changes
if (memberChanges.size) {
const result = await this._deviceTracker.writeMemberChanges(
this._room, memberChanges, historyVisibility, txn);
addedMembers.push(...result.added);
removedMembers.push(...result.removed);
}
// discard key if somebody (including ourselves) left
if (removedMembers.length) {
log.log({ log.log({
l: "discardOutboundSession", l: "discardOutboundSession",
leftUsers: memberChangesArray.filter(m => m.hasLeft).map(m => m.userId), leftUsers: removedMembers,
}); });
this._megolmEncryption.discardOutboundSession(this._room.id, txn); this._megolmEncryption.discardOutboundSession(this._room.id, txn);
} }
if (memberChangesArray.some(m => m.hasJoined)) { let shouldFlush = false;
shouldFlush = await this._addShareRoomKeyOperationForNewMembers(memberChangesArray, txn, log); // add room to userIdentities if needed, and share the current key with them
if (addedMembers.length) {
shouldFlush = await this._addShareRoomKeyOperationForMembers(addedMembers, txn, log);
} }
await this._deviceTracker.writeMemberChanges(this._room, memberChanges, txn); return {shouldFlush, historyVisibility};
return shouldFlush; }
afterSync({historyVisibility}) {
this._historyVisibility = historyVisibility;
}
async _loadHistoryVisibilityIfNeeded(historyVisibility, txn = undefined) {
if (!historyVisibility) {
if (!txn) {
txn = await this._storage.readTxn([this._storage.storeNames.roomState]);
}
const visibilityEntry = await txn.roomState.get(this._room.id, ROOM_HISTORY_VISIBILITY_TYPE, "");
if (visibilityEntry) {
return visibilityEntry.event?.content?.history_visibility;
}
}
return historyVisibility;
} }
async prepareDecryptAll(events, newKeys, source, txn) { async prepareDecryptAll(events, newKeys, source, txn) {
@ -274,10 +323,15 @@ export class RoomEncryption {
} }
async _shareNewRoomKey(roomKeyMessage, hsApi, log) { async _shareNewRoomKey(roomKeyMessage, hsApi, log) {
this._historyVisibility = await this._loadHistoryVisibilityIfNeeded(this._historyVisibility);
await this._deviceTracker.trackRoom(this._room, this._historyVisibility, log);
const devices = await this._deviceTracker.devicesForTrackedRoom(this._room.id, hsApi, log);
const userIds = Array.from(devices.reduce((set, device) => set.add(device.userId), new Set()));
let writeOpTxn = await this._storage.readWriteTxn([this._storage.storeNames.operations]); let writeOpTxn = await this._storage.readWriteTxn([this._storage.storeNames.operations]);
let operation; let operation;
try { try {
operation = this._writeRoomKeyShareOperation(roomKeyMessage, null, writeOpTxn); operation = this._writeRoomKeyShareOperation(roomKeyMessage, userIds, writeOpTxn);
} catch (err) { } catch (err) {
writeOpTxn.abort(); writeOpTxn.abort();
throw err; throw err;
@ -288,8 +342,7 @@ export class RoomEncryption {
await this._processShareRoomKeyOperation(operation, hsApi, log); await this._processShareRoomKeyOperation(operation, hsApi, log);
} }
async _addShareRoomKeyOperationForNewMembers(memberChangesArray, txn, log) { async _addShareRoomKeyOperationForMembers(userIds, txn, log) {
const userIds = memberChangesArray.filter(m => m.hasJoined).map(m => m.userId);
const roomKeyMessage = await this._megolmEncryption.createRoomKeyMessage( const roomKeyMessage = await this._megolmEncryption.createRoomKeyMessage(
this._room.id, txn); this._room.id, txn);
if (roomKeyMessage) { if (roomKeyMessage) {
@ -342,18 +395,9 @@ export class RoomEncryption {
async _processShareRoomKeyOperation(operation, hsApi, log) { async _processShareRoomKeyOperation(operation, hsApi, log) {
log.set("id", operation.id); log.set("id", operation.id);
this._historyVisibility = await this._loadHistoryVisibilityIfNeeded(this._historyVisibility);
await this._deviceTracker.trackRoom(this._room, log); await this._deviceTracker.trackRoom(this._room, this._historyVisibility, log);
let devices; const devices = await this._deviceTracker.devicesForRoomMembers(this._room.id, operation.userIds, hsApi, log);
if (operation.userIds === null) {
devices = await this._deviceTracker.devicesForTrackedRoom(this._room.id, hsApi, log);
const userIds = Array.from(devices.reduce((set, device) => set.add(device.userId), new Set()));
operation.userIds = userIds;
await this._updateOperationsStore(operations => operations.update(operation));
} else {
devices = await this._deviceTracker.devicesForRoomMembers(this._room.id, operation.userIds, hsApi, log);
}
const messages = await log.wrap("olm encrypt", log => this._olmEncryption.encrypt( const messages = await log.wrap("olm encrypt", log => this._olmEncryption.encrypt(
"m.room_key", operation.roomKeyMessage, devices, hsApi, log)); "m.room_key", operation.roomKeyMessage, devices, hsApi, log));
const missingDevices = devices.filter(d => !messages.some(m => m.device === d)); const missingDevices = devices.filter(d => !messages.some(m => m.device === d));
@ -499,3 +543,142 @@ class BatchDecryptionResult {
})); }));
} }
} }
import {createMockStorage} from "../../mocks/Storage";
import {Clock as MockClock} from "../../mocks/Clock";
import {poll} from "../../mocks/poll";
import {Instance as NullLoggerInstance} from "../../logging/NullLogger";
import {HomeServer as MockHomeServer} from "../../mocks/HomeServer.js";
export function tests() {
const roomId = "!abc:hs.tld";
return {
"ensureMessageKeyIsShared tracks room and passes correct history visibility to deviceTracker": async assert => {
const storage = await createMockStorage();
const megolmMock = {
async ensureOutboundSession() { return { }; }
};
const olmMock = {
async encrypt() { return []; }
}
let isRoomTracked = false;
let isDevicesRequested = false;
const deviceTracker = {
async trackRoom(room, historyVisibility) {
// only assert on first call
if (isRoomTracked) { return; }
assert(!isDevicesRequested);
assert.equal(room.id, roomId);
assert.equal(historyVisibility, "invited");
isRoomTracked = true;
},
async devicesForTrackedRoom() {
assert(isRoomTracked);
isDevicesRequested = true;
return [];
},
async devicesForRoomMembers() {
return [];
}
}
const writeTxn = await storage.readWriteTxn([storage.storeNames.roomState]);
writeTxn.roomState.set(roomId, {state_key: "", type: ROOM_HISTORY_VISIBILITY_TYPE, content: {
history_visibility: "invited"
}});
await writeTxn.complete();
const roomEncryption = new RoomEncryption({
room: {id: roomId},
megolmEncryption: megolmMock,
olmEncryption: olmMock,
storage,
deviceTracker,
clock: new MockClock()
});
const homeServer = new MockHomeServer();
const promise = roomEncryption.ensureMessageKeyIsShared(homeServer.api, NullLoggerInstance.item);
// need to poll because sendToDevice isn't first async step
const request = await poll(() => homeServer.requests.sendToDevice?.[0]);
request.respond({});
await promise;
assert(isRoomTracked);
assert(isDevicesRequested);
},
"encrypt tracks room and passes correct history visibility to deviceTracker": async assert => {
const storage = await createMockStorage();
const megolmMock = {
async encrypt() { return { roomKeyMessage: {} }; }
};
const olmMock = {
async encrypt() { return []; }
}
let isRoomTracked = false;
let isDevicesRequested = false;
const deviceTracker = {
async trackRoom(room, historyVisibility) {
// only assert on first call
if (isRoomTracked) { return; }
assert(!isDevicesRequested);
assert.equal(room.id, roomId);
assert.equal(historyVisibility, "invited");
isRoomTracked = true;
},
async devicesForTrackedRoom() {
assert(isRoomTracked);
isDevicesRequested = true;
return [];
},
async devicesForRoomMembers() {
return [];
}
}
const writeTxn = await storage.readWriteTxn([storage.storeNames.roomState]);
writeTxn.roomState.set(roomId, {state_key: "", type: ROOM_HISTORY_VISIBILITY_TYPE, content: {
history_visibility: "invited"
}});
await writeTxn.complete();
const roomEncryption = new RoomEncryption({
room: {id: roomId},
megolmEncryption: megolmMock,
olmEncryption: olmMock,
storage,
deviceTracker
});
const homeServer = new MockHomeServer();
const promise = roomEncryption.encrypt("m.room.message", {body: "hello"}, homeServer.api, NullLoggerInstance.item);
// need to poll because sendToDevice isn't first async step
const request = await poll(() => homeServer.requests.sendToDevice?.[0]);
request.respond({});
await promise;
assert(isRoomTracked);
assert(isDevicesRequested);
},
"writeSync passes correct history visibility to deviceTracker": async assert => {
const storage = await createMockStorage();
let isMemberChangesCalled = false;
const deviceTracker = {
async writeMemberChanges(room, memberChanges, historyVisibility, txn) {
assert.equal(historyVisibility, "invited");
isMemberChangesCalled = true;
return {removed: [], added: []};
},
async devicesForRoomMembers() {
return [];
}
}
const writeTxn = await storage.readWriteTxn([storage.storeNames.roomState]);
writeTxn.roomState.set(roomId, {state_key: "", type: ROOM_HISTORY_VISIBILITY_TYPE, content: {
history_visibility: "invited"
}});
const memberChanges = new Map([["@alice:hs.tld", {}]]);
const roomEncryption = new RoomEncryption({
room: {id: roomId},
storage,
deviceTracker
});
const roomResponse = {};
const txn = await storage.readWriteTxn([storage.storeNames.roomState]);
await roomEncryption.writeSync(roomResponse, memberChanges, txn, NullLoggerInstance.item);
assert(isMemberChangesCalled);
},
}
}

View File

@ -69,3 +69,28 @@ export function createRoomEncryptionEvent() {
} }
} }
} }
// Use enum when converting to TS
export const HistoryVisibility = Object.freeze({
Joined: "joined",
Invited: "invited",
WorldReadable: "world_readable",
Shared: "shared",
});
export function shouldShareKey(membership, historyVisibility) {
switch (historyVisibility) {
case HistoryVisibility.WorldReadable:
return true;
case HistoryVisibility.Shared:
// was part of room at some time
return membership !== undefined;
case HistoryVisibility.Joined:
return membership === "join";
case HistoryVisibility.Invited:
return membership === "invite" || membership === "join";
default:
return false;
}
}

View File

@ -0,0 +1,77 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ILogItem} from "../../logging/types";
import {ILoginMethod} from "./LoginMethod";
import {HomeServerApi} from "../net/HomeServerApi.js";
import {OidcApi} from "../net/OidcApi";
export class OIDCLoginMethod implements ILoginMethod {
private readonly _code: string;
private readonly _codeVerifier: string;
private readonly _nonce: string;
private readonly _redirectUri: string;
private readonly _oidcApi: OidcApi;
private readonly _accountManagementUrl?: string;
public readonly homeserver: string;
constructor({
nonce,
codeVerifier,
code,
homeserver,
redirectUri,
oidcApi,
accountManagementUrl,
}: {
nonce: string,
code: string,
codeVerifier: string,
homeserver: string,
redirectUri: string,
oidcApi: OidcApi,
accountManagementUrl?: string,
}) {
this._oidcApi = oidcApi;
this._code = code;
this._codeVerifier = codeVerifier;
this._nonce = nonce;
this._redirectUri = redirectUri;
this.homeserver = homeserver;
this._accountManagementUrl = accountManagementUrl;
}
async login(hsApi: HomeServerApi, _deviceName: string, log: ILogItem): Promise<Record<string, any>> {
const { access_token, refresh_token, expires_in } = await this._oidcApi.completeAuthorizationCodeGrant({
code: this._code,
codeVerifier: this._codeVerifier,
redirectUri: this._redirectUri,
});
// TODO: validate the id_token and the nonce claim
// Do a "whoami" request to find out the user_id and device_id
const { user_id, device_id } = await hsApi.whoami({
log,
accessTokenOverride: access_token,
}).response();
const oidc_issuer = this._oidcApi.issuer;
const oidc_client_id = await this._oidcApi.clientId();
return { oidc_issuer, oidc_client_id, access_token, refresh_token, expires_in, user_id, device_id, oidc_account_management_url: this._accountManagementUrl };
}
}

View File

@ -0,0 +1,7 @@
import {ILoginMethod} from "./LoginMethod";
import {PasswordLoginMethod} from "./PasswordLoginMethod";
import {SSOLoginHelper} from "./SSOLoginHelper";
import {TokenLoginMethod} from "./TokenLoginMethod";
export {PasswordLoginMethod, SSOLoginHelper, TokenLoginMethod, ILoginMethod};

View File

@ -31,7 +31,7 @@ const DEHYDRATION_PREFIX = "/_matrix/client/unstable/org.matrix.msc2697.v2";
type Options = { type Options = {
homeserver: string; homeserver: string;
accessToken: string; accessToken: BaseObservableValue<string>;
request: RequestFunction; request: RequestFunction;
reconnector: Reconnector; reconnector: Reconnector;
}; };
@ -42,11 +42,12 @@ type BaseRequestOptions = {
uploadProgress?: (loadedBytes: number) => void; uploadProgress?: (loadedBytes: number) => void;
timeout?: number; timeout?: number;
prefix?: string; prefix?: string;
accessTokenOverride?: string;
}; };
export class HomeServerApi { export class HomeServerApi {
private readonly _homeserver: string; private readonly _homeserver: string;
private readonly _accessToken: string; private readonly _accessToken: BaseObservableValue<string>;
private readonly _requestFn: RequestFunction; private readonly _requestFn: RequestFunction;
private readonly _reconnector: Reconnector; private readonly _reconnector: Reconnector;
@ -63,11 +64,19 @@ export class HomeServerApi {
return this._homeserver + prefix + csPath; return this._homeserver + prefix + csPath;
} }
private _baseRequest(method: RequestMethod, url: string, queryParams?: Record<string, any>, body?: Record<string, any>, options?: BaseRequestOptions, accessToken?: string): IHomeServerRequest { private _baseRequest(method: RequestMethod, url: string, queryParams?: Record<string, any>, body?: Record<string, any>, options?: BaseRequestOptions, accessTokenSource?: BaseObservableValue<string>): IHomeServerRequest {
const queryString = encodeQueryParams(queryParams); const queryString = encodeQueryParams(queryParams);
url = `${url}?${queryString}`; url = `${url}?${queryString}`;
let encodedBody: EncodedBody["body"]; let encodedBody: EncodedBody["body"];
const headers: Map<string, string | number> = new Map(); const headers: Map<string, string | number> = new Map();
let accessToken: string | null = null;
if (options?.accessTokenOverride) {
accessToken = options.accessTokenOverride;
} else if (accessTokenSource) {
accessToken = accessTokenSource.get();
}
if (accessToken) { if (accessToken) {
headers.set("Authorization", `Bearer ${accessToken}`); headers.set("Authorization", `Bearer ${accessToken}`);
} }
@ -271,6 +280,12 @@ export class HomeServerApi {
return this._post(`/join/${encodeURIComponent(roomIdOrAlias)}`, {}, {}, options); return this._post(`/join/${encodeURIComponent(roomIdOrAlias)}`, {}, {}, options);
} }
invite(roomId: string, userId: string, options?: BaseRequestOptions): IHomeServerRequest {
return this._post(`/rooms/${encodeURIComponent(roomId)}/invite`, {}, {
user_id: userId
}, options);
}
leave(roomId: string, options?: BaseRequestOptions): IHomeServerRequest { leave(roomId: string, options?: BaseRequestOptions): IHomeServerRequest {
return this._post(`/rooms/${encodeURIComponent(roomId)}/leave`, {}, {}, options); return this._post(`/rooms/${encodeURIComponent(roomId)}/leave`, {}, {}, options);
} }
@ -279,10 +294,35 @@ export class HomeServerApi {
return this._post(`/rooms/${encodeURIComponent(roomId)}/forget`, {}, {}, options); return this._post(`/rooms/${encodeURIComponent(roomId)}/forget`, {}, {}, options);
} }
kick(roomId: string, userId: string, reason?: string, options?: BaseRequestOptions): IHomeServerRequest {
return this._post(`/rooms/${encodeURIComponent(roomId)}/kick`, {}, {
user_id: userId,
reason: reason,
}, options);
}
ban(roomId: string, userId: string, reason?: string, options?: BaseRequestOptions): IHomeServerRequest {
return this._post(`/rooms/${encodeURIComponent(roomId)}/ban`, {}, {
user_id: userId,
reason: reason,
}, options);
}
unban(roomId: string, userId: string, reason?: string, options?: BaseRequestOptions): IHomeServerRequest {
return this._post(`/rooms/${encodeURIComponent(roomId)}/unban`, {}, {
user_id: userId,
reason: reason,
}, options);
}
logout(options?: BaseRequestOptions): IHomeServerRequest { logout(options?: BaseRequestOptions): IHomeServerRequest {
return this._post(`/logout`, {}, {}, options); return this._post(`/logout`, {}, {}, options);
} }
whoami(options?: BaseRequestOptions): IHomeServerRequest {
return this._get(`/account/whoami`, undefined, undefined, options);
}
getDehydratedDevice(options: BaseRequestOptions = {}): IHomeServerRequest { getDehydratedDevice(options: BaseRequestOptions = {}): IHomeServerRequest {
options.prefix = DEHYDRATION_PREFIX; options.prefix = DEHYDRATION_PREFIX;
return this._get(`/dehydrated_device`, undefined, undefined, options); return this._get(`/dehydrated_device`, undefined, undefined, options);
@ -298,14 +338,38 @@ export class HomeServerApi {
return this._post(`/dehydrated_device/claim`, {}, {device_id: deviceId}, options); return this._post(`/dehydrated_device/claim`, {}, {device_id: deviceId}, options);
} }
searchProfile(searchTerm: string, limit?: number, options?: BaseRequestOptions): IHomeServerRequest {
return this._post(`/user_directory/search`, {}, {
limit: limit ?? 10,
search_term: searchTerm,
}, options);
}
profile(userId: string, options?: BaseRequestOptions): IHomeServerRequest { profile(userId: string, options?: BaseRequestOptions): IHomeServerRequest {
return this._get(`/profile/${encodeURIComponent(userId)}`); return this._get(`/profile/${encodeURIComponent(userId)}`);
} }
setProfileDisplayName(userId, displayName, options?: BaseRequestOptions): IHomeServerRequest {
return this._put(`/profile/${encodeURIComponent(userId)}/displayname`, {}, { displayname: displayName }, options);
}
setProfileAvatarUrl(userId, avatarUrl, options?: BaseRequestOptions): IHomeServerRequest {
return this._put(`/profile/${encodeURIComponent(userId)}/avatar_url`, {}, { avatar_url: avatarUrl }, options);
}
createRoom(payload: Record<string, any>, options?: BaseRequestOptions): IHomeServerRequest { createRoom(payload: Record<string, any>, options?: BaseRequestOptions): IHomeServerRequest {
return this._post(`/createRoom`, {}, payload, options); return this._post(`/createRoom`, {}, payload, options);
} }
accountData(ownUserId: string, type: string, options?: BaseRequestOptions): IHomeServerRequest {
return this._get(
`/user/${encodeURIComponent(ownUserId)}/account_data/${encodeURIComponent(type)}`,
undefined,
undefined,
options,
);
}
setAccountData(ownUserId: string, type: string, content: Record<string, any>, options?: BaseRequestOptions): IHomeServerRequest { setAccountData(ownUserId: string, type: string, content: Record<string, any>, options?: BaseRequestOptions): IHomeServerRequest {
return this._put(`/user/${encodeURIComponent(ownUserId)}/account_data/${encodeURIComponent(type)}`, {}, content, options); return this._put(`/user/${encodeURIComponent(ownUserId)}/account_data/${encodeURIComponent(type)}`, {}, content, options);
} }
@ -316,6 +380,7 @@ export class HomeServerApi {
} }
import {Request as MockRequest} from "../../mocks/Request.js"; import {Request as MockRequest} from "../../mocks/Request.js";
import {BaseObservableValue} from "../../observable/value/BaseObservableValue";
export function tests() { export function tests() {
return { return {

336
src/matrix/net/OidcApi.ts Normal file
View File

@ -0,0 +1,336 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the 'License');
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an 'AS IS' BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import type {RequestFunction} from "../../platform/types/types";
import type {IURLRouter} from "../../domain/navigation/URLRouter.js";
import type {SegmentType} from "../../domain/navigation";
const WELL_KNOWN = ".well-known/openid-configuration";
const RANDOM_CHARSET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
const randomChar = () => RANDOM_CHARSET.charAt(Math.floor(Math.random() * 1e10) % RANDOM_CHARSET.length);
const randomString = (length: number) =>
Array.from({ length }, randomChar).join("");
type BearerToken = {
token_type: "Bearer",
access_token: string,
refresh_token?: string,
expires_in?: number,
}
const isValidBearerToken = (t: any): t is BearerToken =>
typeof t == "object" &&
t["token_type"] === "Bearer" &&
typeof t["access_token"] === "string" &&
(!("refresh_token" in t) || typeof t["refresh_token"] === "string") &&
(!("expires_in" in t) || typeof t["expires_in"] === "number");
type AuthorizationParams = {
state: string,
scope: string,
redirectUri: string,
nonce?: string,
codeVerifier?: string,
};
function assert(condition: any, message: string): asserts condition {
if (!condition) {
throw new Error(`Assertion failed: ${message}`);
}
};
type IssuerUri = string;
interface ClientConfig {
client_id: string;
client_secret?: string;
uris: string[],
}
export class OidcApi<N extends object = SegmentType> {
_issuer: string;
_clientConfigs: Record<IssuerUri, ClientConfig>;
_requestFn: RequestFunction;
_encoding: any;
_crypto: any;
_urlCreator: IURLRouter<N>;
_metadataPromise: Promise<any>;
_registrationPromise: Promise<any>;
constructor({ issuer, request, encoding, crypto, urlCreator, clientId, clientConfigs }) {
this._issuer = issuer;
this._clientConfigs = clientConfigs;
this._requestFn = request;
this._encoding = encoding;
this._crypto = crypto;
this._urlCreator = urlCreator;
if (clientId) {
this._registrationPromise = Promise.resolve({ client_id: clientId });
}
}
get clientMetadata() {
return {
client_name: "Hydrogen Web",
logo_uri: this._urlCreator.absoluteUrlForAsset("icon.png"),
client_uri: this._urlCreator.absoluteAppUrl(),
tos_uri: "https://element.io/terms-of-service",
policy_uri: "https://element.io/privacy",
response_types: ["code"],
grant_types: ["authorization_code", "refresh_token"],
redirect_uris: [this._urlCreator.createOIDCRedirectURL()],
id_token_signed_response_alg: "RS256",
token_endpoint_auth_method: "none",
};
}
get metadataUrl() {
return new URL(WELL_KNOWN, `${this._issuer}${this._issuer.endsWith('/') ? '' : '/'}`).toString();
}
get issuer() {
return this._issuer;
}
async clientId(): Promise<string> {
return (await this.registration())["client_id"];
}
registration(): Promise<any> {
if (!this._registrationPromise) {
this._registrationPromise = (async () => {
// use static client if available
const authority = `${this.issuer}${this.issuer.endsWith('/') ? '' : '/'}`;
if (this._clientConfigs[authority] && this._clientConfigs[authority].uris.includes(this._urlCreator.absoluteAppUrl())) {
return this._clientConfigs[authority];
}
const headers = new Map();
headers.set("Accept", "application/json");
headers.set("Content-Type", "application/json");
const req = this._requestFn(await this.registrationEndpoint(), {
method: "POST",
headers,
format: "json",
body: JSON.stringify(this.clientMetadata),
});
const res = await req.response();
if (res.status >= 400) {
throw new Error("failed to register client");
}
return res.body;
})();
}
return this._registrationPromise;
}
metadata(): Promise<any> {
if (!this._metadataPromise) {
this._metadataPromise = (async () => {
const headers = new Map();
headers.set("Accept", "application/json");
const req = this._requestFn(this.metadataUrl, {
method: "GET",
headers,
format: "json",
});
const res = await req.response();
if (res.status >= 400) {
throw new Error("failed to request metadata");
}
return res.body;
})();
}
return this._metadataPromise;
}
async validate() {
const m = await this.metadata();
assert(typeof m.authorization_endpoint === "string", "Has an authorization endpoint");
assert(typeof m.token_endpoint === "string", "Has a token endpoint");
assert(typeof m.registration_endpoint === "string", "Has a registration endpoint");
assert(Array.isArray(m.response_types_supported) && m.response_types_supported.includes("code"), "Supports the code response type");
assert(Array.isArray(m.response_modes_supported) && m.response_modes_supported.includes("fragment"), "Supports the fragment response mode");
assert(typeof m.authorization_endpoint === "string" || (Array.isArray(m.grant_types_supported) && m.grant_types_supported.includes("authorization_code")), "Supports the authorization_code grant type");
assert(Array.isArray(m.code_challenge_methods_supported) && m.code_challenge_methods_supported.includes("S256"), "Supports the authorization_code grant type");
}
async _generateCodeChallenge(
codeVerifier: string
): Promise<string> {
const data = this._encoding.utf8.encode(codeVerifier);
const digest = await this._crypto.digest("SHA-256", data);
const base64Digest = this._encoding.base64.encode(digest);
return base64Digest.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
}
async authorizationEndpoint({
state,
redirectUri,
scope,
nonce,
codeVerifier,
}: AuthorizationParams): Promise<string> {
const metadata = await this.metadata();
const url = new URL(metadata["authorization_endpoint"]);
url.searchParams.append("response_mode", "fragment");
url.searchParams.append("response_type", "code");
url.searchParams.append("redirect_uri", redirectUri);
url.searchParams.append("client_id", await this.clientId());
url.searchParams.append("state", state);
url.searchParams.append("scope", scope);
if (nonce) {
url.searchParams.append("nonce", nonce);
}
if (codeVerifier) {
url.searchParams.append("code_challenge_method", "S256");
url.searchParams.append("code_challenge", await this._generateCodeChallenge(codeVerifier));
}
return url.toString();
}
async tokenEndpoint(): Promise<string> {
const metadata = await this.metadata();
return metadata["token_endpoint"];
}
async registrationEndpoint(): Promise<string> {
const metadata = await this.metadata();
return metadata["registration_endpoint"];
}
async revocationEndpoint(): Promise<string | undefined> {
const metadata = await this.metadata();
return metadata["revocation_endpoint"];
}
generateDeviceScope(): String {
const deviceId = randomString(10);
return `urn:matrix:org.matrix.msc2967.client:device:${deviceId}`;
}
generateParams({ scope, redirectUri }: { scope: string, redirectUri: string }): AuthorizationParams {
return {
scope,
redirectUri,
state: randomString(8),
nonce: randomString(8),
codeVerifier: randomString(64), // https://tools.ietf.org/html/rfc7636#section-4.1 length needs to be 43-128 characters
};
}
async completeAuthorizationCodeGrant({
codeVerifier,
code,
redirectUri,
}: { codeVerifier: string, code: string, redirectUri: string }): Promise<BearerToken> {
const params = new URLSearchParams();
params.append("grant_type", "authorization_code");
params.append("client_id", await this.clientId());
params.append("code_verifier", codeVerifier);
params.append("redirect_uri", redirectUri);
params.append("code", code);
const body = params.toString();
const headers = new Map();
headers.set("Content-Type", "application/x-www-form-urlencoded");
const req = this._requestFn(await this.tokenEndpoint(), {
method: "POST",
headers,
format: "json",
body,
});
const res = await req.response();
if (res.status >= 400) {
throw new Error("failed to exchange authorization code");
}
const token = res.body;
assert(isValidBearerToken(token), "Got back a valid bearer token");
return token;
}
async refreshToken({
refreshToken,
}: { refreshToken: string }): Promise<BearerToken> {
const params = new URLSearchParams();
params.append("grant_type", "refresh_token");
params.append("client_id", await this.clientId());
params.append("refresh_token", refreshToken);
const body = params.toString();
const headers = new Map();
headers.set("Content-Type", "application/x-www-form-urlencoded");
const req = this._requestFn(await this.tokenEndpoint(), {
method: "POST",
headers,
format: "json",
body,
});
const res = await req.response();
if (res.status >= 400) {
throw new Error("failed to use refresh token");
}
const token = res.body;
assert(isValidBearerToken(token), "Got back a valid bearer token");
return token;
}
async revokeToken({
token,
type,
}: { token: string, type: "refresh_token" | "access_token" }): Promise<void> {
const revocationEndpoint = await this.revocationEndpoint();
if (!revocationEndpoint) {
return;
}
const params = new URLSearchParams();
params.append("token_type_hint", type);
params.append("token", token);
params.append("client_id", await this.clientId());
const body = params.toString();
const headers = new Map();
headers.set("Content-Type", "application/x-www-form-urlencoded");
const req = this._requestFn(revocationEndpoint, {
method: "POST",
headers,
body,
});
const res = await req.response();
if (res.status >= 400) {
throw new Error("failed to revoke token");
}
}
}

View File

@ -0,0 +1,137 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the 'License');
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an 'AS IS' BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {ObservableValue} from "../../observable/value/ObservableValue";
import { BaseObservableValue } from "../../observable/value/BaseObservableValue";
import { MappedObservableValue } from "../../observable/value/MappedObservableValue";
import type {Clock, Timeout} from "../../platform/web/dom/Clock";
import {OidcApi} from "./OidcApi";
type Token = {
accessToken: string,
accessTokenExpiresAt: number,
refreshToken: string,
};
export class TokenRefresher {
private _token: ObservableValue<Token>;
private _accessToken: BaseObservableValue<string>;
private _anticipation: number;
private _clock: Clock;
private _oidcApi: OidcApi;
private _timeout: Timeout
private _running: boolean;
constructor({
oidcApi,
refreshToken,
accessToken,
accessTokenExpiresAt,
anticipation,
clock,
}: {
oidcApi: OidcApi,
refreshToken: string,
accessToken: string,
accessTokenExpiresAt: number,
anticipation: number,
clock: Clock,
}) {
this._token = new ObservableValue({
accessToken,
accessTokenExpiresAt,
refreshToken,
});
this._accessToken = new MappedObservableValue(this._token, (t) => t.accessToken);
this._anticipation = anticipation;
this._oidcApi = oidcApi;
this._clock = clock;
}
async start() {
if (this.needsRenewing) {
await this.renew();
}
this._running = true;
this._renewingLoop();
}
stop() {
this._running = false;
if (this._timeout) {
this._timeout.dispose();
}
}
get needsRenewing() {
const remaining = this._token.get().accessTokenExpiresAt - this._clock.now();
const anticipated = remaining - this._anticipation;
return anticipated < 0;
}
async _renewingLoop() {
while (this._running) {
const remaining =
this._token.get().accessTokenExpiresAt - this._clock.now();
const anticipated = remaining - this._anticipation;
if (anticipated > 0) {
this._timeout = this._clock.createTimeout(anticipated);
try {
await this._timeout.elapsed();
} catch {
// The timeout will throw when aborted, so stop the loop if it is the case
return;
}
}
await this.renew();
}
}
async renew() {
let refreshToken = this._token.get().refreshToken;
const response = await this._oidcApi
.refreshToken({
refreshToken,
});
if (typeof response.expires_in !== "number") {
throw new Error("Refreshed access token does not expire");
}
if (response.refresh_token) {
refreshToken = response.refresh_token;
}
this._token.set({
refreshToken,
accessToken: response.access_token,
accessTokenExpiresAt: this._clock.now() + response.expires_in * 1000,
});
}
get accessToken(): BaseObservableValue<string> {
return this._accessToken;
}
get token(): BaseObservableValue<Token> {
return this._token;
}
}

View File

@ -47,6 +47,7 @@ export class BaseRoom extends EventEmitter {
this._fragmentIdComparer = new FragmentIdComparer([]); this._fragmentIdComparer = new FragmentIdComparer([]);
this._emitCollectionChange = emitCollectionChange; this._emitCollectionChange = emitCollectionChange;
this._timeline = null; this._timeline = null;
this._openTimelinePromise = null;
this._user = user; this._user = user;
this._changedMembersDuringSync = null; this._changedMembersDuringSync = null;
this._memberList = null; this._memberList = null;
@ -73,6 +74,11 @@ export class BaseRoom extends EventEmitter {
return value; return value;
} }
async getStateEvent(type, key = '') {
const txn = await this._storage.readTxn(['roomState']);
return txn.roomState.get(this.id, type, key);
}
async _addStateObserver(stateObserver, txn) { async _addStateObserver(stateObserver, txn) {
if (!txn) { if (!txn) {
txn = await this._storage.readTxn([this._storage.storeNames.roomState]); txn = await this._storage.readTxn([this._storage.storeNames.roomState]);
@ -269,7 +275,7 @@ export class BaseRoom extends EventEmitter {
/** @public */ /** @public */
async loadMemberList(log = null) { async loadMemberList(txn = undefined, log = null) {
if (this._memberList) { if (this._memberList) {
// TODO: also await fetchOrLoadMembers promise here // TODO: also await fetchOrLoadMembers promise here
this._memberList.retain(); this._memberList.retain();
@ -280,6 +286,9 @@ export class BaseRoom extends EventEmitter {
roomId: this._roomId, roomId: this._roomId,
hsApi: this._hsApi, hsApi: this._hsApi,
storage: this._storage, storage: this._storage,
// pass in a transaction if we know we won't need to fetch (which would abort the transaction)
// and we want to make this operation part of the larger transaction
txn,
syncToken: this._getSyncToken(), syncToken: this._getSyncToken(),
// to handle race between /members and /sync // to handle race between /members and /sync
setChangedMembersMap: map => this._changedMembersDuringSync = map, setChangedMembersMap: map => this._changedMembersDuringSync = map,
@ -409,6 +418,10 @@ export class BaseRoom extends EventEmitter {
return this._roomId; return this._roomId;
} }
get type() {
return this._summary.data.type ?? undefined;
}
get lastMessageTimestamp() { get lastMessageTimestamp() {
return this._summary.data.lastMessageTimestamp; return this._summary.data.lastMessageTimestamp;
} }
@ -446,6 +459,10 @@ export class BaseRoom extends EventEmitter {
return this._summary.data.membership; return this._summary.data.membership;
} }
get isDirectMessage() {
return this._summary.data.isDirectMessage;
}
get user() { get user() {
return this._user; return this._user;
} }
@ -529,7 +546,8 @@ export class BaseRoom extends EventEmitter {
/** @public */ /** @public */
openTimeline(log = null) { openTimeline(log = null) {
return this._platform.logger.wrapOrRun(log, "open timeline", async log => { if (this._openTimelinePromise) return this._openTimelinePromise;
this._openTimelinePromise = this._platform.logger.wrapOrRun(log, "open timeline", async log => {
log.set("id", this.id); log.set("id", this.id);
if (this._timeline) { if (this._timeline) {
throw new Error("not dealing with load race here for now"); throw new Error("not dealing with load race here for now");
@ -541,6 +559,7 @@ export class BaseRoom extends EventEmitter {
pendingEvents: this._getPendingEvents(), pendingEvents: this._getPendingEvents(),
closeCallback: () => { closeCallback: () => {
this._timeline = null; this._timeline = null;
this._openTimelinePromise = null;
if (this._roomEncryption) { if (this._roomEncryption) {
this._roomEncryption.notifyTimelineClosed(); this._roomEncryption.notifyTimelineClosed();
} }
@ -562,6 +581,7 @@ export class BaseRoom extends EventEmitter {
} }
return this._timeline; return this._timeline;
}); });
return this._openTimelinePromise;
} }
/* allow subclasses to provide an observable list with pending events when opening the timeline */ /* allow subclasses to provide an observable list with pending events when opening the timeline */

View File

@ -61,6 +61,10 @@ export class Invite extends EventEmitter {
return this._inviteData.avatarColorId || this.id; return this._inviteData.avatarColorId || this.id;
} }
get type() {
return this._inviteData.type ?? undefined;
}
get timestamp() { get timestamp() {
return this._inviteData.timestamp; return this._inviteData.timestamp;
} }
@ -89,7 +93,7 @@ export class Invite extends EventEmitter {
await this._platform.logger.wrapOrRun(log, "acceptInvite", async log => { await this._platform.logger.wrapOrRun(log, "acceptInvite", async log => {
this._accepting = true; this._accepting = true;
this._emitChange("accepting"); this._emitChange("accepting");
await this._hsApi.join(this._roomId, {log}).response(); await this._hsApi.joinIdOrAlias(this.canonicalAlias ?? this._roomId, {log}).response();
}); });
} }
@ -189,7 +193,7 @@ export class Invite extends EventEmitter {
roomId: this.id, roomId: this.id,
isEncrypted: !!summaryData.encryption, isEncrypted: !!summaryData.encryption,
isDirectMessage: summaryData.isDirectMessage, isDirectMessage: summaryData.isDirectMessage,
// type: type: summaryData.type,
name, name,
avatarUrl, avatarUrl,
avatarColorId, avatarColorId,

View File

@ -141,11 +141,11 @@ export class Room extends BaseRoom {
} }
log.set("newEntries", newEntries.length); log.set("newEntries", newEntries.length);
log.set("updatedEntries", updatedEntries.length); log.set("updatedEntries", updatedEntries.length);
let shouldFlushKeyShares = false; let encryptionChanges;
// pass member changes to device tracker // pass member changes to device tracker
if (roomEncryption && this.isTrackingMembers && memberChanges?.size) { if (roomEncryption) {
shouldFlushKeyShares = await roomEncryption.writeMemberChanges(memberChanges, txn, log); encryptionChanges = await roomEncryption.writeSync(roomResponse, memberChanges, txn, log);
log.set("shouldFlushKeyShares", shouldFlushKeyShares); log.set("shouldFlushKeyShares", encryptionChanges.shouldFlush);
} }
const allEntries = newEntries.concat(updatedEntries); const allEntries = newEntries.concat(updatedEntries);
// also apply (decrypted) timeline entries to the summary changes // also apply (decrypted) timeline entries to the summary changes
@ -192,7 +192,7 @@ export class Room extends BaseRoom {
memberChanges, memberChanges,
heroChanges, heroChanges,
powerLevelsEvent, powerLevelsEvent,
shouldFlushKeyShares, encryptionChanges,
}; };
} }
@ -205,11 +205,14 @@ export class Room extends BaseRoom {
const { const {
summaryChanges, newEntries, updatedEntries, newLiveKey, summaryChanges, newEntries, updatedEntries, newLiveKey,
removedPendingEvents, memberChanges, powerLevelsEvent, removedPendingEvents, memberChanges, powerLevelsEvent,
heroChanges, roomEncryption, roomResponse heroChanges, roomEncryption, roomResponse, encryptionChanges
} = changes; } = changes;
log.set("id", this.id); log.set("id", this.id);
this._syncWriter.afterSync(newLiveKey); this._syncWriter.afterSync(newLiveKey);
this._setEncryption(roomEncryption); this._setEncryption(roomEncryption);
if (this._roomEncryption) {
this._roomEncryption.afterSync(encryptionChanges);
}
if (memberChanges.size) { if (memberChanges.size) {
if (this._changedMembersDuringSync) { if (this._changedMembersDuringSync) {
for (const [userId, memberChange] of memberChanges.entries()) { for (const [userId, memberChange] of memberChanges.entries()) {
@ -299,8 +302,8 @@ export class Room extends BaseRoom {
} }
} }
needsAfterSyncCompleted({shouldFlushKeyShares}) { needsAfterSyncCompleted({encryptionChanges}) {
return shouldFlushKeyShares; return encryptionChanges?.shouldFlush;
} }
/** /**

View File

@ -20,7 +20,7 @@ import {MediaRepository} from "../net/MediaRepository";
import {EventEmitter} from "../../utils/EventEmitter"; import {EventEmitter} from "../../utils/EventEmitter";
import {AttachmentUpload} from "./AttachmentUpload"; import {AttachmentUpload} from "./AttachmentUpload";
import {loadProfiles, Profile, UserIdProfile} from "../profile"; import {loadProfiles, Profile, UserIdProfile} from "../profile";
import {RoomType} from "./common"; import {RoomType, RoomVisibility} from "./common";
import type {HomeServerApi} from "../net/HomeServerApi"; import type {HomeServerApi} from "../net/HomeServerApi";
import type {ILogItem} from "../../logging/types"; import type {ILogItem} from "../../logging/types";
@ -36,8 +36,9 @@ type CreateRoomPayload = {
topic?: string; topic?: string;
invite?: string[]; invite?: string[];
room_alias_name?: string; room_alias_name?: string;
creation_content?: {"m.federate": boolean}; creation_content?: {"m.federate"?: boolean, type?: string};
initial_state: {type: string; state_key: string; content: Record<string, any>}[] initial_state: { type: string; state_key: string; content: Record<string, any> }[];
power_level_content_override?: Record<string, any>;
} }
type ImageInfo = { type ImageInfo = {
@ -49,12 +50,12 @@ type ImageInfo = {
type Avatar = { type Avatar = {
info: ImageInfo; info: ImageInfo;
blob: IBlobHandle;
name: string; name: string;
} } & ({ blob: IBlobHandle } | { url: string });
type Options = { type Options = {
type: RoomType; type?: RoomType;
visibility: RoomVisibility;
isEncrypted?: boolean; isEncrypted?: boolean;
isFederationDisabled?: boolean; isFederationDisabled?: boolean;
name?: string; name?: string;
@ -62,25 +63,27 @@ type Options = {
invites?: string[]; invites?: string[];
avatar?: Avatar; avatar?: Avatar;
alias?: string; alias?: string;
powerLevelContentOverride?: Record<string, any>;
initialState?: any[];
} }
function defaultE2EEStatusForType(type: RoomType): boolean { function defaultE2EEStatusForType(type: RoomVisibility): boolean {
switch (type) { switch (type) {
case RoomType.DirectMessage: case RoomVisibility.DirectMessage:
case RoomType.Private: case RoomVisibility.Private:
return true; return true;
case RoomType.Public: case RoomVisibility.Public:
return false; return false;
} }
} }
function presetForType(type: RoomType): string { function presetForType(type: RoomVisibility): string {
switch (type) { switch (type) {
case RoomType.DirectMessage: case RoomVisibility.DirectMessage:
return "trusted_private_chat"; return "trusted_private_chat";
case RoomType.Private: case RoomVisibility.Private:
return "private_chat"; return "private_chat";
case RoomType.Public: case RoomVisibility.Public:
return "public_chat"; return "public_chat";
} }
} }
@ -103,7 +106,7 @@ export class RoomBeingCreated extends EventEmitter<{change: never}> {
log: ILogItem log: ILogItem
) { ) {
super(); super();
this.isEncrypted = options.isEncrypted === undefined ? defaultE2EEStatusForType(options.type) : options.isEncrypted; this.isEncrypted = options.isEncrypted === undefined ? defaultE2EEStatusForType(options.visibility) : options.isEncrypted;
if (options.name) { if (options.name) {
this._calculatedName = options.name; this._calculatedName = options.name;
} else { } else {
@ -122,16 +125,22 @@ export class RoomBeingCreated extends EventEmitter<{change: never}> {
let avatarEventContent; let avatarEventContent;
if (this.options.avatar) { if (this.options.avatar) {
const {avatar} = this.options; const {avatar} = this.options;
const attachment = new AttachmentUpload({filename: avatar.name, blob: avatar.blob, platform: this.platform});
await attachment.upload(hsApi, () => {}, log);
avatarEventContent = { avatarEventContent = {
info: avatar.info info: avatar.info
}; };
attachment.applyToContent("url", avatarEventContent);
if ("blob" in avatar) {
const attachment = new AttachmentUpload({filename: avatar.name, blob: avatar.blob, platform: this.platform});
await attachment.upload(hsApi, () => {}, log);
attachment.applyToContent("url", avatarEventContent);
} else {
avatarEventContent.url = avatar.url;
}
} }
const createOptions: CreateRoomPayload = { const createOptions: CreateRoomPayload = {
is_direct: this.options.type === RoomType.DirectMessage, is_direct: this.options.visibility === RoomVisibility.DirectMessage,
preset: presetForType(this.options.type), preset: presetForType(this.options.visibility),
initial_state: [] initial_state: []
}; };
if (this.options.name) { if (this.options.name) {
@ -146,10 +155,15 @@ export class RoomBeingCreated extends EventEmitter<{change: never}> {
if (this.options.alias) { if (this.options.alias) {
createOptions.room_alias_name = this.options.alias; createOptions.room_alias_name = this.options.alias;
} }
if (this.options.type !== undefined) {
let type: string | undefined = undefined;
if (this.options.type === RoomType.World) type = "org.matrix.msc3815.world";
if (this.options.type === RoomType.Profile) type = "org.matrix.msc3815.profile";
createOptions.creation_content = { type };
}
if (this.options.isFederationDisabled === true) { if (this.options.isFederationDisabled === true) {
createOptions.creation_content = { if (createOptions.creation_content === undefined) createOptions.creation_content = {};
"m.federate": false createOptions.creation_content["m.federate"] = false;
};
} }
if (this.isEncrypted) { if (this.isEncrypted) {
createOptions.initial_state.push(createRoomEncryptionEvent()); createOptions.initial_state.push(createRoomEncryptionEvent());
@ -161,6 +175,14 @@ export class RoomBeingCreated extends EventEmitter<{change: never}> {
content: avatarEventContent content: avatarEventContent
}); });
} }
if (this.options.powerLevelContentOverride) {
createOptions.power_level_content_override = this.options.powerLevelContentOverride;
}
if (this.options.initialState) {
createOptions.initial_state.push(...this.options.initialState);
}
const response = await hsApi.createRoom(createOptions, {log}).response(); const response = await hsApi.createRoom(createOptions, {log}).response();
this._roomId = response["room_id"]; this._roomId = response["room_id"];
} catch (err) { } catch (err) {
@ -197,7 +219,15 @@ export class RoomBeingCreated extends EventEmitter<{change: never}> {
get avatarColorId(): string { return this.options.invites?.[0] ?? this._roomId ?? this.id; } get avatarColorId(): string { return this.options.invites?.[0] ?? this._roomId ?? this.id; }
get avatarUrl(): string | undefined { return this.profiles?.[0]?.avatarUrl; } get avatarUrl(): string | undefined { return this.profiles?.[0]?.avatarUrl; }
get avatarBlobUrl(): string | undefined { return this.options.avatar?.blob?.url; } get avatarBlobUrl(): string | undefined {
const avatar = this.options.avatar;
if (!avatar || !("blob" in avatar)) {
return undefined;
}
return avatar.blob.url;
}
get roomId(): string | undefined { return this._roomId; } get roomId(): string | undefined { return this._roomId; }
get name() { return this._calculatedName; } get name() { return this._calculatedName; }
get isBeingCreated(): boolean { return true; } get isBeingCreated(): boolean { return true; }
@ -215,13 +245,13 @@ export class RoomBeingCreated extends EventEmitter<{change: never}> {
/** @internal */ /** @internal */
dispose() { dispose() {
if (this.options.avatar) { if (this.options.avatar && "blob" in this.options.avatar) {
this.options.avatar.blob.dispose(); this.options.avatar.blob.dispose();
} }
} }
async adjustDirectMessageMapIfNeeded(user: User, storage: Storage, hsApi: HomeServerApi, log: ILogItem): Promise<void> { async adjustDirectMessageMapIfNeeded(user: User, storage: Storage, hsApi: HomeServerApi, log: ILogItem): Promise<void> {
if (!this.options.invites || this.options.type !== RoomType.DirectMessage) { if (!this.options.invites || this.options.visibility !== RoomVisibility.DirectMessage) {
return; return;
} }
const userId = this.options.invites[0]; const userId = this.options.invites[0];

View File

@ -82,6 +82,7 @@ export function processStateEvent(data, event, ownUserId) {
if (event.type === "m.room.create") { if (event.type === "m.room.create") {
data = data.cloneIfNeeded(); data = data.cloneIfNeeded();
data.lastMessageTimestamp = event.origin_server_ts; data.lastMessageTimestamp = event.origin_server_ts;
data.type = event.content?.type ?? null;
} else if (event.type === "m.room.encryption") { } else if (event.type === "m.room.encryption") {
const algorithm = event.content?.algorithm; const algorithm = event.content?.algorithm;
if (!data.encryption && algorithm === MEGOLM_ALGORITHM) { if (!data.encryption && algorithm === MEGOLM_ALGORITHM) {
@ -167,6 +168,7 @@ export class SummaryData {
constructor(copy, roomId) { constructor(copy, roomId) {
this.roomId = copy ? copy.roomId : roomId; this.roomId = copy ? copy.roomId : roomId;
this.name = copy ? copy.name : null; this.name = copy ? copy.name : null;
this.type = copy ? copy.type : null;
this.lastMessageTimestamp = copy ? copy.lastMessageTimestamp : null; this.lastMessageTimestamp = copy ? copy.lastMessageTimestamp : null;
this.isUnread = copy ? copy.isUnread : false; this.isUnread = copy ? copy.isUnread : false;
this.encryption = copy ? copy.encryption : null; this.encryption = copy ? copy.encryption : null;

View File

@ -14,11 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import type {Room} from "./Room"; import type {StateEvent} from "../storage/types";
import type {StateEvent, TimelineEvent} from "../storage/types";
import type {Transaction} from "../storage/idb/Transaction";
import type {ILogItem} from "../../logging/types";
import type {MemberChange} from "./members/RoomMember";
export function getPrevContentFromStateEvent(event) { export function getPrevContentFromStateEvent(event) {
// where to look for prev_content is a bit of a mess, // where to look for prev_content is a bit of a mess,
@ -41,10 +37,15 @@ export enum RoomStatus {
Archived = 1 << 5, Archived = 1 << 5,
} }
export enum RoomType { export enum RoomVisibility {
DirectMessage, DirectMessage,
Private, Private,
Public Public,
}
export enum RoomType {
World,
Profile,
} }
type RoomResponse = { type RoomResponse = {

View File

@ -137,6 +137,10 @@ export class MemberChange {
return this.member.membership; return this.member.membership;
} }
get wasInvited() {
return this.previousMembership === "invite" && this.membership !== "invite";
}
get hasLeft() { get hasLeft() {
return this.previousMembership === "join" && this.membership !== "join"; return this.previousMembership === "join" && this.membership !== "join";
} }

View File

@ -17,10 +17,12 @@ limitations under the License.
import {RoomMember} from "./RoomMember.js"; import {RoomMember} from "./RoomMember.js";
async function loadMembers({roomId, storage}) { async function loadMembers({roomId, storage, txn}) {
const txn = await storage.readTxn([ if (!txn) {
storage.storeNames.roomMembers, txn = await storage.readTxn([
]); storage.storeNames.roomMembers,
]);
}
const memberDatas = await txn.roomMembers.getAll(roomId); const memberDatas = await txn.roomMembers.getAll(roomId);
return memberDatas.map(d => new RoomMember(d)); return memberDatas.map(d => new RoomMember(d));
} }

View File

@ -21,6 +21,10 @@ interface ISessionInfo {
homeserver: string; homeserver: string;
homeServer: string; // deprecate this over time homeServer: string; // deprecate this over time
accessToken: string; accessToken: string;
accessTokenExpiresAt?: number;
refreshToken?: string;
oidcIssuer?: string;
accountManagementUrl?: string;
lastUsed: number; lastUsed: number;
} }
@ -28,6 +32,7 @@ interface ISessionInfo {
interface ISessionInfoStorage { interface ISessionInfoStorage {
getAll(): Promise<ISessionInfo[]>; getAll(): Promise<ISessionInfo[]>;
updateLastUsed(id: string, timestamp: number): Promise<void>; updateLastUsed(id: string, timestamp: number): Promise<void>;
updateToken(id: string, accessToken: string, accessTokenExpiresAt: number, refreshToken: string): Promise<void>;
get(id: string): Promise<ISessionInfo | undefined>; get(id: string): Promise<ISessionInfo | undefined>;
add(sessionInfo: ISessionInfo): Promise<void>; add(sessionInfo: ISessionInfo): Promise<void>;
delete(sessionId: string): Promise<void>; delete(sessionId: string): Promise<void>;
@ -62,6 +67,19 @@ export class SessionInfoStorage implements ISessionInfoStorage {
} }
} }
async updateToken(id: string, accessToken: string, accessTokenExpiresAt: number, refreshToken: string): Promise<void> {
const sessions = await this.getAll();
if (sessions) {
const session = sessions.find(session => session.id === id);
if (session) {
session.accessToken = accessToken;
session.accessTokenExpiresAt = accessTokenExpiresAt;
session.refreshToken = refreshToken;
localStorage.setItem(this._name, JSON.stringify(sessions));
}
}
}
async get(id: string): Promise<ISessionInfo | undefined> { async get(id: string): Promise<ISessionInfo | undefined> {
const sessions = await this.getAll(); const sessions = await this.getAll();
if (sessions) { if (sessions) {

View File

@ -42,6 +42,7 @@ async function requestPersistedStorage(): Promise<boolean> {
await glob.document.requestStorageAccess(); await glob.document.requestStorageAccess();
return true; return true;
} catch (err) { } catch (err) {
console.warn("requestStorageAccess threw an error:", err);
return false; return false;
} }
} else { } else {

View File

@ -2,7 +2,6 @@ import {IDOMStorage} from "./types";
import {ITransaction} from "./QueryTarget"; import {ITransaction} from "./QueryTarget";
import {iterateCursor, NOT_DONE, reqAsPromise} from "./utils"; import {iterateCursor, NOT_DONE, reqAsPromise} from "./utils";
import {RoomMember, EVENT_TYPE as MEMBER_EVENT_TYPE} from "../../room/members/RoomMember.js"; import {RoomMember, EVENT_TYPE as MEMBER_EVENT_TYPE} from "../../room/members/RoomMember.js";
import {addRoomToIdentity} from "../../e2ee/DeviceTracker.js";
import {SESSION_E2EE_KEY_PREFIX} from "../../e2ee/common.js"; import {SESSION_E2EE_KEY_PREFIX} from "../../e2ee/common.js";
import {SummaryData} from "../../room/RoomSummary"; import {SummaryData} from "../../room/RoomSummary";
import {RoomMemberStore, MemberData} from "./stores/RoomMemberStore"; import {RoomMemberStore, MemberData} from "./stores/RoomMemberStore";
@ -184,51 +183,12 @@ function createTimelineRelationsStore(db: IDBDatabase) : void {
db.createObjectStore("timelineRelations", {keyPath: "key"}); db.createObjectStore("timelineRelations", {keyPath: "key"});
} }
//v11 doesn't change the schema, but ensures all userIdentities have all the roomIds they should (see #470) //v11 doesn't change the schema,
async function fixMissingRoomsInUserIdentities(db: IDBDatabase, txn: IDBTransaction, localStorage: IDOMStorage, log: ILogItem) { // but ensured all userIdentities have all the roomIds they should (see #470)
const roomSummaryStore = txn.objectStore("roomSummary");
const trackedRoomIds: string[] = []; // 2022-07-20: The fix dated from August 2021, and have removed it now because of a
await iterateCursor<SummaryData>(roomSummaryStore.openCursor(), roomSummary => { // refactoring needed in the device tracker, which made it inconvenient to expose addRoomToIdentity
if (roomSummary.isTrackingMembers) { function fixMissingRoomsInUserIdentities() {}
trackedRoomIds.push(roomSummary.roomId);
}
return NOT_DONE;
});
const outboundGroupSessionsStore = txn.objectStore("outboundGroupSessions");
const userIdentitiesStore: IDBObjectStore = txn.objectStore("userIdentities");
const roomMemberStore = txn.objectStore("roomMembers");
for (const roomId of trackedRoomIds) {
let foundMissing = false;
const joinedUserIds: string[] = [];
const memberRange = IDBKeyRange.bound(roomId, `${roomId}|${MAX_UNICODE}`, true, true);
await log.wrap({l: "room", id: roomId}, async log => {
await iterateCursor<MemberData>(roomMemberStore.openCursor(memberRange), member => {
if (member.membership === "join") {
joinedUserIds.push(member.userId);
}
return NOT_DONE;
});
log.set("joinedUserIds", joinedUserIds.length);
for (const userId of joinedUserIds) {
const identity = await reqAsPromise(userIdentitiesStore.get(userId));
const originalRoomCount = identity?.roomIds?.length;
const updatedIdentity = addRoomToIdentity(identity, userId, roomId);
if (updatedIdentity) {
log.log({l: `fixing up`, id: userId,
roomsBefore: originalRoomCount, roomsAfter: updatedIdentity.roomIds.length});
userIdentitiesStore.put(updatedIdentity);
foundMissing = true;
}
}
log.set("foundMissing", foundMissing);
if (foundMissing) {
// clear outbound megolm session,
// so we'll create a new one on the next message that will be properly shared
outboundGroupSessionsStore.delete(roomId);
}
});
}
}
// v12 move ssssKey to e2ee:ssssKey so it will get backed up in the next step // v12 move ssssKey to e2ee:ssssKey so it will get backed up in the next step
async function changeSSSSKeyPrefix(db: IDBDatabase, txn: IDBTransaction) { async function changeSSSSKeyPrefix(db: IDBDatabase, txn: IDBTransaction) {

View File

@ -41,6 +41,8 @@ async function getWellKnownResponse(homeserver, request) {
export async function lookupHomeserver(homeserver, request) { export async function lookupHomeserver(homeserver, request) {
homeserver = normalizeHomeserver(homeserver); homeserver = normalizeHomeserver(homeserver);
let issuer = null;
let account = null;
const wellKnownResponse = await getWellKnownResponse(homeserver, request); const wellKnownResponse = await getWellKnownResponse(homeserver, request);
if (wellKnownResponse && wellKnownResponse.status === 200) { if (wellKnownResponse && wellKnownResponse.status === 200) {
const {body} = wellKnownResponse; const {body} = wellKnownResponse;
@ -48,6 +50,16 @@ export async function lookupHomeserver(homeserver, request) {
if (typeof wellKnownHomeserver === "string") { if (typeof wellKnownHomeserver === "string") {
homeserver = normalizeHomeserver(wellKnownHomeserver); homeserver = normalizeHomeserver(wellKnownHomeserver);
} }
const wellKnownIssuer = body["org.matrix.msc2965.authentication"]?.["issuer"];
if (typeof wellKnownIssuer === "string") {
issuer = wellKnownIssuer;
}
const wellKnownAccount = body["org.matrix.msc2965.authentication"]?.["account"];
if (typeof wellKnownAccount === "string") {
account = wellKnownAccount;
}
} }
return homeserver; return {homeserver, issuer, account};
} }

View File

@ -0,0 +1,46 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the 'License');
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an 'AS IS' BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { BaseObservableValue } from "./BaseObservableValue";
import { SubscriptionHandle } from "../BaseObservable";
export class MappedObservableValue<P, C> extends BaseObservableValue<C> {
private sourceSubscription?: SubscriptionHandle;
constructor(
private readonly source: BaseObservableValue<P>,
private readonly mapper: (value: P) => C
) {
super();
}
onUnsubscribeLast() {
super.onUnsubscribeLast();
this.sourceSubscription = this.sourceSubscription!();
}
onSubscribeFirst() {
super.onSubscribeFirst();
this.sourceSubscription = this.source.subscribe(() => {
this.emit(this.get());
});
}
get(): C {
const sourceValue = this.source.get();
return this.mapper(sourceValue);
}
}

View File

@ -0,0 +1,64 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
export type Config = {
/**
* The default homeserver used by Hydrogen; auto filled in the login UI.
* eg: https://matrix.org
* REQUIRED
*/
defaultHomeServer: string;
/**
* The submit endpoint for your preferred rageshake server.
* eg: https://element.io/bugreports/submit
* Read more about rageshake at https://github.com/matrix-org/rageshake
* OPTIONAL
*/
bugReportEndpointUrl?: string;
/**
* Paths to theme-manifests
* eg: ["assets/theme-element.json", "assets/theme-awesome.json"]
* REQUIRED
*/
themeManifests: string[];
/**
* This configures the default theme(s) used by Hydrogen.
* These themes appear as "Default" option in the theme chooser UI and are also
* used as a fallback when other themes fail to load.
* Whether the dark or light variant is used depends on the system preference.
* OPTIONAL
*/
defaultTheme?: {
// id of light theme
light: string;
// id of dark theme
dark: string;
};
/**
* Configuration for push notifications.
* See https://spec.matrix.org/latest/client-server-api/#post_matrixclientv3pushersset
* and https://github.com/matrix-org/sygnal/blob/main/docs/applications.md#webpush
* OPTIONAL
*/
push?: {
// See app_id in the request body in above link
appId: string;
// The host used for pushing notification
gatewayUrl: string;
// See pushkey in above link
applicationServerKey: string;
};
};

View File

@ -22,6 +22,13 @@ export type ThemeManifest = Partial<{
version: number; version: number;
// A user-facing string that is the name for this theme-collection. // A user-facing string that is the name for this theme-collection.
name: string; name: string;
// An identifier for this theme
id: string;
/**
* Id of the theme that this theme derives from.
* Only present for derived/runtime themes.
*/
extends: string;
/** /**
* This is added to the manifest during the build process and includes data * This is added to the manifest during the build process and includes data
* that is needed to load themes at runtime. * that is needed to load themes at runtime.
@ -42,6 +49,12 @@ export type ThemeManifest = Partial<{
"runtime-asset": string; "runtime-asset": string;
// Array of derived-variables // Array of derived-variables
"derived-variables": Array<string>; "derived-variables": Array<string>;
/**
* Mapping from icon variable to location of icon in build output with query parameters
* indicating how it should be colored for this particular theme.
* eg: "icon-url-1": "element-logo.86bc8565.svg?primary=accent-color"
*/
icon: Record<string, string>;
}; };
values: { values: {
/** /**
@ -60,6 +73,8 @@ type Variant = Partial<{
default: boolean; default: boolean;
// A user-facing string that is the name for this variant. // A user-facing string that is the name for this variant.
name: string; name: string;
// A boolean indicating whether this is a dark theme or not
dark: boolean;
/** /**
* Mapping from css variable to its value. * Mapping from css variable to its value.
* eg: {"background-color-primary": "#21262b", ...} * eg: {"background-color-primary": "#21262b", ...}

View File

@ -26,6 +26,7 @@ export interface IRequestOptions {
cache?: boolean; cache?: boolean;
method?: string; method?: string;
format?: string; format?: string;
accessTokenOverride?: string;
} }
export type RequestFunction = (url: string, options: IRequestOptions) => RequestResult; export type RequestFunction = (url: string, options: IRequestOptions) => RequestResult;

View File

@ -41,7 +41,7 @@ import {parseHTML} from "./parsehtml.js";
import {handleAvatarError} from "./ui/avatar"; import {handleAvatarError} from "./ui/avatar";
import {MediaDevicesWrapper} from "./dom/MediaDevices"; import {MediaDevicesWrapper} from "./dom/MediaDevices";
import {DOMWebRTC} from "./dom/WebRTC"; import {DOMWebRTC} from "./dom/WebRTC";
import {ThemeLoader} from "./ThemeLoader"; import {ThemeLoader} from "./theming/ThemeLoader";
function addScript(src) { function addScript(src) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
@ -345,7 +345,7 @@ export class Platform {
document.querySelectorAll(".theme").forEach(e => e.remove()); document.querySelectorAll(".theme").forEach(e => e.remove());
// add new theme // add new theme
const styleTag = document.createElement("link"); const styleTag = document.createElement("link");
styleTag.href = `./${newPath}`; styleTag.href = newPath;
styleTag.rel = "stylesheet"; styleTag.rel = "stylesheet";
styleTag.type = "text/css"; styleTag.type = "text/css";
styleTag.className = "theme"; styleTag.className = "theme";

View File

@ -1,207 +0,0 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import type {ILogItem} from "../../logging/types.js";
import type {Platform} from "./Platform.js";
type NormalVariant = {
id: string;
cssLocation: string;
};
type DefaultVariant = {
dark: {
id: string;
cssLocation: string;
variantName: string;
};
light: {
id: string;
cssLocation: string;
variantName: string;
};
default: {
id: string;
cssLocation: string;
variantName: string;
};
}
type ThemeInformation = NormalVariant | DefaultVariant;
export enum ColorSchemePreference {
Dark,
Light
};
export class ThemeLoader {
private _platform: Platform;
private _themeMapping: Record<string, ThemeInformation>;
constructor(platform: Platform) {
this._platform = platform;
}
async init(manifestLocations: string[], log?: ILogItem): Promise<void> {
await this._platform.logger.wrapOrRun(log, "ThemeLoader.init", async (log) => {
this._themeMapping = {};
const results = await Promise.all(
manifestLocations.map( location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response())
);
results.forEach(({ body }) => this._populateThemeMap(body, log));
});
}
private _populateThemeMap(manifest, log: ILogItem) {
log.wrap("populateThemeMap", (l) => {
/*
After build has finished, the source section of each theme manifest
contains `built-assets` which is a mapping from the theme-id to
cssLocation of theme
*/
const builtAssets: Record<string, string> = manifest.source?.["built-assets"];
const themeName = manifest.name;
let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (const [themeId, cssLocation] of Object.entries(builtAssets)) {
const variant = themeId.match(/.+-(.+)/)?.[1];
const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!];
const themeDisplayName = `${themeName} ${variantName}`;
if (isDefault) {
/**
* This is a default variant!
* We'll add these to the themeMapping (separately) keyed with just the
* theme-name (i.e "Element" instead of "Element Dark").
* We need to be able to distinguish them from other variants!
*
* This allows us to render radio-buttons with "dark" and
* "light" options.
*/
const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant;
defaultVariant.variantName = variantName;
defaultVariant.id = themeId
defaultVariant.cssLocation = cssLocation;
continue;
}
// Non-default variants are keyed in themeMapping with "theme_name variant_name"
// eg: "Element Dark"
this._themeMapping[themeDisplayName] = {
cssLocation,
id: themeId
};
}
if (defaultDarkVariant.id && defaultLightVariant.id) {
/**
* As mentioned above, if there's both a default dark and a default light variant,
* add them to themeMapping separately.
*/
const defaultVariant = this.preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
}
else {
/**
* If only one default variant is found (i.e only dark default or light default but not both),
* treat it like any other variant.
*/
const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
}
//Add the default-theme as an additional option to the mapping
const defaultThemeId = this.getDefaultTheme();
if (defaultThemeId) {
const themeDetails = this._findThemeDetailsFromId(defaultThemeId);
if (themeDetails) {
this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.cssLocation };
}
}
l.log({ l: "Default Theme", theme: defaultThemeId});
l.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" });
l.log({ l: "Result", themeMapping: this._themeMapping });
});
}
setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => {
let cssLocation: string;
let themeDetails = this._themeMapping[themeName];
if ("id" in themeDetails) {
cssLocation = themeDetails.cssLocation;
}
else {
if (!themeVariant) {
throw new Error("themeVariant is undefined!");
}
cssLocation = themeDetails[themeVariant].cssLocation;
}
this._platform.replaceStylesheet(cssLocation);
this._platform.settingsStorage.setString("theme-name", themeName);
if (themeVariant) {
this._platform.settingsStorage.setString("theme-variant", themeVariant);
}
else {
this._platform.settingsStorage.remove("theme-variant");
}
});
}
/** Maps theme display name to theme information */
get themeMapping(): Record<string, ThemeInformation> {
return this._themeMapping;
}
async getActiveTheme(): Promise<{themeName: string, themeVariant?: string}> {
let themeName = await this._platform.settingsStorage.getString("theme-name");
let themeVariant = await this._platform.settingsStorage.getString("theme-variant");
if (!themeName || !this._themeMapping[themeName]) {
themeName = "Default" in this._themeMapping ? "Default" : Object.keys(this._themeMapping)[0];
if (!this._themeMapping[themeName][themeVariant]) {
themeVariant = "default" in this._themeMapping[themeName] ? "default" : undefined;
}
}
return { themeName, themeVariant };
}
getDefaultTheme(): string | undefined {
switch (this.preferredColorScheme) {
case ColorSchemePreference.Dark:
return this._platform.config["defaultTheme"]?.dark;
case ColorSchemePreference.Light:
return this._platform.config["defaultTheme"]?.light;
}
}
private _findThemeDetailsFromId(themeId: string): {themeName: string, cssLocation: string, variant?: string} | undefined {
for (const [themeName, themeData] of Object.entries(this._themeMapping)) {
if ("id" in themeData && themeData.id === themeId) {
return { themeName, cssLocation: themeData.cssLocation };
}
else if ("light" in themeData && themeData.light?.id === themeId) {
return { themeName, cssLocation: themeData.light.cssLocation, variant: "light" };
}
else if ("dark" in themeData && themeData.dark?.id === themeId) {
return { themeName, cssLocation: themeData.dark.cssLocation, variant: "dark" };
}
}
}
get preferredColorScheme(): ColorSchemePreference | undefined {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return ColorSchemePreference.Dark;
}
else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
return ColorSchemePreference.Light;
}
}
}

View File

@ -5,5 +5,13 @@
"applicationServerKey": "BC-gpSdVHEXhvHSHS0AzzWrQoukv2BE7KzpoPO_FfPacqOo3l1pdqz7rSgmB04pZCWaHPz7XRe6fjLaC-WPDopM" "applicationServerKey": "BC-gpSdVHEXhvHSHS0AzzWrQoukv2BE7KzpoPO_FfPacqOo3l1pdqz7rSgmB04pZCWaHPz7XRe6fjLaC-WPDopM"
}, },
"defaultHomeServer": "matrix.org", "defaultHomeServer": "matrix.org",
"bugReportEndpointUrl": "https://element.io/bugreports/submit" "bugReportEndpointUrl": "https://element.io/bugreports/submit",
"oidc": {
"clientConfigs": {
"https://id.thirdroom.io/realms/thirdroom/": {
"client_id": "thirdroom",
"uris": ["http://localhost:3000", "https://thirdroom.io"]
}
}
}
} }

View File

@ -17,6 +17,12 @@ limitations under the License.
import {BaseObservableValue} from "../../../observable/value/BaseObservableValue"; import {BaseObservableValue} from "../../../observable/value/BaseObservableValue";
export class History extends BaseObservableValue { export class History extends BaseObservableValue {
constructor() {
super();
this._lastSessionHash = undefined;
}
handleEvent(event) { handleEvent(event) {
if (event.type === "hashchange") { if (event.type === "hashchange") {
this.emit(this.get()); this.emit(this.get());
@ -65,6 +71,7 @@ export class History extends BaseObservableValue {
} }
onSubscribeFirst() { onSubscribeFirst() {
this._lastSessionHash = window.localStorage?.getItem("hydrogen_last_url_hash");
window.addEventListener('hashchange', this); window.addEventListener('hashchange', this);
} }
@ -76,7 +83,7 @@ export class History extends BaseObservableValue {
window.localStorage?.setItem("hydrogen_last_url_hash", hash); window.localStorage?.setItem("hydrogen_last_url_hash", hash);
} }
getLastUrl() { getLastSessionUrl() {
return window.localStorage?.getItem("hydrogen_last_url_hash"); return this._lastSessionHash;
} }
} }

View File

@ -31,9 +31,6 @@ export class DOMWebRTC implements WebRTC {
}) as PeerConnection; }) as PeerConnection;
return new Proxy(peerConn, { return new Proxy(peerConn, {
get(target, prop, receiver) { get(target, prop, receiver) {
if (prop === "close") {
console.trace("calling peerConnection.close");
}
const value = target[prop]; const value = target[prop];
if (typeof value === "function") { if (typeof value === "function") {
return value.bind(target); return value.bind(target);

View File

@ -115,6 +115,9 @@ export function createFetchRequest(createTimeout, serviceWorkerHandler) {
} else if (format === "buffer") { } else if (format === "buffer") {
body = await response.arrayBuffer(); body = await response.arrayBuffer();
} }
else if (format === "text") {
body = await response.text();
}
} catch (err) { } catch (err) {
// some error pages return html instead of json, ignore error // some error pages return html instead of json, ignore error
if (!(err.name === "SyntaxError" && status >= 400)) { if (!(err.name === "SyntaxError" && status >= 400)) {

View File

@ -17,7 +17,7 @@ limitations under the License.
// import {RecordRequester, ReplayRequester} from "./matrix/net/request/replay"; // import {RecordRequester, ReplayRequester} from "./matrix/net/request/replay";
import {RootViewModel} from "../../domain/RootViewModel.js"; import {RootViewModel} from "../../domain/RootViewModel.js";
import {createNavigation, createRouter} from "../../domain/navigation/index.js"; import {createNavigation, createRouter} from "../../domain/navigation/index";
// Don't use a default export here, as we use multiple entries during legacy build, // Don't use a default export here, as we use multiple entries during legacy build,
// which does not support default exports, // which does not support default exports,
// see https://github.com/rollup/plugins/tree/master/packages/multi-entry // see https://github.com/rollup/plugins/tree/master/packages/multi-entry

View File

@ -0,0 +1,131 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {derive} from "./shared/color.mjs";
export class DerivedVariables {
private _baseVariables: Record<string, string>;
private _variablesToDerive: string[]
private _isDark: boolean
private _aliases: Record<string, string> = {};
private _derivedAliases: string[] = [];
constructor(baseVariables: Record<string, string>, variablesToDerive: string[], isDark: boolean) {
this._baseVariables = baseVariables;
this._variablesToDerive = variablesToDerive;
this._isDark = isDark;
}
toVariables(): Record<string, string> {
const resolvedVariables: any = {};
this._detectAliases();
for (const variable of this._variablesToDerive) {
const resolvedValue = this._derive(variable);
if (resolvedValue) {
resolvedVariables[variable] = resolvedValue;
}
}
for (const [alias, variable] of Object.entries(this._aliases) as any) {
resolvedVariables[alias] = this._baseVariables[variable] ?? resolvedVariables[variable];
}
for (const variable of this._derivedAliases) {
const resolvedValue = this._deriveAlias(variable, resolvedVariables);
if (resolvedValue) {
resolvedVariables[variable] = resolvedValue;
}
}
return resolvedVariables;
}
private _detectAliases(): void {
const newVariablesToDerive: string[] = [];
for (const variable of this._variablesToDerive) {
const [alias, value] = variable.split("=");
if (value) {
this._aliases[alias] = value;
}
else {
newVariablesToDerive.push(variable);
}
}
this._variablesToDerive = newVariablesToDerive;
}
private _derive(variable: string): string | undefined {
const RE_VARIABLE_VALUE = /(.+)--(.+)-(.+)/;
const matches = variable.match(RE_VARIABLE_VALUE);
if (matches) {
const [, baseVariable, operation, argument] = matches;
const value = this._baseVariables[baseVariable];
if (!value ) {
if (this._aliases[baseVariable]) {
this._derivedAliases.push(variable);
return;
}
else {
throw new Error(`Cannot find value for base variable "${baseVariable}"!`);
}
}
const resolvedValue = derive(value, operation, argument, this._isDark);
return resolvedValue;
}
}
private _deriveAlias(variable: string, resolvedVariables: Record<string, string>): string | undefined {
const RE_VARIABLE_VALUE = /(.+)--(.+)-(.+)/;
const matches = variable.match(RE_VARIABLE_VALUE);
if (matches) {
const [, baseVariable, operation, argument] = matches;
const value = resolvedVariables[baseVariable];
if (!value ) {
throw new Error(`Cannot find value for alias "${baseVariable}" when trying to derive ${variable}!`);
}
const resolvedValue = derive(value, operation, argument, this._isDark);
return resolvedValue;
}
}
}
import * as pkg from "off-color";
// @ts-ignore
const offColor = pkg.offColor ?? pkg.default.offColor;
export function tests() {
return {
"Simple variable derivation": assert => {
const deriver = new DerivedVariables({ "background-color": "#ff00ff" }, ["background-color--darker-5"], false);
const result = deriver.toVariables();
const resultColor = offColor("#ff00ff").darken(5/100).hex();
assert.deepEqual(result, {"background-color--darker-5": resultColor});
},
"For dark themes, lighten and darken are inverted": assert => {
const deriver = new DerivedVariables({ "background-color": "#ff00ff" }, ["background-color--darker-5"], true);
const result = deriver.toVariables();
const resultColor = offColor("#ff00ff").lighten(5/100).hex();
assert.deepEqual(result, {"background-color--darker-5": resultColor});
},
"Aliases can be derived": assert => {
const deriver = new DerivedVariables({ "background-color": "#ff00ff" }, ["my-awesome-alias=background-color","my-awesome-alias--darker-5"], false);
const result = deriver.toVariables();
const resultColor = offColor("#ff00ff").darken(5/100).hex();
assert.deepEqual(result, {
"my-awesome-alias": "#ff00ff",
"my-awesome-alias--darker-5": resultColor,
});
},
}
}

View File

@ -0,0 +1,79 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import type {Platform} from "../Platform.js";
import {getColoredSvgString} from "./shared/svg-colorizer.mjs";
type ParsedStructure = {
[variableName: string]: {
svg: Promise<{ status: number; body: string }>;
primary: string | null;
secondary: string | null;
};
};
export class IconColorizer {
private _iconVariables: Record<string, string>;
private _resolvedVariables: Record<string, string>;
private _manifestLocation: string;
private _platform: Platform;
constructor(platform: Platform, iconVariables: Record<string, string>, resolvedVariables: Record<string, string>, manifestLocation: string) {
this._platform = platform;
this._iconVariables = iconVariables;
this._resolvedVariables = resolvedVariables;
this._manifestLocation = manifestLocation;
}
async toVariables(): Promise<Record<string, string>> {
const { parsedStructure, promises } = await this._fetchAndParseIcons();
await Promise.all(promises);
return this._produceColoredIconVariables(parsedStructure);
}
private async _fetchAndParseIcons(): Promise<{ parsedStructure: ParsedStructure, promises: any[] }> {
const promises: any[] = [];
const parsedStructure: ParsedStructure = {};
for (const [variable, url] of Object.entries(this._iconVariables)) {
const urlObject = new URL(`https://${url}`);
const pathWithoutQueryParams = urlObject.hostname;
const relativePath = new URL(pathWithoutQueryParams, new URL(this._manifestLocation, window.location.origin));
const responsePromise = this._platform.request(relativePath, { method: "GET", format: "text", cache: true, }).response()
promises.push(responsePromise);
const searchParams = urlObject.searchParams;
parsedStructure[variable] = {
svg: responsePromise,
primary: searchParams.get("primary"),
secondary: searchParams.get("secondary")
};
}
return { parsedStructure, promises };
}
private async _produceColoredIconVariables(parsedStructure: ParsedStructure): Promise<Record<string, string>> {
let coloredVariables: Record<string, string> = {};
for (const [variable, { svg, primary, secondary }] of Object.entries(parsedStructure)) {
const { body: svgCode } = await svg;
if (!primary) {
throw new Error(`Primary color variable ${primary} not in list of variables!`);
}
const primaryColor = this._resolvedVariables[primary], secondaryColor = this._resolvedVariables[secondary!];
const coloredSvgCode = getColoredSvgString(svgCode, primaryColor, secondaryColor);
const dataURI = `url('data:image/svg+xml;utf8,${encodeURIComponent(coloredSvgCode)}')`;
coloredVariables[variable] = dataURI;
}
return coloredVariables;
}
}

View File

@ -0,0 +1,188 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import type {ILogItem} from "../../../logging/types";
import type {Platform} from "../Platform.js";
import {RuntimeThemeParser} from "./parsers/RuntimeThemeParser";
import type {Variant, ThemeInformation} from "./parsers/types";
import {ColorSchemePreference} from "./parsers/types";
import {BuiltThemeParser} from "./parsers/BuiltThemeParser";
export class ThemeLoader {
private _platform: Platform;
private _themeMapping: Record<string, ThemeInformation>;
private _injectedVariables?: Record<string, string>;
constructor(platform: Platform) {
this._platform = platform;
}
async init(manifestLocations: string[], log?: ILogItem): Promise<void> {
await this._platform.logger.wrapOrRun(log, "ThemeLoader.init", async (log) => {
const results = await Promise.all(
manifestLocations.map(location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response())
);
const runtimeThemeParser = new RuntimeThemeParser(this._platform, this.preferredColorScheme);
const builtThemeParser = new BuiltThemeParser(this.preferredColorScheme);
const runtimeThemePromises: Promise<void>[] = [];
for (let i = 0; i < results.length; ++i) {
const { body } = results[i];
try {
if (body.extends) {
const indexOfBaseManifest = results.findIndex(manifest => manifest.body.id === body.extends);
if (indexOfBaseManifest === -1) {
throw new Error(`Base manifest for derived theme at ${manifestLocations[i]} not found!`);
}
const {body: baseManifest} = results[indexOfBaseManifest];
const baseManifestLocation = manifestLocations[indexOfBaseManifest];
const promise = runtimeThemeParser.parse(body, baseManifest, baseManifestLocation, log);
runtimeThemePromises.push(promise);
}
else {
builtThemeParser.parse(body, manifestLocations[i], log);
}
}
catch(e) {
console.error(e);
}
}
await Promise.all(runtimeThemePromises);
this._themeMapping = { ...builtThemeParser.themeMapping, ...runtimeThemeParser.themeMapping };
Object.assign(this._themeMapping, builtThemeParser.themeMapping, runtimeThemeParser.themeMapping);
this._addDefaultThemeToMapping(log);
log.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" });
log.log({ l: "Result", themeMapping: this._themeMapping });
});
}
setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => {
let cssLocation: string, variables: Record<string, string>;
let themeDetails = this._themeMapping[themeName];
if ("id" in themeDetails) {
cssLocation = themeDetails.cssLocation;
variables = themeDetails.variables;
}
else {
if (!themeVariant) {
throw new Error("themeVariant is undefined!");
}
cssLocation = themeDetails[themeVariant].cssLocation;
variables = themeDetails[themeVariant].variables;
}
this._platform.replaceStylesheet(cssLocation);
if (variables) {
log?.log({l: "Derived Theme", variables});
this._injectCSSVariables(variables);
}
else {
this._removePreviousCSSVariables();
}
this._platform.settingsStorage.setString("theme-name", themeName);
if (themeVariant) {
this._platform.settingsStorage.setString("theme-variant", themeVariant);
}
else {
this._platform.settingsStorage.remove("theme-variant");
}
});
}
private _injectCSSVariables(variables: Record<string, string>): void {
const root = document.documentElement;
for (const [variable, value] of Object.entries(variables)) {
root.style.setProperty(`--${variable}`, value);
}
this._injectedVariables = variables;
}
private _removePreviousCSSVariables(): void {
if (!this._injectedVariables) {
return;
}
const root = document.documentElement;
for (const variable of Object.keys(this._injectedVariables)) {
root.style.removeProperty(`--${variable}`);
}
this._injectedVariables = undefined;
}
/** Maps theme display name to theme information */
get themeMapping(): Record<string, ThemeInformation> {
return this._themeMapping;
}
async getActiveTheme(): Promise<{themeName: string, themeVariant?: string}> {
let themeName = await this._platform.settingsStorage.getString("theme-name");
let themeVariant = await this._platform.settingsStorage.getString("theme-variant");
if (!themeName || !this._themeMapping[themeName]) {
themeName = "Default" in this._themeMapping ? "Default" : Object.keys(this._themeMapping)[0];
if (!this._themeMapping[themeName][themeVariant]) {
themeVariant = "default" in this._themeMapping[themeName] ? "default" : undefined;
}
}
return { themeName, themeVariant };
}
getDefaultTheme(): string | undefined {
switch (this.preferredColorScheme) {
case ColorSchemePreference.Dark:
return this._platform.config["defaultTheme"]?.dark;
case ColorSchemePreference.Light:
return this._platform.config["defaultTheme"]?.light;
}
}
private _findThemeDetailsFromId(themeId: string): {themeName: string, themeData: Partial<Variant>} | undefined {
for (const [themeName, themeData] of Object.entries(this._themeMapping)) {
if ("id" in themeData && themeData.id === themeId) {
return { themeName, themeData };
}
else if ("light" in themeData && themeData.light?.id === themeId) {
return { themeName, themeData: themeData.light };
}
else if ("dark" in themeData && themeData.dark?.id === themeId) {
return { themeName, themeData: themeData.dark };
}
}
}
private _addDefaultThemeToMapping(log: ILogItem) {
log.wrap("addDefaultThemeToMapping", l => {
const defaultThemeId = this.getDefaultTheme();
if (defaultThemeId) {
const themeDetails = this._findThemeDetailsFromId(defaultThemeId);
if (themeDetails) {
this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.themeData.cssLocation! };
const variables = themeDetails.themeData.variables;
if (variables) {
this._themeMapping["Default"].variables = variables;
}
}
}
l.log({ l: "Default Theme", theme: defaultThemeId});
});
}
get preferredColorScheme(): ColorSchemePreference | undefined {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return ColorSchemePreference.Dark;
}
else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
return ColorSchemePreference.Light;
}
}
}

View File

@ -0,0 +1,106 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import type {ThemeInformation} from "./types";
import type {ThemeManifest} from "../../../types/theme";
import type {ILogItem} from "../../../../logging/types";
import {ColorSchemePreference} from "./types";
export class BuiltThemeParser {
private _themeMapping: Record<string, ThemeInformation> = {};
private _preferredColorScheme?: ColorSchemePreference;
constructor(preferredColorScheme?: ColorSchemePreference) {
this._preferredColorScheme = preferredColorScheme;
}
parse(manifest: ThemeManifest, manifestLocation: string, log: ILogItem) {
log.wrap("BuiltThemeParser.parse", () => {
/*
After build has finished, the source section of each theme manifest
contains `built-assets` which is a mapping from the theme-id to
cssLocation of theme
*/
const builtAssets: Record<string, string> = manifest.source?.["built-assets"];
const themeName = manifest.name;
if (!themeName) {
throw new Error(`Theme name not found in manifest at ${manifestLocation}`);
}
let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (let [themeId, cssLocation] of Object.entries(builtAssets)) {
try {
/**
* This cssLocation is relative to the location of the manifest file.
* So we first need to resolve it relative to the root of this hydrogen instance.
*/
cssLocation = new URL(cssLocation, new URL(manifestLocation, window.location.origin)).href;
}
catch {
continue;
}
const variant = themeId.match(/.+-(.+)/)?.[1];
const variantDetails = manifest.values?.variants[variant!];
if (!variantDetails) {
throw new Error(`Variant ${variant} is missing in manifest at ${manifestLocation}`);
}
const { name: variantName, default: isDefault, dark } = variantDetails;
const themeDisplayName = `${themeName} ${variantName}`;
if (isDefault) {
/**
* This is a default variant!
* We'll add these to the themeMapping (separately) keyed with just the
* theme-name (i.e "Element" instead of "Element Dark").
* We need to be able to distinguish them from other variants!
*
* This allows us to render radio-buttons with "dark" and
* "light" options.
*/
const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant;
defaultVariant.variantName = variantName;
defaultVariant.id = themeId
defaultVariant.cssLocation = cssLocation;
continue;
}
// Non-default variants are keyed in themeMapping with "theme_name variant_name"
// eg: "Element Dark"
this._themeMapping[themeDisplayName] = {
cssLocation,
id: themeId
};
}
if (defaultDarkVariant.id && defaultLightVariant.id) {
/**
* As mentioned above, if there's both a default dark and a default light variant,
* add them to themeMapping separately.
*/
const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
}
else {
/**
* If only one default variant is found (i.e only dark default or light default but not both),
* treat it like any other variant.
*/
const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
}
});
}
get themeMapping(): Record<string, ThemeInformation> {
return this._themeMapping;
}
}

View File

@ -0,0 +1,98 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import type {ThemeInformation} from "./types";
import type {Platform} from "../../Platform.js";
import type {ThemeManifest} from "../../../types/theme";
import {ColorSchemePreference} from "./types";
import {IconColorizer} from "../IconColorizer";
import {DerivedVariables} from "../DerivedVariables";
import {ILogItem} from "../../../../logging/types";
export class RuntimeThemeParser {
private _themeMapping: Record<string, ThemeInformation> = {};
private _preferredColorScheme?: ColorSchemePreference;
private _platform: Platform;
constructor(platform: Platform, preferredColorScheme?: ColorSchemePreference) {
this._preferredColorScheme = preferredColorScheme;
this._platform = platform;
}
async parse(manifest: ThemeManifest, baseManifest: ThemeManifest, baseManifestLocation: string, log: ILogItem): Promise<void> {
await log.wrap("RuntimeThemeParser.parse", async () => {
const {cssLocation, derivedVariables, icons} = this._getSourceData(baseManifest, baseManifestLocation, log);
const themeName = manifest.name;
if (!themeName) {
throw new Error(`Theme name not found in manifest!`);
}
let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (const [variant, variantDetails] of Object.entries(manifest.values?.variants!) as [string, any][]) {
try {
const themeId = `${manifest.id}-${variant}`;
const { name: variantName, default: isDefault, dark, variables } = variantDetails;
const resolvedVariables = new DerivedVariables(variables, derivedVariables, dark).toVariables();
Object.assign(variables, resolvedVariables);
const iconVariables = await new IconColorizer(this._platform, icons, variables, baseManifestLocation).toVariables();
Object.assign(variables, resolvedVariables, iconVariables);
const themeDisplayName = `${themeName} ${variantName}`;
if (isDefault) {
const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant;
Object.assign(defaultVariant, { variantName, id: themeId, cssLocation, variables });
continue;
}
this._themeMapping[themeDisplayName] = { cssLocation, id: themeId, variables: variables, };
}
catch (e) {
console.error(e);
continue;
}
}
if (defaultDarkVariant.id && defaultLightVariant.id) {
const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
}
else {
const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
}
});
}
private _getSourceData(manifest: ThemeManifest, location: string, log: ILogItem)
: { cssLocation: string, derivedVariables: string[], icons: Record<string, string>} {
return log.wrap("getSourceData", () => {
const runtimeCSSLocation = manifest.source?.["runtime-asset"];
if (!runtimeCSSLocation) {
throw new Error(`Run-time asset not found in source section for theme at ${location}`);
}
const cssLocation = new URL(runtimeCSSLocation, new URL(location, window.location.origin)).href;
const derivedVariables = manifest.source?.["derived-variables"];
if (!derivedVariables) {
throw new Error(`Derived variables not found in source section for theme at ${location}`);
}
const icons = manifest.source?.["icon"];
if (!icons) {
throw new Error(`Icon mapping not found in source section for theme at ${location}`);
}
return { cssLocation, derivedVariables, icons };
});
}
get themeMapping(): Record<string, ThemeInformation> {
return this._themeMapping;
}
}

View File

@ -0,0 +1,38 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
export type NormalVariant = {
id: string;
cssLocation: string;
variables?: any;
};
export type Variant = NormalVariant & {
variantName: string;
};
export type DefaultVariant = {
dark: Variant;
light: Variant;
default: Variant;
}
export type ThemeInformation = NormalVariant | DefaultVariant;
export enum ColorSchemePreference {
Dark,
Light
};

View File

@ -13,10 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import * as pkg from 'off-color';
const offColor = pkg.offColor ?? pkg.default.offColor;
const offColor = require("off-color").offColor; export function derive(value, operation, argument, isDark) {
module.exports.derive = function (value, operation, argument, isDark) {
const argumentAsNumber = parseInt(argument); const argumentAsNumber = parseInt(argument);
if (isDark) { if (isDark) {
// For dark themes, invert the operation // For dark themes, invert the operation

View File

@ -0,0 +1,24 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
export function getColoredSvgString(svgString, primaryColor, secondaryColor) {
let coloredSVGCode = svgString.replaceAll("#ff00ff", primaryColor);
coloredSVGCode = coloredSVGCode.replaceAll("#00ffff", secondaryColor);
if (svgString === coloredSVGCode) {
throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
}
return coloredSVGCode;
}

View File

@ -68,13 +68,13 @@ limitations under the License.
--size: 20px; --size: 20px;
} }
.StartSSOLoginView { .StartSSOLoginView, .StartOIDCLoginView {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 0.4em 0; padding: 0 0.4em 0;
} }
.StartSSOLoginView_button { .StartSSOLoginView_button, .StartOIDCLoginView_button {
flex: 1; flex: 1;
margin-top: 12px; margin-top: 12px;
} }

View File

@ -1,6 +1,7 @@
{ {
"version": 1, "version": 1,
"name": "Element", "name": "Element",
"id": "element",
"values": { "values": {
"variants": { "variants": {
"light": { "light": {

View File

@ -522,6 +522,62 @@ a {
.RoomView_error { .RoomView_error {
color: var(--error-color); color: var(--error-color);
background : #efefef;
height : 0px;
font-weight : bold;
transition : 0.25s all ease-out;
padding-right : 20px;
padding-left : 20px;
}
.RoomView_error div{
overflow : hidden;
height: 100%;
width: 100%;
position : relative;
display : flex;
align-items : center;
}
.RoomView_error:not(:empty) {
height : auto;
padding-top : 20px;
padding-bottom : 20px;
}
.RoomView_error p {
position : relative;
display : block;
width : 100%;
height : auto;
margin : 0;
}
.RoomView_error button {
width : 40px;
padding-top : 20px;
padding-bottom : 20px;
background : none;
border : none;
position : relative;
border-radius : 5px;
transition: 0.1s all ease-out;
cursor: pointer;
}
.RoomView_error button:hover {
background : #cfcfcf;
}
.RoomView_error button:before {
content:"\274c";
position : absolute;
top : 15px;
left: 9px;
width : 20px;
height : 10px;
font-size : 10px;
align-self : middle;
} }
.MessageComposer_replyPreview .Timeline_message { .MessageComposer_replyPreview .Timeline_message {
@ -895,12 +951,12 @@ button.link {
width: 100%; width: 100%;
} }
.RoomArchivedView { .DisabledComposerView {
padding: 12px; padding: 12px;
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
} }
.RoomArchivedView h3 { .DisabledComposerView h3 {
margin: 0; margin: 0;
} }

View File

@ -57,6 +57,7 @@ export class LoginView extends TemplateView {
t.mapView(vm => vm.passwordLoginViewModel, vm => vm ? new PasswordLoginView(vm): null), t.mapView(vm => vm.passwordLoginViewModel, vm => vm ? new PasswordLoginView(vm): null),
t.if(vm => vm.passwordLoginViewModel && vm.startSSOLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)), t.if(vm => vm.passwordLoginViewModel && vm.startSSOLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)),
t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null), t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null),
t.mapView(vm => vm.startOIDCLoginViewModel, vm => vm ? new StartOIDCLoginView(vm) : null),
t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null), t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null),
// use t.mapView rather than t.if to create a new view when the view model changes too // use t.mapView rather than t.if to create a new view when the view model changes too
t.p(hydrogenGithubLink(t)) t.p(hydrogenGithubLink(t))
@ -76,3 +77,16 @@ class StartSSOLoginView extends TemplateView {
); );
} }
} }
class StartOIDCLoginView extends TemplateView {
render(t, vm) {
return t.div({ className: "StartOIDCLoginView" },
t.a({
className: "StartOIDCLoginView_button button-action primary",
type: "button",
onClick: () => vm.startOIDCLogin(),
disabled: vm => vm.isBusy
}, vm.i18n`Continue`)
);
}
}

View File

@ -80,7 +80,7 @@ export class CallView extends TemplateView<CallViewModel> {
public unmount() { public unmount() {
if (this.resizeObserver) { if (this.resizeObserver) {
this.resizeObserver.unobserve((this.root()! as Element).querySelector(".CallView_members")); this.resizeObserver.unobserve((this.root()! as Element).querySelector(".CallView_members")!);
this.resizeObserver = undefined; this.resizeObserver = undefined;
} }
super.unmount(); super.unmount();

View File

@ -16,8 +16,8 @@ limitations under the License.
import {TemplateView} from "../../general/TemplateView"; import {TemplateView} from "../../general/TemplateView";
export class RoomArchivedView extends TemplateView { export class DisabledComposerView extends TemplateView {
render(t) { render(t) {
return t.div({className: "RoomArchivedView"}, t.h3(vm => vm.description)); return t.div({className: "DisabledComposerView"}, t.h3(vm => vm.description));
} }
} }

View File

@ -21,7 +21,7 @@ import {Menu} from "../../general/Menu.js";
import {TimelineView} from "./TimelineView"; import {TimelineView} from "./TimelineView";
import {TimelineLoadingView} from "./TimelineLoadingView.js"; import {TimelineLoadingView} from "./TimelineLoadingView.js";
import {MessageComposer} from "./MessageComposer.js"; import {MessageComposer} from "./MessageComposer.js";
import {RoomArchivedView} from "./RoomArchivedView.js"; import {DisabledComposerView} from "./DisabledComposerView.js";
import {AvatarView} from "../../AvatarView.js"; import {AvatarView} from "../../AvatarView.js";
import {CallView} from "./CallView"; import {CallView} from "./CallView";
@ -33,12 +33,6 @@ export class RoomView extends TemplateView {
} }
render(t, vm) { render(t, vm) {
let bottomView;
if (vm.composerViewModel.kind === "composer") {
bottomView = new MessageComposer(vm.composerViewModel, this._viewClassForTile);
} else if (vm.composerViewModel.kind === "archived") {
bottomView = new RoomArchivedView(vm.composerViewModel);
}
return t.main({className: "RoomView middle"}, [ return t.main({className: "RoomView middle"}, [
t.div({className: "RoomHeader middle-header"}, [ t.div({className: "RoomHeader middle-header"}, [
t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Close room`}), t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Close room`}),
@ -53,14 +47,28 @@ export class RoomView extends TemplateView {
}) })
]), ]),
t.div({className: "RoomView_body"}, [ t.div({className: "RoomView_body"}, [
t.div({className: "RoomView_error"}, vm => vm.error), t.div({className: "RoomView_error"}, [
t.if(vm => vm.error, t => t.div(
[
t.p({}, vm => vm.error),
t.button({ className: "RoomView_error_closerButton", onClick: evt => vm.dismissError(evt) })
])
)]),
t.mapView(vm => vm.callViewModel, callViewModel => callViewModel ? new CallView(callViewModel) : null), t.mapView(vm => vm.callViewModel, callViewModel => callViewModel ? new CallView(callViewModel) : null),
t.mapView(vm => vm.timelineViewModel, timelineViewModel => { t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
return timelineViewModel ? return timelineViewModel ?
new TimelineView(timelineViewModel, this._viewClassForTile) : new TimelineView(timelineViewModel, this._viewClassForTile) :
new TimelineLoadingView(vm); // vm is just needed for i18n new TimelineLoadingView(vm); // vm is just needed for i18n
}), }),
t.view(bottomView), t.mapView(vm => vm.composerViewModel,
composerViewModel => {
switch (composerViewModel?.kind) {
case "composer":
return new MessageComposer(vm.composerViewModel, this._viewClassForTile);
case "disabled":
return new DisabledComposerView(vm.composerViewModel);
}
}),
]) ])
]); ]);
} }

View File

@ -24,6 +24,6 @@ export class ImageView extends BaseMediaView {
title: vm => vm.label, title: vm => vm.label,
style: `max-width: ${vm.width}px; max-height: ${vm.height}px;` style: `max-width: ${vm.width}px; max-height: ${vm.height}px;`
}); });
return vm.isPending ? img : t.a({href: vm.lightboxUrl}, img); return vm.isPending || !vm.lightboxUrl ? img : t.a({href: vm.lightboxUrl}, img);
} }
} }

View File

@ -47,6 +47,13 @@ export class SettingsView extends TemplateView {
disabled: vm => vm.isLoggingOut disabled: vm => vm.isLoggingOut
}, vm.i18n`Log out`)), }, vm.i18n`Log out`)),
); );
settingNodes.push(
t.if(vm => vm.accountManagementUrl, t => {
return t.p([vm.i18n`You can manage your account `, t.a({href: vm.accountManagementUrl, target: "_blank"}, vm.i18n`here`), "."]);
}),
);
settingNodes.push( settingNodes.push(
t.h3("Key backup"), t.h3("Key backup"),
t.view(new KeyBackupSettingsView(vm.keyBackupViewModel)) t.view(new KeyBackupSettingsView(vm.keyBackupViewModel))

View File

@ -8,8 +8,8 @@ const path = require("path");
const manifest = require("./package.json"); const manifest = require("./package.json");
const version = manifest.version; const version = manifest.version;
const compiledVariables = new Map(); const compiledVariables = new Map();
const derive = require("./scripts/postcss/color").derive; import {buildColorizedSVG as replacer} from "./scripts/postcss/svg-builder.mjs";
const replacer = require("./scripts/postcss/svg-colorizer").buildColorizedSVG; import {derive} from "./src/platform/web/theming/shared/color.mjs";
const commonOptions = { const commonOptions = {
logLevel: "warn", logLevel: "warn",

View File

@ -33,9 +33,7 @@ export default defineConfig(({mode}) => {
plugins: [ plugins: [
themeBuilder({ themeBuilder({
themeConfig: { themeConfig: {
themes: { themes: ["./src/platform/web/ui/css/themes/element"],
element: "./src/platform/web/ui/css/themes/element",
},
default: "element", default: "element",
}, },
compiledVariables, compiledVariables,

View File

@ -36,7 +36,7 @@ export default mergeOptions(commonOptions, {
plugins: [ plugins: [
themeBuilder({ themeBuilder({
themeConfig: { themeConfig: {
themes: { element: "./src/platform/web/ui/css/themes/element" }, themes: ["./src/platform/web/ui/css/themes/element"],
default: "element", default: "element",
}, },
compiledVariables, compiledVariables,

View File

@ -82,6 +82,11 @@
"@nodelib/fs.scandir" "2.1.5" "@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0" fastq "^1.6.0"
"@trysound/sax@0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
"@types/json-schema@^7.0.7": "@types/json-schema@^7.0.7":
version "7.0.9" version "7.0.9"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@ -352,6 +357,11 @@ commander@^6.1.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
commander@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
concat-map@0.0.1: concat-map@0.0.1:
version "0.0.1" version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@ -387,11 +397,26 @@ css-select@^4.1.3:
domutils "^2.6.0" domutils "^2.6.0"
nth-check "^2.0.0" nth-check "^2.0.0"
css-tree@^1.1.2, css-tree@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
dependencies:
mdn-data "2.0.14"
source-map "^0.6.1"
css-what@^5.0.0: css-what@^5.0.0:
version "5.0.1" version "5.0.1"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad" resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg== integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
csso@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
dependencies:
css-tree "^1.1.2"
cuint@^0.2.2: cuint@^0.2.2:
version "0.2.2" version "0.2.2"
resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b" resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
@ -1202,6 +1227,11 @@ lru-cache@^6.0.0:
dependencies: dependencies:
yallist "^4.0.0" yallist "^4.0.0"
mdn-data@2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
mdn-polyfills@^5.20.0: mdn-polyfills@^5.20.0:
version "5.20.0" version "5.20.0"
resolved "https://registry.yarnpkg.com/mdn-polyfills/-/mdn-polyfills-5.20.0.tgz#ca8247edf20a4f60dec6804372229812b348260b" resolved "https://registry.yarnpkg.com/mdn-polyfills/-/mdn-polyfills-5.20.0.tgz#ca8247edf20a4f60dec6804372229812b348260b"
@ -1505,7 +1535,7 @@ source-map-js@^1.0.2:
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
source-map@~0.6.1: source-map@^0.6.1, source-map@~0.6.1:
version "0.6.1" version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@ -1515,6 +1545,11 @@ sprintf-js@~1.0.2:
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
stable@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
string-width@^4.2.0: string-width@^4.2.0:
version "4.2.2" version "4.2.2"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
@ -1555,6 +1590,19 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
svgo@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
dependencies:
"@trysound/sax" "0.2.0"
commander "^7.2.0"
css-select "^4.1.3"
css-tree "^1.1.3"
csso "^4.2.0"
picocolors "^1.0.0"
stable "^0.1.8"
table@^6.0.9: table@^6.0.9:
version "6.7.1" version "6.7.1"
resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2" resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
@ -1622,10 +1670,10 @@ type-fest@^0.20.2:
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4" resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ== integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
typescript@^4.4: typescript@^4.7.0:
version "4.6.3" version "4.7.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw== integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
typeson-registry@^1.0.0-alpha.20: typeson-registry@^1.0.0-alpha.20:
version "1.0.0-alpha.39" version "1.0.0-alpha.39"