Frontend redesign (CymbalBank) (#410)

Default UI reflects Cymbal UI elements and color scheme. Cymbal Logo is toggle-able, and disabled by default.  Default UI still uses `bank-name` (default: bank of anthos) in the header.

.github/workflows/ui-tests/cypress.json

@@ -11,12 +11,12 @@
                 "error": "Error: Could Not Load Transactions"
             },
             "deposit": {
-                "success": "Deposit accepted",
+                "success": "Deposit successful",
                 "error": "Deposit failed",
                 "errRoutingNum": "invalid routing number"
             },
             "transfer": {
-                "success": "Payment initiated",
+                "success": "Payment successful",
                 "error": "Payment failed",
                 "errSelf": "may not add yourself to contacts"
             },
@@ -42,11 +42,11 @@
                 {
                     "accountNum": "1033623433",
                     "name": "Alice"
-                }, 
+                },
                 {
                     "accountNum": "1055757655",
                     "name": "Bob"
-                }, 
+                },
                 {
                     "accountNum": "1077441377",
                     "name": "Eve"

.github/workflows/ui-tests/cypress/integration/deposit_spec.js

@@ -80,7 +80,7 @@ describe('Authenticated default user', function () {
         const depositAmount = validPayment()
 
         cy.deposit(externalAccount, depositAmount)
-        cy.get('.alert').contains(depositMsgs.success)
+        cy.get('#alert-message').contains(depositMsgs.success)
     })
 
     it('can see balance update after deposit', function () {
@@ -95,7 +95,7 @@ describe('Authenticated default user', function () {
                                        .split('.')[0]
 
             cy.deposit(externalAccount, depositAmount)
-            cy.get('.alert').contains(depositMsgs.success)
+            cy.get('#alert-message').contains(depositMsgs.success)
         })
         cy.visit('/home')
         cy.get('#current-balance').then(($span) => {
@@ -109,7 +109,7 @@ describe('Authenticated default user', function () {
         const depositAmount = validPayment()
 
         cy.deposit(externalAccount, depositAmount)
-        cy.get('.alert').contains(depositMsgs.success)
+        cy.get('#alert-message').contains(depositMsgs.success)
 
         cy.visit('/home')
 
@@ -131,7 +131,7 @@ describe('Authenticated default user', function () {
         const paymentAmount = validPayment()
 
         cy.depositToNewAccount(newExternalAccount, paymentAmount)
-        cy.get('.alert').contains(depositMsgs.success)
+        cy.get('#alert-message').contains(depositMsgs.success)
 
         cy.reload()
         cy.get('#depositSpan').click()
@@ -178,7 +178,7 @@ describe('Deposit is unsuccessful with invalid data', function () {
 
     it('cannot reference invalid routing number', function () {
         const invalidExternalAccount = {
-            accountNum: validAccountNum(), 
+            accountNum: validAccountNum(),
             routingNum: randomInt(100,100000),
             contactLabel: `testcontact invalid ${this.accountNum}`
         }
@@ -200,7 +200,7 @@ describe('Deposit is unsuccessful with invalid data', function () {
         const paymentAmount = validPayment()
 
         cy.depositToNewAccount(invalidExternalAccount, paymentAmount)
-        cy.get('.alert').contains(depositMsgs.error)
-        cy.get('.alert').contains(depositMsgs.errRoutingNum)
+        cy.get('#alert-message').contains(depositMsgs.error)
+        cy.get('#alert-message').contains(depositMsgs.errRoutingNum)
     })
 })

.github/workflows/ui-tests/cypress/integration/transfer_spec.js

@@ -93,7 +93,7 @@ describe('Authenticated default user', function () {
         const paymentAmount = validPayment()
 
         cy.transfer(recipient, paymentAmount)
-        cy.get('.alert').contains(transferMsgs.success)
+        cy.get('#alert-message').contains(transferMsgs.success)
     })
 
     it('see balance update after transfer', function () {
@@ -110,7 +110,7 @@ describe('Authenticated default user', function () {
                                        .split('.')[0]
 
             cy.transfer(recipient, paymentAmount)
-            cy.get('.alert').contains(transferMsgs.success)
+            cy.get('#alert-message').contains(transferMsgs.success)
         })
         cy.visit('/home')
         cy.get('#current-balance').then(($span) => {
@@ -144,7 +144,7 @@ describe('Authenticated default user', function () {
         const paymentAmount = validPayment()
 
         cy.transferToNewContact(newRecipient, paymentAmount)
-        cy.get('.alert').contains(transferMsgs.success)
+        cy.get('#alert-message').contains(transferMsgs.success)
         cy.get('#paymentSpan').click()
         cy.get('#payment-accounts').contains(newRecipient.contactLabel)
         cy.get('#payment-accounts').contains(newRecipient.accountNum)
@@ -223,8 +223,8 @@ describe('Transfer is unsuccessful with invalid data', function () {
         const paymentAmount = validPayment()
 
         cy.transferToNewContact(self, paymentAmount)
-        cy.get('.alert').contains(transferMsgs.error)
-        cy.get('.alert').contains(transferMsgs.errSelf)
+        cy.get('#alert-message').contains(transferMsgs.error)
+        cy.get('#alert-message').contains(transferMsgs.errSelf)
     })
 
 })

dev-kubernetes-manifests/frontend.yaml

@@ -46,6 +46,12 @@ spec:
          # Valid levels are debug, info, warning, error, critical. If no valid level is set, gunicorn will default to info.
         - name: LOG_LEVEL
           value: "info"
+        # Set to "true" to enable the CymbalBank logo + title
+        # - name: CYMBAL_LOGO
+        #   value: "false"
+        # Customize the bank name used in the header. Defaults to 'Bank of Anthos' - when CYMBAL_LOGO is true, uses 'CymbalBank'
+        # - name: BANK_NAME
+        #   value: ""
         - name: DEFAULT_USERNAME
           valueFrom:
             configMapKeyRef:

src/frontend/frontend.py

@@ -126,6 +126,7 @@ def home():
         _populate_contact_labels(account_id, transaction_list, contacts)
 
         return render_template('index.html',
+                               cymbal_logo=os.getenv('CYMBAL_LOGO', 'false'),
                                history=transaction_list,
                                balance=balance,
                                name=display_name,
@@ -203,7 +204,7 @@ def payment():
             _submit_transaction(transaction_data)
             app.logger.info('Payment initiated successfully.')
             return redirect(url_for('home',
-                                    msg='Payment initiated',
+                                    msg='Payment successful',
                                     _external=True,
                                     _scheme=app.config['SCHEME']))
 
@@ -266,7 +267,7 @@ def deposit():
             _submit_transaction(transaction_data)
             app.logger.info('Deposit submitted successfully.')
             return redirect(url_for('home',
-                                    msg='Deposit accepted',
+                                    msg='Deposit successful',
                                     _external=True,
                                     _scheme=app.config['SCHEME']))
 
@@ -342,6 +343,7 @@ def login_page():
                                     _scheme=app.config['SCHEME']))
 
         return render_template('login.html',
+                               cymbal_logo=os.getenv('CYMBAL_LOGO', 'false'),
                                message=request.args.get('msg', None),
                                default_user=os.getenv('DEFAULT_USERNAME', ''),
                                default_password=os.getenv('DEFAULT_PASSWORD', ''),
@@ -397,6 +399,7 @@ def signup_page():
                                     _external=True,
                                     _scheme=app.config['SCHEME']))
         return render_template('signup.html',
+                               cymbal_logo=os.getenv('CYMBAL_LOGO', 'false'),
                                bank_name=os.getenv('BANK_NAME', 'Bank of Anthos'))