├── .gitignore
├── .travis.yml
├── router.core.js
├── router.js
├── test
├── support
│ ├── helper.js
│ └── function-bind.js
├── route.test.js
└── router.test.js
├── .babelrc
├── karma.conf.js
├── examples
├── some-tags.html
├── example-02.html
├── redux
│ ├── index.html
│ ├── common.js
│ ├── app.html
│ └── app.js
└── example-01.html
├── LICENSE
├── webpack.config.js
├── package.json
├── README.md
├── dist
├── router.core.min.js
├── router.min.js
├── router.core.js
├── router.core.js.map
└── router.js.map
└── src
└── router.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "iojs"
4 | - "node"
--------------------------------------------------------------------------------
/router.core.js:
--------------------------------------------------------------------------------
1 | var Router = require('./src/router.js');
2 | module.exports = Router;
--------------------------------------------------------------------------------
/router.js:
--------------------------------------------------------------------------------
1 | var riot = require('riot');
2 | var route = require('riot-route');
3 | var Router = require('./src/router.js');
4 | var router = Router.create({route: route});
5 | if (window) {
6 | window.router = router;
7 | }
8 | module.exports = Router;
9 |
10 |
--------------------------------------------------------------------------------
/test/support/helper.js:
--------------------------------------------------------------------------------
1 | var riot = require('riot');
2 | var route = require('riot-route');
3 | var Router = require('../../src/router');
4 | var router = Router.create({route: route});
5 | router.start();
6 |
7 | module.exports = {
8 | riot: riot,
9 | router: router,
10 | Router: Router
11 | };
12 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "transform-es2015-template-literals",
4 | "transform-es2015-literals",
5 | "transform-es2015-function-name",
6 | "transform-es2015-arrow-functions",
7 | "transform-es2015-block-scoped-functions",
8 | "transform-es2015-classes",
9 | "transform-es2015-object-super",
10 | "transform-es2015-shorthand-properties",
11 | "transform-es2015-for-of",
12 | "transform-es2015-sticky-regex",
13 | "transform-es2015-unicode-regex",
14 | "transform-es2015-constants",
15 | "transform-es2015-spread",
16 | "transform-es2015-parameters",
17 | "transform-es2015-destructuring",
18 | "transform-es2015-block-scoping",
19 | "transform-es2015-typeof-symbol",
20 | "transform-es2015-modules-commonjs",
21 | "transform-regenerator",
22 | "transform-es2015-modules-umd"
23 | ]
24 | }
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | var extend = require('extend');
2 |
3 | module.exports = function(config) {
4 | config.set({
5 | frameworks: ['mocha'],
6 | plugins: [
7 | 'karma-mocha',
8 | 'karma-mocha-reporter',
9 | 'karma-phantomjs-launcher',
10 | 'karma-webpack',
11 | 'karma-sourcemap-loader'
12 | ],
13 | files: [
14 | 'test/support/function-bind.js',
15 | 'test/**/*.test.js'
16 | ],
17 | webpack: extend(require('./webpack.config'), {
18 | devtool: 'inline-source-map',
19 | externals: {}
20 | }),
21 | webpackMiddleware: {
22 | noInfo: true
23 | },
24 | preprocessors: {
25 | 'test/*.test.js': ['webpack', 'sourcemap'],
26 | 'test/**/*.test.js': ['webpack', 'sourcemap']
27 | },
28 | browsers: [
29 | 'PhantomJS'
30 | ],
31 | reporters: ['mocha']
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/examples/some-tags.html:
--------------------------------------------------------------------------------
1 |
2 | Current router.current.uri = '{router.current.uri}'
3 |
4 |
5 |
6 | router.on('route:updated', function() {
7 | this.update();
8 | }.bind(this));
9 |
10 |
11 |
19 |
20 |
21 |
22 | Page '{ router.current.uri }' not found!
23 |
24 |
25 |
26 | Home!
27 |
28 |
29 |
30 | id={opts.id}
31 | a={opts.a}
32 | b={opts.b}
33 | router.current={JSON.stringify(router.current, null, 2)}
34 |
35 |
36 |
--------------------------------------------------------------------------------
/test/support/function-bind.js:
--------------------------------------------------------------------------------
1 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
2 | // https://github.com/ariya/phantomjs/issues/10522
3 | if (!Function.prototype.bind) {
4 | Function.prototype.bind = function(oThis) {
5 | if (typeof this !== 'function') {
6 | // closest thing possible to the ECMAScript 5
7 | // internal IsCallable function
8 | throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
9 | }
10 |
11 | var aArgs = Array.prototype.slice.call(arguments, 1),
12 | fToBind = this,
13 | fNOP = function() {},
14 | fBound = function() {
15 | return fToBind.apply(this instanceof fNOP
16 | ? this
17 | : oThis,
18 | aArgs.concat(Array.prototype.slice.call(arguments)));
19 | };
20 |
21 | if (this.prototype) {
22 | // native functions don't have a prototype
23 | fNOP.prototype = this.prototype;
24 | }
25 | fBound.prototype = new fNOP();
26 |
27 | return fBound;
28 | };
29 | }
30 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Gabriel Moreira
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var configs = [];
3 | var config = {
4 | entry: {
5 | 'router': __dirname + '/router.js',
6 | 'router.core': __dirname + '/router.core.js'
7 | },
8 | output: {
9 | path: __dirname + '/dist',
10 | publicPath: '/dist/',
11 | filename: '[name].js',
12 | library: 'Router',
13 | libraryTarget: "umd"
14 | },
15 | externals: {
16 | "riot": "riot"
17 | },
18 | module: {
19 | loaders: [{
20 | test: /\.jsx?$/,
21 | exclude: /node_modules/,
22 | loader: 'babel-loader',
23 | query: {
24 | presets: ['es2015'],
25 | cacheDirectory: true
26 | }
27 | }]
28 | },
29 | plugins: []
30 | };
31 | if (!process.env.DISABLE_SOURCEMAP) {
32 | config.devtool = 'source-map';
33 | }
34 | configs.push(config);
35 |
36 | if (process.env.COMPRESS) {
37 | var extend = require('extend');
38 | var newConfig = extend(true, {}, config);
39 | newConfig.output.filename = '[name].min.js';
40 | newConfig.plugins.push(
41 | new webpack.optimize.UglifyJsPlugin({
42 | compressor: {
43 | warnings: false
44 | }
45 | })
46 | );
47 | configs.push(newConfig);
48 | }
49 |
50 | module.exports = (configs.length > 1) ? configs : config;
51 |
--------------------------------------------------------------------------------
/examples/example-02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Router Simple Sample
7 |
8 |
9 |
10 |
13 |
14 |
15 |
18 |
19 |
20 |
23 |
28 |
29 |
30 |
31 |
32 |
33 |
36 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/examples/redux/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Redux App Example
7 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/test/route.test.js:
--------------------------------------------------------------------------------
1 | var assert = require('assert'),
2 | helper = require('./support/helper');
3 | var riot = helper.riot,
4 | router = helper.router,
5 | Router = helper.Router;
6 |
7 | var Route = Router.Route;
8 | var NotFoundRoute = Router.NotFoundRoute;
9 | var DefaultRoute = Router.DefaultRoute;
10 | var Request = Router._.Request;
11 | var Response = Router._.Response;
12 |
13 | riot.tag('need-data', '{ opts.someData }', function (opts) {
14 | });
15 |
16 | describe('router.navigateTo (test is not working...)', function() {
17 | var tag;
18 | var someData = 'the data i need';
19 |
20 | before(function () {
21 | var route = document.createElement('route');
22 | route.setAttribute('some-data', someData);
23 | document.body.appendChild(route);
24 | tag = riot.mount('route')[0];
25 | router.routes([
26 | new Route({tag: 'static'}),
27 | new Route({tag: 'need-data'}),
28 | new Route({path: '/dynamic', tag: function () { return 'dynamic'; }}),
29 | new Route({path: '/dynamic-api', tag: function () {
30 | return {tag: 'dynamic-api', api: {}};
31 | }})
32 | ]);
33 | router.start();
34 | });
35 |
36 | it('works with static tags', function() {
37 | router.navigateTo('/static');
38 | assert.ok(document.querySelector('static'));
39 | });
40 |
41 | it('works with dynamic tags', function() {
42 | router.navigateTo('/dynamic');
43 | assert.ok(document.querySelector('dynamic'));
44 | });
45 |
46 | it('works with dynamic tags and api', function() {
47 | router.navigateTo('/dynamic-api');
48 | assert.ok(document.querySelector('dynamic-api'));
49 | });
50 |
51 | it('passes data to the mounted tag', function() {
52 | router.navigateTo('/need-data');
53 | assert.equal(tag.instance.opts.someData, someData);
54 | });
55 | });
56 |
--------------------------------------------------------------------------------
/examples/redux/common.js:
--------------------------------------------------------------------------------
1 | function CreateSimpleApp(config) {
2 | var context = riot.observable();
3 |
4 | function register() {
5 | if (config.utils)
6 | context.utils = config.utils(context);
7 | if (config.reducers) {
8 | var initialState = null;
9 | if (config.state) initialState = config.state(context);
10 | var reducers = Redux.combineReducers(config.reducers(context));
11 | context.store = Redux.createStore(reducers, initialState, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
12 | context.getState = context.store.getState;
13 | context.dispatch = function(type, payload, meta) {
14 | var event = {type: type};
15 | if (payload) event.payload = payload;
16 | if (meta) event.meta = meta;
17 | context.store.dispatch(event);
18 | console.log(event);
19 | context.trigger(event.type, event.payload, event.meta, event);
20 | }
21 | }
22 | if (config.actions)
23 | context.actions = config.actions(context);
24 | if (config.routes)
25 | context.routes = config.routes(context);
26 | }
27 |
28 | function start() {
29 | if (context.utils) {
30 | riot.mixin({
31 | utils: context.utils
32 | });
33 | }
34 | if (context.store) {
35 | riot.mixin(RiotStateUpdater.StoreMixin(context.store));
36 | }
37 | if (context.actions) {
38 | riot.mixin({
39 | actions: context.actions
40 | });
41 | }
42 | riot.util.tmpl.errorHandler = function (err) {
43 | console.error("[WARN]", err.message + ' in ' + err.riotData.tagName) // your error logic here
44 | }
45 | riot.mount('*');
46 | console.log("mounted");
47 | if (context.routes) {
48 | if (Object.prototype.toString.call(context.routes) === '[object Array]')
49 | router.routes(context.routes);
50 | else
51 | router.route(context.routes);
52 | router.start();
53 | console.log("route started");
54 | }
55 | }
56 |
57 | register();
58 | start();
59 |
60 | return context;
61 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "riot-router",
3 | "version": "0.9.7",
4 | "description": "A routing solution for Riot",
5 | "main": "dist/router.min.js",
6 | "directories": {
7 | "example": "examples",
8 | "test": "test"
9 | },
10 | "dependencies": {
11 | "extend": "^3.0.0",
12 | "riot": "^3.0.7",
13 | "riot-route": "^3.0.2"
14 | },
15 | "peerDependencies": {
16 | "extend": "^3.0.0",
17 | "riot": "^3.0.7",
18 | "riot-route": "^3.0.2"
19 | },
20 | "devDependencies": {
21 | "babel-core": "^6.14.0",
22 | "babel-loader": "^6.2.5",
23 | "babel-plugin-transform-es2015-arrow-functions": "^6.8.0",
24 | "babel-plugin-transform-es2015-block-scoped-functions": "^6.8.0",
25 | "babel-plugin-transform-es2015-block-scoping": "^6.14.0",
26 | "babel-plugin-transform-es2015-classes": "^6.14.0",
27 | "babel-plugin-transform-es2015-constants": "^6.1.4",
28 | "babel-plugin-transform-es2015-destructuring": "^6.9.0",
29 | "babel-plugin-transform-es2015-for-of": "^6.8.0",
30 | "babel-plugin-transform-es2015-function-name": "^6.9.0",
31 | "babel-plugin-transform-es2015-literals": "^6.8.0",
32 | "babel-plugin-transform-es2015-modules-commonjs": "^6.14.0",
33 | "babel-plugin-transform-es2015-modules-umd": "^6.12.0",
34 | "babel-plugin-transform-es2015-object-super": "^6.8.0",
35 | "babel-plugin-transform-es2015-parameters": "^6.11.4",
36 | "babel-plugin-transform-es2015-shorthand-properties": "^6.8.0",
37 | "babel-plugin-transform-es2015-spread": "^6.3.14",
38 | "babel-plugin-transform-es2015-sticky-regex": "^6.8.0",
39 | "babel-plugin-transform-es2015-template-literals": "^6.8.0",
40 | "babel-plugin-transform-es2015-typeof-symbol": "^6.8.0",
41 | "babel-plugin-transform-es2015-unicode-regex": "^6.11.0",
42 | "babel-plugin-transform-regenerator": "^6.14.0",
43 | "babel-preset-es2015": "^6.14.0",
44 | "imports-loader": "^0.7.0",
45 | "karma": "^1.2.0",
46 | "karma-mocha": "^1.1.1",
47 | "karma-mocha-reporter": "^2.1.0",
48 | "karma-phantomjs-launcher": "^1.0.2",
49 | "karma-sourcemap-loader": "^0.3.7",
50 | "karma-webpack": "^2.0.1",
51 | "mocha": "^3.0.2",
52 | "node-libs-browser": "^2.0.0",
53 | "phantomjs": "^2.1.7",
54 | "webpack": "^1.13.2",
55 | "webpack-dev-server": "^1.15.1"
56 | },
57 | "scripts": {
58 | "test": "node_modules/.bin/karma start --single-run",
59 | "test:watch": "node_modules/.bin/karma start --auto-watch",
60 | "watch": "webpack --watch",
61 | "build": "COMPRESS=1 webpack",
62 | "start": "webpack-dev-server",
63 | "prepublish": "npm run build && npm test"
64 | },
65 | "repository": {
66 | "type": "git",
67 | "url": "git+https://github.com/gabrielmoreira/riot-router.git"
68 | },
69 | "author": "Gabriel Moreira",
70 | "license": "MIT",
71 | "bugs": {
72 | "url": "https://github.com/gabrielmoreira/riot-router/issues"
73 | },
74 | "homepage": "https://github.com/gabrielmoreira/riot-router#readme",
75 | "files": [
76 | "dist",
77 | "src",
78 | "router.core.js",
79 | "router.js"
80 | ]
81 | }
82 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://www.npmjs.org/package/riot-router)
2 | [](https://travis-ci.org/gabrielmoreira/riot-router)
3 | [](https://david-dm.org/gabrielmoreira/riot-router)
4 |
5 | A routing library for Riot.
6 |
7 | Why
8 | ---
9 |
10 | To make it easier to use Riot in SPA applications, I created this url routing library inspired by the React-Router API.
11 |
12 | How?
13 | ----
14 |
15 | First you create your riot tags:
16 |
17 | ```html
18 |
30 | ```
31 |
32 | Then you add Riot and Riot-Router to your development page:
33 |
34 | ```html
35 |
36 |
37 | ```
38 |
39 | Add this special tag in your page:
40 |
41 | ```html
42 |
43 |
44 | or, if your prefer:
45 |
46 |
47 | ```
48 |
49 | And finally, you declare your routes and initialize your application:
50 |
51 | ```html
52 |
60 | ```
61 |
62 | Done!
63 |
64 | [See a sample](https://jsbin.com/tihuki)
65 |
66 | [See a todo sample with Redux](https://jsbin.com/jujobe)
67 |
68 | Installation
69 | ------------
70 |
71 | ```sh
72 | npm install riot-router
73 | ```
74 |
75 | This library is written with CommonJS modules. If you are using
76 | browserify, webpack, or similar, you can consume it like anything else
77 | installed from npm.
78 |
79 | Advanced examples
80 | -----------------
81 |
82 | ```js
83 | var Route = Router.Route,
84 | DefaultRoute = Router.DefaultRoute,
85 | NotFoundRoute = Router.NotFoundRoute,
86 | RedirectRoute = Router.RedirectRoute;
87 |
88 | router.routes([
89 | new DefaultRoute({tag: 'home'}),
90 | new Route({tag: 'about'}),
91 | new Route({tag: 'login'}),
92 | new Route({tag: 'users'}).routes([
93 | new Route({path:'top', tag: 'users-home', api: {text: 'Select a top user'}}),
94 | new Route({path: '/user/:userId', tag: 'user'}),
95 | new DefaultRoute({tag: 'users-home', api: {text: 'Select a user'}}),
96 | new NotFoundRoute({tag: 'not-found'})
97 | ]),
98 | new NotFoundRoute({tag: 'not-found'}),
99 | new RedirectRoute({from: 'company', to: 'about'}),
100 | new RedirectRoute({from: 'u', to: 'users/user'})
101 | ]);
102 |
103 | // Redirect unlogged users to /login page
104 | function securityFilter(request, response, next) {
105 | try {
106 | return next();
107 | } finally {
108 | if (!window.loggedUser && request.uri !== '/login') {
109 | response.redirectTo = '/login';
110 | }
111 | }
112 | }
113 | router.use(securityFilter);
114 |
115 | riot.mount('*');
116 | router.start();
117 | ```
118 |
--------------------------------------------------------------------------------
/test/router.test.js:
--------------------------------------------------------------------------------
1 | var assert = require('assert'),
2 | helper = require('./support/helper');
3 | var riot = helper.riot,
4 | router = helper.router,
5 | Router = helper.Router;
6 |
7 | var Route = Router.Route;
8 | var NotFoundRoute = Router.NotFoundRoute;
9 | var DefaultRoute = Router.DefaultRoute;
10 | var Request = Router._.Request;
11 | var Response = Router._.Response;
12 |
13 |
14 | describe('router', function() {
15 | it('can handle riot routes', function() {
16 | router.route(new Route({tag: 'user', path: '/user/:id'}));
17 | router.navigateTo('/user/123');
18 | assert.equal(router.current.matches[0].tag, 'user');
19 | assert.equal(router.current.uri, '/user/123');
20 | });
21 | });
22 |
23 | describe('router.Route', function() {
24 |
25 | it('can extract path parameters', function() {
26 | var route = new Route({tag: 'user', path: '/user/:id'});
27 | var request = new Request('/user/123');
28 | var response = new Response(request);
29 | assert.ok(route.process(request, response));
30 | assert.equal(response.size(), 1);
31 | var matcher = response.get(0);
32 | assert.equal(matcher.tag, 'user');
33 | assert.equal(matcher.route, route);
34 | assert.equal(matcher.params.id, '123');
35 | });
36 |
37 | it('can extract encoded path parameters', function() {
38 | var route = new Route({tag: 'user', path: '/user/:name'});
39 | var request = new Request('/user/Jòsé%26');
40 | var response = new Response(request);
41 | assert.ok(route.process(request, response));
42 | assert.equal(response.size(), 1);
43 | var matcher = response.get(0);
44 | assert.equal(matcher.tag, 'user');
45 | assert.equal(matcher.route, route);
46 | assert.equal(matcher.params.name, 'Jòsé&');
47 | });
48 |
49 | it('can handle not found routes', function() {
50 | var route = new Route().routes([
51 | new Route({tag: 'user', path: '/user/:id'}),
52 | new NotFoundRoute({tag: 'not-found'})
53 | ]);
54 | var request = new Request('/app/test');
55 | var response = new Response(request);
56 | assert.ok(route.process(request, response));
57 | assert.equal(2, response.size());
58 | var matcher = response.get(1);
59 | assert.equal(matcher.tag, 'not-found');
60 | });
61 |
62 | it('can handle default routes', function() {
63 | var route = new Route({path: 'user'}).routes([
64 | new DefaultRoute({tag: 'user-default'}),
65 | new Route({tag: 'user', path: '/:id'})
66 | ]);
67 | var request = new Request('/user/');
68 | var response = new Response(request);
69 | assert.ok(route.process(request, response));
70 | assert.equal(2, response.size());
71 | var matcher = response.get(1);
72 | assert.equal(matcher.tag, 'user-default');
73 | });
74 |
75 | it('can intercept & redirect route', function(done) {
76 | var userIsLogged = false;
77 | router.use(function(request, response, next) {
78 | try {
79 | return next();
80 | } finally {
81 | if (request.uri != '/redirected')
82 | response.redirectTo = '/redirected';
83 | }
84 | });
85 | router.exec();
86 | router.routes([
87 | new Route({tag: 'user', path: '/user/:id', secure: true}),
88 | new Route({tag: 'redirected'})
89 | ]);
90 | router.on('route:updated', function () {
91 | try {
92 | assert.equal('/redirected', router.current.uri);
93 | assert.equal('redirected', router.current.get(1).tag);
94 | done();
95 | } catch (e) {
96 | done(e);
97 | }
98 | });
99 | router.navigateTo('/user/123');
100 | });
101 |
102 | it('can extract multiple path parameters', function() {
103 | var route = new Route({tag: 'user', path: '/user/:id/:name'});
104 | var request = new Request('/user/123/Gabriel');
105 | var response = new Response(request);
106 | assert.ok(route.process(request, response));
107 | assert.equal(response.size(), 1);
108 | var matcher = response.get(0);
109 | assert.equal(matcher.tag, 'user');
110 | assert.equal(matcher.route, route);
111 | assert.equal(matcher.params.id, '123');
112 | assert.equal(matcher.params.name, 'Gabriel');
113 | });
114 | });
115 |
116 |
--------------------------------------------------------------------------------
/examples/redux/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
21 |
22 |
79 |
80 |
Hello {email}
81 |
82 |
91 |
92 |
Users
93 |
Listing all users.
94 |
95 |
122 |
{user.first_name}
123 |
![]()
124 |