add bonus 49

cypress/e2e/login/links.cy.ts

@@ -0,0 +1,23 @@
+import { LoginPage } from '@support/pages/login.page'
+
+describe('Login links', () => {
+  // 🚨 INCORRECT
+  // can you explain why the following test fails?
+  // Tip: the first click works, but the second fails
+  it('all lead back to the login page', () => {
+    cy.visit('/')
+    cy.get('a').click({ multiple: true })
+    LoginPage.showsError('Epic sadface')
+    cy.location('pathname').should('equal', '/')
+  })
+
+  it('all lead back to the login page (fixed)', () => {
+    cy.visit('/')
+    // get text for each link
+    // iterate over text for each "a" element
+    // find the link again using cy.contains command
+    // and click on it
+    // confirm the page shows an error
+    // and the page loads the "/" again
+  })
+})

src/pages/Login.css

@@ -1,13 +1,19 @@
 .login_logo {
   text-align: center;
   padding: 30px 0;
-  background: url("../assets/img/SwagLabs_logo.png") no-repeat center center;
+  background: url('../assets/img/SwagLabs_logo.png') no-repeat center center;
   margin-top: 30px;
 }
 .login_wrapper {
   padding: 30px 0;
   margin: 0px auto;
 }
+.login_links {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin: 1rem 0;
+}
 .login_wrapper-inner {
   overflow: hidden;
 }
@@ -27,7 +33,7 @@
   float: none;
   width: 100%;
   height: 100%;
-  background: url("../assets/img/Login_Bot_graphic.png") no-repeat center center;
+  background: url('../assets/img/Login_Bot_graphic.png') no-repeat center center;
   min-height: 260px;
   min-width: 300px;
 }
@@ -75,7 +81,7 @@
   .bot_column {
     float: right;
     width: 48%;
-    background: url("../assets/img/Login_Bot_graphic.png") no-repeat center
+    background: url('../assets/img/Login_Bot_graphic.png') no-repeat center
       center;
     min-height: 260px;
     min-width: 300px;

src/pages/Login.jsx

@@ -121,6 +121,12 @@ function Login(props) {
           <div className="bot_column" />
         </div>
         <div className="login_credentials_wrap">
+          <div className="login_links">
+            <div>
+              Jump straight to <a href="/cart.html">cart</a>,{' '}
+              <a href="/inventory.html">inventory</a>
+            </div>
+          </div>
           <div className="login_credentials_wrap-inner">
             <div id="login_credentials" className="login_credentials">
               <h4>Accepted usernames are:</h4>