Bugifx/s05/t222

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+

.github/workflows/cd-development.yml

@@ -1,16 +1,17 @@
 name: CD-development
 
 on:
-  pull_request:
-    branches: [ "mfe-dev" ]
+  push:
+    branches: [ "feature-dc-front-cd" ]
+
 
 jobs:
   Build-and-Test-on-Nodejs:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [ 16.x, 18.x ]
+        node-version: [ 16.x]
 
     steps:
     - uses: actions/checkout@v3
@@ -44,10 +45,18 @@ jobs:
     - name: Set up Docker Buildx
       uses: docker/setup-buildx-action@v2
 
-    - name: Build and push to DockerHub
+    - name: Front-externo
       uses: docker/build-push-action@v3
       with:
         context: .
         file: ./Dockerfile
         push: true
-        tags: ${{ secrets.DOCKER_HUB_USERNAME }}/front.li-sense:development
+        tags: ${{ secrets.DOCKER_HUB_USERNAME }}/front.li-sense:development-externo
+
+    - name: Front-interno
+      uses: docker/build-push-action@v3
+      with:
+        context: .
+        file: ./li-sense-app/Dockerfile
+        push: true
+        tags: ${{ secrets.DOCKER_HUB_USERNAME }}/front.li-sense:development-interno

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3'
+
+services:
+
+  front-1:
+    container_name: front-externo
+    ports:
+      - "9000:9000"
+
+  front-2:
+    container_name: front-interno
+    build:
+      context: ./li-sense-app
+    ports:
+      - "8080:8080"

li-sense-app/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+

li-sense-app/Dockerfile

@@ -12,4 +12,4 @@ RUN npm run build
 
 EXPOSE 8080
 # RUN
-CMD [ "npm", "start" ]
+CMD [ "npm","start"]

li-sense-app/src/_pages/BeAseller/BeAseller.css

