Skip to content

Commit

Permalink
✨mon-pix: use PixCode on candidate code form
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndreiaPena
AndreiaPena committed Feb 12, 2025
1 parent 8495205 commit 83187db
Show file tree
Hide file tree
Showing 9 changed files with 144 additions and 175 deletions.
62 changes: 30 additions & 32 deletions mon-pix/app/components/certification-starter.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<section class="certification-starter">
<h2 class="certification-start-page__title">{{t "pages.certification-start.first-title"}}</h2>
<h1 class="certification-start-page__title">{{t "pages.certification-start.first-title"}}</h1>

{{#if @certificationCandidateSubscription.hasSubscription}}
{{#unless @certificationCandidateSubscription.isV3CoreOnly}}
Expand Down Expand Up @@ -52,39 +52,37 @@
</div>
{{/unless}}
{{/if}}
<label for="certificationStarterSessionCode" class="certification-start-page__order">
{{t "pages.certification-start.access-code"}}
</label>
<form autocomplete="off">
<div class="certification-start-page__session-code-input">
<PixInput
required={{true}}
id="certificationStarterSessionCode"
@type="text"
@value={{this.inputAccessCode}}
maxlength="6"
spellcheck={{false}}
{{on "input" this.handleAccessCodeInput}}
/>
{{#if this.errorMessage}}
<div class="certification-start-page__information">
<p class="certification-start-page__information--error">{{this.errorMessage}}</p>
{{#if this.technicalErrorInfo}}
<details>
<summary>{{t "pages.certification-start.error-messages.unknown.summary-label"}}</summary>
<p>{{this.technicalErrorInfo}}</p>
</details>
{{/if}}
</div>
{{/if}}
</div>

<div class="certification-start-page__field-button">
<form class="certification-start-page__form" autocomplete="off">
<PixLabel for="certificationStarterSessionCode" @requiredLabel={{t "common.form.mandatory"}}>
{{t "pages.certification-start.access-code"}}
</PixLabel>
<PixCode
@id="certificationStarterSessionCode"
@length="6"
@requiredLabel={{true}}
@value={{this.inputAccessCode}}
@validationStatus={{this.validationStatus}}
@errorMessage={{this.validationErrorMessage}}
{{on "keyup" this.clearErrorMessage}}
{{on "input" this.handleAccessCodeInput}}
/>

{{#if this.apiErrorMessage}}
<PixNotificationAlert @type="error" @withIcon={{true}} class="certification-start-page__error-message">
{{this.apiErrorMessage}}
</PixNotificationAlert>
{{/if}}
{{#if this.technicalErrorInformation}}
<details class="certification-start-page__information">
<summary>{{t "pages.certification-start.error-messages.unknown.summary-label"}}</summary>
<p>{{this.technicalErrorInformation}}</p>
</details>
{{/if}}

<PixButton @type="submit" @triggerAction={{this.submit}}>
{{t "pages.certification-start.actions.submit"}}
</PixButton>
</div>
<PixButton @type="submit" @triggerAction={{this.submit}} class="certification-start-page__field-button">
{{t "pages.certification-start.actions.submit"}}
</PixButton>
</form>

<div class="certification-start-page__cgu">
Expand Down
34 changes: 24 additions & 10 deletions mon-pix/app/components/certification-starter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@ export default class CertificationStarter extends Component {
@service pixCompanion;

@tracked inputAccessCode = '';
@tracked errorMessage = null;
@tracked technicalErrorInfo = '';
@tracked apiErrorMessage = null;
@tracked validationErrorMessage = null;
@tracked technicalErrorInformation = null;
@tracked classNames = [];
@tracked certificationCourse = null;
@tracked validationStatus = 'default';

get accessCode() {
return this.inputAccessCode.toUpperCase();
Expand All @@ -41,12 +43,22 @@ export default class CertificationStarter extends Component {
this.inputAccessCode = event.target.value;
}

@action
clearErrorMessage() {
this.apiErrorMessage = null;
this.validationStatus = 'default';
this.validationErrorMessage = null;
this.technicalErrorInformation = null;
}

@action
async submit(e) {
e.preventDefault();
this.errorMessage = null;
this.clearErrorMessage();

if (!this.accessCode) {
this.errorMessage = this.intl.t('pages.certification-start.error-messages.access-code-error');
this.validationStatus = 'error';
this.validationErrorMessage = this.intl.t('pages.certification-start.error-messages.missing-code');
return;
}

Expand All @@ -63,22 +75,24 @@ export default class CertificationStarter extends Component {
newCertificationCourse.deleteRecord();
const statusCode = error.errors?.[0]?.status;
if (statusCode === '404') {
this.errorMessage = this.intl.t('pages.certification-start.error-messages.access-code-error');
this.apiErrorMessage = this.intl.t('pages.certification-start.error-messages.access-code-error');
} else if (statusCode === '412') {
this.errorMessage = this.intl.t('pages.certification-start.error-messages.session-not-accessible');
this.apiErrorMessage = this.intl.t('pages.certification-start.error-messages.session-not-accessible');
} else if (statusCode === '403') {
const errorCode = error.errors?.[0]?.code;
if (errorCode === 'CANDIDATE_NOT_AUTHORIZED_TO_JOIN_SESSION') {
this.errorMessage = this.intl.t('pages.certification-start.error-messages.candidate-not-authorized-to-start');
this.apiErrorMessage = this.intl.t(
'pages.certification-start.error-messages.candidate-not-authorized-to-start',
);
} else if (errorCode === 'CANDIDATE_NOT_AUTHORIZED_TO_RESUME_SESSION') {
this.errorMessage = this.intl.t(
this.apiErrorMessage = this.intl.t(
'pages.certification-start.error-messages.candidate-not-authorized-to-resume',
);
}
} else {
// This should not happen, but in case it does, let give as much info as possible
this.technicalErrorInfo = `${error.message} ${error.stack}`;
this.errorMessage = this.intl.t('pages.certification-start.error-messages.generic');
this.technicalErrorInformation = `${error.message} ${error.stack}`;
this.apiErrorMessage = this.intl.t('pages.certification-start.error-messages.generic');
}
}
}
Expand Down
144 changes: 20 additions & 124 deletions mon-pix/app/styles/components/_certification-starter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,55 +14,30 @@
.certification-start-page {
&__block {
max-width: 980px;
margin-bottom: 32px;
padding: 12px;
margin-bottom: var(--pix-spacing-8x);
padding: var(--pix-spacing-3x);

@include breakpoints.device-is('mobile') {
padding: 16px;
padding: var(--pix-spacing-4x);
}
}

&__information {
display: flex;
flex-direction: column;
gap: var(--pix-spacing-3x);
align-items: center;
margin-top: var(--pix-spacing-3x);
text-align: center;

@extend %pix-body-s;

&--error {
color: var(--pix-error-500);
}

details {
text-align: center;
}
}

&__link-to-user-certifications {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 16px;
padding: 16px;
color: var(--pix-neutral-800);
background-color: var(--pix-neutral-20);
border-radius: 8px;

a,
a:visited {
color: var(--pix-neutral-800);
text-decoration-line: underline;
}
}

&__title {
margin-bottom: 20px;
color: var(--pix-neutral-900);
font-size: 2.625rem;
font-family: fonts.$font-open-sans;
margin-bottom: var(--pix-spacing-6x);
text-align: center;

@extend %pix-title-m;

@include breakpoints.device-is('tablet') {
margin-bottom: var(--pix-spacing-10x);
}
}
}

Expand Down Expand Up @@ -122,102 +97,23 @@
}
}

.certification-start-page__order {
display: block;
margin-top: 5px;
margin-bottom: 5px;
color: var(--pix-neutral-800);
font-size: 1.25rem;
font-family: fonts.$font-open-sans;
line-height: 28px;
text-align: center;
}

.certification-start-page__cgu {
margin: 5px 30px;
color: var(--pix-neutral-800);
font-size: 0.75rem;
margin: var(--pix-spacing-2x) var(--pix-spacing-10x);
line-height: 18px;
text-align: justify;
}

.certification-start-page__session-code-input {
display: flex;
flex-direction: column;
flex-grow: 1;
align-items: center;
margin-top: 20px;
margin-bottom: 15px;
@extend %pix-body-xs;
}

#certificationStarterSessionCode {
@extend %pix-monospace;

$space-between-dashes: 0.6ch;
$nb-characters: 6;
$total-width: $nb-characters * (1ch + $space-between-dashes);

display: inline-block;
box-sizing: content-box;
width: $total-width;
height: 50px;
padding: 0 0.2ch 1px 0.5ch;
font-size: 1.875rem;
letter-spacing: $space-between-dashes;
text-transform: uppercase;
background: repeating-linear-gradient(
90deg,
var(--pix-neutral-100) 0,
var(--pix-neutral-100) 1ch,
transparent 0,
transparent 1ch + $space-between-dashes
)
0 100% / #{$total-width - $space-between-dashes} 2px no-repeat;
background-position-x: 0.5ch;
background-position-y: 2.5ch;
border: solid 2px var(--pix-neutral-100);
border-radius: 3px;
outline: none;

@media all and (-ms-high-contrast: none) {
$ie11-modifier: 1.162;
$space-between-dashes: $ie11-modifier * 0.6ch;
$total-width: $nb-characters * ($ie11-modifier * 1.2ch + $space-between-dashes);

width: $total-width;
padding: 0 0 1px 1ch;

// display differently for IE because 1 character (ch) is equal to 1.162
line-height: 0.7;
letter-spacing: $space-between-dashes;
background: repeating-linear-gradient(
90deg,
var(--pix-neutral-100) 0,
var(--pix-neutral-100) 1.3ch,
transparent 0,
transparent 1.3ch + $space-between-dashes
)
0 100% / #{$total-width - $space-between-dashes} 2px no-repeat;
background-position-x: 0.1ch * $ie11-modifier;
background-position-y: 2.8ch * $ie11-modifier;
background-origin: content-box;
}

&:focus {
color: var(--pix-neutral-800);
outline: none;
}
.certification-start-page__form {
text-align: center;
}

.certification-start-page__field-button {
display: flex;
justify-content: center;
margin-top: 25px;
margin-bottom: 25px;
.certification-start-page__error-message {
display: inline-flex;
margin-top: var(--pix-spacing-4x);
}

.certification-start-page__submit_button {
width: content-box;
min-width: 150px;
white-space: nowrap;
.certification-start-page__field-button {
margin: var(--pix-spacing-6x) auto;
}
Loading

0 comments on commit 83187db

Please sign in to comment.