profil.component OK!

Rutkarf · Jul 9, 2024 · b191d8d · b191d8d
1 parent 309a6a3
commit b191d8d
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 112 deletions.
diff --git a/src/app/components/editprofil/editprofil.component.html b/src/app/components/editprofil/editprofil.component.html
diff --git a/src/app/components/editprofil/editprofil.component.scss b/src/app/components/editprofil/editprofil.component.scss
diff --git a/src/app/components/editprofil/editprofil.component.spec.ts b/src/app/components/editprofil/editprofil.component.spec.ts
diff --git a/src/app/components/editprofil/editprofil.component.ts b/src/app/components/editprofil/editprofil.component.ts
diff --git a/src/app/components/profil/profil.component.html b/src/app/components/profil/profil.component.html
@@ -21,4 +21,47 @@ <h2>User Info</h2>
   <button class="edit-button" (click)="toggleEditMode()">
     {{ isEditMode ? 'Enregistrer' : 'Editer' }}
   </button>
-</div>
+</div>
+
+ <!-- Section Relevé d'Identité Bancaire -->
+ <div class="bank-info">
+  <h3>Relevé d'Identité Bancaire</h3>
+  <div class="bank-info-item">
+    <label for="beneficiaire">Bénéficiaire:</label>
+    <input type="text" id="beneficiaire" [value]="user.beneficiaire" [disabled]="!isEditMode">
+  </div>
+  <div class="bank-info-item">
+    <label for="iban">IBAN:</label>
+    <input type="text" id="iban" [value]="user.iban" [disabled]="!isEditMode">
+  </div>
+  <div class="bank-info-item">
+    <label for="bic">BIC:</label>
+    <input type="text" id="bic" [value]="user.bic" [disabled]="!isEditMode">
+  </div>
+  <div class="bank-info-item">
+    <label for="nomBanque">Nom et adresse de la banque:</label>
+    <textarea id="nomBanque" [disabled]="!isEditMode">{{ user.nomBanque }}</textarea>
+  </div>
+</div>
+
+<div class="option">
+  <h2>Option</h2>
+  <ul>
+    <li><a routerLink="/help">Help</a></li>
+    <li><a routerLink="/apprendre">Apprendre</a></li>
+    <li><a routerLink="/boite-de-reception">Boite de réception</a></li>
+    <li><a routerLink="/a-propos">A propos de Ravepay</a></li>
+  </ul>
+</div>
+
+
+<div class="security-section">
+  <h2>Sécurité</h2>
+  <ul>
+    <li><a routerLink="/securite-et-confidentialite">Sécurité et confidentialité</a></li>
+    <li><a routerLink="/parametres-de-notification">Paramètres de notification</a></li>
+    <li><a routerLink="/signaler-un-bug">Signaler un bug (!$BOUNTY REWARD$!)</a></li>
+    <li><a routerLink="/se-deconnecter">Se déconnecter</a></li>
+  </ul>
+</div>
+
diff --git a/src/app/components/profil/profil.component.scss b/src/app/components/profil/profil.component.scss
@@ -39,3 +39,140 @@
     cursor: pointer;
 }
 
+.profile-section {
+    background-color: #f0f0f0;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+  }
+
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .info-item label {
+    font-weight: bold;
+    width: 150px;
+    margin-right: 10px;
+  }
+
+  .info-item input[type="text"],
+  .info-item textarea {
+    width: 300px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 16px;
+  }
+
+  .bank-info {
+    margin-top: 20px;
+  }
+
+  .bank-info h3 {
+    margin-bottom: 10px;
+  }
+
+  .bank-info-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .bank-info-item label {
+    font-weight: bold;
+    width: 200px;
+    margin-right: 10px;
+  }
+
+  .bank-info-item input[type="text"],
+  .bank-info-item textarea {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    font-size: 16px;
+  }
+
+  .edit-button {
+    background-color: #4caf50;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+
+  .edit-button:hover {
+    background-color: #45a049;
+  }
+
+  .option {
+    background-color: #f0f0f0;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+  }
+
+  .option h2 {
+    margin-bottom: 10px;
+  }
+
+  .option ul {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  .option li {
+    margin-bottom: 10px;
+  }
+
+  .option a {
+    text-decoration: none;
+    color: #333;
+    font-size: 16px;
+  }
+
+  .option a:hover {
+    color: #4CAF50;
+  }
+
+  .security-section {
+    background-color: #f0f0f0;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+  }
+
+  .security-section h2 {
+    color: #333;
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+
+  .security-section ul {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  .security-section ul li {
+    margin-bottom: 10px;
+  }
+
+  .security-section ul li a {
+    color: #007bff;
+    text-decoration: none;
+    font-size: 18px;
+  }
+
+  .security-section ul li a:hover {
+    text-decoration: underline;
+  }
+