mirror of
https://github.com/logto-io/logto.git
synced 2024-12-30 20:33:54 -05:00
Merge pull request #2163 from logto-io/merge/decouple-passcode-verification
chore: merge master and fix conflicts
This commit is contained in:
commit
86da0a5677
213 changed files with 3737 additions and 3372 deletions
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
|
@ -12,6 +12,7 @@ concurrency:
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
dockerize:
|
dockerize:
|
||||||
|
environment: ${{ startsWith(github.ref, 'refs/tags/') && 'release' || '' }}
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
|
@ -79,6 +80,7 @@ jobs:
|
||||||
|
|
||||||
|
|
||||||
create-github-release:
|
create-github-release:
|
||||||
|
environment: release
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
if: startsWith(github.ref, 'refs/tags/')
|
if: startsWith(github.ref, 'refs/tags/')
|
||||||
|
|
||||||
|
|
|
@ -15,8 +15,6 @@ tasks:
|
||||||
pnpm cli db seed
|
pnpm cli db seed
|
||||||
pnpm lerna --ignore=@logto/integration-test run --parallel dev
|
pnpm lerna --ignore=@logto/integration-test run --parallel dev
|
||||||
env:
|
env:
|
||||||
ALL_YES: 1
|
|
||||||
NO_INQUIRY: 0
|
|
||||||
TRUST_PROXY_HEADER: 1
|
TRUST_PROXY_HEADER: 1
|
||||||
DB_URL: postgres://postgres:p0stgr3s@127.0.0.1:5432
|
DB_URL: postgres://postgres:p0stgr3s@127.0.0.1:5432
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@ const fs = require('fs');
|
||||||
const directories = fs.readdirSync('./packages');
|
const directories = fs.readdirSync('./packages');
|
||||||
const reports = directories
|
const reports = directories
|
||||||
// Filter out docs temporarily
|
// Filter out docs temporarily
|
||||||
.filter((dir) => ['docs', 'create'].includes(dir))
|
.filter((dir) => !['docs', 'create'].includes(dir))
|
||||||
.map((dir) => fs.readFileSync(`./packages/${dir}/report.json`, { encoding: 'utf-8' }));
|
.map((dir) => fs.readFileSync(`./packages/${dir}/report.json`, { encoding: 'utf-8' }));
|
||||||
const merged = [];
|
const merged = [];
|
||||||
|
|
||||||
|
|
|
@ -48,7 +48,8 @@
|
||||||
"pnpm": {
|
"pnpm": {
|
||||||
"peerDependencyRules": {
|
"peerDependencyRules": {
|
||||||
"allowedVersions": {
|
"allowedVersions": {
|
||||||
"react": "^18.0.0"
|
"react": "^18.0.0",
|
||||||
|
"jest": "^29.1.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
1
packages/cli/.gitignore
vendored
1
packages/cli/.gitignore
vendored
|
@ -1 +1,2 @@
|
||||||
alteration-scripts/
|
alteration-scripts/
|
||||||
|
src/package-json.ts
|
||||||
|
|
|
@ -19,7 +19,8 @@
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"precommit": "lint-staged",
|
"precommit": "lint-staged",
|
||||||
"build": "rimraf lib && tsc -p tsconfig.build.json",
|
"prepare:package-json": "node -p \"'export const packageJson = ' + JSON.stringify(require('./package.json'), undefined, 2) + ';'\" > src/package-json.ts",
|
||||||
|
"build": "rimraf lib && pnpm prepare:package-json && tsc -p tsconfig.build.json",
|
||||||
"start": "node .",
|
"start": "node .",
|
||||||
"start:dev": "ts-node --files src/index.ts",
|
"start:dev": "ts-node --files src/index.ts",
|
||||||
"lint": "eslint --ext .ts src",
|
"lint": "eslint --ext .ts src",
|
||||||
|
@ -41,13 +42,13 @@
|
||||||
"chalk": "^4.1.2",
|
"chalk": "^4.1.2",
|
||||||
"decamelize": "^5.0.0",
|
"decamelize": "^5.0.0",
|
||||||
"dotenv": "^16.0.0",
|
"dotenv": "^16.0.0",
|
||||||
"find-up": "^5.0.0",
|
|
||||||
"fs-extra": "^10.1.0",
|
"fs-extra": "^10.1.0",
|
||||||
"got": "^11.8.2",
|
"got": "^11.8.2",
|
||||||
"hpagent": "^1.0.0",
|
"hpagent": "^1.0.0",
|
||||||
"inquirer": "^8.2.2",
|
"inquirer": "^8.2.2",
|
||||||
"nanoid": "^3.3.4",
|
"nanoid": "^3.3.4",
|
||||||
"ora": "^5.0.0",
|
"ora": "^5.0.0",
|
||||||
|
"p-retry": "^4.6.1",
|
||||||
"roarr": "^7.11.0",
|
"roarr": "^7.11.0",
|
||||||
"semver": "^7.3.7",
|
"semver": "^7.3.7",
|
||||||
"slonik": "^30.0.0",
|
"slonik": "^30.0.0",
|
||||||
|
@ -58,18 +59,18 @@
|
||||||
"zod": "^3.18.0"
|
"zod": "^3.18.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@silverhand/eslint-config": "1.0.0",
|
"@silverhand/eslint-config": "1.2.0",
|
||||||
"@silverhand/jest-config": "1.0.0",
|
"@silverhand/jest-config": "1.2.2",
|
||||||
"@silverhand/ts-config": "1.0.0",
|
"@silverhand/ts-config": "1.2.1",
|
||||||
"@types/fs-extra": "^9.0.13",
|
"@types/fs-extra": "^9.0.13",
|
||||||
"@types/inquirer": "^8.2.1",
|
"@types/inquirer": "^8.2.1",
|
||||||
"@types/jest": "^28.1.6",
|
"@types/jest": "^29.1.2",
|
||||||
"@types/node": "^16.0.0",
|
"@types/node": "^16.0.0",
|
||||||
"@types/semver": "^7.3.12",
|
"@types/semver": "^7.3.12",
|
||||||
"@types/tar": "^6.1.2",
|
"@types/tar": "^6.1.2",
|
||||||
"@types/yargs": "^17.0.13",
|
"@types/yargs": "^17.0.13",
|
||||||
"eslint": "^8.21.0",
|
"eslint": "^8.21.0",
|
||||||
"jest": "^28.1.3",
|
"jest": "^29.1.2",
|
||||||
"lint-staged": "^13.0.0",
|
"lint-staged": "^13.0.0",
|
||||||
"prettier": "^2.7.1",
|
"prettier": "^2.7.1",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
|
@ -78,12 +79,9 @@
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "@silverhand",
|
"extends": "@silverhand",
|
||||||
"rules": {
|
"ignorePatterns": [
|
||||||
"complexity": [
|
"src/package-json.ts"
|
||||||
"error",
|
]
|
||||||
7
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"prettier": "@silverhand/eslint-config/.prettierrc"
|
"prettier": "@silverhand/eslint-config/.prettierrc"
|
||||||
}
|
}
|
||||||
|
|
39
packages/cli/src/commands/connector/add.ts
Normal file
39
packages/cli/src/commands/connector/add.ts
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
import { CommandModule } from 'yargs';
|
||||||
|
|
||||||
|
import { log } from '../../utilities';
|
||||||
|
import { addConnectors, addOfficialConnectors, inquireInstancePath } from './utils';
|
||||||
|
|
||||||
|
const add: CommandModule<unknown, { packages: string[]; path?: string; official: boolean }> = {
|
||||||
|
command: ['add [packages...]', 'a', 'install', 'i'],
|
||||||
|
describe: 'Add specific Logto connectors',
|
||||||
|
builder: (yargs) =>
|
||||||
|
yargs
|
||||||
|
.positional('packages', {
|
||||||
|
describe: 'The additional connector package names',
|
||||||
|
type: 'string',
|
||||||
|
array: true,
|
||||||
|
default: [],
|
||||||
|
})
|
||||||
|
.option('official', {
|
||||||
|
alias: 'o',
|
||||||
|
type: 'boolean',
|
||||||
|
default: false,
|
||||||
|
describe:
|
||||||
|
'Add all official connectors.\n' +
|
||||||
|
"If it's true, the specified package names will be ignored.",
|
||||||
|
})
|
||||||
|
.option('path', { alias: 'p', type: 'string', describe: 'The path to your Logto instance' }),
|
||||||
|
handler: async ({ packages: packageNames, path, official }) => {
|
||||||
|
const instancePath = await inquireInstancePath(path);
|
||||||
|
|
||||||
|
if (official) {
|
||||||
|
await addOfficialConnectors(instancePath);
|
||||||
|
}
|
||||||
|
|
||||||
|
await addConnectors(instancePath, packageNames);
|
||||||
|
|
||||||
|
log.info('Restart your Logto instance to get the changes reflected.');
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default add;
|
13
packages/cli/src/commands/connector/index.ts
Normal file
13
packages/cli/src/commands/connector/index.ts
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
import { noop } from '@silverhand/essentials';
|
||||||
|
import { CommandModule } from 'yargs';
|
||||||
|
|
||||||
|
import add from './add';
|
||||||
|
|
||||||
|
const connector: CommandModule = {
|
||||||
|
command: ['connector', 'c'],
|
||||||
|
describe: 'Command for Logto connectors',
|
||||||
|
builder: (yargs) => yargs.command(add).demandCommand(1),
|
||||||
|
handler: noop,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connector;
|
172
packages/cli/src/commands/connector/utils.ts
Normal file
172
packages/cli/src/commands/connector/utils.ts
Normal file
|
@ -0,0 +1,172 @@
|
||||||
|
import { exec } from 'child_process';
|
||||||
|
import { existsSync } from 'fs';
|
||||||
|
import { readFile, mkdir, unlink } from 'fs/promises';
|
||||||
|
import path from 'path';
|
||||||
|
import { promisify } from 'util';
|
||||||
|
|
||||||
|
import { conditionalString } from '@silverhand/essentials';
|
||||||
|
import chalk from 'chalk';
|
||||||
|
import { ensureDir, remove } from 'fs-extra';
|
||||||
|
import inquirer from 'inquirer';
|
||||||
|
import pRetry from 'p-retry';
|
||||||
|
import tar from 'tar';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
import { connectorDirectory } from '../../constants';
|
||||||
|
import { log, oraPromise } from '../../utilities';
|
||||||
|
import { defaultPath } from '../install/utils';
|
||||||
|
|
||||||
|
const coreDirectory = 'packages/core';
|
||||||
|
const execPromise = promisify(exec);
|
||||||
|
export const npmPackResultGuard = z
|
||||||
|
.object({
|
||||||
|
name: z.string(),
|
||||||
|
version: z.string(),
|
||||||
|
filename: z.string(),
|
||||||
|
})
|
||||||
|
.array();
|
||||||
|
|
||||||
|
const buildPathErrorMessage = (value: string) =>
|
||||||
|
`The path ${chalk.green(value)} does not contain a Logto instance, please try another.`;
|
||||||
|
|
||||||
|
const validatePath = async (value: string) => {
|
||||||
|
const corePackageJsonPath = path.resolve(path.join(value, coreDirectory, 'package.json'));
|
||||||
|
|
||||||
|
if (!existsSync(corePackageJsonPath)) {
|
||||||
|
return buildPathErrorMessage(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
const packageJson = await readFile(corePackageJsonPath, { encoding: 'utf8' });
|
||||||
|
const packageName = await z
|
||||||
|
.object({ name: z.string() })
|
||||||
|
.parseAsync(JSON.parse(packageJson))
|
||||||
|
.then(({ name }) => name)
|
||||||
|
.catch(() => '');
|
||||||
|
|
||||||
|
if (packageName !== '@logto/core') {
|
||||||
|
return buildPathErrorMessage(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const inquireInstancePath = async (initialPath?: string) => {
|
||||||
|
const { instancePath } = await inquirer.prompt<{ instancePath: string }>(
|
||||||
|
{
|
||||||
|
name: 'instancePath',
|
||||||
|
message: 'Where is your Logto instance?',
|
||||||
|
type: 'input',
|
||||||
|
default: defaultPath,
|
||||||
|
filter: (value: string) => value.trim(),
|
||||||
|
validate: validatePath,
|
||||||
|
},
|
||||||
|
{ instancePath: initialPath }
|
||||||
|
);
|
||||||
|
|
||||||
|
// Validate for initialPath
|
||||||
|
const validated = await validatePath(instancePath);
|
||||||
|
|
||||||
|
if (validated !== true) {
|
||||||
|
log.error(validated);
|
||||||
|
}
|
||||||
|
|
||||||
|
return instancePath;
|
||||||
|
};
|
||||||
|
|
||||||
|
const packagePrefix = 'connector-';
|
||||||
|
|
||||||
|
export const normalizePackageName = (name: string) =>
|
||||||
|
name
|
||||||
|
.split('/')
|
||||||
|
// Prepend prefix to the last fragment if needed
|
||||||
|
.map((fragment, index, array) =>
|
||||||
|
index === array.length - 1 && !fragment.startsWith(packagePrefix) && !fragment.startsWith('@')
|
||||||
|
? packagePrefix + fragment
|
||||||
|
: fragment
|
||||||
|
)
|
||||||
|
.join('/');
|
||||||
|
|
||||||
|
export const addConnectors = async (instancePath: string, packageNames: string[]) => {
|
||||||
|
const cwd = path.join(instancePath, coreDirectory, connectorDirectory);
|
||||||
|
|
||||||
|
if (!existsSync(cwd)) {
|
||||||
|
await mkdir(cwd);
|
||||||
|
}
|
||||||
|
|
||||||
|
log.info('Fetch connector metadata');
|
||||||
|
|
||||||
|
const results = await Promise.all(
|
||||||
|
packageNames
|
||||||
|
.map((name) => normalizePackageName(name))
|
||||||
|
.map(async (packageName) => {
|
||||||
|
const run = async () => {
|
||||||
|
const { stdout } = await execPromise(`npm pack ${packageName} --json`, { cwd });
|
||||||
|
const result = npmPackResultGuard.parse(JSON.parse(stdout));
|
||||||
|
|
||||||
|
if (!result[0]) {
|
||||||
|
throw new Error(
|
||||||
|
`Unable to execute ${chalk.green('npm pack')} on package ${chalk.green(packageName)}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { filename, name } = result[0];
|
||||||
|
const escapedFilename = filename.replace(/\//g, '-').replace(/@/g, '');
|
||||||
|
const tarPath = path.join(cwd, escapedFilename);
|
||||||
|
const packageDirectory = path.join(cwd, name.replace(/\//g, '-'));
|
||||||
|
|
||||||
|
await remove(packageDirectory);
|
||||||
|
await ensureDir(packageDirectory);
|
||||||
|
await tar.extract({ cwd: packageDirectory, file: tarPath, strip: 1 });
|
||||||
|
await unlink(tarPath);
|
||||||
|
|
||||||
|
log.succeed(`Added ${chalk.green(name)}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
await pRetry(run, { retries: 2 });
|
||||||
|
} catch (error: unknown) {
|
||||||
|
console.warn(`[${packageName}]`, error);
|
||||||
|
|
||||||
|
return packageName;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const errorPackages = results.filter(Boolean);
|
||||||
|
const errorCount = errorPackages.length;
|
||||||
|
|
||||||
|
log.info(
|
||||||
|
errorCount
|
||||||
|
? `Finished with ${errorCount} error${conditionalString(errorCount > 1 && 's')}.`
|
||||||
|
: 'Finished'
|
||||||
|
);
|
||||||
|
|
||||||
|
if (errorCount) {
|
||||||
|
log.warn('Failed to add ' + errorPackages.map((name) => chalk.green(name)).join(', '));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const officialConnectorPrefix = '@logto/connector-';
|
||||||
|
|
||||||
|
const fetchOfficialConnectorList = async () => {
|
||||||
|
const { stdout } = await execPromise(`npm search ${officialConnectorPrefix} --json`);
|
||||||
|
const packages = z
|
||||||
|
.object({ name: z.string() })
|
||||||
|
.transform(({ name }) => name)
|
||||||
|
.array()
|
||||||
|
.parse(JSON.parse(stdout));
|
||||||
|
|
||||||
|
return packages.filter((name) =>
|
||||||
|
['mock', 'kit'].every(
|
||||||
|
(excluded) => !name.slice(officialConnectorPrefix.length).startsWith(excluded)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addOfficialConnectors = async (instancePath: string) => {
|
||||||
|
const packages = await oraPromise(fetchOfficialConnectorList(), {
|
||||||
|
text: 'Fetch official connector list',
|
||||||
|
prefixText: chalk.blue('[info]'),
|
||||||
|
});
|
||||||
|
await addConnectors(instancePath, packages);
|
||||||
|
};
|
|
@ -1,40 +0,0 @@
|
||||||
import { createMockPool } from 'slonik';
|
|
||||||
|
|
||||||
import * as queries from '../../queries/logto-config';
|
|
||||||
import { QueryType } from '../../test-utilities';
|
|
||||||
import * as functions from './alteration';
|
|
||||||
|
|
||||||
const mockQuery: jest.MockedFunction<QueryType> = jest.fn();
|
|
||||||
|
|
||||||
const pool = createMockPool({
|
|
||||||
query: async (sql, values) => {
|
|
||||||
return mockQuery(sql, values);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const files = Object.freeze([
|
|
||||||
{ filename: '1.0.0-1663923770-a.js', path: '/alterations/1.0.0-1663923770-a.js' },
|
|
||||||
{ filename: '1.0.0-1663923771-b.js', path: '/alterations/1.0.0-1663923771-b.js' },
|
|
||||||
{ filename: '1.0.0-1663923772-c.js', path: '/alterations/1.0.0-1663923772-c.js' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
describe('getUndeployedAlterations()', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
// `getAlterationFiles()` will ensure the order
|
|
||||||
jest.spyOn(functions, 'getAlterationFiles').mockResolvedValueOnce([...files]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('returns all files if database timestamp is 0', async () => {
|
|
||||||
jest.spyOn(queries, 'getCurrentDatabaseAlterationTimestamp').mockResolvedValueOnce(0);
|
|
||||||
|
|
||||||
await expect(functions.getUndeployedAlterations(pool)).resolves.toEqual(files);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('returns files whose timestamp is greater then database timestamp', async () => {
|
|
||||||
jest
|
|
||||||
.spyOn(queries, 'getCurrentDatabaseAlterationTimestamp')
|
|
||||||
.mockResolvedValueOnce(1_663_923_770);
|
|
||||||
|
|
||||||
await expect(functions.getUndeployedAlterations(pool)).resolves.toEqual([files[1], files[2]]);
|
|
||||||
});
|
|
||||||
});
|
|
81
packages/cli/src/commands/database/alteration/index.test.ts
Normal file
81
packages/cli/src/commands/database/alteration/index.test.ts
Normal file
|
@ -0,0 +1,81 @@
|
||||||
|
import { createMockPool } from 'slonik';
|
||||||
|
|
||||||
|
import * as functions from '.';
|
||||||
|
import * as queries from '../../../queries/logto-config';
|
||||||
|
import { QueryType } from '../../../test-utilities';
|
||||||
|
import { chooseAlterationsByVersion } from './version';
|
||||||
|
|
||||||
|
const mockQuery: jest.MockedFunction<QueryType> = jest.fn();
|
||||||
|
|
||||||
|
const pool = createMockPool({
|
||||||
|
query: async (sql, values) => {
|
||||||
|
return mockQuery(sql, values);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('getUndeployedAlterations()', () => {
|
||||||
|
const files = Object.freeze([
|
||||||
|
{ filename: '1.0.0-1663923770-a.js', path: '/alterations/1.0.0-1663923770-a.js' },
|
||||||
|
{ filename: '1.0.0-1663923771-b.js', path: '/alterations/1.0.0-1663923771-b.js' },
|
||||||
|
{ filename: '1.0.0-1663923772-c.js', path: '/alterations/1.0.0-1663923772-c.js' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
// `getAlterationFiles()` will ensure the order
|
||||||
|
jest.spyOn(functions, 'getAlterationFiles').mockResolvedValueOnce([...files]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns all files if database timestamp is 0', async () => {
|
||||||
|
jest.spyOn(queries, 'getCurrentDatabaseAlterationTimestamp').mockResolvedValueOnce(0);
|
||||||
|
|
||||||
|
await expect(functions.getUndeployedAlterations(pool)).resolves.toEqual(files);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns files whose timestamp is greater then database timestamp', async () => {
|
||||||
|
jest
|
||||||
|
.spyOn(queries, 'getCurrentDatabaseAlterationTimestamp')
|
||||||
|
.mockResolvedValueOnce(1_663_923_770);
|
||||||
|
|
||||||
|
await expect(functions.getUndeployedAlterations(pool)).resolves.toEqual([files[1], files[2]]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('chooseAlterationsByVersion()', () => {
|
||||||
|
const files = Object.freeze(
|
||||||
|
[
|
||||||
|
'1.0.0_beta.9-1663923770-a.js',
|
||||||
|
'1.0.0_beta.9-1663923771-b.js',
|
||||||
|
'1.0.0_beta.10-1663923772-c.js',
|
||||||
|
'1.0.0_beta.11-1663923773-c.js',
|
||||||
|
'1.0.0_beta.11-1663923774-c.js',
|
||||||
|
'1.0.0-1663923775-c.js',
|
||||||
|
'1.0.0-1663923776-c.js',
|
||||||
|
'1.0.1-1663923777-c.js',
|
||||||
|
'1.2.0-1663923778-c.js',
|
||||||
|
'next-1663923778-c.js',
|
||||||
|
'next-1663923779-c.js',
|
||||||
|
'next-1663923780-c.js',
|
||||||
|
'next1-1663923781-c.js',
|
||||||
|
].map((filename) => ({ filename, path: '/alterations/' + filename }))
|
||||||
|
);
|
||||||
|
|
||||||
|
it('chooses nothing when input version is invalid', async () => {
|
||||||
|
await expect(chooseAlterationsByVersion(files, 'next1')).rejects.toThrow(
|
||||||
|
'Invalid Version: next1'
|
||||||
|
);
|
||||||
|
await expect(chooseAlterationsByVersion([], 'ok')).rejects.toThrow('Invalid Version: ok');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('chooses correct alteration files', async () => {
|
||||||
|
await Promise.all([
|
||||||
|
expect(chooseAlterationsByVersion([], 'v1.0.0')).resolves.toEqual([]),
|
||||||
|
expect(chooseAlterationsByVersion(files, 'v1.0.0')).resolves.toEqual(files.slice(0, 7)),
|
||||||
|
expect(chooseAlterationsByVersion(files, 'v1.0.0-beta.10')).resolves.toEqual(
|
||||||
|
files.slice(0, 3)
|
||||||
|
),
|
||||||
|
expect(chooseAlterationsByVersion(files, 'v1.1.0')).resolves.toEqual(files.slice(0, 8)),
|
||||||
|
expect(chooseAlterationsByVersion(files, 'v1.2.0')).resolves.toEqual(files.slice(0, 9)),
|
||||||
|
expect(chooseAlterationsByVersion(files, 'next')).resolves.toEqual(files.slice(0, 11)),
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,27 +1,29 @@
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
|
|
||||||
import { AlterationScript } from '@logto/schemas/lib/types/alteration';
|
import { AlterationScript } from '@logto/schemas/lib/types/alteration';
|
||||||
import { conditional, conditionalString } from '@silverhand/essentials';
|
import { findPackage } from '@logto/shared';
|
||||||
|
import { conditionalString } from '@silverhand/essentials';
|
||||||
import chalk from 'chalk';
|
import chalk from 'chalk';
|
||||||
import findUp, { exists } from 'find-up';
|
|
||||||
import { copy, existsSync, remove, readdir } from 'fs-extra';
|
import { copy, existsSync, remove, readdir } from 'fs-extra';
|
||||||
import { DatabasePool } from 'slonik';
|
import { DatabasePool } from 'slonik';
|
||||||
import { CommandModule } from 'yargs';
|
import { CommandModule } from 'yargs';
|
||||||
|
|
||||||
import { createPoolFromConfig } from '../../database';
|
import { createPoolFromConfig } from '../../../database';
|
||||||
import {
|
import {
|
||||||
getCurrentDatabaseAlterationTimestamp,
|
getCurrentDatabaseAlterationTimestamp,
|
||||||
updateDatabaseTimestamp,
|
updateDatabaseTimestamp,
|
||||||
} from '../../queries/logto-config';
|
} from '../../../queries/logto-config';
|
||||||
import { getPathInModule, log } from '../../utilities';
|
import { getPathInModule, log } from '../../../utilities';
|
||||||
|
import { AlterationFile } from './type';
|
||||||
|
import { chooseAlterationsByVersion } from './version';
|
||||||
|
|
||||||
const alterationFileNameRegex = /-(\d+)-?.*\.js$/;
|
const alterationFilenameRegex = /-(\d+)-?.*\.js$/;
|
||||||
|
|
||||||
const getTimestampFromFileName = (fileName: string) => {
|
const getTimestampFromFilename = (filename: string) => {
|
||||||
const match = alterationFileNameRegex.exec(fileName);
|
const match = alterationFilenameRegex.exec(filename);
|
||||||
|
|
||||||
if (!match?.[1]) {
|
if (!match?.[1]) {
|
||||||
throw new Error(`Can not get timestamp: ${fileName}`);
|
throw new Error(`Can not get timestamp: ${filename}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
return Number(match[1]);
|
return Number(match[1]);
|
||||||
|
@ -35,8 +37,6 @@ const importAlterationScript = async (filePath: string): Promise<AlterationScrip
|
||||||
return module.default as AlterationScript;
|
return module.default as AlterationScript;
|
||||||
};
|
};
|
||||||
|
|
||||||
type AlterationFile = { path: string; filename: string };
|
|
||||||
|
|
||||||
export const getAlterationFiles = async (): Promise<AlterationFile[]> => {
|
export const getAlterationFiles = async (): Promise<AlterationFile[]> => {
|
||||||
const alterationDirectory = getPathInModule('@logto/schemas', 'alterations');
|
const alterationDirectory = getPathInModule('@logto/schemas', 'alterations');
|
||||||
|
|
||||||
|
@ -45,18 +45,10 @@ export const getAlterationFiles = async (): Promise<AlterationFile[]> => {
|
||||||
* since they need a proper context that includes required dependencies (such as slonik) in `node_modules/`.
|
* since they need a proper context that includes required dependencies (such as slonik) in `node_modules/`.
|
||||||
* While the original `@logto/schemas` may remove them in production.
|
* While the original `@logto/schemas` may remove them in production.
|
||||||
*/
|
*/
|
||||||
const packageDirectory = await findUp(
|
const packageDirectory = await findPackage(
|
||||||
async (directory) => {
|
// Until we migrate to ESM
|
||||||
const hasPackageJson = await exists(path.join(directory, 'package.json'));
|
// eslint-disable-next-line unicorn/prefer-module
|
||||||
|
__dirname
|
||||||
return conditional(hasPackageJson && directory);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// Until we migrate to ESM
|
|
||||||
// eslint-disable-next-line unicorn/prefer-module
|
|
||||||
cwd: __dirname,
|
|
||||||
type: 'directory',
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const localAlterationDirectory = path.resolve(
|
const localAlterationDirectory = path.resolve(
|
||||||
|
@ -75,11 +67,11 @@ export const getAlterationFiles = async (): Promise<AlterationFile[]> => {
|
||||||
await copy(alterationDirectory, localAlterationDirectory);
|
await copy(alterationDirectory, localAlterationDirectory);
|
||||||
|
|
||||||
const directory = await readdir(localAlterationDirectory);
|
const directory = await readdir(localAlterationDirectory);
|
||||||
const files = directory.filter((file) => alterationFileNameRegex.test(file));
|
const files = directory.filter((file) => alterationFilenameRegex.test(file));
|
||||||
|
|
||||||
return files
|
return files
|
||||||
.slice()
|
.slice()
|
||||||
.sort((file1, file2) => getTimestampFromFileName(file1) - getTimestampFromFileName(file2))
|
.sort((file1, file2) => getTimestampFromFilename(file1) - getTimestampFromFilename(file2))
|
||||||
.map((filename) => ({ path: path.join(localAlterationDirectory, filename), filename }));
|
.map((filename) => ({ path: path.join(localAlterationDirectory, filename), filename }));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -91,14 +83,14 @@ export const getLatestAlterationTimestamp = async () => {
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
return getTimestampFromFileName(lastFile.filename);
|
return getTimestampFromFilename(lastFile.filename);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const getUndeployedAlterations = async (pool: DatabasePool) => {
|
export const getUndeployedAlterations = async (pool: DatabasePool) => {
|
||||||
const databaseTimestamp = await getCurrentDatabaseAlterationTimestamp(pool);
|
const databaseTimestamp = await getCurrentDatabaseAlterationTimestamp(pool);
|
||||||
const files = await getAlterationFiles();
|
const files = await getAlterationFiles();
|
||||||
|
|
||||||
return files.filter(({ filename }) => getTimestampFromFileName(filename) > databaseTimestamp);
|
return files.filter(({ filename }) => getTimestampFromFilename(filename) > databaseTimestamp);
|
||||||
};
|
};
|
||||||
|
|
||||||
const deployAlteration = async (
|
const deployAlteration = async (
|
||||||
|
@ -110,7 +102,7 @@ const deployAlteration = async (
|
||||||
try {
|
try {
|
||||||
await pool.transaction(async (connection) => {
|
await pool.transaction(async (connection) => {
|
||||||
await up(connection);
|
await up(connection);
|
||||||
await updateDatabaseTimestamp(connection, getTimestampFromFileName(filename));
|
await updateDatabaseTimestamp(connection, getTimestampFromFilename(filename));
|
||||||
});
|
});
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
|
@ -126,22 +118,30 @@ const deployAlteration = async (
|
||||||
log.info(`Run alteration ${filename} succeeded`);
|
log.info(`Run alteration ${filename} succeeded`);
|
||||||
};
|
};
|
||||||
|
|
||||||
const alteration: CommandModule<unknown, { action: string }> = {
|
const alteration: CommandModule<unknown, { action: string; target?: string }> = {
|
||||||
command: ['alteration <action>', 'alt', 'alter'],
|
command: ['alteration <action> [target]', 'alt', 'alter'],
|
||||||
describe: 'Perform database alteration',
|
describe: 'Perform database alteration',
|
||||||
builder: (yargs) =>
|
builder: (yargs) =>
|
||||||
yargs.positional('action', {
|
yargs
|
||||||
describe: 'The action to perform, now it only accepts `deploy`',
|
.positional('action', {
|
||||||
type: 'string',
|
describe: 'The action to perform, now it only accepts `deploy`',
|
||||||
demandOption: true,
|
type: 'string',
|
||||||
}),
|
demandOption: true,
|
||||||
handler: async ({ action }) => {
|
})
|
||||||
|
.positional('target', {
|
||||||
|
describe: 'The target Logto version for alteration',
|
||||||
|
type: 'string',
|
||||||
|
}),
|
||||||
|
handler: async ({ action, target }) => {
|
||||||
if (action !== 'deploy') {
|
if (action !== 'deploy') {
|
||||||
log.error('Unsupported action');
|
log.error('Unsupported action');
|
||||||
}
|
}
|
||||||
|
|
||||||
const pool = await createPoolFromConfig();
|
const pool = await createPoolFromConfig();
|
||||||
const alterations = await getUndeployedAlterations(pool);
|
const alterations = await chooseAlterationsByVersion(
|
||||||
|
await getUndeployedAlterations(pool),
|
||||||
|
target
|
||||||
|
);
|
||||||
|
|
||||||
log.info(
|
log.info(
|
||||||
`Found ${alterations.length} alteration${conditionalString(
|
`Found ${alterations.length} alteration${conditionalString(
|
1
packages/cli/src/commands/database/alteration/type.ts
Normal file
1
packages/cli/src/commands/database/alteration/type.ts
Normal file
|
@ -0,0 +1 @@
|
||||||
|
export type AlterationFile = { path: string; filename: string };
|
76
packages/cli/src/commands/database/alteration/version.ts
Normal file
76
packages/cli/src/commands/database/alteration/version.ts
Normal file
|
@ -0,0 +1,76 @@
|
||||||
|
import { conditional } from '@silverhand/essentials';
|
||||||
|
import chalk from 'chalk';
|
||||||
|
import inquirer from 'inquirer';
|
||||||
|
import { SemVer, compare, eq, gt } from 'semver';
|
||||||
|
|
||||||
|
import { findLastIndex, log } from '../../../utilities';
|
||||||
|
import { AlterationFile } from './type';
|
||||||
|
|
||||||
|
const getVersionFromFilename = (filename: string) => {
|
||||||
|
try {
|
||||||
|
return new SemVer(filename.split('-')[0]?.replaceAll('_', '-') ?? 'unknown');
|
||||||
|
} catch {}
|
||||||
|
};
|
||||||
|
|
||||||
|
const latestTag = 'latest';
|
||||||
|
const nextTag = 'next';
|
||||||
|
|
||||||
|
export const chooseAlterationsByVersion = async (
|
||||||
|
alterations: readonly AlterationFile[],
|
||||||
|
initialVersion?: string
|
||||||
|
) => {
|
||||||
|
if (initialVersion === nextTag) {
|
||||||
|
const endIndex = findLastIndex(
|
||||||
|
alterations,
|
||||||
|
({ filename }) =>
|
||||||
|
filename.startsWith(nextTag + '-') || Boolean(getVersionFromFilename(filename))
|
||||||
|
);
|
||||||
|
|
||||||
|
if (endIndex === -1) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
log.info(`Deploy target ${chalk.green(nextTag)}`);
|
||||||
|
|
||||||
|
return alterations.slice(0, endIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
const versions = alterations
|
||||||
|
.map(({ filename }) => getVersionFromFilename(filename))
|
||||||
|
.filter((version): version is SemVer => version instanceof SemVer)
|
||||||
|
// Cannot use `Set` to deduplicate since it's a class
|
||||||
|
.filter((version, index, self) => index === self.findIndex((another) => eq(version, another)))
|
||||||
|
.slice()
|
||||||
|
.sort((i, j) => compare(j, i));
|
||||||
|
const initialSemVersion = conditional(initialVersion && new SemVer(initialVersion));
|
||||||
|
|
||||||
|
if (!versions[0]) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const { version: targetVersion } =
|
||||||
|
initialVersion === latestTag
|
||||||
|
? { version: versions[0] }
|
||||||
|
: await inquirer.prompt<{ version: SemVer }>(
|
||||||
|
{
|
||||||
|
type: 'list',
|
||||||
|
message: 'Choose the alteration target version',
|
||||||
|
name: 'version',
|
||||||
|
choices: versions.map((semVersion) => ({
|
||||||
|
name: semVersion.version,
|
||||||
|
value: semVersion,
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
version: initialSemVersion,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
log.info(`Deploy target ${chalk.green(targetVersion.version)}`);
|
||||||
|
|
||||||
|
return alterations.filter(({ filename }) => {
|
||||||
|
const version = getVersionFromFilename(filename);
|
||||||
|
|
||||||
|
return version && !gt(version, targetVersion);
|
||||||
|
});
|
||||||
|
};
|
|
@ -3,6 +3,7 @@ import { CommandModule } from 'yargs';
|
||||||
|
|
||||||
import { getDatabaseUrlFromConfig } from '../../database';
|
import { getDatabaseUrlFromConfig } from '../../database';
|
||||||
import { log } from '../../utilities';
|
import { log } from '../../utilities';
|
||||||
|
import { addOfficialConnectors } from '../connector/utils';
|
||||||
import {
|
import {
|
||||||
validateNodeVersion,
|
validateNodeVersion,
|
||||||
inquireInstancePath,
|
inquireInstancePath,
|
||||||
|
@ -12,14 +13,16 @@ import {
|
||||||
createEnv,
|
createEnv,
|
||||||
logFinale,
|
logFinale,
|
||||||
decompress,
|
decompress,
|
||||||
|
inquireOfficialConnectors,
|
||||||
} from './utils';
|
} from './utils';
|
||||||
|
|
||||||
export type InstallArgs = {
|
export type InstallArgs = {
|
||||||
path?: string;
|
path?: string;
|
||||||
skipSeed: boolean;
|
skipSeed: boolean;
|
||||||
|
officialConnectors?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const installLogto = async ({ path, skipSeed }: InstallArgs) => {
|
const installLogto = async ({ path, skipSeed, officialConnectors }: InstallArgs) => {
|
||||||
validateNodeVersion();
|
validateNodeVersion();
|
||||||
|
|
||||||
// Get instance path
|
// Get instance path
|
||||||
|
@ -34,7 +37,11 @@ const installLogto = async ({ path, skipSeed }: InstallArgs) => {
|
||||||
|
|
||||||
// Seed database
|
// Seed database
|
||||||
if (skipSeed) {
|
if (skipSeed) {
|
||||||
log.info(`You can use ${chalk.green('db seed')} command to seed database when ready.`);
|
log.info(
|
||||||
|
`Skipped database seeding.\n\n' + ' You can use the ${chalk.green(
|
||||||
|
'db seed'
|
||||||
|
)} command to seed database when ready.\n`
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
await seedDatabase(instancePath);
|
await seedDatabase(instancePath);
|
||||||
}
|
}
|
||||||
|
@ -42,29 +49,51 @@ const installLogto = async ({ path, skipSeed }: InstallArgs) => {
|
||||||
// Save to dot env
|
// Save to dot env
|
||||||
await createEnv(instancePath, await getDatabaseUrlFromConfig());
|
await createEnv(instancePath, await getDatabaseUrlFromConfig());
|
||||||
|
|
||||||
|
// Add official connectors
|
||||||
|
if (await inquireOfficialConnectors(officialConnectors)) {
|
||||||
|
await addOfficialConnectors(instancePath);
|
||||||
|
} else {
|
||||||
|
log.info(
|
||||||
|
'Skipped adding official connectors.\n\n' +
|
||||||
|
` You can use the ${chalk.green('connector add')} command to add connectors at any time.\n`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// Finale
|
// Finale
|
||||||
logFinale(instancePath);
|
logFinale(instancePath);
|
||||||
};
|
};
|
||||||
|
|
||||||
const install: CommandModule<unknown, { path?: string; skipSeed: boolean }> = {
|
const install: CommandModule<
|
||||||
|
unknown,
|
||||||
|
{
|
||||||
|
p?: string;
|
||||||
|
ss: boolean;
|
||||||
|
oc?: boolean;
|
||||||
|
}
|
||||||
|
> = {
|
||||||
command: ['init', 'i', 'install'],
|
command: ['init', 'i', 'install'],
|
||||||
describe: 'Download and run the latest Logto release',
|
describe: 'Download and run the latest Logto release',
|
||||||
builder: (yargs) =>
|
builder: (yargs) =>
|
||||||
yargs.options({
|
yargs.options({
|
||||||
path: {
|
p: {
|
||||||
alias: 'p',
|
alias: 'path',
|
||||||
describe: 'Path of Logto, must be a non-existing path',
|
describe: 'Path of Logto, must be a non-existing path',
|
||||||
type: 'string',
|
type: 'string',
|
||||||
},
|
},
|
||||||
skipSeed: {
|
ss: {
|
||||||
alias: 'ss',
|
alias: 'skip-seed',
|
||||||
describe: 'Skip Logto database seeding',
|
describe: 'Skip Logto database seeding',
|
||||||
type: 'boolean',
|
type: 'boolean',
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
oc: {
|
||||||
|
alias: 'official-connectors',
|
||||||
|
describe: 'Add official connectors after downloading Logto',
|
||||||
|
type: 'boolean',
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
handler: async ({ path, skipSeed }) => {
|
handler: async ({ p, ss, oc }) => {
|
||||||
await installLogto({ path, skipSeed });
|
await installLogto({ path: p, skipSeed: ss, officialConnectors: oc });
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -152,3 +152,17 @@ export const logFinale = (instancePath: string) => {
|
||||||
`Use the command below to start Logto. Happy hacking!\n\n ${chalk.green(startCommand)}`
|
`Use the command below to start Logto. Happy hacking!\n\n ${chalk.green(startCommand)}`
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const inquireOfficialConnectors = async (initialAnswer?: boolean) => {
|
||||||
|
const { value } = await inquirer.prompt<{ value: boolean }>(
|
||||||
|
{
|
||||||
|
name: 'value',
|
||||||
|
message: 'Do you want to add official connectors?',
|
||||||
|
type: 'confirm',
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
{ value: initialAnswer }
|
||||||
|
);
|
||||||
|
|
||||||
|
return value;
|
||||||
|
};
|
||||||
|
|
1
packages/cli/src/constants.ts
Normal file
1
packages/cli/src/constants.ts
Normal file
|
@ -0,0 +1 @@
|
||||||
|
export const connectorDirectory = 'connectors';
|
|
@ -3,22 +3,38 @@ import dotenv from 'dotenv';
|
||||||
import yargs from 'yargs';
|
import yargs from 'yargs';
|
||||||
import { hideBin } from 'yargs/helpers';
|
import { hideBin } from 'yargs/helpers';
|
||||||
|
|
||||||
|
import connector from './commands/connector';
|
||||||
import database from './commands/database';
|
import database from './commands/database';
|
||||||
import install from './commands/install';
|
import install from './commands/install';
|
||||||
|
import { packageJson } from './package-json';
|
||||||
import { cliConfig, ConfigKey } from './utilities';
|
import { cliConfig, ConfigKey } from './utilities';
|
||||||
|
|
||||||
void yargs(hideBin(process.argv))
|
void yargs(hideBin(process.argv))
|
||||||
|
.version(false)
|
||||||
.option('env', {
|
.option('env', {
|
||||||
alias: ['e', 'env-file'],
|
alias: ['e', 'env-file'],
|
||||||
describe: 'The path to your `.env` file',
|
describe: 'The path to your `.env` file',
|
||||||
type: 'string',
|
type: 'string',
|
||||||
})
|
})
|
||||||
.option('databaseUrl', {
|
.option('db', {
|
||||||
alias: ['db-url'],
|
alias: ['db-url', 'database-url'],
|
||||||
describe: 'The Postgres URL to Logto database',
|
describe: 'The Postgres URL to Logto database',
|
||||||
type: 'string',
|
type: 'string',
|
||||||
})
|
})
|
||||||
.middleware(({ env, databaseUrl }) => {
|
.option('version', {
|
||||||
|
alias: 'v',
|
||||||
|
describe: 'Print Logto CLI version',
|
||||||
|
type: 'boolean',
|
||||||
|
global: false,
|
||||||
|
})
|
||||||
|
.middleware(({ version }) => {
|
||||||
|
if (version) {
|
||||||
|
console.log(packageJson.name + ' v' + packageJson.version);
|
||||||
|
// eslint-disable-next-line unicorn/no-process-exit
|
||||||
|
process.exit(0);
|
||||||
|
}
|
||||||
|
}, true)
|
||||||
|
.middleware(({ env, db: databaseUrl }) => {
|
||||||
dotenv.config({ path: env });
|
dotenv.config({ path: env });
|
||||||
|
|
||||||
const initialDatabaseUrl = databaseUrl ?? process.env[ConfigKey.DatabaseUrl];
|
const initialDatabaseUrl = databaseUrl ?? process.env[ConfigKey.DatabaseUrl];
|
||||||
|
@ -29,6 +45,7 @@ void yargs(hideBin(process.argv))
|
||||||
})
|
})
|
||||||
.command(install)
|
.command(install)
|
||||||
.command(database)
|
.command(database)
|
||||||
|
.command(connector)
|
||||||
.demandCommand(1)
|
.demandCommand(1)
|
||||||
.showHelpOnFail(false, `Specify ${chalk.green('--help')} for available options`)
|
.showHelpOnFail(false, `Specify ${chalk.green('--help')} for available options`)
|
||||||
.strict()
|
.strict()
|
||||||
|
|
|
@ -152,3 +152,30 @@ export const getCliConfigWithPrompt = async ({
|
||||||
|
|
||||||
return input;
|
return input;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// https://stackoverflow.com/a/53187807/12514940
|
||||||
|
/**
|
||||||
|
* Returns the index of the last element in the array where predicate is true, and -1
|
||||||
|
* otherwise.
|
||||||
|
* @param array The source array to search in
|
||||||
|
* @param predicate find calls predicate once for each element of the array, in descending
|
||||||
|
* order, until it finds one where predicate returns true. If such an element is found,
|
||||||
|
* findLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1.
|
||||||
|
*/
|
||||||
|
export function findLastIndex<T>(
|
||||||
|
array: readonly T[],
|
||||||
|
predicate: (value: T, index: number, object: readonly T[]) => boolean
|
||||||
|
): number {
|
||||||
|
// eslint-disable-next-line @silverhand/fp/no-let
|
||||||
|
let { length } = array;
|
||||||
|
|
||||||
|
// eslint-disable-next-line @silverhand/fp/no-mutation
|
||||||
|
while (length--) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
if (predicate(array[length]!, length, array)) {
|
||||||
|
return length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
|
@ -4,7 +4,8 @@
|
||||||
"outDir": "lib",
|
"outDir": "lib",
|
||||||
"declaration": true,
|
"declaration": true,
|
||||||
"module": "node16",
|
"module": "node16",
|
||||||
"target": "es2022"
|
"target": "es2022",
|
||||||
|
"types": ["node", "jest"]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src",
|
"src",
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@fontsource/roboto-mono": "^4.5.7",
|
"@fontsource/roboto-mono": "^4.5.7",
|
||||||
"@logto/core-kit": "1.0.0-beta.16",
|
"@logto/core-kit": "1.0.0-beta.18",
|
||||||
"@logto/language-kit": "1.0.0-beta.16",
|
"@logto/language-kit": "1.0.0-beta.16",
|
||||||
"@logto/phrases": "^1.0.0-beta.10",
|
"@logto/phrases": "^1.0.0-beta.10",
|
||||||
"@logto/phrases-ui": "^1.0.0-beta.10",
|
"@logto/phrases-ui": "^1.0.0-beta.10",
|
||||||
|
@ -29,11 +29,11 @@
|
||||||
"@parcel/transformer-mdx": "2.7.0",
|
"@parcel/transformer-mdx": "2.7.0",
|
||||||
"@parcel/transformer-sass": "2.7.0",
|
"@parcel/transformer-sass": "2.7.0",
|
||||||
"@parcel/transformer-svg-react": "2.7.0",
|
"@parcel/transformer-svg-react": "2.7.0",
|
||||||
"@silverhand/eslint-config": "1.0.0",
|
"@silverhand/eslint-config": "1.2.0",
|
||||||
"@silverhand/eslint-config-react": "1.1.0",
|
"@silverhand/eslint-config-react": "1.2.1",
|
||||||
"@silverhand/essentials": "^1.3.0",
|
"@silverhand/essentials": "^1.3.0",
|
||||||
"@silverhand/ts-config": "1.0.0",
|
"@silverhand/ts-config": "1.2.1",
|
||||||
"@silverhand/ts-config-react": "1.1.0",
|
"@silverhand/ts-config-react": "1.2.1",
|
||||||
"@tsconfig/docusaurus": "^1.0.5",
|
"@tsconfig/docusaurus": "^1.0.5",
|
||||||
"@types/color": "^3.0.3",
|
"@types/color": "^3.0.3",
|
||||||
"@types/lodash.kebabcase": "^4.1.6",
|
"@types/lodash.kebabcase": "^4.1.6",
|
||||||
|
@ -91,8 +91,7 @@
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "@silverhand/react",
|
"extends": "@silverhand/react",
|
||||||
"rules": {
|
"rules": {
|
||||||
"complexity": "off",
|
"complexity": "off"
|
||||||
"@typescript-eslint/prefer-nullish-coalescing": "off"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"stylelint": {
|
"stylelint": {
|
||||||
|
|
7
packages/console/src/assets/images/clear.svg
Normal file
7
packages/console/src/assets/images/clear.svg
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.48984 7.00451C2.65057 6.04014 3.48495 5.33331 4.46263 5.33331L11.537 5.33331C12.5146 5.33331 13.349 6.04014 13.5097 7.00452L14.3986 12.3378C14.6018 13.5569 13.6617 14.6666 12.4258 14.6666H3.57374C2.33786 14.6666 1.39777 13.5569 1.60095 12.3378L2.48984 7.00451ZM4.46263 6.66665C4.13673 6.66665 3.85861 6.90225 3.80503 7.22371L2.91614 12.557C2.84842 12.9634 3.16178 13.3333 3.57374 13.3333H12.4258C12.8378 13.3333 13.1512 12.9634 13.0834 12.557L12.1945 7.22371C12.141 6.90225 11.8628 6.66665 11.537 6.66665H4.46263Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.33331C6 2.22874 6.89543 1.33331 8 1.33331C9.10457 1.33331 10 2.22874 10 3.33331V5.33331H8.66667V3.33331C8.66667 2.96512 8.36819 2.66665 8 2.66665C7.63181 2.66665 7.33333 2.96512 7.33333 3.33331V5.33331H6V3.33331Z" fill="currentColor"/>
|
||||||
|
<path d="M4 12.0002C4 11.632 4.29848 11.3336 4.66667 11.3336C5.03486 11.3336 5.33333 11.632 5.33333 12.0002V13.3336C5.33333 13.7017 5.03486 14.0002 4.66667 14.0002C4.29848 14.0002 4 13.7017 4 13.3336V12.0002Z" fill="currentColor"/>
|
||||||
|
<path d="M6.6665 12C6.6665 11.6318 6.96498 11.3333 7.33317 11.3333C7.70136 11.3333 7.99984 11.6318 7.99984 12V13.3333C7.99984 13.7015 7.70136 14 7.33317 14C6.96498 14 6.6665 13.7015 6.6665 13.3333V12Z" fill="currentColor"/>
|
||||||
|
<rect x="2.6665" y="8" width="10.6667" height="1.33333" rx="0.666667" fill="currentColor"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.5 KiB |
|
@ -16,7 +16,7 @@
|
||||||
.icon {
|
.icon {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
|
|
@ -38,7 +38,7 @@ const Alert = ({
|
||||||
)}
|
)}
|
||||||
{action && onClick && (
|
{action && onClick && (
|
||||||
<div className={styles.action}>
|
<div className={styles.action}>
|
||||||
<Button title={action} type="plain" onClick={onClick} />
|
<Button title={action} type="text" size="small" onClick={onClick} />
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
|
|
||||||
.role {
|
.role {
|
||||||
font: var(--font-body-small);
|
font: var(--font-body-small);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -58,7 +58,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.signOutIcon {
|
.signOutIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
|
|
|
@ -17,7 +17,7 @@ const ApplicationName = ({ applicationId, isLink = false }: Props) => {
|
||||||
const { data } = useSWR<Application>(!isAdminConsole && `/api/applications/${applicationId}`);
|
const { data } = useSWR<Application>(!isAdminConsole && `/api/applications/${applicationId}`);
|
||||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||||
|
|
||||||
const name = (isAdminConsole ? <>Admin Console ({t('system_app')})</> : data?.name) || '-';
|
const name = (isAdminConsole ? <>Admin Console ({t('system_app')})</> : data?.name) ?? '-';
|
||||||
|
|
||||||
if (isLink && !isAdminConsole) {
|
if (isLink && !isAdminConsole) {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -53,9 +53,8 @@
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding: 0 _.unit(3);
|
padding: 0 _.unit(3);
|
||||||
|
|
||||||
&.plain {
|
&.text {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -63,9 +62,9 @@
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 _.unit(4);
|
padding: 0 _.unit(4);
|
||||||
|
|
||||||
&.plain {
|
&.text {
|
||||||
|
font: var(--font-subhead-1);
|
||||||
height: 28px;
|
height: 28px;
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -73,16 +72,17 @@
|
||||||
height: 44px;
|
height: 44px;
|
||||||
padding: 0 _.unit(6);
|
padding: 0 _.unit(6);
|
||||||
|
|
||||||
&.plain {
|
&.text {
|
||||||
height: 28px; // same as medium
|
// same as medium
|
||||||
padding: 0;
|
font: var(--font-subhead-1);
|
||||||
|
height: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.default {
|
&.default {
|
||||||
background: var(--color-layer-1);
|
background: var(--color-layer-1);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
border-color: var(--color-outline);
|
border-color: var(--color-border);
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
||||||
|
@ -196,11 +196,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.plain {
|
&.text {
|
||||||
background: none;
|
background: none;
|
||||||
border-color: none;
|
border-color: none;
|
||||||
font: var(--font-body-medium);
|
font: var(--font-label-large);
|
||||||
color: var(--color-text-link);
|
color: var(--color-text-link);
|
||||||
|
padding: _.unit(0.5) _.unit(1);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
color: var(--color-disabled);
|
color: var(--color-disabled);
|
||||||
|
@ -211,7 +213,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled):hover {
|
&:not(:disabled):hover {
|
||||||
text-decoration: underline;
|
background-color: var(--color-focused-variant);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { Ring as Spinner } from '@/components/Spinner';
|
||||||
import DangerousRaw from '../DangerousRaw';
|
import DangerousRaw from '../DangerousRaw';
|
||||||
import * as styles from './index.module.scss';
|
import * as styles from './index.module.scss';
|
||||||
|
|
||||||
export type ButtonType = 'primary' | 'danger' | 'outline' | 'plain' | 'default' | 'branding';
|
export type ButtonType = 'primary' | 'danger' | 'outline' | 'text' | 'default' | 'branding';
|
||||||
|
|
||||||
type BaseProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> & {
|
type BaseProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> & {
|
||||||
htmlType?: 'button' | 'submit' | 'reset';
|
htmlType?: 'button' | 'submit' | 'reset';
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
margin-top: _.unit(1);
|
margin-top: _.unit(1);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.large {
|
&.large {
|
||||||
|
|
|
@ -33,6 +33,11 @@
|
||||||
|
|
||||||
.copyIcon {
|
.copyIcon {
|
||||||
margin-left: _.unit(3);
|
margin-left: _.unit(3);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,11 +20,11 @@
|
||||||
margin-left: _.unit(1);
|
margin-left: _.unit(1);
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.required {
|
.required {
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
> svg {
|
> svg {
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
|
|
|
@ -1,18 +1,49 @@
|
||||||
|
import { AdminConsoleKey } from '@logto/phrases';
|
||||||
|
import { Nullable } from '@silverhand/essentials';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { HTMLProps } from 'react';
|
import { ForwardedRef, forwardRef, HTMLProps, useImperativeHandle, useRef } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
import Tooltip from '../Tooltip';
|
||||||
import * as styles from './index.module.scss';
|
import * as styles from './index.module.scss';
|
||||||
|
|
||||||
export type Props = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
|
export type Props = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
|
||||||
size?: 'small' | 'medium' | 'large';
|
size?: 'small' | 'medium' | 'large';
|
||||||
|
tooltip?: AdminConsoleKey;
|
||||||
};
|
};
|
||||||
|
|
||||||
const IconButton = ({ size = 'medium', children, className, ...rest }: Props) => {
|
const IconButton = (
|
||||||
|
{ size = 'medium', children, className, tooltip, ...rest }: Props,
|
||||||
|
reference: ForwardedRef<HTMLButtonElement>
|
||||||
|
) => {
|
||||||
|
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||||
|
const innerReference = useRef<HTMLButtonElement>(null);
|
||||||
|
|
||||||
|
useImperativeHandle<Nullable<HTMLButtonElement>, Nullable<HTMLButtonElement>>(
|
||||||
|
reference,
|
||||||
|
() => innerReference.current
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button type="button" className={classNames(styles.button, styles[size], className)} {...rest}>
|
<>
|
||||||
{children}
|
<button
|
||||||
</button>
|
ref={innerReference}
|
||||||
|
type="button"
|
||||||
|
className={classNames(styles.button, styles[size], className)}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
{tooltip && (
|
||||||
|
<Tooltip
|
||||||
|
anchorRef={innerReference}
|
||||||
|
content={t(tooltip)}
|
||||||
|
horizontalAlign="center"
|
||||||
|
verticalAlign="top"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default IconButton;
|
export default forwardRef(IconButton);
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font: var(--font-body-small);
|
font: var(--font-body-small);
|
||||||
color: var(--color-outline);
|
color: var(--color-text-secondary);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font: var(--font-title-medium);
|
font: var(--font-title-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
margin: _.unit(6) 0 _.unit(3);
|
margin: _.unit(6) 0 _.unit(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
margin-bottom: _.unit(6);
|
margin-bottom: _.unit(6);
|
||||||
|
|
||||||
.closeIcon {
|
.closeIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.minusIcon {
|
.minusIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.addAnother {
|
.addAnother {
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
import { AdminConsoleKey } from '@logto/phrases';
|
import { AdminConsoleKey } from '@logto/phrases';
|
||||||
import classNames from 'classnames';
|
|
||||||
import { KeyboardEvent, useMemo, useState } from 'react';
|
import { KeyboardEvent, useMemo, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import Minus from '@/assets/images/minus.svg';
|
import Minus from '@/assets/images/minus.svg';
|
||||||
import * as textButtonStyles from '@/components/TextButton/index.module.scss';
|
|
||||||
import { onKeyDownHandler } from '@/utilities/a11y';
|
|
||||||
|
|
||||||
|
import Button from '../Button';
|
||||||
import ConfirmModal from '../ConfirmModal';
|
import ConfirmModal from '../ConfirmModal';
|
||||||
import IconButton from '../IconButton';
|
import IconButton from '../IconButton';
|
||||||
import TextInput from '../TextInput';
|
import TextInput from '../TextInput';
|
||||||
|
@ -86,15 +84,13 @@ const MultiTextInput = ({ title, value, onChange, onKeyPress, error, placeholder
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
<div
|
<Button
|
||||||
role="button"
|
size="small"
|
||||||
tabIndex={0}
|
type="text"
|
||||||
className={classNames(textButtonStyles.button, styles.addAnother)}
|
title="general.add_another"
|
||||||
onKeyDown={onKeyDownHandler(handleAdd)}
|
className={styles.addAnother}
|
||||||
onClick={handleAdd}
|
onClick={handleAdd}
|
||||||
>
|
/>
|
||||||
{t('general.add_another')}
|
|
||||||
</div>
|
|
||||||
<ConfirmModal
|
<ConfirmModal
|
||||||
isOpen={deleteFieldIndex !== undefined}
|
isOpen={deleteFieldIndex !== undefined}
|
||||||
confirmButtonText="general.delete"
|
confirmButtonText="general.delete"
|
||||||
|
|
|
@ -13,6 +13,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchIcon {
|
.searchIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,7 +45,7 @@ const Search = ({ defaultValue = '', isClearable = false, onSearch, onClearSearc
|
||||||
</div>
|
</div>
|
||||||
<Button title="general.search" onClick={handleClick} />
|
<Button title="general.search" onClick={handleClick} />
|
||||||
{isClearable && (
|
{isClearable && (
|
||||||
<Button size="small" type="plain" title="general.clear_result" onClick={onClearSearch} />
|
<Button size="small" type="text" title="general.clear_result" onClick={onClearSearch} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
.icon {
|
.icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: _.unit(3);
|
margin-left: _.unit(3);
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear {
|
.clear {
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-bottom: _.unit(1);
|
padding-bottom: _.unit(1);
|
||||||
|
|
|
@ -1,23 +0,0 @@
|
||||||
@use '@/scss/underscore' as _;
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: inline-block;
|
|
||||||
font: var(--font-body-medium);
|
|
||||||
color: var(--color-text-link);
|
|
||||||
padding: _.unit(0.5) _.unit(1);
|
|
||||||
border-radius: _.unit(1);
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: 2px solid var(--color-focused-variant);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -36,7 +36,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: var(--color-caption);
|
color: var(--color-placeholder);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Overwrite webkit auto-fill style
|
// Overwrite webkit auto-fill style
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
|
|
||||||
&::-webkit-calendar-picker-indicator {
|
&::-webkit-calendar-picker-indicator {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
background-color: var(--color-icon);
|
background-color: var(--color-text-secondary);
|
||||||
mask-image: url('../../assets/images/calendar.png');
|
mask-image: url('../../assets/images/calendar.png');
|
||||||
mask-size: 20px 20px;
|
mask-size: 20px 20px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
@ -62,7 +62,7 @@
|
||||||
|
|
||||||
&.disabled {
|
&.disabled {
|
||||||
background: var(--color-inverse-on-surface);
|
background: var(--color-inverse-on-surface);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
border-color: var(--color-border);
|
border-color: var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
29
packages/console/src/components/Textarea/index.module.scss
Normal file
29
packages/console/src/components/Textarea/index.module.scss
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
@use '@/scss/underscore' as _;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
outline: 3px solid transparent;
|
||||||
|
padding: _.unit(2) _.unit(3);
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
outline-color: var(--color-focused-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: var(--color-text);
|
||||||
|
font: var(--font-body-medium);
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--color-caption);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
18
packages/console/src/components/Textarea/index.tsx
Normal file
18
packages/console/src/components/Textarea/index.tsx
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { ForwardedRef, forwardRef, HTMLProps } from 'react';
|
||||||
|
|
||||||
|
import * as styles from './index.module.scss';
|
||||||
|
|
||||||
|
type Props = HTMLProps<HTMLTextAreaElement> & {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Textarea = ({ className, ...rest }: Props, reference: ForwardedRef<HTMLTextAreaElement>) => {
|
||||||
|
return (
|
||||||
|
<div className={classNames(styles.container, className)}>
|
||||||
|
<textarea {...rest} ref={reference} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default forwardRef(Textarea);
|
|
@ -46,11 +46,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
// https://css-tricks.com/almanac/properties/l/line-clamp/
|
@include _.multi-line-ellipsis(6);
|
||||||
/* stylelint-disable-next-line value-no-vendor-prefix */
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 6;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
cursor: move;
|
cursor: move;
|
||||||
|
|
||||||
.draggableIcon {
|
.draggableIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,7 +64,7 @@
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
margin-top: _.unit(2);
|
margin-top: _.unit(2);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
.userId {
|
.userId {
|
||||||
font: var(--body-small);
|
font: var(--body-small);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
margin-left: _.unit(1);
|
margin-left: _.unit(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@ const UserName = ({ userId, isLink = false }: Props) => {
|
||||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||||
|
|
||||||
const isLoading = !data && !error;
|
const isLoading = !data && !error;
|
||||||
const name = data?.name || t('users.unnamed');
|
const name = data?.name ?? t('users.unnamed');
|
||||||
|
|
||||||
const isAdmin = data?.roleNames.includes(UserRole.Admin);
|
const isAdmin = data?.roleNames.includes(UserRole.Admin);
|
||||||
|
|
||||||
|
|
|
@ -5,3 +5,4 @@ export * from './logs';
|
||||||
|
|
||||||
export const themeStorageKey = 'logto:admin_console:theme';
|
export const themeStorageKey = 'logto:admin_console:theme';
|
||||||
export const requestTimeout = 20_000;
|
export const requestTimeout = 20_000;
|
||||||
|
export const generatedPasswordStorageKey = 'logto:admin_console:generated_password';
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
|
import { LanguageTag } from '@logto/language-kit';
|
||||||
import { builtInLanguages as builtInUiLanguages } from '@logto/phrases-ui';
|
import { builtInLanguages as builtInUiLanguages } from '@logto/phrases-ui';
|
||||||
import { useMemo } from 'react';
|
import { useCallback, useMemo } from 'react';
|
||||||
import useSWR from 'swr';
|
import useSWR from 'swr';
|
||||||
|
|
||||||
import { CustomPhraseResponse } from '@/types/custom-phrase';
|
import { CustomPhraseResponse } from '@/types/custom-phrase';
|
||||||
|
|
||||||
import { RequestError } from './use-api';
|
import useApi, { RequestError } from './use-api';
|
||||||
|
|
||||||
const useUiLanguages = () => {
|
const useUiLanguages = () => {
|
||||||
const {
|
const {
|
||||||
|
@ -26,11 +27,22 @@ const useUiLanguages = () => {
|
||||||
[customPhraseList]
|
[customPhraseList]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const api = useApi();
|
||||||
|
|
||||||
|
const addLanguage = useCallback(
|
||||||
|
async (languageTag: LanguageTag) => {
|
||||||
|
await api.put(`/api/custom-phrases/${languageTag}`, { json: {} });
|
||||||
|
await mutate();
|
||||||
|
},
|
||||||
|
[api, mutate]
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
customPhrases: customPhraseList,
|
customPhrases: customPhraseList,
|
||||||
languages,
|
languages,
|
||||||
error,
|
error,
|
||||||
isLoading: !customPhraseList && !error,
|
isLoading: !customPhraseList && !error,
|
||||||
|
addLanguage,
|
||||||
mutate,
|
mutate,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: _.unit(4);
|
padding: _.unit(4);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
font: var(--font-subhead-2);
|
font: var(--font-subhead-2);
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
> svg {
|
> svg {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.index {
|
.index {
|
||||||
|
@ -83,7 +83,7 @@
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font: var(--font-title-medium);
|
font: var(--font-title-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
margin: _.unit(6) 0 _.unit(3);
|
margin: _.unit(6) 0 _.unit(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
margin-right: _.unit(6);
|
margin-right: _.unit(6);
|
||||||
padding-bottom: _.unit(1);
|
padding-bottom: _.unit(1);
|
||||||
font: var(--font-subhead-2);
|
font: var(--font-subhead-2);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
margin-block-end: unset;
|
margin-block-end: unset;
|
||||||
padding-inline-start: unset;
|
padding-inline-start: unset;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.moreIcon {
|
.moreIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
> *:not(:first-child) {
|
> *:not(:first-child) {
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.moreIcon {
|
.moreIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
> :not(:first-child) {
|
> :not(:first-child) {
|
||||||
|
@ -96,7 +96,7 @@
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font: var(--font-subhead-2);
|
font: var(--font-subhead-2);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.verticalBar {
|
.verticalBar {
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeIcon {
|
.closeIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.githubIcon {
|
.githubIcon {
|
||||||
|
|
|
@ -87,7 +87,7 @@ const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props
|
||||||
subtitle="applications.guide.header_description"
|
subtitle="applications.guide.header_description"
|
||||||
/>
|
/>
|
||||||
<Spacer />
|
<Spacer />
|
||||||
<Button type="plain" size="small" title="general.skip" onClick={onClose} />
|
<Button type="text" size="small" title="general.skip" onClick={onClose} />
|
||||||
<Button
|
<Button
|
||||||
className={styles.getSampleButton}
|
className={styles.getSampleButton}
|
||||||
type="outline"
|
type="outline"
|
||||||
|
|
|
@ -19,5 +19,5 @@
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
font: var(--font-subhead-2);
|
font: var(--font-subhead-2);
|
||||||
margin-bottom: _.unit(2);
|
margin-bottom: _.unit(2);
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.successfulTooltip {
|
.successfulTooltip {
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.moreIcon {
|
.moreIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
> *:not(:first-child) {
|
> *:not(:first-child) {
|
||||||
|
@ -66,7 +66,7 @@
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font: var(--font-subhead-2);
|
font: var(--font-subhead-2);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.verticalBar {
|
.verticalBar {
|
||||||
|
@ -91,7 +91,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.resetIcon {
|
.resetIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.readme {
|
.readme {
|
||||||
|
|
|
@ -38,15 +38,14 @@
|
||||||
.connectorId {
|
.connectorId {
|
||||||
margin-top: _.unit(1);
|
margin-top: _.unit(1);
|
||||||
font: var(--font-body-small);
|
font: var(--font-body-small);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font: var(--font-body-small);
|
font: var(--font-body-small);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
margin-top: _.unit(1);
|
margin-top: _.unit(1);
|
||||||
height: 60px;
|
@include _.multi-line-ellipsis(3);
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -127,9 +127,6 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
|
||||||
<div className={styles.name}>
|
<div className={styles.name}>
|
||||||
<UnnamedTrans resource={name} />
|
<UnnamedTrans resource={name} />
|
||||||
</div>
|
</div>
|
||||||
{type !== ConnectorType.Social && (
|
|
||||||
<div className={styles.connectorId}>{id}</div>
|
|
||||||
)}
|
|
||||||
<div className={styles.description}>
|
<div className={styles.description}>
|
||||||
<UnnamedTrans resource={description} />
|
<UnnamedTrans resource={description} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeIcon {
|
.closeIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
margin-left: _.unit(1);
|
margin-left: _.unit(1);
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
> svg {
|
> svg {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -15,6 +15,6 @@
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font: var(--font-body-small);
|
font: var(--font-body-small);
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
margin-top: _.unit(1);
|
margin-top: _.unit(1);
|
||||||
padding-right: _.unit(6);
|
padding-right: _.unit(6);
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -24,7 +24,7 @@ import * as styles from './index.module.scss';
|
||||||
import { ActiveUsersResponse, NewUsersResponse, TotalUsersResponse } from './types';
|
import { ActiveUsersResponse, NewUsersResponse, TotalUsersResponse } from './types';
|
||||||
|
|
||||||
const tickStyle = {
|
const tickStyle = {
|
||||||
fill: 'var(--color-caption)',
|
fill: 'var(--color-text-secondary)',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
fontFamily: 'var(--font-family)',
|
fontFamily: 'var(--font-family)',
|
||||||
};
|
};
|
||||||
|
|
|
@ -20,15 +20,10 @@
|
||||||
margin-top: _.unit(1);
|
margin-top: _.unit(1);
|
||||||
padding-right: _.unit(6);
|
padding-right: _.unit(6);
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
|
|
||||||
.hideButton {
|
.hideButton {
|
||||||
color: var(--color-text-link);
|
display: inline-block;
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -56,7 +51,7 @@
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,6 @@ import Card from '@/components/Card';
|
||||||
import ConfirmModal from '@/components/ConfirmModal';
|
import ConfirmModal from '@/components/ConfirmModal';
|
||||||
import Spacer from '@/components/Spacer';
|
import Spacer from '@/components/Spacer';
|
||||||
import useUserPreferences from '@/hooks/use-user-preferences';
|
import useUserPreferences from '@/hooks/use-user-preferences';
|
||||||
import { onKeyDownHandler } from '@/utilities/a11y';
|
|
||||||
|
|
||||||
import Skeleton from './components/Skeleton';
|
import Skeleton from './components/Skeleton';
|
||||||
import useGetStartedMetadata from './hook';
|
import useGetStartedMetadata from './hook';
|
||||||
|
@ -44,19 +43,13 @@ const GetStarted = () => {
|
||||||
<Spacer />
|
<Spacer />
|
||||||
<span>
|
<span>
|
||||||
{t('get_started.subtitle_part2')}
|
{t('get_started.subtitle_part2')}
|
||||||
<span
|
<Button
|
||||||
role="button"
|
title="get_started.hide_this"
|
||||||
tabIndex={0}
|
type="text"
|
||||||
|
size="small"
|
||||||
className={styles.hideButton}
|
className={styles.hideButton}
|
||||||
onClick={showConfirmModalHandler}
|
onClick={showConfirmModalHandler}
|
||||||
onKeyDown={onKeyDownHandler({
|
/>
|
||||||
Enter: showConfirmModalHandler,
|
|
||||||
' ': showConfirmModalHandler,
|
|
||||||
Esc: hideConfirmModalHandler,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{t('get_started.hide_this')}
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -77,7 +77,7 @@ const ColorForm = () => {
|
||||||
<div className={styles.darkModeTip}>
|
<div className={styles.darkModeTip}>
|
||||||
{t('sign_in_exp.color.dark_mode_reset_tip')}
|
{t('sign_in_exp.color.dark_mode_reset_tip')}
|
||||||
<Button
|
<Button
|
||||||
type="plain"
|
type="text"
|
||||||
size="small"
|
size="small"
|
||||||
title="sign_in_exp.color.reset"
|
title="sign_in_exp.color.reset"
|
||||||
onClick={handleResetColor}
|
onClick={handleResetColor}
|
||||||
|
|
|
@ -20,6 +20,6 @@
|
||||||
height: 16px;
|
height: 16px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
margin-left: _.unit(1);
|
margin-left: _.unit(1);
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.closeIcon {
|
.closeIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -92,7 +92,7 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
|
||||||
<CardTitle size="small" title="sign_in_exp.title" subtitle="sign_in_exp.description" />
|
<CardTitle size="small" title="sign_in_exp.title" subtitle="sign_in_exp.description" />
|
||||||
<Spacer />
|
<Spacer />
|
||||||
<Button
|
<Button
|
||||||
type="plain"
|
type="text"
|
||||||
size="small"
|
size="small"
|
||||||
title="general.skip"
|
title="general.skip"
|
||||||
isLoading={isLoading}
|
isLoading={isLoading}
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import { languages as uiLanguageNameMapping } from '@logto/language-kit';
|
import { languages as uiLanguageNameMapping } from '@logto/language-kit';
|
||||||
import { SignInExperience } from '@logto/schemas';
|
import { SignInExperience } from '@logto/schemas';
|
||||||
import classNames from 'classnames';
|
import { useEffect, useMemo } from 'react';
|
||||||
import { useEffect, useMemo, useState } from 'react';
|
|
||||||
import { Controller, useFormContext } from 'react-hook-form';
|
import { Controller, useFormContext } from 'react-hook-form';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import useSWR from 'swr';
|
import useSWR from 'swr';
|
||||||
|
@ -9,13 +8,11 @@ import useSWR from 'swr';
|
||||||
import FormField from '@/components/FormField';
|
import FormField from '@/components/FormField';
|
||||||
import Select from '@/components/Select';
|
import Select from '@/components/Select';
|
||||||
import Switch from '@/components/Switch';
|
import Switch from '@/components/Switch';
|
||||||
import * as textButtonStyles from '@/components/TextButton/index.module.scss';
|
|
||||||
import { RequestError } from '@/hooks/use-api';
|
import { RequestError } from '@/hooks/use-api';
|
||||||
import useUiLanguages from '@/hooks/use-ui-languages';
|
import useUiLanguages from '@/hooks/use-ui-languages';
|
||||||
|
|
||||||
import useLanguageEditorContext from '../hooks/use-language-editor-context';
|
|
||||||
import { SignInExperienceForm } from '../types';
|
import { SignInExperienceForm } from '../types';
|
||||||
import ManageLanguageModal from './ManageLanguageModal';
|
import ManageLanguageButton from './ManageLanguage/ManageLanguageButton';
|
||||||
import * as styles from './index.module.scss';
|
import * as styles from './index.module.scss';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -28,7 +25,6 @@ const LanguagesForm = ({ isManageLanguageVisible = false }: Props) => {
|
||||||
const { watch, control, register, setValue } = useFormContext<SignInExperienceForm>();
|
const { watch, control, register, setValue } = useFormContext<SignInExperienceForm>();
|
||||||
const isAutoDetect = watch('languageInfo.autoDetect');
|
const isAutoDetect = watch('languageInfo.autoDetect');
|
||||||
const selectedDefaultLanguage = watch('languageInfo.fallbackLanguage');
|
const selectedDefaultLanguage = watch('languageInfo.fallbackLanguage');
|
||||||
const [isManageLanguageFormOpen, setIsManageLanguageFormOpen] = useState(false);
|
|
||||||
const { languages } = useUiLanguages();
|
const { languages } = useUiLanguages();
|
||||||
|
|
||||||
const languageOptions = useMemo(() => {
|
const languageOptions = useMemo(() => {
|
||||||
|
@ -38,9 +34,6 @@ const LanguagesForm = ({ isManageLanguageVisible = false }: Props) => {
|
||||||
}));
|
}));
|
||||||
}, [languages]);
|
}, [languages]);
|
||||||
|
|
||||||
const { context: languageEditorContext, Provider: LanguageEditorContextProvider } =
|
|
||||||
useLanguageEditorContext(languages);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!languages.includes(selectedDefaultLanguage)) {
|
if (!languages.includes(selectedDefaultLanguage)) {
|
||||||
setValue(
|
setValue(
|
||||||
|
@ -58,19 +51,10 @@ const LanguagesForm = ({ isManageLanguageVisible = false }: Props) => {
|
||||||
{...register('languageInfo.autoDetect')}
|
{...register('languageInfo.autoDetect')}
|
||||||
label={t('sign_in_exp.others.languages.description')}
|
label={t('sign_in_exp.others.languages.description')}
|
||||||
/>
|
/>
|
||||||
|
{isManageLanguageVisible && (
|
||||||
|
<ManageLanguageButton className={styles.manageLanguageButton} />
|
||||||
|
)}
|
||||||
</FormField>
|
</FormField>
|
||||||
{isManageLanguageVisible && (
|
|
||||||
// TODO: @yijun
|
|
||||||
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
||||||
<div
|
|
||||||
className={classNames(textButtonStyles.button, styles.manageLanguage)}
|
|
||||||
onClick={() => {
|
|
||||||
setIsManageLanguageFormOpen(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t('sign_in_exp.others.languages.manage_language')}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<FormField title="sign_in_exp.others.languages.default_language">
|
<FormField title="sign_in_exp.others.languages.default_language">
|
||||||
<Controller
|
<Controller
|
||||||
name="languageInfo.fallbackLanguage"
|
name="languageInfo.fallbackLanguage"
|
||||||
|
@ -85,15 +69,6 @@ const LanguagesForm = ({ isManageLanguageVisible = false }: Props) => {
|
||||||
: t('sign_in_exp.others.languages.default_language_description_fixed')}
|
: t('sign_in_exp.others.languages.default_language_description_fixed')}
|
||||||
</div>
|
</div>
|
||||||
</FormField>
|
</FormField>
|
||||||
<LanguageEditorContextProvider value={languageEditorContext}>
|
|
||||||
<ManageLanguageModal
|
|
||||||
isOpen={isManageLanguageFormOpen}
|
|
||||||
languageTags={languages}
|
|
||||||
onClose={() => {
|
|
||||||
setIsManageLanguageFormOpen(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</LanguageEditorContextProvider>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,15 +5,12 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.addLanguageButton {
|
.addLanguageButton {
|
||||||
height: 38px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-color: var(--color-outline);
|
|
||||||
color: var(--color-text);
|
|
||||||
background: unset;
|
background: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttonIcon {
|
.buttonIcon {
|
||||||
color: var(--color-outline);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,6 +24,8 @@
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
max-height: 288px;
|
max-height: 288px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
box-shadow: var(--shadow-2);
|
||||||
|
|
||||||
|
|
||||||
.dropDownItem {
|
.dropDownItem {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -34,19 +33,18 @@
|
||||||
padding: _.unit(2);
|
padding: _.unit(2);
|
||||||
list-style: none;
|
list-style: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
font: var(--font-body-medium);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--color-hover);
|
background: var(--color-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.languageName {
|
.languageName {
|
||||||
font: var(--font-label-large);
|
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.languageTag {
|
.languageTag {
|
||||||
font: var(--font-body-medium);
|
color: var(--color-text-secondary);
|
||||||
color: var(--color-caption);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -7,6 +7,7 @@ import Plus from '@/assets/images/plus.svg';
|
||||||
import SearchIcon from '@/assets/images/search.svg';
|
import SearchIcon from '@/assets/images/search.svg';
|
||||||
import Button from '@/components/Button';
|
import Button from '@/components/Button';
|
||||||
import TextInput from '@/components/TextInput';
|
import TextInput from '@/components/TextInput';
|
||||||
|
import { onKeyDownHandler } from '@/utilities/a11y';
|
||||||
|
|
||||||
import * as style from './AddLanguageSelector.module.scss';
|
import * as style from './AddLanguageSelector.module.scss';
|
||||||
|
|
||||||
|
@ -54,6 +55,12 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
|
||||||
};
|
};
|
||||||
}, [isDropDownOpen, searchInputRef]);
|
}, [isDropDownOpen, searchInputRef]);
|
||||||
|
|
||||||
|
const handleSelect = (languageTag: LanguageTag) => {
|
||||||
|
onSelect(languageTag);
|
||||||
|
setIsDropDownOpen(false);
|
||||||
|
setSearchInputValue('');
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={selectorRef} className={style.languageSelector}>
|
<div ref={selectorRef} className={style.languageSelector}>
|
||||||
<div className={style.input}>
|
<div className={style.input}>
|
||||||
|
@ -61,7 +68,7 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
|
||||||
className={classNames(style.addLanguageButton, isDropDownOpen && style.hidden)}
|
className={classNames(style.addLanguageButton, isDropDownOpen && style.hidden)}
|
||||||
icon={<Plus className={style.buttonIcon} />}
|
icon={<Plus className={style.buttonIcon} />}
|
||||||
title="sign_in_exp.others.manage_language.add_language"
|
title="sign_in_exp.others.manage_language.add_language"
|
||||||
type="outline"
|
type="default"
|
||||||
size="medium"
|
size="medium"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsDropDownOpen(true);
|
setIsDropDownOpen(true);
|
||||||
|
@ -81,15 +88,16 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
|
||||||
{isDropDownOpen && filteredOptions.length > 0 && (
|
{isDropDownOpen && filteredOptions.length > 0 && (
|
||||||
<ul className={style.dropDown}>
|
<ul className={style.dropDown}>
|
||||||
{filteredOptions.map((languageTag) => (
|
{filteredOptions.map((languageTag) => (
|
||||||
// TODO: @yijun
|
|
||||||
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
|
|
||||||
<li
|
<li
|
||||||
key={languageTag}
|
key={languageTag}
|
||||||
|
role="tab"
|
||||||
|
tabIndex={0}
|
||||||
className={style.dropDownItem}
|
className={style.dropDownItem}
|
||||||
|
onKeyDown={onKeyDownHandler(() => {
|
||||||
|
handleSelect(languageTag);
|
||||||
|
})}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
onSelect(languageTag);
|
handleSelect(languageTag);
|
||||||
setIsDropDownOpen(false);
|
|
||||||
setSearchInputValue('');
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className={style.languageName}>{uiLanguageNameMapping[languageTag]}</div>
|
<div className={style.languageName}>{uiLanguageNameMapping[languageTag]}</div>
|
|
@ -0,0 +1,31 @@
|
||||||
|
@use '@/scss/underscore' as _;
|
||||||
|
|
||||||
|
.sectionTitle {
|
||||||
|
@include _.subhead-cap-small;
|
||||||
|
color: var(--color-neutral-variant-60);
|
||||||
|
background-color: var(--color-layer-light);
|
||||||
|
padding: _.unit(1) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionDataKey {
|
||||||
|
padding: _.unit(4) _.unit(5);
|
||||||
|
font: var(--font-body-medium);
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionBuiltInText {
|
||||||
|
padding: _.unit(2) _.unit(3);
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-layer-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputCell {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionInputArea {
|
||||||
|
position: absolute;
|
||||||
|
inset: _.unit(2) _.unit(5);
|
||||||
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
import { Translation } from '@logto/schemas';
|
import { Translation } from '@logto/schemas';
|
||||||
import { useFormContext } from 'react-hook-form';
|
import { useFormContext } from 'react-hook-form';
|
||||||
|
|
||||||
import TextInput from '@/components/TextInput';
|
import Textarea from '@/components/Textarea';
|
||||||
|
|
||||||
import * as style from './EditSection.module.scss';
|
import * as style from './EditSection.module.scss';
|
||||||
|
|
||||||
|
@ -27,10 +27,10 @@ const EditSection = ({ dataKey, data }: EditSectionProps) => {
|
||||||
<tr key={fieldKey}>
|
<tr key={fieldKey}>
|
||||||
<td className={style.sectionDataKey}>{field}</td>
|
<td className={style.sectionDataKey}>{field}</td>
|
||||||
<td>
|
<td>
|
||||||
<TextInput readOnly value={value} className={style.sectionBuiltInText} />
|
<div className={style.sectionBuiltInText}>{value}</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td className={style.inputCell}>
|
||||||
<TextInput {...register(fieldKey)} />
|
<Textarea className={style.sectionInputArea} {...register(fieldKey)} />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
|
@ -1,6 +1,6 @@
|
||||||
@use '@/scss/underscore' as _;
|
@use '@/scss/underscore' as _;
|
||||||
|
|
||||||
.languageEditor {
|
.languageDetails {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
> span {
|
> span {
|
||||||
margin-left: _.unit(2);
|
margin-left: _.unit(2);
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.builtInFlag {
|
.builtInFlag {
|
||||||
|
@ -32,34 +32,30 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
border-top: 1px solid var(--color-border);
|
border-top: 1px solid var(--color-divider);
|
||||||
height: 481px;
|
height: 481px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
> table {
|
> table {
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
> thead > tr {
|
> thead {
|
||||||
> th {
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
// Note: cells with `position: relative` style will overlap this sticky header, add a z-index to fix it.
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
tr > th {
|
||||||
|
padding: _.unit(1) _.unit(5);
|
||||||
font: var(--font-label-large);
|
font: var(--font-label-large);
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
background-color: var(--color-layer-1);
|
background-color: var(--color-layer-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
> th:first-child {
|
|
||||||
width: 300px;
|
|
||||||
padding: _.unit(1) _.unit(5);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> tbody > tr {
|
> tbody > tr > td {
|
||||||
> td {
|
padding: _.unit(2) _.unit(5);
|
||||||
border: none;
|
border: none;
|
||||||
}
|
|
||||||
|
|
||||||
> td:first-child {
|
|
||||||
padding: _.unit(1) _.unit(5);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -69,9 +65,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.clearButton {
|
.clearButton {
|
||||||
display: flex;
|
margin-left: _.unit(1);
|
||||||
margin-left: _.unit(2);
|
}
|
||||||
flex-direction: row-reverse;
|
|
||||||
|
.clearIcon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitle {
|
.sectionTitle {
|
||||||
|
@ -91,7 +90,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-top: 1px solid var(--color-border);
|
border-top: 1px solid var(--color-divider);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
padding: _.unit(5);
|
padding: _.unit(5);
|
|
@ -10,27 +10,30 @@ import { toast } from 'react-hot-toast';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import useSWR, { useSWRConfig } from 'swr';
|
import useSWR, { useSWRConfig } from 'swr';
|
||||||
|
|
||||||
|
import Clear from '@/assets/images/clear.svg';
|
||||||
import Delete from '@/assets/images/delete.svg';
|
import Delete from '@/assets/images/delete.svg';
|
||||||
import Button from '@/components/Button';
|
import Button from '@/components/Button';
|
||||||
import ConfirmModal from '@/components/ConfirmModal';
|
import ConfirmModal from '@/components/ConfirmModal';
|
||||||
import IconButton from '@/components/IconButton';
|
import IconButton from '@/components/IconButton';
|
||||||
import useApi, { RequestError } from '@/hooks/use-api';
|
import useApi, { RequestError } from '@/hooks/use-api';
|
||||||
|
import useUiLanguages from '@/hooks/use-ui-languages';
|
||||||
import { CustomPhraseResponse } from '@/types/custom-phrase';
|
import { CustomPhraseResponse } from '@/types/custom-phrase';
|
||||||
|
|
||||||
import { LanguageEditorContext } from '../../hooks/use-language-editor-context';
|
import { createEmptyUiTranslation, flattenTranslation } from '../../../utilities';
|
||||||
import { createEmptyUiTranslation, flattenTranslation } from '../../utilities';
|
|
||||||
import EditSection from './EditSection';
|
import EditSection from './EditSection';
|
||||||
import * as style from './LanguageEditor.module.scss';
|
import * as style from './LanguageDetails.module.scss';
|
||||||
|
import { LanguageEditorContext } from './use-language-editor-context';
|
||||||
|
|
||||||
const emptyUiTranslation = createEmptyUiTranslation();
|
const emptyUiTranslation = createEmptyUiTranslation();
|
||||||
|
|
||||||
const LanguageEditor = () => {
|
const LanguageDetails = () => {
|
||||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||||
|
|
||||||
const { data: signInExperience } = useSWR<SignInExperience, RequestError>('/api/sign-in-exp');
|
const { data: signInExperience } = useSWR<SignInExperience, RequestError>('/api/sign-in-exp');
|
||||||
|
|
||||||
const { languages, selectedLanguage, setIsDirty, setSelectedLanguage, stopAddingLanguage } =
|
const { languages } = useUiLanguages();
|
||||||
useContext(LanguageEditorContext);
|
|
||||||
|
const { selectedLanguage, setIsDirty, setSelectedLanguage } = useContext(LanguageEditorContext);
|
||||||
|
|
||||||
const [isDeletionAlertOpen, setIsDeletionAlertOpen] = useState(false);
|
const [isDeletionAlertOpen, setIsDeletionAlertOpen] = useState(false);
|
||||||
|
|
||||||
|
@ -105,32 +108,11 @@ const LanguageEditor = () => {
|
||||||
|
|
||||||
void globalMutate('/api/custom-phrases');
|
void globalMutate('/api/custom-phrases');
|
||||||
|
|
||||||
stopAddingLanguage();
|
|
||||||
|
|
||||||
return updatedCustomPhrase;
|
return updatedCustomPhrase;
|
||||||
},
|
},
|
||||||
[api, globalMutate, stopAddingLanguage]
|
[api, globalMutate]
|
||||||
);
|
);
|
||||||
|
|
||||||
const onDelete = useCallback(() => {
|
|
||||||
if (!customPhrase && !isDefaultLanguage) {
|
|
||||||
stopAddingLanguage(true);
|
|
||||||
setSelectedLanguage(
|
|
||||||
languages.find((languageTag) => languageTag !== selectedLanguage) ?? 'en'
|
|
||||||
);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setIsDeletionAlertOpen(true);
|
|
||||||
}, [
|
|
||||||
customPhrase,
|
|
||||||
isDefaultLanguage,
|
|
||||||
languages,
|
|
||||||
selectedLanguage,
|
|
||||||
setSelectedLanguage,
|
|
||||||
stopAddingLanguage,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const onConfirmDeletion = useCallback(async () => {
|
const onConfirmDeletion = useCallback(async () => {
|
||||||
setIsDeletionAlertOpen(false);
|
setIsDeletionAlertOpen(false);
|
||||||
|
|
||||||
|
@ -164,7 +146,7 @@ const LanguageEditor = () => {
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={style.languageEditor}>
|
<div className={style.languageDetails}>
|
||||||
<div className={style.title}>
|
<div className={style.title}>
|
||||||
<div className={style.languageInfo}>
|
<div className={style.languageInfo}>
|
||||||
{uiLanguageNameMapping[selectedLanguage]}
|
{uiLanguageNameMapping[selectedLanguage]}
|
||||||
|
@ -176,7 +158,12 @@ const LanguageEditor = () => {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{!isBuiltIn && (
|
{!isBuiltIn && (
|
||||||
<IconButton onClick={onDelete}>
|
<IconButton
|
||||||
|
tooltip="sign_in_exp.others.manage_language.deletion_tip"
|
||||||
|
onClick={() => {
|
||||||
|
setIsDeletionAlertOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Delete />
|
<Delete />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
)}
|
)}
|
||||||
|
@ -194,15 +181,13 @@ const LanguageEditor = () => {
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>{t('sign_in_exp.others.manage_language.key')}</th>
|
<th>{t('sign_in_exp.others.manage_language.key')}</th>
|
||||||
<th>{t('sign_in_exp.others.manage_language.logto_source_language')}</th>
|
<th>{t('sign_in_exp.others.manage_language.logto_source_values')}</th>
|
||||||
<th>
|
<th>
|
||||||
<span className={style.customValuesColumn}>
|
<span className={style.customValuesColumn}>
|
||||||
{t('sign_in_exp.others.manage_language.custom_values')}
|
{t('sign_in_exp.others.manage_language.custom_values')}
|
||||||
<Button
|
<IconButton
|
||||||
type="plain"
|
|
||||||
title="sign_in_exp.others.manage_language.clear_all"
|
|
||||||
className={style.clearButton}
|
className={style.clearButton}
|
||||||
icon={<Delete />}
|
tooltip="sign_in_exp.others.manage_language.clear_all_tip"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
for (const [key, value] of Object.entries(
|
for (const [key, value] of Object.entries(
|
||||||
flattenTranslation(emptyUiTranslation)
|
flattenTranslation(emptyUiTranslation)
|
||||||
|
@ -210,7 +195,9 @@ const LanguageEditor = () => {
|
||||||
setValue(key, value, { shouldDirty: true });
|
setValue(key, value, { shouldDirty: true });
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
<Clear className={style.clearIcon} />
|
||||||
|
</IconButton>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -260,4 +247,4 @@ const LanguageEditor = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default LanguageEditor;
|
export default LanguageDetails;
|
|
@ -7,13 +7,13 @@
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
||||||
.languageName {
|
.languageName {
|
||||||
font: var(--font-title-medium);
|
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
font: var(--font-label-large);
|
||||||
}
|
}
|
||||||
|
|
||||||
.languageTag {
|
.languageTag {
|
||||||
font: var(--font-label-large);
|
color: var(--color-text-secondary);
|
||||||
color: var(--color-caption);
|
font: var(--font-body-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
|
@ -2,6 +2,8 @@ import { languages, LanguageTag } from '@logto/language-kit';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { useEffect, useRef } from 'react';
|
import { useEffect, useRef } from 'react';
|
||||||
|
|
||||||
|
import { onKeyDownHandler } from '@/utilities/a11y';
|
||||||
|
|
||||||
import * as style from './LanguageItem.module.scss';
|
import * as style from './LanguageItem.module.scss';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -19,18 +21,22 @@ const LanguageItem = ({ languageTag, isSelected, onClick }: Props) => {
|
||||||
}
|
}
|
||||||
}, [isSelected]);
|
}, [isSelected]);
|
||||||
|
|
||||||
|
const handleSelect = () => {
|
||||||
|
if (isSelected) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onClick();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// TODO: @yijun
|
|
||||||
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
||||||
<div
|
<div
|
||||||
ref={itemRef}
|
ref={itemRef}
|
||||||
|
role="tab"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-selected={isSelected}
|
||||||
className={classNames(style.languageItem, isSelected && style.selected)}
|
className={classNames(style.languageItem, isSelected && style.selected)}
|
||||||
onClick={() => {
|
onClick={handleSelect}
|
||||||
if (isSelected) {
|
onKeyDown={onKeyDownHandler(handleSelect)}
|
||||||
return;
|
|
||||||
}
|
|
||||||
onClick();
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div className={style.languageName}>{languages[languageTag]}</div>
|
<div className={style.languageName}>{languages[languageTag]}</div>
|
||||||
<div className={style.languageTag}>{languageTag}</div>
|
<div className={style.languageTag}>{languageTag}</div>
|
|
@ -5,7 +5,7 @@
|
||||||
padding: _.unit(3) _.unit(2);
|
padding: _.unit(3) _.unit(2);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background-color: var(--color-layer-light);
|
background-color: var(--color-layer-light);
|
||||||
border-right: 1px solid var(--color-border);
|
border-right: 1px solid var(--color-divider);
|
||||||
|
|
||||||
.languageItemList {
|
.languageItemList {
|
||||||
margin-top: _.unit(3);
|
margin-top: _.unit(3);
|
|
@ -5,22 +5,23 @@ import {
|
||||||
} from '@logto/language-kit';
|
} from '@logto/language-kit';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
|
|
||||||
import { LanguageEditorContext } from '../../hooks/use-language-editor-context';
|
import useUiLanguages from '@/hooks/use-ui-languages';
|
||||||
|
|
||||||
import AddLanguageSelector from './AddLanguageSelector';
|
import AddLanguageSelector from './AddLanguageSelector';
|
||||||
import LanguageItem from './LanguageItem';
|
import LanguageItem from './LanguageItem';
|
||||||
import * as style from './LanguageNav.module.scss';
|
import * as style from './LanguageNav.module.scss';
|
||||||
|
import { LanguageEditorContext } from './use-language-editor-context';
|
||||||
|
|
||||||
const LanguageNav = () => {
|
const LanguageNav = () => {
|
||||||
|
const { languages, addLanguage } = useUiLanguages();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
languages,
|
|
||||||
selectedLanguage,
|
selectedLanguage,
|
||||||
isAddingLanguage,
|
|
||||||
isDirty,
|
isDirty,
|
||||||
setConfirmationState,
|
setConfirmationState,
|
||||||
setSelectedLanguage,
|
setSelectedLanguage,
|
||||||
setPreSelectedLanguage,
|
setPreSelectedLanguage,
|
||||||
setPreAddedLanguage,
|
setPreAddedLanguage,
|
||||||
startAddingLanguage,
|
|
||||||
} = useContext(LanguageEditorContext);
|
} = useContext(LanguageEditorContext);
|
||||||
|
|
||||||
const languageOptions = Object.keys(uiLanguageNameMapping).filter(
|
const languageOptions = Object.keys(uiLanguageNameMapping).filter(
|
||||||
|
@ -28,19 +29,20 @@ const LanguageNav = () => {
|
||||||
isLanguageTag(languageTag) && !languages.includes(languageTag)
|
isLanguageTag(languageTag) && !languages.includes(languageTag)
|
||||||
);
|
);
|
||||||
|
|
||||||
const onAddLanguage = (languageTag: LanguageTag) => {
|
const onAddLanguage = async (languageTag: LanguageTag) => {
|
||||||
if (isDirty || isAddingLanguage) {
|
if (isDirty) {
|
||||||
setPreAddedLanguage(languageTag);
|
setPreAddedLanguage(languageTag);
|
||||||
setConfirmationState('try-add-language');
|
setConfirmationState('try-add-language');
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
startAddingLanguage(languageTag);
|
await addLanguage(languageTag);
|
||||||
|
setSelectedLanguage(languageTag);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onSwitchLanguage = (languageTag: LanguageTag) => {
|
const onSwitchLanguage = (languageTag: LanguageTag) => {
|
||||||
if (isDirty || isAddingLanguage) {
|
if (isDirty) {
|
||||||
setPreSelectedLanguage(languageTag);
|
setPreSelectedLanguage(languageTag);
|
||||||
setConfirmationState('try-switch-language');
|
setConfirmationState('try-switch-language');
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-divider);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
|
@ -1,53 +1,55 @@
|
||||||
import { LanguageTag } from '@logto/language-kit';
|
import { useContext, useEffect } from 'react';
|
||||||
import { useContext } from 'react';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import Modal from 'react-modal';
|
import Modal from 'react-modal';
|
||||||
|
|
||||||
import ConfirmModal from '@/components/ConfirmModal';
|
import ConfirmModal from '@/components/ConfirmModal';
|
||||||
import ModalLayout from '@/components/ModalLayout';
|
import ModalLayout from '@/components/ModalLayout';
|
||||||
|
import useUiLanguages from '@/hooks/use-ui-languages';
|
||||||
import * as modalStyles from '@/scss/modal.module.scss';
|
import * as modalStyles from '@/scss/modal.module.scss';
|
||||||
|
|
||||||
import { LanguageEditorContext } from '../../hooks/use-language-editor-context';
|
import LanguageDetails from './LanguageDetails';
|
||||||
import LanguageEditor from './LanguageEditor';
|
|
||||||
import LanguageNav from './LanguageNav';
|
import LanguageNav from './LanguageNav';
|
||||||
import * as style from './index.module.scss';
|
import * as style from './index.module.scss';
|
||||||
|
import useLanguageEditorContext, { LanguageEditorContext } from './use-language-editor-context';
|
||||||
|
|
||||||
type ManageLanguageModalProps = {
|
type Props = {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
languageTags: LanguageTag[];
|
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ManageLanguageModal = ({ isOpen, languageTags, onClose }: ManageLanguageModalProps) => {
|
const LanguageEditorModal = ({ isOpen, onClose }: Props) => {
|
||||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||||
|
const { languages, addLanguage } = useUiLanguages();
|
||||||
|
|
||||||
|
const defaultSelectedLanguage = languages[0] ?? 'en';
|
||||||
|
|
||||||
const {
|
const {
|
||||||
preSelectedLanguage,
|
preSelectedLanguage,
|
||||||
preAddedLanguage,
|
preAddedLanguage,
|
||||||
isAddingLanguage,
|
|
||||||
isDirty,
|
isDirty,
|
||||||
confirmationState,
|
confirmationState,
|
||||||
setSelectedLanguage,
|
setSelectedLanguage,
|
||||||
setPreSelectedLanguage,
|
setPreSelectedLanguage,
|
||||||
|
setPreAddedLanguage,
|
||||||
setConfirmationState,
|
setConfirmationState,
|
||||||
startAddingLanguage,
|
|
||||||
stopAddingLanguage,
|
|
||||||
} = useContext(LanguageEditorContext);
|
} = useContext(LanguageEditorContext);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setSelectedLanguage(defaultSelectedLanguage);
|
||||||
|
}, [defaultSelectedLanguage, setSelectedLanguage]);
|
||||||
|
|
||||||
const onCloseModal = () => {
|
const onCloseModal = () => {
|
||||||
if (isAddingLanguage || isDirty) {
|
if (isDirty) {
|
||||||
setConfirmationState('try-close');
|
setConfirmationState('try-close');
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
onClose();
|
onClose();
|
||||||
setSelectedLanguage(languageTags[0] ?? 'en');
|
setSelectedLanguage(languages[0] ?? 'en');
|
||||||
};
|
};
|
||||||
|
|
||||||
const onConfirmUnsavedChanges = () => {
|
const onConfirmUnsavedChanges = async () => {
|
||||||
stopAddingLanguage(true);
|
|
||||||
|
|
||||||
if (confirmationState === 'try-close') {
|
if (confirmationState === 'try-close') {
|
||||||
onClose();
|
onClose();
|
||||||
}
|
}
|
||||||
|
@ -58,7 +60,9 @@ const ManageLanguageModal = ({ isOpen, languageTags, onClose }: ManageLanguageMo
|
||||||
}
|
}
|
||||||
|
|
||||||
if (confirmationState === 'try-add-language' && preAddedLanguage) {
|
if (confirmationState === 'try-add-language' && preAddedLanguage) {
|
||||||
startAddingLanguage(preAddedLanguage);
|
await addLanguage(preAddedLanguage);
|
||||||
|
setSelectedLanguage(preAddedLanguage);
|
||||||
|
setPreAddedLanguage(undefined);
|
||||||
}
|
}
|
||||||
|
|
||||||
setConfirmationState('none');
|
setConfirmationState('none');
|
||||||
|
@ -74,12 +78,13 @@ const ManageLanguageModal = ({ isOpen, languageTags, onClose }: ManageLanguageMo
|
||||||
>
|
>
|
||||||
<div className={style.container}>
|
<div className={style.container}>
|
||||||
<LanguageNav />
|
<LanguageNav />
|
||||||
<LanguageEditor />
|
<LanguageDetails />
|
||||||
</div>
|
</div>
|
||||||
</ModalLayout>
|
</ModalLayout>
|
||||||
<ConfirmModal
|
<ConfirmModal
|
||||||
isOpen={confirmationState !== 'none'}
|
isOpen={confirmationState !== 'none'}
|
||||||
cancelButtonText="general.stay_on_page"
|
cancelButtonText="general.stay_on_page"
|
||||||
|
confirmButtonText="general.leave_page"
|
||||||
onCancel={() => {
|
onCancel={() => {
|
||||||
setConfirmationState('none');
|
setConfirmationState('none');
|
||||||
}}
|
}}
|
||||||
|
@ -91,4 +96,15 @@ const ManageLanguageModal = ({ isOpen, languageTags, onClose }: ManageLanguageMo
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ManageLanguageModal;
|
const LanguageEditor = (props: Props) => {
|
||||||
|
const { context: languageEditorContext, Provider: LanguageEditorContextProvider } =
|
||||||
|
useLanguageEditorContext();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LanguageEditorContextProvider value={languageEditorContext}>
|
||||||
|
<LanguageEditorModal {...props} />
|
||||||
|
</LanguageEditorContextProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LanguageEditor;
|
|
@ -1,5 +1,5 @@
|
||||||
import { LanguageTag } from '@logto/language-kit';
|
import { LanguageTag } from '@logto/language-kit';
|
||||||
import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
|
import { createContext, useMemo, useState } from 'react';
|
||||||
|
|
||||||
const noop = () => {
|
const noop = () => {
|
||||||
throw new Error('Context provider not found');
|
throw new Error('Context provider not found');
|
||||||
|
@ -8,11 +8,9 @@ const noop = () => {
|
||||||
export type ConfirmationState = 'none' | 'try-close' | 'try-switch-language' | 'try-add-language';
|
export type ConfirmationState = 'none' | 'try-close' | 'try-switch-language' | 'try-add-language';
|
||||||
|
|
||||||
export type Context = {
|
export type Context = {
|
||||||
languages: LanguageTag[];
|
|
||||||
selectedLanguage: LanguageTag;
|
selectedLanguage: LanguageTag;
|
||||||
preSelectedLanguage?: LanguageTag;
|
preSelectedLanguage?: LanguageTag;
|
||||||
preAddedLanguage?: LanguageTag;
|
preAddedLanguage?: LanguageTag;
|
||||||
isAddingLanguage: boolean;
|
|
||||||
isDirty: boolean;
|
isDirty: boolean;
|
||||||
confirmationState: ConfirmationState;
|
confirmationState: ConfirmationState;
|
||||||
setSelectedLanguage: React.Dispatch<React.SetStateAction<LanguageTag>>;
|
setSelectedLanguage: React.Dispatch<React.SetStateAction<LanguageTag>>;
|
||||||
|
@ -20,16 +18,12 @@ export type Context = {
|
||||||
setPreAddedLanguage: React.Dispatch<React.SetStateAction<LanguageTag | undefined>>;
|
setPreAddedLanguage: React.Dispatch<React.SetStateAction<LanguageTag | undefined>>;
|
||||||
setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
|
setIsDirty: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
setConfirmationState: React.Dispatch<React.SetStateAction<ConfirmationState>>;
|
setConfirmationState: React.Dispatch<React.SetStateAction<ConfirmationState>>;
|
||||||
startAddingLanguage: (languageTag: LanguageTag) => void;
|
|
||||||
stopAddingLanguage: (isCanceled?: boolean) => void;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const LanguageEditorContext = createContext<Context>({
|
export const LanguageEditorContext = createContext<Context>({
|
||||||
languages: [],
|
|
||||||
selectedLanguage: 'en',
|
selectedLanguage: 'en',
|
||||||
preSelectedLanguage: undefined,
|
preSelectedLanguage: undefined,
|
||||||
preAddedLanguage: undefined,
|
preAddedLanguage: undefined,
|
||||||
isAddingLanguage: false,
|
|
||||||
isDirty: false,
|
isDirty: false,
|
||||||
confirmationState: 'none',
|
confirmationState: 'none',
|
||||||
setSelectedLanguage: noop,
|
setSelectedLanguage: noop,
|
||||||
|
@ -37,53 +31,20 @@ export const LanguageEditorContext = createContext<Context>({
|
||||||
setPreAddedLanguage: noop,
|
setPreAddedLanguage: noop,
|
||||||
setIsDirty: noop,
|
setIsDirty: noop,
|
||||||
setConfirmationState: noop,
|
setConfirmationState: noop,
|
||||||
startAddingLanguage: noop,
|
|
||||||
stopAddingLanguage: noop,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const useLanguageEditorContext = (defaultLanguages: LanguageTag[]) => {
|
const useLanguageEditorContext = () => {
|
||||||
const [languages, setLanguages] = useState(defaultLanguages);
|
const [selectedLanguage, setSelectedLanguage] = useState<LanguageTag>('en');
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setLanguages(defaultLanguages);
|
|
||||||
}, [defaultLanguages]);
|
|
||||||
|
|
||||||
const [selectedLanguage, setSelectedLanguage] = useState<LanguageTag>(languages[0] ?? 'en');
|
|
||||||
const [preSelectedLanguage, setPreSelectedLanguage] = useState<LanguageTag>();
|
const [preSelectedLanguage, setPreSelectedLanguage] = useState<LanguageTag>();
|
||||||
const [preAddedLanguage, setPreAddedLanguage] = useState<LanguageTag>();
|
const [preAddedLanguage, setPreAddedLanguage] = useState<LanguageTag>();
|
||||||
const [isAddingLanguage, setIsAddingLanguage] = useState(false);
|
|
||||||
const [isDirty, setIsDirty] = useState(false);
|
const [isDirty, setIsDirty] = useState(false);
|
||||||
const [confirmationState, setConfirmationState] = useState<ConfirmationState>('none');
|
const [confirmationState, setConfirmationState] = useState<ConfirmationState>('none');
|
||||||
|
|
||||||
const startAddingLanguage = useCallback(
|
|
||||||
(language: LanguageTag) => {
|
|
||||||
setLanguages([...new Set([language, ...defaultLanguages])].slice().sort());
|
|
||||||
setSelectedLanguage(language);
|
|
||||||
setIsAddingLanguage(true);
|
|
||||||
},
|
|
||||||
[defaultLanguages]
|
|
||||||
);
|
|
||||||
|
|
||||||
const stopAddingLanguage = useCallback(
|
|
||||||
(isCanceled = false) => {
|
|
||||||
if (isAddingLanguage) {
|
|
||||||
if (isCanceled) {
|
|
||||||
setLanguages(defaultLanguages);
|
|
||||||
setSelectedLanguage(languages[0] ?? 'en');
|
|
||||||
}
|
|
||||||
setIsAddingLanguage(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[defaultLanguages, isAddingLanguage, languages]
|
|
||||||
);
|
|
||||||
|
|
||||||
const context = useMemo<Context>(
|
const context = useMemo<Context>(
|
||||||
() => ({
|
() => ({
|
||||||
languages,
|
|
||||||
selectedLanguage,
|
selectedLanguage,
|
||||||
preSelectedLanguage,
|
preSelectedLanguage,
|
||||||
preAddedLanguage,
|
preAddedLanguage,
|
||||||
isAddingLanguage,
|
|
||||||
isDirty,
|
isDirty,
|
||||||
confirmationState,
|
confirmationState,
|
||||||
setSelectedLanguage,
|
setSelectedLanguage,
|
||||||
|
@ -91,20 +52,8 @@ const useLanguageEditorContext = (defaultLanguages: LanguageTag[]) => {
|
||||||
setPreAddedLanguage,
|
setPreAddedLanguage,
|
||||||
setIsDirty,
|
setIsDirty,
|
||||||
setConfirmationState,
|
setConfirmationState,
|
||||||
startAddingLanguage,
|
|
||||||
stopAddingLanguage,
|
|
||||||
}),
|
}),
|
||||||
[
|
[confirmationState, isDirty, preAddedLanguage, preSelectedLanguage, selectedLanguage]
|
||||||
confirmationState,
|
|
||||||
isAddingLanguage,
|
|
||||||
isDirty,
|
|
||||||
languages,
|
|
||||||
preAddedLanguage,
|
|
||||||
preSelectedLanguage,
|
|
||||||
selectedLanguage,
|
|
||||||
startAddingLanguage,
|
|
||||||
stopAddingLanguage,
|
|
||||||
]
|
|
||||||
);
|
);
|
||||||
|
|
||||||
return {
|
return {
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
|
||||||
|
import LanguageEditor from './LanguageEditor';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ManageLanguageButton = ({ className }: Props) => {
|
||||||
|
const [isLanguageEditorOpen, setIsLanguageEditorOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
title="sign_in_exp.others.languages.manage_language"
|
||||||
|
className={className}
|
||||||
|
onClick={() => {
|
||||||
|
setIsLanguageEditorOpen(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<LanguageEditor
|
||||||
|
isOpen={isLanguageEditorOpen}
|
||||||
|
onClose={() => {
|
||||||
|
setIsLanguageEditorOpen(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ManageLanguageButton;
|
|
@ -1,16 +0,0 @@
|
||||||
@use '@/scss/underscore' as _;
|
|
||||||
|
|
||||||
.sectionTitle {
|
|
||||||
@include _.subhead-cap;
|
|
||||||
background-color: var(--color-layer-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionDataKey {
|
|
||||||
padding: _.unit(4) _.unit(5);
|
|
||||||
font: var(--font-body-medium);
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sectionBuiltInText {
|
|
||||||
padding: _.unit(2) 0;
|
|
||||||
}
|
|
|
@ -11,7 +11,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.primaryTag {
|
.primaryTag {
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.method {
|
.method {
|
||||||
|
@ -26,15 +26,16 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
|
margin-top: _.unit(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.manageLanguage {
|
.manageLanguageButton {
|
||||||
margin-top: _.unit(2);
|
margin-top: _.unit(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.defaultLanguageDescription {
|
.defaultLanguageDescription {
|
||||||
padding-top: _.unit(2);
|
padding-top: _.unit(2);
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.eyeIcon {
|
.eyeIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
@use '@/scss/underscore' as _;
|
@use '@/scss/underscore' as _;
|
||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
font: var(--font-body-medium);
|
font: var(--font-body-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -126,7 +126,8 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
|
||||||
<td>
|
<td>
|
||||||
<Button
|
<Button
|
||||||
title="user_details.connectors.remove"
|
title="user_details.connectors.remove"
|
||||||
type="plain"
|
type="text"
|
||||||
|
size="small"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setDeletingConnector(connector);
|
setDeletingConnector(connector);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -40,13 +40,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
font: var(--font-subhead-2);
|
font: var(--font-subhead-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font: var(--font-subhead-2);
|
font: var(--font-subhead-2);
|
||||||
color: var(--color-caption);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.verticalBar {
|
.verticalBar {
|
||||||
|
@ -56,7 +56,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.moreIcon {
|
.moreIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -87,5 +87,5 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.resetIcon {
|
.resetIcon {
|
||||||
color: var(--color-icon);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue