added translations, centered loading
This commit is contained in:
Richard
parent
ca62e3d882
commit
9754b67c91
1 changed files with 44 additions and 37 deletions
81
ui/src/components/user.tsx
vendored
81
ui/src/components/user.tsx
vendored
|
|
@ -196,11 +196,11 @@ export class User extends Component<any, UserState> {
|
||||||
return (
|
return (
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{this.state.loading ? (
|
{this.state.loading ? (
|
||||||
<h5>
|
<p class="text-center">
|
||||||
<svg class="icon icon-spinner spin">
|
<svg class="icon icon-spinner spin">
|
||||||
<use xlinkHref="#icon-spinner"></use>
|
<use xlinkHref="#icon-spinner"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</h5>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-md-8">
|
<div class="col-12 col-md-8">
|
||||||
|
|
@ -243,19 +243,19 @@ export class User extends Component<any, UserState> {
|
||||||
class="custom-select custom-select-sm w-auto"
|
class="custom-select custom-select-sm w-auto"
|
||||||
>
|
>
|
||||||
<option disabled>
|
<option disabled>
|
||||||
<T i18nKey="view">#</T>
|
{ i18n.t('view') }
|
||||||
</option>
|
</option>
|
||||||
<option value={View.Overview}>
|
<option value={View.Overview}>
|
||||||
<T i18nKey="overview">#</T>
|
{ i18n.t('overview') }
|
||||||
</option>
|
</option>
|
||||||
<option value={View.Comments}>
|
<option value={View.Comments}>
|
||||||
<T i18nKey="comments">#</T>
|
{ i18n.t('comments') }
|
||||||
</option>
|
</option>
|
||||||
<option value={View.Posts}>
|
<option value={View.Posts}>
|
||||||
<T i18nKey="posts">#</T>
|
{ i18n.t('posts') }
|
||||||
</option>
|
</option>
|
||||||
<option value={View.Saved}>
|
<option value={View.Saved}>
|
||||||
<T i18nKey="saved">#</T>
|
{ i18n.t('saved') }
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
<span class="ml-2">
|
<span class="ml-2">
|
||||||
|
|
@ -362,7 +362,7 @@ export class User extends Component<any, UserState> {
|
||||||
<li className="list-inline-item">{user.name}</li>
|
<li className="list-inline-item">{user.name}</li>
|
||||||
{user.banned && (
|
{user.banned && (
|
||||||
<li className="list-inline-item badge badge-danger">
|
<li className="list-inline-item badge badge-danger">
|
||||||
<T i18nKey="banned">#</T>
|
{ i18n.t('banned') }
|
||||||
</li>
|
</li>
|
||||||
)}
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -415,7 +415,7 @@ export class User extends Component<any, UserState> {
|
||||||
class="btn btn-block btn-secondary mt-3"
|
class="btn btn-block btn-secondary mt-3"
|
||||||
onClick={linkEvent(this, this.handleLogoutClick)}
|
onClick={linkEvent(this, this.handleLogoutClick)}
|
||||||
>
|
>
|
||||||
<T i18nKey="logout">#</T>
|
{ i18n.t('logout') }
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -430,12 +430,12 @@ export class User extends Component<any, UserState> {
|
||||||
<div class="card border-secondary mb-3">
|
<div class="card border-secondary mb-3">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5>
|
<h5>
|
||||||
<T i18nKey="settings">#</T>
|
{ i18n.t('settings') }
|
||||||
</h5>
|
</h5>
|
||||||
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
|
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>
|
<label>
|
||||||
<T i18nKey="avatar">#</T>
|
{ i18n.t('avatar') }
|
||||||
</label>
|
</label>
|
||||||
<form class="d-inline">
|
<form class="d-inline">
|
||||||
<label
|
<label
|
||||||
|
|
@ -444,7 +444,7 @@ export class User extends Component<any, UserState> {
|
||||||
>
|
>
|
||||||
{!this.state.userSettingsForm.avatar ? (
|
{!this.state.userSettingsForm.avatar ? (
|
||||||
<span class="btn btn-sm btn-secondary">
|
<span class="btn btn-sm btn-secondary">
|
||||||
<T i18nKey="upload_avatar">#</T>
|
{ i18n.t('upload_avatar') }
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<img
|
<img
|
||||||
|
|
@ -468,7 +468,7 @@ export class User extends Component<any, UserState> {
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>
|
<label>
|
||||||
<T i18nKey="language">#</T>
|
{ i18n.t('language') }
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
value={this.state.userSettingsForm.lang}
|
value={this.state.userSettingsForm.lang}
|
||||||
|
|
@ -476,10 +476,10 @@ export class User extends Component<any, UserState> {
|
||||||
class="ml-2 custom-select custom-select-sm w-auto"
|
class="ml-2 custom-select custom-select-sm w-auto"
|
||||||
>
|
>
|
||||||
<option disabled>
|
<option disabled>
|
||||||
<T i18nKey="language">#</T>
|
{ i18n.t('language') }
|
||||||
</option>
|
</option>
|
||||||
<option value="browser">
|
<option value="browser">
|
||||||
<T i18nKey="browser_default">#</T>
|
{ i18n.t('browser_default') }
|
||||||
</option>
|
</option>
|
||||||
<option disabled>──</option>
|
<option disabled>──</option>
|
||||||
{languages.map(lang => (
|
{languages.map(lang => (
|
||||||
|
|
@ -489,7 +489,7 @@ export class User extends Component<any, UserState> {
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>
|
<label>
|
||||||
<T i18nKey="theme">#</T>
|
{ i18n.t('theme') }
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
value={this.state.userSettingsForm.theme}
|
value={this.state.userSettingsForm.theme}
|
||||||
|
|
@ -497,7 +497,7 @@ export class User extends Component<any, UserState> {
|
||||||
class="ml-2 custom-select custom-select-sm w-auto"
|
class="ml-2 custom-select custom-select-sm w-auto"
|
||||||
>
|
>
|
||||||
<option disabled>
|
<option disabled>
|
||||||
<T i18nKey="theme">#</T>
|
{ i18n.t('theme') }
|
||||||
</option>
|
</option>
|
||||||
{themes.map(theme => (
|
{themes.map(theme => (
|
||||||
<option value={theme}>{theme}</option>
|
<option value={theme}>{theme}</option>
|
||||||
|
|
@ -527,12 +527,13 @@ export class User extends Component<any, UserState> {
|
||||||
/>
|
/>
|
||||||
</form>
|
</form>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-lg-3 col-form-label">
|
<label class="col-lg-3 col-form-label" for="user-email">
|
||||||
<T i18nKey="email">#</T>
|
{ i18n.t('email') }
|
||||||
</label>
|
</label>
|
||||||
<div class="col-lg-9">
|
<div class="col-lg-9">
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
|
id="user-email"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
placeholder={i18n.t('optional')}
|
placeholder={i18n.t('optional')}
|
||||||
value={this.state.userSettingsForm.email}
|
value={this.state.userSettingsForm.email}
|
||||||
|
|
@ -545,12 +546,13 @@ export class User extends Component<any, UserState> {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-lg-5 col-form-label">
|
<label class="col-lg-5 col-form-label" for="user-password">
|
||||||
<T i18nKey="new_password">#</T>
|
{ i18n.t('new_password') }
|
||||||
</label>
|
</label>
|
||||||
<div class="col-lg-7">
|
<div class="col-lg-7">
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
|
id="user-password"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
value={this.state.userSettingsForm.new_password}
|
value={this.state.userSettingsForm.new_password}
|
||||||
onInput={linkEvent(
|
onInput={linkEvent(
|
||||||
|
|
@ -561,12 +563,13 @@ export class User extends Component<any, UserState> {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-lg-5 col-form-label">
|
<label class="col-lg-5 col-form-label" for="user-verify-password">
|
||||||
<T i18nKey="verify_password">#</T>
|
{ i18n.t('verify_password') }
|
||||||
</label>
|
</label>
|
||||||
<div class="col-lg-7">
|
<div class="col-lg-7">
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
|
id="user-verify-password"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
value={this.state.userSettingsForm.new_password_verify}
|
value={this.state.userSettingsForm.new_password_verify}
|
||||||
onInput={linkEvent(
|
onInput={linkEvent(
|
||||||
|
|
@ -577,12 +580,13 @@ export class User extends Component<any, UserState> {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-lg-5 col-form-label">
|
<label class="col-lg-5 col-form-label" for="user-old-password">
|
||||||
<T i18nKey="old_password">#</T>
|
{ i18n.t('old_password') }
|
||||||
</label>
|
</label>
|
||||||
<div class="col-lg-7">
|
<div class="col-lg-7">
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
|
id="user-old-password"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
value={this.state.userSettingsForm.old_password}
|
value={this.state.userSettingsForm.old_password}
|
||||||
onInput={linkEvent(
|
onInput={linkEvent(
|
||||||
|
|
@ -597,6 +601,7 @@ export class User extends Component<any, UserState> {
|
||||||
<div class="form-check">
|
<div class="form-check">
|
||||||
<input
|
<input
|
||||||
class="form-check-input"
|
class="form-check-input"
|
||||||
|
id="user-show-nsfw"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={this.state.userSettingsForm.show_nsfw}
|
checked={this.state.userSettingsForm.show_nsfw}
|
||||||
onChange={linkEvent(
|
onChange={linkEvent(
|
||||||
|
|
@ -604,8 +609,8 @@ export class User extends Component<any, UserState> {
|
||||||
this.handleUserSettingsShowNsfwChange
|
this.handleUserSettingsShowNsfwChange
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<label class="form-check-label">
|
<label class="form-check-label" for="user-show-nsfw">
|
||||||
<T i18nKey="show_nsfw">#</T>
|
{ i18n.t('show_nsfw') }
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -614,6 +619,7 @@ export class User extends Component<any, UserState> {
|
||||||
<div class="form-check">
|
<div class="form-check">
|
||||||
<input
|
<input
|
||||||
class="form-check-input"
|
class="form-check-input"
|
||||||
|
id="user-show-avatars"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
checked={this.state.userSettingsForm.show_avatars}
|
checked={this.state.userSettingsForm.show_avatars}
|
||||||
onChange={linkEvent(
|
onChange={linkEvent(
|
||||||
|
|
@ -621,8 +627,8 @@ export class User extends Component<any, UserState> {
|
||||||
this.handleUserSettingsShowAvatarsChange
|
this.handleUserSettingsShowAvatarsChange
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<label class="form-check-label">
|
<label class="form-check-label" for="user-show-avatars">
|
||||||
<T i18nKey="show_avatars">#</T>
|
{ i18n.t('show_avatars') }
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -630,6 +636,7 @@ export class User extends Component<any, UserState> {
|
||||||
<div class="form-check">
|
<div class="form-check">
|
||||||
<input
|
<input
|
||||||
class="form-check-input"
|
class="form-check-input"
|
||||||
|
id="user-send-notifications-to-email"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
disabled={!this.state.user.email}
|
disabled={!this.state.user.email}
|
||||||
checked={
|
checked={
|
||||||
|
|
@ -640,8 +647,8 @@ export class User extends Component<any, UserState> {
|
||||||
this.handleUserSettingsSendNotificationsToEmailChange
|
this.handleUserSettingsSendNotificationsToEmailChange
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
<label class="form-check-label">
|
<label class="form-check-label" for="user-send-notifications-to-email">
|
||||||
<T i18nKey="send_notifications_to_email">#</T>
|
{ i18n.t('send_notifications_to_email') }
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -665,12 +672,12 @@ export class User extends Component<any, UserState> {
|
||||||
this.handleDeleteAccountShowConfirmToggle
|
this.handleDeleteAccountShowConfirmToggle
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<T i18nKey="delete_account">#</T>
|
{ i18n.t('delete_account') }
|
||||||
</button>
|
</button>
|
||||||
{this.state.deleteAccountShowConfirm && (
|
{this.state.deleteAccountShowConfirm && (
|
||||||
<>
|
<>
|
||||||
<div class="my-2 alert alert-danger" role="alert">
|
<div class="my-2 alert alert-danger" role="alert">
|
||||||
<T i18nKey="delete_account_confirm">#</T>
|
{ i18n.t('delete_account_confirm') }
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
|
|
@ -701,7 +708,7 @@ export class User extends Component<any, UserState> {
|
||||||
this.handleDeleteAccountShowConfirmToggle
|
this.handleDeleteAccountShowConfirmToggle
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<T i18nKey="cancel">#</T>
|
{ i18n.t('cancel') }
|
||||||
</button>
|
</button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
@ -720,7 +727,7 @@ export class User extends Component<any, UserState> {
|
||||||
<div class="card border-secondary mb-3">
|
<div class="card border-secondary mb-3">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5>
|
<h5>
|
||||||
<T i18nKey="moderates">#</T>
|
{ i18n.t('moderates') }
|
||||||
</h5>
|
</h5>
|
||||||
<ul class="list-unstyled mb-0">
|
<ul class="list-unstyled mb-0">
|
||||||
{this.state.moderates.map(community => (
|
{this.state.moderates.map(community => (
|
||||||
|
|
@ -745,7 +752,7 @@ export class User extends Component<any, UserState> {
|
||||||
<div class="card border-secondary mb-3">
|
<div class="card border-secondary mb-3">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h5>
|
<h5>
|
||||||
<T i18nKey="subscribed">#</T>
|
{ i18n.t('subscribed') }
|
||||||
</h5>
|
</h5>
|
||||||
<ul class="list-unstyled mb-0">
|
<ul class="list-unstyled mb-0">
|
||||||
{this.state.follows.map(community => (
|
{this.state.follows.map(community => (
|
||||||
|
|
@ -778,7 +785,7 @@ export class User extends Component<any, UserState> {
|
||||||
class="btn btn-sm btn-secondary"
|
class="btn btn-sm btn-secondary"
|
||||||
onClick={linkEvent(this, this.nextPage)}
|
onClick={linkEvent(this, this.nextPage)}
|
||||||
>
|
>
|
||||||
<T i18nKey="next">#</T>
|
{ i18n.t('next') }
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue