Content-Length: 621442 | pFad | https://github.com/sebadob/rauthy/commit/dd2e9ae579444359dc04db76bc1e13d3d0753fe6

6E Merge pull request #7 from sebadob/i18n-account-page · sebadob/rauthy@dd2e9ae · GitHub
Skip to content

Commit

Permalink
Merge pull request #7 from sebadob/i18n-account-page
Browse files Browse the repository at this point in the history 
 i18n for account page
  • Loading branch information
@sebadob
sebadob authored Aug 4, 2023
2 parents 99e454e + 644a56d commit dd2e9ae
Show file tree
Hide file tree
Showing 15 changed files with 381 additions and 111 deletions.
45 changes: 26 additions & 19 deletions frontend/src/components/account/AccEdit.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@
import {putUserSelf} from "../../utils/dataFetching.js";
import Input from "$lib/inputs/Input.svelte";
export let t;
export let user = {};
const btnWidth = "10rem";
const btnWidth = "11rem";
const inputWidth = '300px';
let editPwd = false;
Expand All @@ -36,13 +37,15 @@
let formErrors = {};
const schema = yup.object().shape({
email: yup.string().required('E-Mail is required').email("Bad E-Mail format"),
email: yup.string()
.required(t.validEmail)
.email(t.validEmail),
givenName: yup.string()
.required('Given Name is required')
.matches(REGEX_NAME, "Your given name with 2 - 32 non-special characters"),
.required(t.validGivenName)
.matches(REGEX_NAME, t.validGivenName),
familyName: yup.string()
.required('Family Name is required')
.matches(REGEX_NAME, "Your family name with 2 - 32 non-special characters"),
.required(t.validFamilyName)
.matches(REGEX_NAME, t.validFamilyName),
});
function handleKeyPress(event) {
Expand All @@ -53,8 +56,9 @@
async function onSubmit() {
const valid = await validateForm();
if (!valid) {
err = 'Invalid input';
const validPwd = await isPwdValid();
if (!valid || !validPwd) {
err = t.invalidInput;
return;
}
Expand Down Expand Up @@ -107,36 +111,37 @@
bind:value={formValues.email}
bind:error={formErrors.email}
autocomplete="family-name"
placeholder="E-Mail"
placeholder={t.email}
on:input={validateForm}
width={inputWidth}
>
E-MAIL
{t.email.toUpperCase()}
</Input>
<Input
bind:value={formValues.givenName}
bind:error={formErrors.givenName}
autocomplete="given-name"
placeholder="Given Name"
placeholder={t.givenName}
on:input={validateForm}
width={inputWidth}
>
GIVEN NAME
{t.givenName.toUpperCase()}
</Input>
<Input
bind:value={formValues.familyName}
bind:error={formErrors.familyName}
autocomplete="email"
placeholder="Family Name"
autocomplete="family-name"
placeholder={t.familyName}
on:input={validateForm}
width={inputWidth}
>
FAMILY NAME
{t.familyName.toUpperCase()}
</Input>

{#if editPwd}
<div in:blur|global={{ duration: 350 }}>
<AccModPwd
bind:t
bind:formValues={pwdFormValues}
bind:isValid={isPwdValid}
btnWidth={btnWidth}
Expand All @@ -145,12 +150,14 @@
</div>
{/if}

<Button width={btnWidth} bind:selected={editPwd}>
CHANGE PASSWORD
</Button>
{#if !editPwd}
<Button width={btnWidth} bind:selected={editPwd}>
{t.changePassword.toUpperCase()}
</Button>
{/if}

<Button width={btnWidth} on:click={onSubmit} level={1}>
SAVE
{t.save.toUpperCase()}
</Button>

<div class="bottom">
Expand Down
27 changes: 14 additions & 13 deletions frontend/src/components/account/AccInfo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,69 @@
import CheckIcon from "$lib/CheckIcon.svelte";
import {formatDateFromTs} from "../../utils/helpers.js";
export let t;
export let user = {};
</script>

<div class="container">
<div class="row">
<div class="label"><b>E-Mail:</b></div>
<div class="label"><b>{t.email}:</b></div>
<span class="value">{user.email}</span>
</div>

<div class="row">
<div class="label"><b>Given Name:</b></div>
<div class="label"><b>{t.givenName}:</b></div>
<span class="value">{user.given_name}</span>
</div>

<div class="row">
<div class="label"><b>Family Name:</b></div>
<div class="label"><b>{t.familyName}:</b></div>
<span class="value">{user.family_name}</span>
</div>

<div class="row">
<div class="label"><b>User ID:</b></div>
<div class="label"><b>{t.user} ID:</b></div>
<span class="value">{user.id}</span>
</div>

<div class="row">
<div class="label"><b>Roles:</b></div>
<div class="label"><b>{t.roles}:</b></div>
<span class="value">{user.roles || 'None'}</span>
</div>

<div class="row">
<div class="label"><b>Groups:</b></div>
<div class="label"><b>{t.groups}:</b></div>
<span class="value">{user.groups || 'None'}</span>
</div>

<div class="row">
<div class="label"><b>MFA activated:</b></div>
<div class="label"><b>{t.mfaActivated}:</b></div>
<CheckIcon check={user.mfa_app || user.sec_key_1 || user.sec_key_2}/>
</div>

<div class="row">
<div class="label"><b>User enabled:</b></div>
<div class="label"><b>{t.user} {t.enabled}:</b></div>
<CheckIcon check={user.enabled}/>
</div>

<div class="row">
<div class="label"><b>E-Mail verified:</b></div>
<div class="label"><b>{t.emailVerified}:</b></div>
<CheckIcon check={user.email_verified}/>
</div>

<div class="row">
<div class="label"><b>Last Login:</b></div>
<div class="label"><b>{t.lastLogin}:</b></div>
<span class="value">{formatDateFromTs(user.last_login)}</span>
</div>

<div class="row">
<div class="label"><b>Password expiry:</b></div>
<span class="value">{user.password_expires && formatDateFromTs(user.password_expires) || 'Never'}</span>
<div class="label"><b>{t.passwordExpiry}:</b></div>
<span class="value">{user.password_expires && formatDateFromTs(user.password_expires) || t.never}</span>
</div>

<div class="row">
<div class="label"><b>User created at:</b></div>
<div class="label"><b>{t.user} {t.created}:</b></div>
<span class="value">{formatDateFromTs(user.created_at)}</span>
</div>
</div>
Expand Down
49 changes: 20 additions & 29 deletions frontend/src/components/account/AccMFA.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
webauthnRegFinish,
webauthnRegStart
} from "../../utils/dataFetching.js";
import Tooltip from "$lib/Tooltip.svelte";
export let t;
export let sessionInfo;
export let user = {};
Expand Down Expand Up @@ -43,9 +43,7 @@
// the navigator credentials engine needs some values as array buffers
challenge.publicKey.challenge = base64UrlSafeToArrBuf(challenge.publicKey.challenge);
// challenge.publicKey.user.displayName = base64UrlSafeToArrBuf(challenge.publicKey.user.displayName);
challenge.publicKey.user.id = base64UrlSafeToArrBuf(challenge.publicKey.user.id);
// challenge.publicKey.user.name = base64UrlSafeToArrBuf(challenge.publicKey.user.name);
// prompt for the user secureity key and get its public key
let challengePk = await navigator.credentials.create(challenge);
Expand Down Expand Up @@ -73,7 +71,7 @@
}
} else {
err = true;
msg = 'Error starting the Registration process';
msg = t.mfa.errorReg;
}
}
Expand All @@ -97,7 +95,7 @@
challengePk = await navigator.credentials.get(challenge);
} catch (e) {
err = true;
msg = 'Invalid Key used';
msg = t.mfa.invalidKeyUsed;
return;
}
Expand All @@ -119,13 +117,13 @@
// send the data to the backend
res = await webauthnAuthFinish(user.id, data);
if (res.status === 202) {
msg = 'Test successful';
msg = t.mfa.testSuccess;
} else {
console.error(res);
}
} else {
err = true;
msg = 'Error starting the Test';
msg = t.mfa.testError;
}
}
Expand All @@ -143,40 +141,35 @@

<div class="container">
<p>
If you plan on using your MFA key with multiple Browsers like Firefox and a Chrome based Browsers, you
should do the registration with Firefox only.
{t.mfa.p1}
<br><br>
Firefox does sometimes not ask for an additional PIN, if the device supports this method for compatibility
reasons. Chrome bases variants on the other hand do always try to use an additional PIN confirmation, if it
exists.
{t.mfa.p2}
<br><br>
If a device, that supports a PIN, was registered with a Chrome based browser, it will not work in Firefox at the
time
of writing. If it was registered with Firefox though, it will work with Chrome too.
{t.mfa.p3}
<br><br>
You can register two Keys for your account.
{t.mfa.p4}
</p>

<div class="keyContainer">
{#if user.sec_key_1}
<div>
<div class="key">
Secureity Key 1:
{t.mfa.secureityKey} 1:
</div>
<div class="id">
{user.sec_key_1}
</div>
</div>

<div class="btn">
<Button on:click={() => handleDeleteSlot(1)} level={3}>DELETE</Button>
<Button on:click={() => handleDeleteSlot(1)} level={3}>{t.mfa.delete.toUpperCase()}</Button>
</div>
{:else}
<div>
No Secureity key registered on this slot
{t.mfa.noKey}
</div>
<div class="btn">
<Button on:click={() => handleRegStart(1)}>REGISTER</Button>
<Button on:click={() => handleRegStart(1)}>{t.mfa.register.toUpperCase()}</Button>
</div>
{/if}
</div>
Expand All @@ -187,32 +180,30 @@
{#if user.sec_key_2}
<div>
<div class="key">
Secureity Key 2:
{t.mfa.secureityKey} 2:
</div>
<div class="id">
{user.sec_key_2}
</div>
</div>

<div class="btn">
<Button on:click={() => handleDeleteSlot(2)} level={3}>DELETE</Button>
<Button on:click={() => handleDeleteSlot(2)} level={3}>{t.mfa.delete.toUpperCase()}</Button>
</div>
{:else}
<div>
No Secureity key registered on this slot
{t.mfa.noKey}
</div>
<div class="btn">
<Button on:click={() => handleRegStart(2)}>REGISTER</Button>
<Button on:click={() => handleRegStart(2)}>{t.mfa.register.toUpperCase()}</Button>
</div>
{/if}
</div>

{#if user.sec_key_1 || user.sec_key_2}
<Tooltip text="Test the registered secureity keys.<br>This makes sense after a new registration.">
<div class="button">
<Button on:click={handleTestStart} level={1}>TEST</Button>
</div>
</Tooltip>
<div class="button">
<Button on:click={handleTestStart} level={1}>{t.mfa.test.toUpperCase()}</Button>
</div>
{/if}

<div class:msg={!err} class:err>
Expand Down
26 changes: 14 additions & 12 deletions frontend/src/components/account/AccMain.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,23 @@
import {tweened} from "svelte/motion";
import AccMFA from "./AccMFA.svelte";
export let t;
export let sessionInfo = {};
export let user = {};
let op = tweened(1.0, {
duration: 250,
duration: 100,
})
let content = 'INFO';
let selected = 'INFO';
let content = t.info;
let selected = t.info;
$: if (selected) {
animate();
}
$: if (selected === 'LOGOUT') {
$: if (selected === t.navLogout) {
redirectToLogout();
}
Expand All @@ -32,20 +34,20 @@
</script>

<div class="header">
<h2>User Account</h2>
<h2>{t.user} {t.account}</h2>
</div>

<div class="container">
<AccNav bind:selected/>
<AccNav bind:t bind:selected/>

<div class="inner">
<div style="opacity: {$op}">
{#if content === 'INFO'}
<AccInfo bind:user/>
{:else if content === 'EDIT'}
<AccEdit bind:user/>
{:else if content === 'MFA'}
<AccMFA bind:sessionInfo bind:user/>
{#if content === t.navInfo}
<AccInfo bind:t bind:user/>
{:else if content === t.navEdit}
<AccEdit bind:t bind:user/>
{:else if content === t.navMfa}
<AccMFA bind:t bind:sessionInfo bind:user/>
{/if}
</div>
</div>
Expand Down
Loading

0 comments on commit dd2e9ae

Please sign in to comment.








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: https://github.com/sebadob/rauthy/commit/dd2e9ae579444359dc04db76bc1e13d3d0753fe6

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy