Reprise du message précédent :
D'accord, donc l'achat de templates serait plutôt pour des projets plus complexes que celui que j'ai mis en lien

Désolé, je replonge dans cet univers 15 ans après l'avoir quitté et j'me suis un peu perdu dans mes recherches d'inspiration pour effectuer des exercices

Oui, si c'est un truc que tu ne veux pas changer, c'est assez facile à prendre en main.

Si tu veux certains composants aussi, mais si tu as des différences en terme de stack technique, tu vas commencer à te tirer les cheveux.

Chez mon client, on en vient à mettre du JQUERY dans du Angular

Ah mais je ne compte pas acheter de templates, là je cherchais juste de l'inspiration
 
D'ailleurs merci pour ton conseil au sujet de Flex, j'ai un peu potassé le sujet et ça a été comme une révélation
 

 
Pour l'inspiration, je peux te conseiller Dribbble aussi ou même muzli (il y a une extension Chrome qui te change ton "new tab" en page d'accueil inspiration web design), c'est ultra utile pour les devs qui manquent d'imagination
 
À ton service

Salut a tous, petite question, j'aimerais intégrer une div comme cela à l'intérieur d'une autre div de mon site actuel. Lorsque je code ça sur une page neutre, c'est parfait, mais sur mon site, dans la div actuelle, ça me fonctionne pas (note que je ne peux pas intégrer de display:flex; dans le body, ça me décale logiquement absolument tout le reste de ma mise en page qui existe déjà et que je ne peux pas vraiment modifier rendu à cette étape). Globalement la div s'affiche dans l'espace, mais ce qui devrait faire office de bordures colorées est inexistant.
 
Voici le code utilisé sur la page neutre

Avec le code HTML ça serait mieux.

 
Fais un vrai exemple propre via https://jsfiddle.net/ parce que la ...

Je suis débutant et un peu désespére là...
 
Je suis en stage mais la barre est un peu trop haute pour moi...
 
Je trouve aucune doc pour m'aider à comprendre comment résoudre mon soucis.
 
En gros, j'ai un back en Symfony et un front en React.
Les deux communiquent via des requêtes GET/POST en JSON.  
 
J'ai des formulaires React qui sont connectés à mes entités Symfony.
 
Jusque là ça allait, sauf que là j'ai un objet complexe à plusieurs dimensions à envoyer en JSON et impossible....  
 
 
Je suis en React typescript (.tsx)  
 
 
const utilisateur = {
    id: 1,
    email: "test@gmail.com",
    lastName: "Jane",
    firstName: "Doe",
    description: "User's description",
    userId: 2,
    "channels":[
        {
            social: {
                id: 2,
                name:"youtube"
            }, //aka youtube
            "url": "https://url.youtube.com/jane",
            "category": {
                id:1,
                name:"automobile",
                shortName:"auto"
            } // aka AUTO
        }
    ]
}
 
 
J'arrive à mettre à jour les données de l'utilisateur, mais pas dans les données du tableau Channel... c'est à dire les composants category et social me sont inaccessible.
Ça fait bien 8h que je suis sur le script et impossible.  
 
 
Si vous avez un tuto de comment arriver à un tel JSON via un formulaire React en Typescript je prends. Je trouve pas.    
 

Les formulaire en reacts sont un peu différent du HTML  
 
Je vais te faire un exemple, tu utilise des hook, des classes , des composants fonctionnels ?  
 
 

// hooks
const [data, setData] = useState({})
 
// classes
class MyComponent extends React.Component {
   state = {}
 
   render(){}
}
// composants fonctionnels
const MyComponent = render(props){}

J'utilise les hooks.
J'aimerais bien trouver un tuto bien complet qui rassemble  :
- un formulaire avec des hooks  
- React Typescrit .tsx
- si possible du fetch de JSON depuis ma DB
 
Car le combo React c'est nouveau, les hooks c'est nouveau, bosser avec du JSON c'est nouveau... ya juste le back en SYmfony que je comprends à moitié.

je peux te faire des petits bouts qui te bloquent, ( et notamment pas le tsx )

const submit= async (values) => {
   // la tu balances ta requete côté serveur avec fetch par exemple, et tu retourne une promesse avec le resultat qui pourra servir à la gestion d'erreur
}
 
render(){
    const [formData, setFormData] = useState({channels:[]})
 
    return <form onSubmit=()=>submit()>
      <input type="text" value={formData.myFirstField} id="myFirstField" onChange={e=>{
          setFormData({...formData, myFirstField:e.target.value}) 
        }}>
      {
         formData.channels.map((channel, index)=>{
            return <>
              <input type="text" value={channel. url} id={'channel.url' + index}
                  onChange={e=>{
                     let modifiedChannels = [ ...channels]
                     let modifiedChannel = {...channel, url:e.target.value}
                     modifiedChannels[index] = modifiedChannel
                     setFormData({...formData, channels: modifiedChannels}) 
               }}/>
            <button onClick={()=>
                let modifiedChannels = [ ...channels]
                modifiedChannels.splice(index,1)
                setFormData({...formData, channels: modifiedChannels}) 
              }>remove channel</button>
 
          </>
       })
     }
     <button onClick={()=>setFormData({...formData, channels:[...formData.channels,{}], }) }>add channel</button>
      
  <form> 
}

Toujours travailler sur des copies d'objets en react, ça te sauvera la vie

si tu n'es pas obligé de tout faire à la main, il y a des lib existantes , comme : https://github.com/vazco/uniforms / Les formulaires sont fastidieux en react "nu"

Je suis à la dure :
- pas de lib
- pas de commentaire dans le code
 
Je te remercie pour ton aide, je regarderais ça à tête reposée.
 
J'ai grave du mal à trouver des infos cools en .tsx n'empêche

https://codesandbox.io/s/hfr-ej711?file=/src/App.tsx
 
Tu peux fixer l'ux et les types toi meme
 
C'est un peu bizare d'avoir l'edition des channel et de l'user sur la meme page, j'aurais carrement fait une autre route du style:  
- page d'acceuil tu vois le user
- tu cliques sur details des channels t'arrive sur une route du style: /{userId}/channels-
- De la tu peux editer les channel (en ajoutant un ID sur chaque channel pour faire un update avec un simple channels = channels.map(channel => channel.id === udpated.id ? updated : channel)
 
 

Trop facile.
En vrai je suis encore apprenant alors je suis.

Question symfony 5
J'ai ce formulaire que je n'arrive pas a peupler depuis la requête :  :  
 

$form = $this->createForm(GradeType::class, $grade);      
 $form->handleRequest($request);
 if ($form->isSubmitted() && $form->isValid()){
     //never goes in
 }
 
// $form->getData() vaut NULL ici

 
alors que si je le fais à la main avec chacun des champs ça fonctionne (mais c'est pénible)

$grade->setSubject($request->get('subject'));

 
la requête arrive bien en POST  
 

passe pas le isValid()? un soucis dans le format des données en entrée via le form web?

le formulaire est invalide comme il ne mets aucune valeur dans le form
alors que

var_dump($request->request->all());

m'affiche bien les données que j'envoie avec postman en mode form-data

envoyé en get et il handle le post par défaut?

nan c'est bien du POST

$request->isMethod('post'); // 1

'tain c'est rude de réfléchir pendant les vacances...

et si tu submit() à la main les données qui sont dans $request ça roule?

 
Après, les gens se demandent pourquoi j’utilise du franglais.    C’est vrai que le “Populate”, il se pose là.    
 

ça marche
et en plus ça répond à un autre de mes problème que je n'avais pas encore exposé

.<- the point
 
                                                             --->you

il doit y avoir une feinte, genre HttpFoundationExtension à ajouter à ton form pour qu'il aille chercher les données au bon endroit, non?
 
https://symfony.com/doc/current/com [...] t-handling
 

 
Clairement, ça avait plus sa place sur blabla, c'est juste que je trouve le "peupler" assez rigolo. C'est correct d'ailleurs, mais ça m'a fait délirer. L'apéro sans doute.  

merci  
c'est à rajouter dans le form factory qui est chépaou
 
je me garde ça pour un peu plus tard, là, je veux boucher les gros trous sur lesquels je suis sûr qu'on me posera des question lundi

 
 

 
Quelqu'un saurait me dire pourquoi j'ai les pointillés qui apparaissent sous "téléphone"?  
 
J'ai beau essayer outline: none, ça reste...
 
Merci

Ton inspecteur du navigateur il dit quoi ?
Tu as essayé text-decoration:none; ?
 
 
Sinon je cherche de l'aide pour un site React/Symfony.
 
Je voudrais "connecter" React et Symfony, faire un bundle quoi, pour gérer le routing et le CSS.

C'est à dire?

Oui j'ai essayé, ça ne change rien, surtout que ça disparaît en hover, mais je vais pas me prendre la tête plus longtemps, une icone et baste.

edit 2: bon en fait c'est à cause du KEYBOARD FOCUSABLE

Hehe bien ouéj.
 
Je connaissais même pas ce truc.

J'ai un client qui veux simplifier son processus de création de compte, et qui voudrait un bouton créer son compte avec Facebook, Gmail, Linkedin, whatever...
 
Il s'agirait surtout de récupérer mail, nom et avatar pour que le compte soit créer en 2 clicks !
 
Ou est ce que je peux récupérer des infos là dessus, faut créer une application Facebook pour avoir accès aux infos des utilisateurs je supposes, ça donne quoi niveau rpgd et consort, y'a forcément des cookie tiers si c'est eux qui s'occupe de l'authentification ?
Question corolaire est ce qu'il est possible de récupérer les infos pour créer le compte mais sans utiliser l'authentification (genre récupérer les infos, générer un mot de passe et l'envoyer par email) mais ne pas utiliser leur authentification Oauth ?

tu fais une usine à bot ?

Je ne comprends pas la question, en quoi ma demande ressemble à une usine à bot ?
 
En gros mon client (qui comme tout les clients à eu une idée révolutionnaire qui va changer la face du monde) pense que si y'a aussi peu d'utilisateur qui crée un compte sur la plateforme qu'on lui à créer (en gros une espèces de réseaux social) c'est pacque "c'est trop compliqué de créer un compte !" (ben oui remplir 5 champs et cliquer sur le lien de vérification reçu dans sa boite mail c'est vraiment super chaud) et qui du coups voudrait simplifier le processus...
 
Dans mon esprit ce serait de rajouter un bouton "créer mon compte avec Facebook" (1er click) avec une popup ou on acceptes de partager certaines informations (2eme click) et le reste se fait "tout seul" (pour l'utilisateur, pour moi c'est la merde ).

T'as lu ça : https://developers.facebook.com/docs/facebook-login/web ?

Pas cette page là mais un bon paquet dans le même genre, je me souviens notamment de la galère sans nom pour faire accepter une application juste pour lire des posts publique (il s'agissait d'afficher les actus d'une société sur son site)...
 
J’oses même pas imaginer dans quoi je m'embarques...

j'avais compris l'inverse : la création de compte FB
 
ce que tu demandes à l'air builtin dans des trucs genre passport : https://github.com/jaredhanson/passport-facebook

La création de compte via Facebook est ultra simple

l'auth google c'est simplissime aussi, ça m'a pris 1h à tout péter sur une appli bac à sable.

Sans compter que selon la techno/framework utilisée ya 95 % de chances pour qu'une lib plug&play éprouvée existe et gère facebook/twitter/gmail/github/etc et qu'en 5 minutes l'install/config soit finie  

Mmmm ok, admettons pour l'aspect technique (comme dit je n'arrive déjà pas à avoir un id d’application Facebook "en production", donc je part de loin).
 
Mais niveau RGPD, si l'authentification est géré par un tiers, ça implique un cookie tiers, donc une déclaration non ?
 
Suis en php si vous avez des ressources à me conseiller...
 
Merci pour vos réponses !

 
Pour symfony + oauth2 il y a ça :  
https://github.com/knpuniversity/oauth2-client-bundle

Je ne pense pas qu'il faille faire une declaration de plus pour le cookie ( par contre pour les données que tu aspires : oui)