@@ -1,8 +1,8 @@
-.panel-detail {
+/* .panel-detail {
     border-radius: 8px;
     border: 2px solid var(--color-secondary);
     background-color: var(--color-background-form);
-}
+} */
 
 .submit {
     font-family: var(--title-fonts);
@@ -19,4 +19,8 @@
     color: #000;
     font-weight: bold;
     text-decoration: none;
+}
+.profile-picture {
+    width: 200px;
+    height: 200px;
 }

li-sense-app/src/_pages/BeAseller/BeAseller.js

@@ -11,10 +11,10 @@ export default function BeAseller() {
         <div className='text-2xl py-1 px-1 font-bold container-text'>
           <h1>Torne-se um Vendedor</h1>
         </div>
-        <div className='text-xl pt-4 font-extrabold'>
-          <h1>Informações do Usuário</h1>
-        </div>
         <div className='panel-detail my-4'>
+          <div className='text-xl pt-4 font-extrabold'>
+            <h1>Informações do Usuário</h1>
+          </div>
           <div className='grid grid-cols-6'>
             <div className='lg:col-span-4 col-span-6 p-6'>
               <div className='py-2'>
@@ -69,10 +69,18 @@ export default function BeAseller() {
               </div>
             </div>
             <div className='lg:col-start-5 col-start-3 py-14 px-6'>
-              <img 
-                name='avatar'
-                className='rounded-full w-[240px] h-[240px]'
-                src={user.profileObj ? user.profileObj.imageUrl : ''}/>
+              <div>
+                <label className="profile-picture" for="profile-picture-input" tabIndex="0">
+                  <span className="profile-picture-image">Escolher nova foto</span>
+                </label>
+                <input
+                  onchange="readURL(this);"
+                  type="file"
+                  name="profile-picture-input"
+                  id="profile-picture-input"
+                  multiple
+                ></input>
+              </div>
             </div>
           </div>
         </div>

li-sense-app/src/_pages/Profile/Profile.css

@@ -1,9 +1,8 @@
-
-.panel-detail {
+/* .panel-detail {
   border-radius: 8px;
   border: 2px solid var(--color-secondary);
   background-color: var(--color-background-form);
-}
+} */
 
 #profile-picture-input {
   display: none;
@@ -52,6 +51,11 @@
   max-width: 100%;
 }
 
+input:disabled {
+  border: 2px solid var(--color-primary);
+  background-color: var(--text-color);
+}
+
 .submit {
   font-family: var(--title-fonts);
   box-shadow: 5%;

li-sense-app/src/_pages/Profile/Profile.js

@@ -1,14 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import './Profile.css';
-import Logocentral from "../../_assets/img/logoredonda.png";
 import LisenseContext from '../../_context/LisenseContext';
 import { useNavigate } from 'react-router-dom';
 export default function Profile(props){
-  const [nome, setNome] = useState(props.nome);
-  const [senha, setSenha] = useState(props.senha);
-  const [email, setEmail] = useState(props.email);
-  const [cpf, setCpf] = useState(props.cpf);
-  const [telefone, setTelefone] = useState(props.telefone);
+  const navigate = useNavigate();
   const { user } = React.useContext(LisenseContext);
 
   return (
@@ -52,7 +47,7 @@ export default function Profile(props){
               </div>
             </div>
             <div className='flex-1 py-4 px-5'>
-              {/*Componente da foto de perfil não esta otimizado e tende a distorcer com o tamanho da tela */}
+              {/*Componente da foto de perfil*/}
               <label forhtml='avatar' className='mb-3 block text-base font-medium'>Foto de Perfil</label> 
               <div>
                 <label className="profile-picture" for="profile-picture-input" tabIndex="0">
@@ -122,47 +117,37 @@ export default function Profile(props){
                 className='form-control block w-full text-sm'
               />
             </div> 
-
-            {/* <div className='py-2'>
-              <label
-                forhmtl='tags'
-                className='text-base font-medium'>
-                  Categorias
-              </label>
-              <input
-                name='tags'
-                className='form-control'
-              />
-            </div> */}
           </div> 
         </div>
         <div className='panel-detail my-4'>
           <div className='text-xl font-extrabold pt-3 px-5'>
             <h1>Informações da Empresa</h1>
           </div>
           <div className='grid grid-cols-2 gap-4 px-5'>
-            <div className=''>
+            <div>
               <label 
-                forhtml='password' 
+                forhtml='nomemepresa' 
                 className='mb-3 text-base font-medium'>
                   Nome da Empresa
               </label>
               <div className='flex gap-4 items-center'>
                 <input
-                  name='password' type='password'
-                  className='form-control '
+                  disabled
+                  name='nomemepresa'
+                  className='form-control'
                   placeholder={'Torne-se um Vendedor'}
                 />
               </div>
             </div>
-            <div className=''>
+            <div>
               <label 
                 forhtml='cnpj' 
                 className='mb-3 text-base font-medium'>
                   CNPJ
               </label>
               <div className='flex gap-4 items-center'>
                 <input
+                  disabled
                   name='cnpj'
                   className='form-control'
                   placeholder={'Torne-se um Vendedor'}
@@ -171,7 +156,7 @@ export default function Profile(props){
             </div>
           </div>
           <div className='flex justify-center py-4'>
-            <button className='submit'>Torne-se um Vendedor</button>
+            <button className='submit' onClick={() => {navigate("/profile/BeAseller");}}>Torne-se um Vendedor</button>
           </div>         
         </div>
       </div>

li-sense-app/src/_pages/UserConfig/UserConfig.css

@@ -159,3 +159,30 @@ input {
 input:focus {
     border: 3px solid rgb(98, 0, 255);
 }
+
+.panel-detail {
+    border-radius: 8px;
+    border: 2px solid var(--color-secondary);
+    background-color: var(--color-background-form);
+}
+
+.submit {
+    font-family: var(--title-fonts);
+    box-shadow: 5%;
+    background-color: var(--color-primary);
+
+    color: #ffff;
+    padding: 10px 20px;
+
+    border-color: transparent;
+    border-radius: 5px;
+
+    transition: all 0.3s ease-out;
+}
+
+.submit:hover {
+    background: var(--color-tertiary);
+    color: #000;
+    font-weight: bold;
+    text-decoration: none;
+}

li-sense-app/src/_pages/UserConfig/UserConfig.js

@@ -1,13 +1,109 @@
 import React from "react";
 import "./UserConfig.css";
-import Form from "./components/Form";
+import LisenseContext from '../../_context/LisenseContext';
 
 export default function UserConfig() {
+  const { user } = React.useContext(LisenseContext);
+
   return (
-    <>
-      <div className="config">
-        <Form />
+    <div className="w-screen">
+      <div className='text-2xl py-1 px-1 font-bold container-text'>
+        <h1>Configurações de Usuário</h1>
+      </div>
+      <div className='flex-row max-w-4xl mx-auto py-6'>
+        <div className='panel-detail my-4 pb-6'>
+          <div className='text-xl pt-4 font-extrabold'>
+            <h1>Editar Foto de Perfil</h1>
+          </div>
+          <div className='flex flex-col items-center p-4'>
+            <div className='py-4'>
+              Para adicionar uma foto de perfil basta clicar na foto
+            </div>
+            <div className='order-first py-2'>
+              <label className="profile-picture" for="profile-picture-input" tabIndex="0">
+                <span className="profile-picture-image">Escolher nova foto</span>
+              </label>
+              <input
+                onchange="readURL(this);"
+                type="file"
+                name="profile-picture-input"
+                id="profile-picture-input"
+                multiple
+              ></input>
+            </div>
+          </div>
+        </div>
+        <div className='panel-detail my-4'>
+          <div className='text-xl pt-4 font-extrabold'>
+            <h1>Editar Informações</h1>
+          </div>
+          <div className='p-6 grid grid-cols-2 gap-4'>
+            <div className='py-2'>
+              <label 
+                forhmtl='username'
+                className='text-base font-medium'>
+                  Nome completo
+              </label>
+              <input
+                name='username'
+                className='form-control'
+                placeholder={user.profileObj ? user.profileObj.name : ''}
+              />
+              <div className='px-6 text-sm text-justify'>
+                Esse é nome como você deverá ser mencionado nas compras ou registros.
+              </div>
+            </div>
+            <div className='py-2'>
+              <label 
+                forhmtl='email'
+                className='text-base font-medium'>
+                  Email Público
+              </label>
+              <input
+                name='email'
+                className='form-control'
+                placeholder={user.profileObj ? user.profileObj.email : ''}
+              />
+              <div className='px-6 text-sm text-justify'>
+                Você pode adicionar novos emails para facilitar a verificação.
+              </div>
+            </div>
+
+          </div>
+          <div className='p-6 grid grid-cols-2 gap-4'>
+            <div>
+              <label 
+                forhtml='password' 
+                className='text-base font-medium'>
+                  Senha
+              </label>
+              <div className='flex items-center'>
+                <input
+                  name='password' type='password'
+                  className='form-control '
+                  placeholder={user.profileObj ? user.profileObj.password : ''}
+                />
+              </div>
+            </div>
+            <div>
+              <label 
+                forhtml='cpf' 
+                className='text-base font-medium'>
+                  CPF
+              </label>
+              <div className='grid grid-cols-2 gap-4 items-center'>
+                <input
+                  name='cpf'
+                  className='form-control'
+                  placeholder={user.profileObj ? user.profileObj.cpf : ''}
+                />
+                <button className="submit">Salvar alterações</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </div>
-    </>
-  );
+    </div>
+  )
 }