impressum

src/components/Dog.tsx

@@ -1,9 +1,10 @@
 import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState, ReactNode } from 'react'
 import { useParams } from "react-router-dom";
 import Img from './Img';
 import DogNameTxt from './DogNameTxt';
 import './Dog.css';
+import { JSXElement, JSXFragment } from '@babel/types';
 
 const Dog = () => 
 {
@@ -32,7 +33,7 @@ const Dog = () =>
     phone = dog.data.phone;
   }
 
-  return (
+  const content: ReactNode = dog.success === 1 ?
   <div className = 'Dog'>
   <h1>Hast Du mich gefunden?</h1>
   {/* <p>name: {name}</p>
@@ -43,6 +44,9 @@ const Dog = () =>
   <Img pth={picPath} />
   <DogNameTxt name={name} email={email} phone={phone} />
   </div>
-  )
+:
+<></>;
+
+  return ( content );
 }
 export default Dog;

src/components/ImpressTxt.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+const ImpressTxt = () => 
+{
+    return ( 
+<>
+<p><span className="underline">Angaben gem. § 5 TMG:</span></p>
+<p>&nbsp;</p>
+<p>Dipl.-Ing. Peter Hoppe</p>
+<p>Rachelstraße 12a</p>
+<p>93059 Regensburg</p>
+<p>&nbsp;</p>
+<p><span className="underline">Kontaktaufnahme:</span></p>
+<p>&nbsp;</p>
+<p>E-Mail:</p>
+<p>&nbsp;</p>
+<p><strong>Haftungsausschluss - Disclaimer:</strong></p>
+<p>&nbsp;</p>
+<p><span className="underline">Haftung für Inhalte</span></p>
+<p><strong>&nbsp;</strong></p>
+<p>Alle Inhalte unseres Internetauftritts wurden mit größter Sorgfalt und nach bestem Gewissen erstellt. Für die
+    Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als
+    Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen
+    verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder
+    gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige
+    Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen
+    Gesetzen bleiben hiervon unberührt.</p>
+<p>Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntniserlangung einer konkreten Rechtsverletzung
+    möglich. Bei Bekanntwerden von den o.g. Rechtsverletzungen werden wir diese Inhalte unverzüglich entfernen.</p>
+<p>&nbsp;</p>
+<p><span className="underline">Haftungsbeschränkung für externe Links</span></p>
+<p><strong>&nbsp;</strong></p>
+<p>Unsere Webseite enthält Links auf externe Webseiten Dritter. Auf die Inhalte dieser direkt oder indirekt verlinkten
+    Webseiten haben wir keinen Einfluss. Daher können wir für die „externen Links“ auch keine Gewähr auf Richtigkeit der
+    Inhalte übernehmen. Für die Inhalte der externen Links sind die jeweilige Anbieter oder Betreiber (Urheber) der
+    Seiten verantwortlich.</p>
+<p>Die externen Links wurden zum Zeitpunkt der Linksetzung auf eventuelle Rechtsverstöße überprüft und waren im
+    Zeitpunkt der Linksetzung frei von rechtswidrigen Inhalten. Eine ständige inhaltliche Überprüfung der externen Links
+    ist ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht möglich. Bei direkten oder indirekten Verlinkungen auf
+    die Webseiten Dritter, die außerhalb unseres Verantwortungsbereichs liegen, würde eine Haftungsverpflichtung
+    ausschließlich in dem Fall nur bestehen, wenn wir von den Inhalten Kenntnis erlangen und es uns technisch möglich
+    und zumutbar wäre, die Nutzung im Falle rechtswidriger Inhalte zu verhindern.</p>
+<p>Diese Haftungsausschlusserklärung gilt auch innerhalb des eigenen Internetauftrittes „<em>Name Ihrer Domain</em>“
+    gesetzten Links und Verweise von Fragestellern, Blogeinträgern, Gästen des Diskussionsforums. Für illegale,
+    fehlerhafte oder unvollständige Inhalte und insbesondere für Schäden, die aus der Nutzung oder Nichtnutzung
+    solcherart dargestellten Informationen entstehen, haftet allein der Diensteanbieter der Seite, auf welche verwiesen
+    wurde, nicht derjenige, der über Links auf die jeweilige Veröffentlichung lediglich verweist.</p>
+<p>Werden uns Rechtsverletzungen bekannt, werden die externen Links durch uns unverzüglich entfernt.</p>
+<p>&nbsp;</p>
+<p><span className="underline">Urheberrecht</span></p>
+<p><strong>&nbsp;</strong></p>
+<p>Die auf unserer Webseite veröffentlichen Inhalte und Werke unterliegen dem deutschen Urheberrecht (<a
+        href="http://www.gesetze-im-internet.de/bundesrecht/urhg/gesamt.pdf">http://www.gesetze-im-internet.de/bundesrecht/urhg/gesamt.pdf</a>)
+    . Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung des geistigen Eigentums in ideeller und
+    materieller Sicht des Urhebers außerhalb der Grenzen des Urheberrechtes bedürfen der vorherigen schriftlichen
+    Zustimmung des jeweiligen Urhebers i.S.d. Urhebergesetzes (<a
+        href="http://www.gesetze-im-internet.de/bundesrecht/urhg/gesamt.pdf">http://www.gesetze-im-internet.de/bundesrecht/urhg/gesamt.pdf</a>
+    ). Downloads und Kopien dieser Seite sind nur für den privaten und nicht kommerziellen Gebrauch erlaubt. Sind die
+    Inhalte auf unserer Webseite nicht von uns erstellt wurden, sind die Urheberrechte Dritter zu beachten. Die Inhalte
+    Dritter werden als solche kenntlich gemacht. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam
+    werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige
+    Inhalte unverzüglich entfernen.</p>
+<p>Dieses <a href="http://www.jurarat.de/muster-impressum">Impressum</a> wurde freundlicherweise von www.jurarat.de zur
+    Verfügung gestellt.</p>
+</>
+);
+}
+export default ImpressTxt;
+
+

src/components/Impressum.css

@@ -0,0 +1,4 @@
+.underline
+{
+    text-decoration: underline;
+}

src/components/Impressum.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import ImpressTxt from './ImpressTxt';
+import './Impressum.css'
+
+const Impressum = () => 
+{
+    return (
+    <>
+    <h1>Impressum</h1>
+    <ImpressTxt />
+    </>
+    )
+    
+    ;
+}
+export default Impressum;

src/components/Login.tsx

@@ -38,7 +38,7 @@ const Login = () => {
             setRedirect('Redirecting...');
             setErrMsg(data.message);
             await getUser();
-            e.currentTarget.reset();
+            e?.currentTarget?.reset();
             return;
         }
         setErrMsg(data.message);

src/components/Qr.css

@@ -23,7 +23,7 @@ img
 
 .vertFont
 {
-    writing-mode: vertical-lr;
+    writing-mode: vertical-rl;
 }
 
 .qrCodeVert
@@ -47,3 +47,16 @@ img
     flex-direction: row;
     flex-wrap: wrap;
 }
+
+.order1
+{
+    order: 1;
+}
+.order2
+{
+    order: 2;
+}
+.order3
+{
+    order: 3;
+}

src/components/Qr.tsx

@@ -1,20 +1,26 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
-import { UserCtx, UserCtxT, DogT } from '../context/UserContext';
+import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
 import Img from './Img';
 import './Qr.css';
 
+
 export default function Qr() 
 {
-    const {dog, getDog, user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
-    var needData = dog.success === undefined;
+    const [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext
-    if(needData)
+
-    {
     if(user)
     {
-            getDog(user?.qr_id); // await not allowed?! => workaraound
+        Axios.post<ResponseT>('getDog.php', 
+        {
+            qr_id: user.qr_id
+        })
+        .then((resDog) =>
+        {
+            setDog(resDog.data);    
+        })
+        .catch((err) => console.error(err));
     }
-    }
-  
 
     return (
         <>
@@ -33,57 +39,9 @@ export default function Qr()
                         <Img pth={dog.data.qr_code}/>
                     </div>
                     <div className='qrCodeVert frame'>
-                        {/* <div className='vertFont'>{dog.data.phone}</div>
-                        <div className='vertFont'>{dog.data.email}</div> */}
                         <div className='vertFont'>{dog.data.name}</div>
-                    </div>
-                </div>
-
-
-                <div className='qrCodeBackFront'>
-                    <div className='qrCode frame'>
-                        <div className='qrCode__'>SCAN ME</div>
-                        <Img pth={dog.data.qr_code}/>
-                    </div>
-                    <div className='qrCodeVert frame'>
-                        <div className='vertFont'>{dog.data.phone}</div>
-                        {/* <div className='vertFont'>{dog.data.email}</div> */}
-                        <div className='vertFont'>{dog.data.name}</div>
-                    </div>
-                </div>
-                <div className='qrCodeBackFront'>
-                    <div className='qrCode frame'>
-                        <div className='qrCode__'>SCAN ME</div>
-                        <Img pth={dog.data.qr_code}/>
-                    </div>
-                    <div className='qrCodeVert frame'>
-                        {/* <div className='vertFont'>{dog.data.phone}</div> */}
-                        <div className='vertFont'>{dog.data.email}</div>
-                        <div className='vertFont'>{dog.data.name}</div>
-                    </div>
-                </div>
-
-
-                <div className='qrCodeBackFront'>
-                    <div className='qrCode frame'>
-                        <div className='qrCode__'>SCAN ME</div>
-                        <Img pth={dog.data.qr_code}/>
-                    </div>
-                    <div className='qrCodeVert frame'>
-                        <div className='vertFont'>{dog.data.phone}</div>
-                        {/* <div className='vertFont'>{dog.data.email}</div>
-                        <div className='vertFont'>{dog.data.name}</div> */}
-                    </div>
-                </div>
-                <div className='qrCodeBackFront'>
-                    <div className='qrCode frame'>
-                        <div className='qrCode__'>SCAN ME</div>
-                        <Img pth={dog.data.qr_code}/>
-                    </div>
-                    <div className='qrCodeVert frame'>
                         <div className='vertFont'>{dog.data.phone}</div>
                         <div className='vertFont'>{dog.data.email}</div>
-                        {/* <div className='vertFont'>{dog.data.name}</div> */}
                     </div>
                 </div>
 
@@ -94,9 +52,57 @@ export default function Qr()
                         <Img pth={dog.data.qr_code}/>
                     </div>
                     <div className='qrCodeVert frame'>
+                        <div className='vertFont order2'>{dog.data.name}</div>
+                        <div className='vertFont order3'>{dog.data.phone}</div>
+                        <div className='vertFont order1'>{dog.data.email}</div>
+                    </div>
+                </div>
+                <div className='qrCodeBackFront'>
+                    <div className='qrCode frame'>
+                        <div className='qrCode__'>SCAN ME</div>
+                        <Img pth={dog.data.qr_code}/>
+                    </div>
+                    <div className='qrCodeVert frame'>
+                        <div className='vertFont'>{dog.data.name}</div>
                         <div className='vertFont'>{dog.data.phone}</div>
                         <div className='vertFont'>{dog.data.email}</div>
+                    </div>
+                </div>
+
+
+                <div className='qrCodeBackFront'>
+                    <div className='qrCode frame'>
+                        <div className='qrCode__'>SCAN ME</div>
+                        <Img pth={dog.data.qr_code}/>
+                    </div>
+                    <div className='qrCodeVert frame'>
                         <div className='vertFont'>{dog.data.name}</div>
+                        <div className='vertFont'>{dog.data.phone}</div>
+                        <div className='vertFont'>{dog.data.email}</div>
+                    </div>
+                </div>
+                <div className='qrCodeBackFront'>
+                    <div className='qrCode frame'>
+                        <div className='qrCode__'>SCAN ME</div>
+                        <Img pth={dog.data.qr_code}/>
+                    </div>
+                    <div className='qrCodeVert frame'>
+                        <div className='vertFont'>{dog.data.name}</div>
+                        <div className='vertFont'>{dog.data.phone}</div>
+                        <div className='vertFont'>{dog.data.email}</div>
+                    </div>
+                </div>
+
+
+                <div className='qrCodeBackFront'>
+                    <div className='qrCode frame'>
+                        <div className='qrCode__'>SCAN ME</div>
+                        <Img pth={dog.data.qr_code}/>
+                    </div>
+                    <div className='qrCodeVert frame'>
+                        <div className='vertFont'>{dog.data.name}</div>
+                        <div className='vertFont'>{dog.data.phone}</div>
+                        <div className='vertFont'>{dog.data.email}</div>
                     </div>
                 </div>
                 </div>