Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ajout du scrollView à la page DéfaultNotification #132

Merged
merged 3 commits into from
Sep 24, 2024
Merged

Ajout du scrollView à la page DéfaultNotification #132

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e38db43
Ajout du scrollView à la page DéfaultNotification
ClaudeArs Sep 23, 2024
643558a
Ajout du scrollView à la page DéfaultNotification
ClaudeArs Sep 23, 2024
6383f32
Ajout du boutton retour à l'accueil
ClaudeArs Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions app/src/localization/en/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,14 +156,15 @@ const translation = {
ButtonTitle: 'Start',
},
DefaultNotificationPage: {
Title: 'Demander son ANIG (EN)',
Title: 'Request your Authentication Attestation',
Description:
"L'attestation numérique d'identité gouvernemental (ANIG) est une attestation qui vous permettra de vous identifier, en ligne et en personne, en partageant le minimum d'information nécessaire.(EN)",
SAGConnexion: 'Étape 1 - Connexion au SAG(EN)',
SAGConnexionDescription: 'Lorem ipsum dolor amet lorem ipsum dolor set amet lorem ipsum.(EN)',
ANIGAccept: "Étape 2 - Accepter l'offre d'attestation(EN)",
ANIGAcceptDescription: 'Lorem ipsum dolor amet lorem ipsum dolor set amet lorem ipsum.(EN)',
ButtonTitle: 'Recevoir mon attestation',
'The Authentication Attestation is a attestation that will allow you to identify yourself more quickly with government services using the Government Authentication Service.',
SAGConnexion: 'Step 1 - Log in to the Government Authentication Service',
SAGConnexionDescription: 'You must authenticate yourself with the service.',
ANIGRequest: 'Step 2 - Request the attestation',
ANIGAcceptDescription:
'From the account management, you will need to scan the QR code that will be presented to you.\r\n\r\nYou will then need to accept the certificate offer that will be proposed to you.',
ButtonTitle: 'Receive my attestation',
},
Screens: {
Splash: 'Splash',
Expand Down
13 changes: 7 additions & 6 deletions app/src/localization/fr/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,13 +227,14 @@ const translation = {
ButtonTitle: 'Démarrer',
},
DefaultNotificationPage: {
Title: 'Demander son ANIG',
Title: 'Demander son Attestation d’authentification',
Description:
"L'attestation numérique d'identité gouvernemental (ANIG) est une attestation qui vous permettra de vous identifier, en ligne et en personne, en partageant le minimum d'information nécessaire.",
SAGConnexion: 'Étape 1 - Connexion au SAG',
SAGConnexionDescription: 'Lorem ipsum dolor amet lorem ipsum dolor set amet lorem ipsum.',
ANIGAccept: "Étape 2 - Accepter l'offre d'attestation",
ANIGAcceptDescription: 'Lorem ipsum dolor amet lorem ipsum dolor set amet lorem ipsum.',
'L’Attestation d’authentification est une attestation qui vous permettra de vous identifier plus rapidement auprès des services gouvernementaux utilisant le Service d’authentification gouvernementale.',
SAGConnexion: 'Étape 1 - Connexion au Service d’authentication gouvernementale',
SAGConnexionDescription: 'Vous devez vous authentifier auprès du service.',
ANIGRequest: 'Étape 2 - Demander l’attestation',
ANIGAcceptDescription:
'Depuis la gestion de compte, vous devrez balayer le code QR qui vous sera présenté.\r\n\r\nVous devrez ensuite accepter l’offre d’attestation qui vous sera proposée.',
ButtonTitle: 'Recevoir mon attestation',
},
StatusMessages: {
Expand Down
80 changes: 49 additions & 31 deletions app/src/screens/DefaultNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,70 +8,88 @@ import {
} from '@hyperledger/aries-bifold-core'
import { StackScreenProps } from '@react-navigation/stack'
import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View } from 'react-native'
import { ScrollView, StyleSheet, Text, View } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'

import HeaderText from '../components/HeaderText'

type DefaultProps = StackScreenProps<NotificationStackParams, Screens.CustomNotification>

const DefaultNotification: React.FC<DefaultProps> = () => {
const { ColorPallet, TextTheme } = useTheme()
const { t } = useTranslation()

const styles = StyleSheet.create({
pageContainer: {
flex: 1,
container: {
height: '100%',
padding: 20,
backgroundColor: ColorPallet.brand.primaryBackground,
},
pageContainer: {
marginBottom: 20,
},
textHeaderTitle: {
...TextTheme.headingThree,
flexShrink: 1,
color: TextTheme.headingThree.color,
},
textSectionTitle: {
...TextTheme.headingFour,
...TextTheme.title,
flexShrink: 1,
color: TextTheme.headingFour.color,
color: TextTheme.bold.color,
},
button: {
margin: 15,
marginTop: 24,
marginBottom: 20,
},
section: {
paddingVertical: 24,
paddingHorizontal: 25,
paddingVertical: 12,
paddingHorizontal: 10,
},
sectionDescription: {
...TextTheme.normal,
color: TextTheme.normal.color,
textAlign: 'left',
textDecorationLine: 'none',
paddingTop: 20,
paddingTop: 8,
},
sectionDescriptionTitle: {
...TextTheme.normal,
color: TextTheme.normal.color,
textAlign: 'left',
textDecorationLine: 'none',
paddingTop: 32,
},
})

return (
<SafeAreaView style={styles.pageContainer}>
<View style={styles.section}>
<Text accessibilityRole={'header'} style={styles.textHeaderTitle}>
{t('DefaultNotificationPage.Title')}
</Text>
<Text style={styles.sectionDescription}> {t('DefaultNotificationPage.Description')}</Text>
</View>
<View style={styles.section}>
<Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.SAGConnexion')}</Text>
<Text style={styles.sectionDescription}> {t('DefaultNotificationPage.SAGConnexionDescription')}</Text>
</View>
<View style={styles.section}>
<Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.ANIGAccept')}</Text>
<Text style={styles.sectionDescription}> {t('DefaultNotificationPage.ANIGAcceptDescription')}</Text>
</View>
<View style={styles.button}>
<Button
buttonType={ButtonType.Primary}
testID={testIdWithKey('StartProcess')}
accessibilityLabel={t('DefaultNotificationPage.ButtonTitle')}
title={t('DefaultNotificationPage.ButtonTitle')}
></Button>
</View>
<SafeAreaView edges={['left', 'right', 'bottom']} style={styles.pageContainer}>
<ScrollView style={styles.container}>
<View style={styles.section}>
<HeaderText title={t('DefaultNotificationPage.Title')} />
<Text style={styles.sectionDescriptionTitle}> {t('DefaultNotificationPage.Description')}</Text>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pourquoi 4 fois la même chose?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'avais fait un test pour le scrollView, portant dans mon code je les ai enlevé

<Text style={styles.sectionDescriptionTitle}> {t('DefaultNotificationPage.Description')}</Text>
<Text style={styles.sectionDescriptionTitle}> {t('DefaultNotificationPage.Description')}</Text>
<Text style={styles.sectionDescriptionTitle}> {t('DefaultNotificationPage.Description')}</Text>
</View>
<View style={styles.section}>
<Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.SAGConnexion')}</Text>
<Text style={styles.sectionDescription}> {t('DefaultNotificationPage.SAGConnexionDescription')}</Text>
</View>
<View style={styles.section}>
<Text style={styles.textSectionTitle}>{t('DefaultNotificationPage.ANIGRequest')}</Text>
<Text style={styles.sectionDescription}> {t('DefaultNotificationPage.ANIGAcceptDescription')}</Text>
</View>
<View style={styles.button}>
<Button
Copy link

@fc-santos fc-santos Sep 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Il faut ajouter un bouton secondaire pour revenir à la page d'accueil. Je crois que les boutons serait placés en dehors de la ScrollView pour qu'on les affichent en tout temps sans avoir à faire défiler la page.

buttonType={ButtonType.Primary}
testID={testIdWithKey('StartProcess')}
accessibilityLabel={t('DefaultNotificationPage.ButtonTitle')}
title={t('DefaultNotificationPage.ButtonTitle')}
></Button>
</View>
</ScrollView>
</SafeAreaView>
)
}
Expand Down
Loading