UserAccountSettingsView.tsx 43.8 Ko
Télécharger le fichier
import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@octane/renderer';
import { FC, KeyboardEvent, useEffect, useMemo, useState } from 'react';
import { FaArrowLeft, FaCheckCircle, FaChevronRight, FaEnvelope, FaExclamationTriangle, FaEye, FaEyeSlash, FaIdBadge, FaInfoCircle, FaKey, FaShieldAlt, FaUserCog } from 'react-icons/fa';
import { ClearRememberLogin, clearAccessToken, GetConfigurationValue, getAccessToken, LocalizeText, localizeWithFallback } from '../../api';
import { Button, LayoutAvatarImageView, OctaneCardContentView, OctaneCardHeaderView, OctaneCardView, Text } from '../../common';
import { BaseButton } from '../../common/BaseButton';
import { NativeTextTree } from '../../common/native-text/NativeTextTree';
const MIN_PASSWORD_LENGTH = 8;
const MAX_PASSWORD_LENGTH = 128;
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const MAX_EMAIL_LENGTH = 254;
const USERNAME_RE = /^[A-Za-z0-9._-]{3,25}$/;
const MIN_USERNAME_LENGTH = 3;
const MAX_USERNAME_LENGTH = 25;
type FeedbackKind = 'error' | 'success';
type Section = 'menu' | 'password' | 'email' | 'username';
const passwordStrength = (value: string): { score: number; labelKey: string; color: string } =>
{
if(!value) return { score: 0, labelKey: '', color: 'bg-black/10' };
let score = 0;
if(value.length >= MIN_PASSWORD_LENGTH) score++;
if(value.length >= 12) score++;
if(/[A-Z]/.test(value) && /[a-z]/.test(value)) score++;
if(/\d/.test(value)) score++;
if(/[^A-Za-z0-9]/.test(value)) score++;
if(score <= 1) return { score: 1, labelKey: 'usersettings.strength.weak', color: 'bg-[#a81a12]' };
if(score === 2) return { score: 2, labelKey: 'usersettings.strength.fair', color: 'bg-[#ffc107]' };
if(score === 3) return { score: 3, labelKey: 'usersettings.strength.good', color: 'bg-[#418db0]' };
return { score: 4, labelKey: 'usersettings.strength.strong', color: 'bg-[#00800b]' };
};
export const UserAccountSettingsView: FC<{}> = () =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ section, setSection ] = useState<Section>('menu');
const [ currentPassword, setCurrentPassword ] = useState('');
const [ newPassword, setNewPassword ] = useState('');
const [ confirmPassword, setConfirmPassword ] = useState('');
const [ showCurrent, setShowCurrent ] = useState(false);
const [ showNew, setShowNew ] = useState(false);
const [ emailCurrentPassword, setEmailCurrentPassword ] = useState('');
const [ newEmail, setNewEmail ] = useState('');
const [ showEmailPassword, setShowEmailPassword ] = useState(false);
const [ usernameCurrentPassword, setUsernameCurrentPassword ] = useState('');
const [ newUsername, setNewUsername ] = useState('');
const [ showUsernamePassword, setShowUsernamePassword ] = useState(false);
const [ submitting, setSubmitting ] = useState(false);
const [ feedback, setFeedback ] = useState<{ kind: FeedbackKind; message: string } | null>(null);
const session = useMemo(() =>
{
try
{
const manager = GetSessionDataManager();
return {
username: manager?.userName ?? '',
figure: manager?.figure ?? ''
};
}
catch
{
return { username: '', figure: '' };
}
}, [ isVisible ]);
const strength = useMemo(() => passwordStrength(newPassword), [ newPassword ]);
const resetForm = () =>
{
setCurrentPassword('');
setNewPassword('');
setConfirmPassword('');
setShowCurrent(false);
setShowNew(false);
setEmailCurrentPassword('');
setNewEmail('');
setShowEmailPassword(false);
setUsernameCurrentPassword('');
setNewUsername('');
setShowUsernamePassword(false);
setFeedback(null);
};
const close = () =>
{
setIsVisible(false);
setSection('menu');
resetForm();
setSubmitting(false);
};
useEffect(() =>
{
const linkTracker: ILinkEventTracker = {
linkReceived: (url: string) =>
{
const parts = url.split('/');
if(parts.length < 2) return;
switch(parts[1])
{
case 'show':
setIsVisible(true);
return;
case 'hide':
close();
return;
case 'toggle':
setIsVisible(prev => !prev);
return;
}
},
eventUrlPrefix: 'user-account-settings/'
};
AddLinkEventTracker(linkTracker);
return () => RemoveLinkEventTracker(linkTracker);
}, []);
const submitPasswordChange = async () =>
{
if(submitting) return;
setFeedback(null);
if(!currentPassword || !newPassword || !confirmPassword)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.fields_required', "All fields are required.") });
return;
}
if(newPassword.length < MIN_PASSWORD_LENGTH)
{
setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.password_min', [ 'count' ], [ MIN_PASSWORD_LENGTH.toString() ]) });
return;
}
if(newPassword.length > MAX_PASSWORD_LENGTH)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.password_long', "The password is too long.") });
return;
}
if(newPassword !== confirmPassword)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.password_mismatch', "The new passwords don't match.") });
return;
}
if(newPassword === currentPassword)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.password_same', "Your new password must be different from your current one.") });
return;
}
const token = getAccessToken();
if(!token)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.not_authenticated', "You're not signed in. Please log in again.") });
return;
}
const endpoint = GetConfigurationValue<string>('account.change-password.endpoint', '/api/auth/change-password');
setSubmitting(true);
try
{
const response = await fetch(endpoint, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': `Bearer ${ token }`,
'X-Requested-With': 'OctaneUserAccountSettings'
},
body: JSON.stringify({ currentPassword, newPassword, confirmPassword })
});
let payload: Record<string, unknown> = {};
try { payload = await response.json(); }
catch {}
if(!response.ok)
{
const message = typeof payload.error === 'string' && payload.error
? payload.error
: LocalizeText('usersettings.error.request_failed', [ 'status' ], [ response.status.toString() ]);
setFeedback({ kind: 'error', message });
return;
}
const message = typeof payload.message === 'string' && payload.message
? payload.message
: localizeWithFallback('usersettings.success.password', "Password updated successfully.");
setFeedback({ kind: 'success', message });
setCurrentPassword('');
setNewPassword('');
setConfirmPassword('');
setShowCurrent(false);
setShowNew(false);
}
catch
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.network', "Couldn't reach the server. Please try again.") });
}
finally
{
setSubmitting(false);
}
};
const submitEmailChange = async () =>
{
if(submitting) return;
setFeedback(null);
if(!emailCurrentPassword || !newEmail)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.fields_required', "All fields are required.") });
return;
}
if(newEmail.length > MAX_EMAIL_LENGTH)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.email_long', "The email address is too long.") });
return;
}
if(!EMAIL_RE.test(newEmail))
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.email_invalid', "Please enter a valid email address.") });
return;
}
const token = getAccessToken();
if(!token)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.not_authenticated', "You're not signed in. Please log in again.") });
return;
}
const endpoint = GetConfigurationValue<string>('account.change-email.endpoint', '/api/auth/change-email');
setSubmitting(true);
try
{
const response = await fetch(endpoint, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': `Bearer ${ token }`,
'X-Requested-With': 'OctaneUserAccountSettings'
},
body: JSON.stringify({ currentPassword: emailCurrentPassword, newEmail })
});
let payload: Record<string, unknown> = {};
try { payload = await response.json(); }
catch {}
if(!response.ok)
{
const message = typeof payload.error === 'string' && payload.error
? payload.error
: LocalizeText('usersettings.error.request_failed', [ 'status' ], [ response.status.toString() ]);
setFeedback({ kind: 'error', message });
return;
}
const message = typeof payload.message === 'string' && payload.message
? payload.message
: localizeWithFallback('usersettings.success.email', "Email updated successfully.");
setFeedback({ kind: 'success', message });
setEmailCurrentPassword('');
setNewEmail('');
setShowEmailPassword(false);
}
catch
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.network', "Couldn't reach the server. Please try again.") });
}
finally
{
setSubmitting(false);
}
};
const submitUsernameChange = async () =>
{
if(submitting) return;
setFeedback(null);
if(!usernameCurrentPassword || !newUsername)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.fields_required', "All fields are required.") });
return;
}
if(newUsername.length < MIN_USERNAME_LENGTH || newUsername.length > MAX_USERNAME_LENGTH)
{
setFeedback({ kind: 'error', message: LocalizeText('usersettings.error.username_length', [ 'min', 'max' ], [ MIN_USERNAME_LENGTH.toString(), MAX_USERNAME_LENGTH.toString() ]) });
return;
}
if(!USERNAME_RE.test(newUsername))
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.username_invalid', "Your username can only contain letters, numbers, dots, underscores and hyphens.") });
return;
}
if(newUsername === session.username)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.username_same', "Your new username must be different from your current one.") });
return;
}
const token = getAccessToken();
if(!token)
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.not_authenticated', "You're not signed in. Please log in again.") });
return;
}
const endpoint = GetConfigurationValue<string>('account.change-username.endpoint', '/api/auth/change-username');
setSubmitting(true);
try
{
const response = await fetch(endpoint, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': `Bearer ${ token }`,
'X-Requested-With': 'OctaneUserAccountSettings'
},
body: JSON.stringify({ currentPassword: usernameCurrentPassword, newUsername })
});
let payload: Record<string, unknown> = {};
try { payload = await response.json(); }
catch {}
if(!response.ok)
{
const message = typeof payload.error === 'string' && payload.error
? payload.error
: LocalizeText('usersettings.error.request_failed', [ 'status' ], [ response.status.toString() ]);
setFeedback({ kind: 'error', message });
return;
}
const message = typeof payload.message === 'string' && payload.message
? payload.message
: localizeWithFallback('usersettings.success.username', "Username updated. Log in again with your new name.");
setFeedback({ kind: 'success', message });
setUsernameCurrentPassword('');
setNewUsername('');
setShowUsernamePassword(false);
// The server has dropped our session — clear local credentials and bounce
// the user back to the login screen so the whole client reloads cleanly.
// The remembered login names the old account too: kept, the reload signed in with it again.
ClearRememberLogin();
clearAccessToken();
window.setTimeout(() =>
{
try { window.location.reload(); }
catch {}
}, 2500);
}
catch
{
setFeedback({ kind: 'error', message: localizeWithFallback('usersettings.error.network', "Couldn't reach the server. Please try again.") });
}
finally
{
setSubmitting(false);
}
};
if(!isVisible) return null;
return (
<NativeTextTree>
<OctaneCardView className="user-account-settings-window min-w-0 w-[min(360px,calc(100vw-16px))] max-w-[calc(100vw-16px)] max-h-[calc(100vh-16px)]" theme="primary-slim" uniqueKey="user-account-settings">
<OctaneCardHeaderView headerText={ localizeWithFallback('usersettings.title', "User Settings") } onCloseClick={ close } />
<div className="user-account-settings__hero relative flex items-center gap-3 px-3 py-2 bg-[linear-gradient(180deg,#5ba4c4_0%,#418db0_100%)] text-white">
<div className="absolute inset-0 opacity-20 pointer-events-none [background-image:radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] [background-size:6px_6px]" />
{ session.figure && (
<div className="relative w-[60px] h-[60px] shrink-0 rounded-full bg-white/20 border-2 border-white/40 overflow-hidden">
<LayoutAvatarImageView
figure={ session.figure }
direction={ 2 }
headOnly={ true }
scale={ 1 }
style={ { backgroundSize: '112px auto', backgroundPosition: '-24px -38px' } }
/>
</div>
) }
<div className="relative flex flex-col leading-tight">
<Text small className="text-white/80 uppercase tracking-wider">{ localizeWithFallback('usersettings.account.label', "My account") }</Text>
<Text bold className="user-account-settings__name text-white">{ session.username || localizeWithFallback('usersettings.guest', "Guest") }</Text>
<Text small className="text-white/80">{ localizeWithFallback('usersettings.subtitle', "Manage your account and security") }</Text>
</div>
</div>
<OctaneCardContentView className="user-account-settings__content flex flex-col gap-2 text-black">
{ section === 'menu' && (
<div className="flex flex-col gap-2">
<Text small className="text-black/60 uppercase tracking-wider px-1">{ localizeWithFallback('usersettings.menu.section', "Account") }</Text>
<BaseButton
type="button"
className="group flex items-center gap-3 rounded-md border border-black/10 bg-white px-3 py-2 hover:bg-[#f5fbfd] hover:border-[#418db0] transition-colors cursor-pointer text-left"
onClick={ () => { resetForm(); setSection('password'); } }>
<div className="flex items-center justify-center w-9 h-9 rounded-full bg-[#418db0] text-white shrink-0 shadow-[inset_0_2px_#ffffff26,inset_0_-2px_#0000001a]">
<FaKey />
</div>
<div className="flex flex-col flex-1 leading-tight">
<Text bold>{ localizeWithFallback('usersettings.menu.password.title', "Reset password") }</Text>
<Text small className="text-black/60">{ localizeWithFallback('usersettings.menu.password.desc', "Change the password you use to log in.") }</Text>
</div>
<FaChevronRight className="text-black/40 group-hover:text-[#418db0]" />
</BaseButton>
<BaseButton
type="button"
className="group flex items-center gap-3 rounded-md border border-black/10 bg-white px-3 py-2 hover:bg-[#f5fbfd] hover:border-[#418db0] transition-colors cursor-pointer text-left"
onClick={ () => { resetForm(); setSection('email'); } }>
<div className="flex items-center justify-center w-9 h-9 rounded-full bg-[#376275] text-white shrink-0 shadow-[inset_0_2px_#ffffff26,inset_0_-2px_#0000001a]">
<FaEnvelope />
</div>
<div className="flex flex-col flex-1 leading-tight">
<Text bold>{ localizeWithFallback('usersettings.menu.email.title', "Change email") }</Text>
<Text small className="text-black/60">{ localizeWithFallback('usersettings.menu.email.desc', "Update your account's email address.") }</Text>
</div>
<FaChevronRight className="text-black/40 group-hover:text-[#418db0]" />
</BaseButton>
<BaseButton
type="button"
className="group flex items-center gap-3 rounded-md border border-black/10 bg-white px-3 py-2 hover:bg-[#fef7e0] hover:border-[#ffc107] transition-colors cursor-pointer text-left"
onClick={ () => { resetForm(); setSection('username'); } }>
<div className="flex items-center justify-center w-9 h-9 rounded-full bg-[#ffc107] text-[#5c4400] shrink-0 shadow-[inset_0_2px_#ffffff80,inset_0_-2px_#0000001a]">
<FaIdBadge />
</div>
<div className="flex flex-col flex-1 leading-tight">
<Text bold>{ localizeWithFallback('usersettings.menu.username.title', "Change username") }</Text>
<Text small className="text-black/60">{ localizeWithFallback('usersettings.menu.username.desc', "Pick a new name. You'll need to log in again.") }</Text>
</div>
<FaChevronRight className="text-black/40 group-hover:text-[#a37800]" />
</BaseButton>
<div className="flex items-center gap-3 rounded-md border border-dashed border-black/15 bg-black/[0.02] px-3 py-2 opacity-70">
<div className="flex items-center justify-center w-9 h-9 rounded-full bg-black/10 text-black/40 shrink-0">
<FaShieldAlt />
</div>
<div className="flex flex-col flex-1 leading-tight">
<Text bold className="text-black/60">{ localizeWithFallback('usersettings.menu.soon.title', "More coming soon") }</Text>
<Text small className="text-black/50">{ localizeWithFallback('usersettings.menu.soon.desc', "Two-factor authentication and more.") }</Text>
</div>
</div>
</div>
) }
{ section === 'password' && (
<div className="flex flex-col gap-2" onKeyDown={ (event: KeyboardEvent<HTMLDivElement>) => { if(event.key === 'Enter') { event.preventDefault(); submitPasswordChange(); } } }>
<div className="flex items-center gap-2 -mt-1 mb-1">
<BaseButton
type="button"
disabled={ submitting }
onClick={ () => { resetForm(); setSection('menu'); } }
className="flex items-center justify-center w-7 h-7 rounded-full bg-black/5 hover:bg-black/10 text-black/70 disabled:opacity-50">
<FaArrowLeft size={ 11 } />
</BaseButton>
<FaUserCog className="text-[#418db0]" />
<Text bold>{ localizeWithFallback('usersettings.menu.password.title', "Reset password") }</Text>
</div>
<div className="flex items-start gap-2 rounded-md border border-[#418db0]/30 bg-[#418db0]/10 px-2 py-2 text-[11px] leading-4 text-[#0d3d52]">
<FaInfoCircle className="mt-[2px] shrink-0 text-[#418db0]" />
<span>{ LocalizeText('usersettings.password.hint', [ 'count' ], [ MIN_PASSWORD_LENGTH.toString() ]) }</span>
</div>
<label className="flex flex-col gap-1 text-[12px]">
<span className="font-bold">{ localizeWithFallback('usersettings.field.current_password', "Current password") }</span>
<div className="relative flex items-center">
<FaKey className="absolute left-2 text-black/40" size={ 12 } />
<input
type={ showCurrent ? 'text' : 'password' }
className="w-full rounded border border-black/20 bg-white pl-7 pr-8 py-1 focus:border-[#418db0] focus:outline-none"
autoComplete="current-password"
maxLength={ MAX_PASSWORD_LENGTH }
value={ currentPassword }
onChange={ event => setCurrentPassword(event.target.value) }
disabled={ submitting }
/>
<BaseButton
type="button"
aria-label={ showCurrent ? localizeWithFallback('usersettings.aria.hide_password', "Hide password") : localizeWithFallback('usersettings.aria.show_password', "Show password") }
onClick={ () => setShowCurrent(prev => !prev) }
className="absolute right-2 text-black/40 hover:text-black/70">
{ showCurrent ? <FaEyeSlash size={ 12 } /> : <FaEye size={ 12 } /> }
</BaseButton>
</div>
</label>
<label className="flex flex-col gap-1 text-[12px]">
<span className="font-bold">{ localizeWithFallback('usersettings.field.new_password', "New password") }</span>
<div className="relative flex items-center">
<FaKey className="absolute left-2 text-black/40" size={ 12 } />
<input
type={ showNew ? 'text' : 'password' }
className="w-full rounded border border-black/20 bg-white pl-7 pr-8 py-1 focus:border-[#418db0] focus:outline-none"
autoComplete="new-password"
maxLength={ MAX_PASSWORD_LENGTH }
value={ newPassword }
onChange={ event => setNewPassword(event.target.value) }
disabled={ submitting }
/>
<BaseButton
type="button"
aria-label={ showNew ? localizeWithFallback('usersettings.aria.hide_password', "Hide password") : localizeWithFallback('usersettings.aria.show_password', "Show password") }
onClick={ () => setShowNew(prev => !prev) }
className="absolute right-2 text-black/40 hover:text-black/70">
{ showNew ? <FaEyeSlash size={ 12 } /> : <FaEye size={ 12 } /> }
</BaseButton>
</div>
{ newPassword.length > 0 && (
<div className="flex items-center gap-2 mt-1">
<div className="flex-1 h-1.5 rounded-full bg-black/10 overflow-hidden">
<div className={ `h-full ${ strength.color } transition-all` } style={ { width: `${ (strength.score / 4) * 100 }%` } } />
</div>
<span className="user-account-settings__fine-print text-black/60 w-12 text-right">{ strength.labelKey ? LocalizeText(strength.labelKey) : '' }</span>
</div>
) }
</label>
<label className="flex flex-col gap-1 text-[12px]">
<span className="font-bold">{ localizeWithFallback('usersettings.field.retype_password', "Re-enter your new password") }</span>
<div className="relative flex items-center">
<FaKey className="absolute left-2 text-black/40" size={ 12 } />
<input
type={ showNew ? 'text' : 'password' }
className={ `w-full rounded border bg-white pl-7 pr-8 py-1 focus:outline-none ${ confirmPassword.length > 0 && confirmPassword !== newPassword ? 'border-[#a81a12] focus:border-[#a81a12]' : 'border-black/20 focus:border-[#418db0]' }` }
autoComplete="new-password"
maxLength={ MAX_PASSWORD_LENGTH }
value={ confirmPassword }
onChange={ event => setConfirmPassword(event.target.value) }
disabled={ submitting }
/>
{ confirmPassword.length > 0 && confirmPassword === newPassword && (
<FaCheckCircle className="absolute right-2 text-[#00800b]" size={ 12 } />
) }
</div>
</label>
{ feedback && (
<div className={ `flex items-start gap-2 rounded-md border px-2 py-2 text-[11px] leading-4 ${ feedback.kind === 'error' ? 'border-[#a81a12]/40 bg-[#a81a12]/10 text-[#7a1109]' : 'border-[#00800b]/40 bg-[#00800b]/10 text-[#005407]' }` }>
{ feedback.kind === 'error'
? <FaExclamationTriangle className="mt-[2px] shrink-0" />
: <FaCheckCircle className="mt-[2px] shrink-0" /> }
<span>{ feedback.message }</span>
</div>
) }
<div className="flex justify-end gap-2 pt-1">
<Button variant="secondary" disabled={ submitting } onClick={ () => { resetForm(); setSection('menu'); } }>
{ localizeWithFallback('usersettings.btn.cancel', "Cancel") }
</Button>
<Button variant="success" disabled={ submitting } onClick={ () => submitPasswordChange() }>
{ submitting ? localizeWithFallback('usersettings.btn.saving', "Saving…") : localizeWithFallback('usersettings.btn.save_password', "Save password") }
</Button>
</div>
</div>
) }
{ section === 'email' && (
<div className="flex flex-col gap-2" onKeyDown={ (event: KeyboardEvent<HTMLDivElement>) => { if(event.key === 'Enter') { event.preventDefault(); submitEmailChange(); } } }>
<div className="flex items-center gap-2 -mt-1 mb-1">
<BaseButton
type="button"
disabled={ submitting }
onClick={ () => { resetForm(); setSection('menu'); } }
className="flex items-center justify-center w-7 h-7 rounded-full bg-black/5 hover:bg-black/10 text-black/70 disabled:opacity-50">
<FaArrowLeft size={ 11 } />
</BaseButton>
<FaEnvelope className="text-[#376275]" />
<Text bold>{ localizeWithFallback('usersettings.menu.email.title', "Change email") }</Text>
</div>
<div className="flex items-start gap-2 rounded-md border border-[#418db0]/30 bg-[#418db0]/10 px-2 py-2 text-[11px] leading-4 text-[#0d3d52]">
<FaInfoCircle className="mt-[2px] shrink-0 text-[#418db0]" />
<span>{ localizeWithFallback('usersettings.email.hint', "For your security, please confirm your current password before changing your account email.") }</span>
</div>
<label className="flex flex-col gap-1 text-[12px]">
<span className="font-bold">{ localizeWithFallback('usersettings.field.current_password', "Current password") }</span>
<div className="relative flex items-center">
<FaKey className="absolute left-2 text-black/40" size={ 12 } />
<input
type={ showEmailPassword ? 'text' : 'password' }
className="w-full rounded border border-black/20 bg-white pl-7 pr-8 py-1 focus:border-[#418db0] focus:outline-none"
autoComplete="current-password"
maxLength={ MAX_PASSWORD_LENGTH }
value={ emailCurrentPassword }
onChange={ event => setEmailCurrentPassword(event.target.value) }
disabled={ submitting }
/>
<BaseButton
type="button"
aria-label={ showEmailPassword ? localizeWithFallback('usersettings.aria.hide_password', "Hide password") : localizeWithFallback('usersettings.aria.show_password', "Show password") }
onClick={ () => setShowEmailPassword(prev => !prev) }
className="absolute right-2 text-black/40 hover:text-black/70">
{ showEmailPassword ? <FaEyeSlash size={ 12 } /> : <FaEye size={ 12 } /> }
</BaseButton>
</div>
</label>
<label className="flex flex-col gap-1 text-[12px]">
<span className="font-bold">{ localizeWithFallback('usersettings.field.new_email', "New email address") }</span>
<div className="relative flex items-center">
<FaEnvelope className="absolute left-2 text-black/40" size={ 12 } />
<input
type="email"
className={ `w-full rounded border bg-white pl-7 pr-8 py-1 focus:outline-none ${ newEmail.length > 0 && !EMAIL_RE.test(newEmail) ? 'border-[#a81a12] focus:border-[#a81a12]' : 'border-black/20 focus:border-[#418db0]' }` }
autoComplete="email"
inputMode="email"
maxLength={ MAX_EMAIL_LENGTH }
value={ newEmail }
onChange={ event => setNewEmail(event.target.value) }
disabled={ submitting }
placeholder="you@example.com"
/>
{ newEmail.length > 0 && EMAIL_RE.test(newEmail) && (
<FaCheckCircle className="absolute right-2 text-[#00800b]" size={ 12 } />
) }
</div>
</label>
{ feedback && (
<div className={ `flex items-start gap-2 rounded-md border px-2 py-2 text-[11px] leading-4 ${ feedback.kind === 'error' ? 'border-[#a81a12]/40 bg-[#a81a12]/10 text-[#7a1109]' : 'border-[#00800b]/40 bg-[#00800b]/10 text-[#005407]' }` }>
{ feedback.kind === 'error'
? <FaExclamationTriangle className="mt-[2px] shrink-0" />
: <FaCheckCircle className="mt-[2px] shrink-0" /> }
<span>{ feedback.message }</span>
</div>
) }
<div className="flex justify-end gap-2 pt-1">
<Button variant="secondary" disabled={ submitting } onClick={ () => { resetForm(); setSection('menu'); } }>
{ localizeWithFallback('usersettings.btn.cancel', "Cancel") }
</Button>
<Button variant="success" disabled={ submitting } onClick={ () => submitEmailChange() }>
{ submitting ? localizeWithFallback('usersettings.btn.saving', "Saving…") : localizeWithFallback('usersettings.btn.save_email', "Save email") }
</Button>
</div>
</div>
) }
{ section === 'username' && (
<div className="flex flex-col gap-2" onKeyDown={ (event: KeyboardEvent<HTMLDivElement>) => { if(event.key === 'Enter') { event.preventDefault(); submitUsernameChange(); } } }>
<div className="flex items-center gap-2 -mt-1 mb-1">
<BaseButton
type="button"
disabled={ submitting }
onClick={ () => { resetForm(); setSection('menu'); } }
className="flex items-center justify-center w-7 h-7 rounded-full bg-black/5 hover:bg-black/10 text-black/70 disabled:opacity-50">
<FaArrowLeft size={ 11 } />
</BaseButton>
<FaIdBadge className="text-[#a37800]" />
<Text bold>{ localizeWithFallback('usersettings.menu.username.title', "Change username") }</Text>
</div>
<div className="flex items-start gap-2 rounded-md border border-[#ffc107]/50 bg-[#fff8e1] px-2 py-2 text-[11px] leading-4 text-[#5c4400]">
<FaExclamationTriangle className="mt-[2px] shrink-0 text-[#a37800]" />
<span>{ localizeWithFallback('usersettings.username.hint', "Changing your name will log you out, and you'll only be able to rename yourself again after 30 days. Make sure your friends know your new name!") }</span>
</div>
<label className="flex flex-col gap-1 text-[12px]">
<span className="font-bold">{ localizeWithFallback('usersettings.field.current_password', "Current password") }</span>
<div className="relative flex items-center">
<FaKey className="absolute left-2 text-black/40" size={ 12 } />
<input
type={ showUsernamePassword ? 'text' : 'password' }
className="w-full rounded border border-black/20 bg-white pl-7 pr-8 py-1 focus:border-[#418db0] focus:outline-none"
autoComplete="current-password"
maxLength={ MAX_PASSWORD_LENGTH }
value={ usernameCurrentPassword }
onChange={ event => setUsernameCurrentPassword(event.target.value) }
disabled={ submitting }
/>
<BaseButton
type="button"
aria-label={ showUsernamePassword ? localizeWithFallback('usersettings.aria.hide_password', "Hide password") : localizeWithFallback('usersettings.aria.show_password', "Show password") }
onClick={ () => setShowUsernamePassword(prev => !prev) }
className="absolute right-2 text-black/40 hover:text-black/70">
{ showUsernamePassword ? <FaEyeSlash size={ 12 } /> : <FaEye size={ 12 } /> }
</BaseButton>
</div>
</label>
<label className="flex flex-col gap-1 text-[12px]">
<span className="font-bold">{ localizeWithFallback('usersettings.field.new_username', "New username") }</span>
<div className="relative flex items-center">
<FaIdBadge className="absolute left-2 text-black/40" size={ 12 } />
<input
type="text"
className={ `w-full rounded border bg-white pl-7 pr-8 py-1 focus:outline-none ${ newUsername.length > 0 && (!USERNAME_RE.test(newUsername) || newUsername === session.username) ? 'border-[#a81a12] focus:border-[#a81a12]' : 'border-black/20 focus:border-[#418db0]' }` }
autoComplete="off"
spellCheck={ false }
maxLength={ MAX_USERNAME_LENGTH }
value={ newUsername }
onChange={ event => setNewUsername(event.target.value) }
disabled={ submitting }
placeholder="NewName"
/>
{ newUsername.length > 0 && USERNAME_RE.test(newUsername) && newUsername !== session.username && (
<FaCheckCircle className="absolute right-2 text-[#00800b]" size={ 12 } />
) }
</div>
<span className="user-account-settings__fine-print text-black/50">{ LocalizeText('usersettings.username.rules', [ 'min', 'max' ], [ MIN_USERNAME_LENGTH.toString(), MAX_USERNAME_LENGTH.toString() ]) }</span>
</label>
{ feedback && (
<div className={ `flex items-start gap-2 rounded-md border px-2 py-2 text-[11px] leading-4 ${ feedback.kind === 'error' ? 'border-[#a81a12]/40 bg-[#a81a12]/10 text-[#7a1109]' : 'border-[#00800b]/40 bg-[#00800b]/10 text-[#005407]' }` }>
{ feedback.kind === 'error'
? <FaExclamationTriangle className="mt-[2px] shrink-0" />
: <FaCheckCircle className="mt-[2px] shrink-0" /> }
<span>{ feedback.message }</span>
</div>
) }
<div className="flex justify-end gap-2 pt-1">
<Button variant="secondary" disabled={ submitting } onClick={ () => { resetForm(); setSection('menu'); } }>
{ localizeWithFallback('usersettings.btn.cancel', "Cancel") }
</Button>
<Button variant="warning" disabled={ submitting } onClick={ () => submitUsernameChange() }>
{ submitting ? localizeWithFallback('usersettings.btn.renaming', "Renaming…") : localizeWithFallback('usersettings.btn.rename', "Rename me") }
</Button>
</div>
</div>
) }
</OctaneCardContentView>
</OctaneCardView>
</NativeTextTree>
);
};
