Saving token to local storage

cmd/web/templates/login.page.gohtml

@@ -3,11 +3,14 @@
 Login
 {{ end }}
 {{ define "content" }}
+<div class="row">
+    <div class="col-md-6 offset-md-3">
+        <div class="alert alert-danger text-center d-none" id="login-messages"></div>
         <form action=""
               method="post"
               name="login-form"
               id="login-form"
-      class="d-blick needs-validation col-sm-6"
+              class="d-blick needs-validation"
               autocomplete="off"
               novalidate="">
             <h2 class="mt-2 mb-3 text-center">Login</h2>
@@ -33,6 +36,8 @@ Login
             <hr>
             <a href="javascript:void(0)" id="login-btn" class="btn btn-primary">Login</a>
         </form>
+    </div>
+</div>
 {{ end }}
 {{ define "js" }}
 <script type="module">

internal/models/tokens.go

@@ -46,11 +46,19 @@ func (m *DBModel) InsertToken(t *Token, u User) error {
 	ctx, cancel := context.WithTimeout(context.Background(), 3*time.Second)
 	defer cancel()
 
-	stmt := `INSERT INTO tokens
+	// delete existing tokens
+	stmt := `DELETE FROM tokens WHERE user_id = ?`
+
+	_, err := m.DB.ExecContext(ctx, stmt, u.ID)
+	if err != nil {
+		return err
+	}
+
+	stmt = `INSERT INTO tokens
              (user_id, name, email, token_hash, created_at, updated_at)
              VALUES (?, ?, ?, ?, ?, ?)`
 
-	_, err := m.DB.ExecContext(ctx, stmt,
+	_, err = m.DB.ExecContext(ctx, stmt,
 		u.ID,
 		u.LastName,
 		u.Email,

static/js/common.js

@@ -1,6 +1,5 @@
 export let card;
 export let stripe;
-const cardMessages = document.getElementById("card-messages");
 const payButton = document.getElementById("pay-button");
 export const processing = document.getElementById("processing-payment");
 
@@ -14,18 +13,20 @@ export function showPayButton() {
     processing.classList.add("d-none");
 }
 
-export function showCardError(msg) {
+export function showError(element, msg) {
-    cardMessages.classList.add("alert-danger");
+    const messages = document.getElementById(element);
-    cardMessages.classList.remove("alert-success");
+    messages.classList.add("alert-danger");
-    cardMessages.classList.remove("d-none");
+    messages.classList.remove("alert-success");
-    cardMessages.innerText = msg;
+    messages.classList.remove("d-none");
+    messages.innerText = msg;
 }
 
-export function showCardSuccess() {
+export function showSuccess(element, msg) {
-    cardMessages.classList.add("alert-success");
+    const messages = document.getElementById(element);
-    cardMessages.classList.remove("alert-danger");
+    messages.classList.add("alert-success");
-    cardMessages.classList.remove("d-none");
+    messages.classList.remove("alert-danger");
-    cardMessages.innerText = "Trasaction successful";
+    messages.classList.remove("d-none");
+    messages.innerText = msg;
 }
 
 export function stripeInit(pubKey) {

static/js/login.js

@@ -1,3 +1,8 @@
+import {
+    showError,
+    showSuccess,
+} from './common.js';
+
 export function val(api) {
     let form = document.getElementById("login-form");
 
@@ -27,6 +32,13 @@ export function val(api) {
         .then(response => response.json())
         .then(response => {
             console.log(response)
+            if (response.error === false) {
+                localStorage.setItem("token", response.authentication_token.token);
+                localStorage.setItem("token_expiry", response.authentication_token.expiry);
+                showSuccess("login-messages", "Login successful.")
+            } else {
+                showError("login-messages", response.message)
+            }
         });
 }
 

static/js/stripe-plan.js

@@ -1,8 +1,8 @@
 import {
     hidePayButton,
     showPayButton,
-    showCardError,
+    showError,
-    showCardSuccess,
+    showSuccess,
     stripe,
     card,
     processing,
@@ -35,7 +35,7 @@ export function val(plan_id, api) {
 
 function stripePaymentMethodHandler(result, plan_id, api) {
     if (result.error) {
-        showCardError(result.error.message);
+        showError("card-messages", result.error.message);
     } else {
         // create a customer and subscribe to plan
         let payload = {
@@ -66,7 +66,7 @@ function stripePaymentMethodHandler(result, plan_id, api) {
             .then(function (data) {
                 console.log(data);
                 processing.classList.add("d-none");
-                showCardSuccess();
+                showSuccess("card-messages", "Transaction successful!");
                 sessionStorage.first_name = document.getElementById("first-name").value;
                 sessionStorage.last_name = document.getElementById("last-name").value;
                 sessionStorage.amount = document.getElementById("amount").value;

static/js/stripe.js

@@ -1,8 +1,8 @@
 import {
     hidePayButton,
     showPayButton,
-    showCardError,
+    showError,
-    showCardSuccess,
+    showSuccess,
     stripe,
     card,
     processing,
@@ -52,7 +52,7 @@ export function val(api) {
                 }).then(function (result) {
                     if (result.error) {
                         // card declined, or sth went wrong with the card
-                        showCardError(result.error.message);
+                        showError("card-messages", result.error.message);
                         showPayButton();
                     } else if (result.paymentIntent) {
                         if (result.paymentIntent.status === "succeeded") {
@@ -62,7 +62,7 @@ export function val(api) {
                             document.getElementById("payment_amount").value = result.paymentIntent.amount;
                             document.getElementById("payment_currency").value = result.paymentIntent.currency;
                             processing.classList.add("d-none");
-                            showCardSuccess();
+                            showSuccess("card-messages", "Trasaction successful!");
                             document.getElementById("charge_form").submit();
                         }
                     }