mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
refactor(console): settings (#2466)
This commit is contained in:
parent
6a7f08ab38
commit
94cb1f4a2f
10 changed files with 34 additions and 56 deletions
|
@ -6,7 +6,8 @@
|
|||
padding: _.unit(4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 554px;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.description {
|
||||
font: var(--font-body-medium);
|
||||
|
|
|
@ -1,13 +1,7 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.container {
|
||||
padding-bottom: 0;
|
||||
|
||||
.fields {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.textField {
|
||||
@include _.form-text-field;
|
||||
>:not(:first-child) {
|
||||
margin-top: _.unit(4);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,16 +8,15 @@ import { Controller, useForm } from 'react-hook-form';
|
|||
import { toast } from 'react-hot-toast';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import CardTitle from '@/components/CardTitle';
|
||||
import DetailsForm from '@/components/DetailsForm';
|
||||
import FormCard from '@/components/FormCard';
|
||||
import FormField from '@/components/FormField';
|
||||
import Select from '@/components/Select';
|
||||
import TabNav, { TabNavItem } from '@/components/TabNav';
|
||||
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
|
||||
import type { UserPreferences } from '@/hooks/use-user-preferences';
|
||||
import useUserPreferences from '@/hooks/use-user-preferences';
|
||||
import * as detailsStyles from '@/scss/details.module.scss';
|
||||
import * as resourcesStyles from '@/scss/resources.module.scss';
|
||||
|
||||
import ChangePassword from './components/ChangePassword';
|
||||
import * as styles from './index.module.scss';
|
||||
|
@ -49,17 +48,19 @@ const Settings = () => {
|
|||
});
|
||||
|
||||
return (
|
||||
<Card className={classNames(detailsStyles.container, styles.container)}>
|
||||
<div className={classNames(resourcesStyles.container, styles.container)}>
|
||||
<CardTitle title="settings.title" subtitle="settings.description" />
|
||||
<TabNav>
|
||||
<TabNavItem href="/settings">{t('settings.tabs.general')}</TabNavItem>
|
||||
</TabNav>
|
||||
{isLoading && <div>loading</div>}
|
||||
{error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
|
||||
{isLoaded && (
|
||||
<form className={detailsStyles.body} onSubmit={onSubmit}>
|
||||
<div className={styles.fields}>
|
||||
<FormField title="settings.language" className={styles.textField}>
|
||||
<DetailsForm
|
||||
isSubmitting={isSubmitting}
|
||||
isDirty={isDirty}
|
||||
onSubmit={onSubmit}
|
||||
onDiscard={reset}
|
||||
>
|
||||
<FormCard title="settings.settings" description="settings.settings_description">
|
||||
<FormField title="settings.language">
|
||||
<Controller
|
||||
name="language"
|
||||
control={control}
|
||||
|
@ -72,7 +73,7 @@ const Settings = () => {
|
|||
)}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField title="settings.appearance" className={styles.textField}>
|
||||
<FormField title="settings.appearance">
|
||||
<Controller
|
||||
name="appearanceMode"
|
||||
control={control}
|
||||
|
@ -99,22 +100,11 @@ const Settings = () => {
|
|||
/>
|
||||
</FormField>
|
||||
<ChangePassword />
|
||||
</div>
|
||||
<div className={detailsStyles.footer}>
|
||||
<div className={detailsStyles.footerMain}>
|
||||
<Button
|
||||
isLoading={isSubmitting}
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
size="large"
|
||||
title="general.save_changes"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</FormCard>
|
||||
</DetailsForm>
|
||||
)}
|
||||
<UnsavedChangesAlertModal hasUnsavedChanges={isDirty} />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
const settings = {
|
||||
title: 'Einstellungen',
|
||||
description: 'Verwalte die globalen Einstellungen',
|
||||
tabs: {
|
||||
general: 'Allgemein',
|
||||
},
|
||||
settings: 'Einstellungen',
|
||||
settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
|
||||
custom_domain: 'Benutzerdefinierte Domain',
|
||||
language: 'Sprache',
|
||||
appearance: 'Darstellung',
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
const settings = {
|
||||
title: 'Settings',
|
||||
description: 'Manage the global settings',
|
||||
tabs: {
|
||||
general: 'General',
|
||||
},
|
||||
settings: 'Settings',
|
||||
settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
|
||||
custom_domain: 'Custom domain',
|
||||
language: 'Language',
|
||||
appearance: 'Appearance',
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
const settings = {
|
||||
title: 'Paramètres',
|
||||
description: 'Gérer les paramètres globaux',
|
||||
tabs: {
|
||||
general: 'Général',
|
||||
},
|
||||
settings: 'Paramètres',
|
||||
settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
|
||||
custom_domain: 'Domaine personnalisé',
|
||||
language: 'Langue',
|
||||
appearance: 'Apparence',
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
const settings = {
|
||||
title: '설정',
|
||||
description: '전체 설정을 관리해보세요.',
|
||||
tabs: {
|
||||
general: '일반',
|
||||
},
|
||||
settings: '설정',
|
||||
settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
|
||||
custom_domain: '커스텀 도메인',
|
||||
language: '언어',
|
||||
appearance: '모습',
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
const settings = {
|
||||
title: 'Definições',
|
||||
description: 'Gerenciar as configurações globais',
|
||||
tabs: {
|
||||
general: 'Geral',
|
||||
},
|
||||
settings: 'Definições',
|
||||
settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
|
||||
custom_domain: 'Domínio personalizado',
|
||||
language: 'Linguagem',
|
||||
appearance: 'Aparência',
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
const settings = {
|
||||
title: 'Ayarlar',
|
||||
description: 'Genel ayarları yönet',
|
||||
tabs: {
|
||||
general: 'Genel',
|
||||
},
|
||||
settings: 'Ayarlar',
|
||||
settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
|
||||
custom_domain: 'Özel alan',
|
||||
language: 'Dil',
|
||||
appearance: 'Görünüm',
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
const settings = {
|
||||
title: '设置',
|
||||
description: '管理全局设置',
|
||||
tabs: {
|
||||
general: '通用',
|
||||
},
|
||||
settings: '设置',
|
||||
settings_description: 'It real sent your at. Amounted all shy set why followed declared.', // UNTRANSLATED
|
||||
custom_domain: '自定义域名',
|
||||
language: '语言',
|
||||
appearance: '外观',
|
||||
|
|
Loading…
Reference in a new issue