Classcard is a lightweight student and class management system

Classcard

You need to model an expiration date. Which object will you use? TL;DR: Model real word expiration dates with... expiration dates Problems Bijection Violation
Unexpected Behavior
Small Objects Missing
Primitive Obsession Solutions Honor the bijection and model correct behavior Context In many systems, the expiry date of a credit card is often represented by simply using a Date object. This can lead to potential issues and misunderstandings, especially when dealing with operations such as comparisons and calculations based on the expiry date. It's generally considered a better practice to represent the expiration date with an adequate object. Sample Code Wrong import java.util.Date;

public class CreditCard {
    private String cardNumber;
    private Date expiryDate;

    public CreditCard(String cardNumber, Date expiryDate) {
        // Not a complete date
        this.cardNumber = cardNumber;
        this.expiryDate = expiryDate;
    }

    public boolean isExpired() {
        Date currentDate = new Date();
        return expiryDate.before(currentDate);
        // How will it work? 
        // using the last day of the month?
    }
} public class CreditCard {
    private String cardNumber;
    private int expiryMonth;
    private int expiryYear;

    public CreditCard(String cardNumber, int expiryMonth, int expiryYear) {
        this.cardNumber = cardNumber;
        this.expiryMonth = expiryMonth;
        this.expiryYear = expiryYear;
        // No validations on number ranges?
    }

    public boolean isExpired(int currentMonth, int currentYear) {
        return (expiryYear < currentYear) ||
            (expiryYear == currentYear && expiryMonth < currentMonth);
    }
    // Inappropriate intimacy code smell
 
} Right class CreditCard {
  private String number;
  private MonthOfYear expiryDate;
  // expiryDate is the role
  // MonthOfYear is the type
}

class MonthOfYear {
  private Month month;  
  private Year year;
  // These are other small objects

  public MonthOfYear(Month month, Year year) {
    // You don't need to add validations since 
    // month is a valid month
    // year is a valid year
    this.month = month;
    this.year = year;
  } 
  
 public boolean isBeforeEndOfMonth(Date date) {
    Calendar calendar = Calendar.getInstance();
    calendar.setTime(date);
    return (calendar.get(Calendar.YEAR) < year.value()) ||
           (calendar.get(Calendar.YEAR) == year.value() &&
            calendar.get(Calendar.MONTH) < month.value())      
    // Notice there are no days involved   
  }
  
  // This protocol is just for MonthOfYears  
  public Day[] getDaysInMonth() { }
  
  public boolean isLeapYear() { } // ...
  
  public void iterateDays() { } // ...
  
} Detection [x]Manual This is a design smell Tags Primitive Obsession Level [x]Intermediate This is not an obvious design decision AI Generation Actual AI assistants are not very good at creating these kinds of small objects AI Detection Gemini detected this is a possible smell Conclusion ExpiryDate explicitly separates month and year, making the code more readable and making it easier to understand the specific information needed for expiry. It can also encapsulate logic specific to expiry dates, such as calculating days remaining, validating expiry, or iterating through days in the month. While Date objects offer date manipulation functionalities, they don't inherently represent the specific concept of a credit card expiry. Finding small objects with concrete behavior is always a difficult task. Relations Code Smell 122 - Primitive Obsession Code Smell 177 - Missing Small Objects More Info The One and Only Software Design Principle Disclaimer Code Smells are my opinion. Credits Photo by CardMapr.nl on Unsplash Thank you, Hernan Wilkinson, for this tip Standards are always out of date. That’s what makes them standards. Alan Bennett https://hackernoon.com/400-thought-provoking-software-engineering-quotes?embedable=true This article is part of the CodeSmell Series. How to Find the Stinky Parts of your Code Also published here. You need to model an expiration date. Which object will you use? You need to model an expiration date. Which object will you use? TL;DR: Model real word expiration dates with... expiration dates TL;DR: Model real word expiration dates with... expiration dates expiration dates Problems Bijection Violation Unexpected Behavior Small Objects Missing Primitive Obsession Bijection Violation Bijection Unexpected Behavior Small Objects Missing Small Objects Primitive Obsession Primitive Obsession Solutions Honor the bijection and model correct behavior Honor the bijection and model correct behavior Context In many systems, the expiry date of a credit card is often represented by simply using a Date object. This can lead to potential issues and misunderstandings, especially when dealing with operations such as comparisons and calculations based on the expiry date. It's generally considered a better practice to represent the expiration date with an adequate object. Sample Code Wrong import java.util.Date;

public class CreditCard {
    private String cardNumber;
    private Date expiryDate;

    public CreditCard(String cardNumber, Date expiryDate) {
        // Not a complete date
        this.cardNumber = cardNumber;
        this.expiryDate = expiryDate;
    }

    public boolean isExpired() {
        Date currentDate = new Date();
        return expiryDate.before(currentDate);
        // How will it work? 
        // using the last day of the month?
    }
} import java.util.Date;

public class CreditCard {
    private String cardNumber;
    private Date expiryDate;

    public CreditCard(String cardNumber, Date expiryDate) {
        // Not a complete date
        this.cardNumber = cardNumber;
        this.expiryDate = expiryDate;
    }

    public boolean isExpired() {
        Date currentDate = new Date();
        return expiryDate.before(currentDate);
        // How will it work? 
        // using the last day of the month?
    }
} public class CreditCard {
    private String cardNumber;
    private int expiryMonth;
    private int expiryYear;

    public CreditCard(String cardNumber, int expiryMonth, int expiryYear) {
        this.cardNumber = cardNumber;
        this.expiryMonth = expiryMonth;
        this.expiryYear = expiryYear;
        // No validations on number ranges?
    }

    public boolean isExpired(int currentMonth, int currentYear) {
        return (expiryYear < currentYear) ||
            (expiryYear == currentYear && expiryMonth < currentMonth);
    }
    // Inappropriate intimacy code smell
 
} public class CreditCard {
    private String cardNumber;
    private int expiryMonth;
    private int expiryYear;

    public CreditCard(String cardNumber, int expiryMonth, int expiryYear) {
        this.cardNumber = cardNumber;
        this.expiryMonth = expiryMonth;
        this.expiryYear = expiryYear;
        // No validations on number ranges?
    }

    public boolean isExpired(int currentMonth, int currentYear) {
        return (expiryYear < currentYear) ||
            (expiryYear == currentYear && expiryMonth < currentMonth);
    }
    // Inappropriate intimacy code smell
 
} Right class CreditCard {
  private String number;
  private MonthOfYear expiryDate;
  // expiryDate is the role
  // MonthOfYear is the type
}

class MonthOfYear {
  private Month month;  
  private Year year;
  // These are other small objects

  public MonthOfYear(Month month, Year year) {
    // You don't need to add validations since 
    // month is a valid month
    // year is a valid year
    this.month = month;
    this.year = year;
  } 
  
 public boolean isBeforeEndOfMonth(Date date) {
    Calendar calendar = Calendar.getInstance();
    calendar.setTime(date);
    return (calendar.get(Calendar.YEAR) < year.value()) ||
           (calendar.get(Calendar.YEAR) == year.value() &&
            calendar.get(Calendar.MONTH) < month.value())      
    // Notice there are no days involved   
  }
  
  // This protocol is just for MonthOfYears  
  public Day[] getDaysInMonth() { }
  
  public boolean isLeapYear() { } // ...
  
  public void iterateDays() { } // ...
  
} class CreditCard {
  private String number;
  private MonthOfYear expiryDate;
  // expiryDate is the role
  // MonthOfYear is the type
}

class MonthOfYear {
  private Month month;  
  private Year year;
  // These are other small objects

  public MonthOfYear(Month month, Year year) {
    // You don't need to add validations since 
    // month is a valid month
    // year is a valid year
    this.month = month;
    this.year = year;
  } 
  
 public boolean isBeforeEndOfMonth(Date date) {
    Calendar calendar = Calendar.getInstance();
    calendar.setTime(date);
    return (calendar.get(Calendar.YEAR) < year.value()) ||
           (calendar.get(Calendar.YEAR) == year.value() &&
            calendar.get(Calendar.MONTH) < month.value())      
    // Notice there are no days involved   
  }
  
  // This protocol is just for MonthOfYears  
  public Day[] getDaysInMonth() { }
  
  public boolean isLeapYear() { } // ...
  
  public void iterateDays() { } // ...
  
} Detection [x]Manual [x] Manual [x] This is a design smell Tags Primitive Obsession Primitive Obsession Level [x]Intermediate [x] Intermediate [x] This is not an obvious design decision AI Generation Actual AI assistants are not very good at creating these kinds of small objects AI Detection Gemini detected this is a possible smell Conclusion ExpiryDate explicitly separates month and year, making the code more readable and making it easier to understand the specific information needed for expiry. It can also encapsulate logic specific to expiry dates, such as calculating days remaining, validating expiry, or iterating through days in the month. While Date objects offer date manipulation functionalities, they don't inherently represent the specific concept of a credit card expiry. Finding small objects with concrete behavior is always a difficult task. Relations Code Smell 122 - Primitive Obsession Code Smell 122 - Primitive Obsession Code Smell 177 - Missing Small Objects Code Smell 177 - Missing Small Objects More Info The One and Only Software Design Principle The One and Only Software Design Principle Disclaimer Code Smells are my opinion . opinion Credits Photo by CardMapr.nl on Unsplash CardMapr.nl Unsplash Thank you, Hernan Wilkinson, for this tip Hernan Wilkinson, Standards are always out of date. That’s what makes them standards. Standards are always out of date. That’s what makes them standards. Alan Bennett Alan Bennett https://hackernoon.com/400-thought-provoking-software-engineering-quotes?embedable=true https://hackernoon.com/400-thought-provoking-software-engineering-quotes?embedable=true This article is part of the CodeSmell Series. How to Find the Stinky Parts of your Code How to Find the Stinky Parts of your Code Also published here. Also published here . here

Code Smell 246 - Modeling Expiration Dates

is a React that measure an element's size and handle with highly-performant way, using . Try it you will ❤️ it! react-cool-dimensions hook responsive components ResizeObserver ⚡️ Try yourself: https://react-cool-dimensions.netlify.app Features 🚀 Measures element's size with highly-performant way, using . ResizeObserver 🎣 Easy to use, based on React . hook 🍰 Easy to handle , provides an alternative solution to the problem. responsive components container queries 📦 Supports bo rder-box size measurement. 🎛 Super flexible design to cover most cases for you. API 📜 Supports type definition. TypeScript 🗄️ Server-side rendering compatibility. 🦔 Tiny size ( ). No external dependencies, aside for the react. ~ 1kB gzipped Usage has a flexible design, it can cover simple to complex use cases for you. Here are some examples to show you how does it work. react-cool-dimensions API Basic Use Case To report the size of an element by the and states. Please note, it reports the of the element. width height content rectangle useDimensions ; App = { { observe, unobserve, width, height, entry } = useDimensions({ : { unobserve(); observe(); },
  }); ( );
}; import from "react-cool-dimensions" const => () const onResize ( ) => { observe, unobserve, width, height, entry } // Triggered whenever the size of the target is changed... // To stop observing the current target element // To re-start observing the current target element return Hi! My width is {width}px and height is {height}px < = > div ref {observe} </ > div Responsive Components We have but those are based on the browser viewport not individual elements. In some cases, we'd like to style components based on the width of a containing element rather than the browser viewport. To meet this demand there's a for , but it still doesn't exist today... media queries proposal container queries No worries, react-cool-dimensions provides an alternative solution for us! We can activate the by the breakpoints option. It's a width-based solution, once it's activated we can easily apply different styles to a component according to the currentBreakpoint state. The overall concept as below. responsive mode useDimensions ; Card = { { observe, currentBreakpoint } = useDimensions({ breakpoints: { : , : , : , : }, updateOnBreakpointChange: , : { },
  }); ( <div class="card-header">I'm 😎</div> <div class="card-body">I'm 👕</div> <div class="card-footer">I'm 👟</div> );
}; import from "react-cool-dimensions" const => () const // The "currentBreakpoint" will be the object key based on the target's width // for instance, 0px - 319px (currentBreakpoint = XS), 320px - 479px (currentBreakpoint = SM) and so on XS 0 SM 320 MD 480 LG 640 // Will only update the state on breakpoint changed, default is false true onResize ( ) => { currentBreakpoint } // Now the event callback will be triggered when breakpoint is changed // we can also access the "currentBreakpoint" here return < = ` ${ }`} = > div class { card currentBreakpoint ref {observe} </ > div Thanks for reading, for more usage details check out the project's GitHub page: https://github.com/wellyshen/react-cool-dimensions You can also install this package is distributed via . npm $ yarn add react-cool-dimensions $ npm install --save react-cool-dimensions # or

React Hook to Measure an Element's Size and Handle Responsive Components

You might be thinking - another design trend? Don't we have these every year or so? Last year we got introduced to neumorphism, which still is quite a controversial trend that never really got massively adopted. Reactions were mixed, some people really liked it, and some others downright rejected it. But let's talk a bit more about glassmorphism. What is glassmorphism? Glassmorphism is a new design trend that makes use of a transparent background and a blur effect on top of the background to create a glassy effect. Here's an example: This is an example from an upcoming CSS UI library based on glassmorphism, called . ui.glass As you can see, the effect is being used for the card that contains the code example on the right side, in contrast with the other card in the background. Another example is this redesign of the Facebook Messenger App using glassmorphism for MacOS: The redesign was made by on Dribbble. Mikołaj Gałęziowski Glassmorphism is also used by Apple and Microsoft This is another reason why this trend is probably not just passing by, but it is here to stay. With the release of the Big Sur update for macOS, it was the first large-scale adoption of this new design trend by a large company. Microsoft also uses this style in the , but they call it "Acrylic Material", instead of glassmorphism. Fluent Design System Here's how it looks: Okay, so now that I've briefly introduced you to glassmorphism, let me show how you can apply this effect using only HTML and CSS. Getting started All you really need for this tutorial is a code editor and a web browser. You can also write this code using only editors, such as Codepen. The element that we're going to build will look like this: Let's start by creating an HTML file with the following code: <!DOCTYPE html> <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism effect</title>
</head>
<body>
    
</body>
</html> < = > html lang "en" Great! Now let's also add a custom font style by including Inter from Google Fonts: <link rel= href= > "preconnect" "https://fonts.gstatic.com" < = = > link href "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel "stylesheet" Set up some basic styles and a background for the tag: body body { : rem;
  margin: ;
  background: #edc0bf;
  background: linear-gradient( deg, #edc0bf ,#c4caef %);
  font-family: , sans-serif;
} padding 4.5 0 90 0 58 'Inter' Good. Next up, let's create a new card element that we'll later use to apply the glassmorphism effect on: <div = > <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.< a> class "card" Glassmorphism is awesome < = > h3 class "card-title" </ > h3 /p>
    <a href="https:/ /ui.glass">Read more</ </ > div Of course, this could be any card element. You can use it for pricing cards, blog cards, profile cards, anything you'd like. Before we actually apply the glassy effect, let's first tidy things up with some spacing and sizing styles: .card { : px;
  height: auto;
  padding: rem;
  border-radius: rem;
}

.card-title {
  margin-top: ;
  margin-bottom: rem;
  font-size: rem;
}

p, a {
  font-size: rem;
}

a { : # d4ae8;
  text-decoration: none;
} width 400 2 1 0 .5 1.2 1 color 4 Great! Now that we've laid down the foundation for the effect, let's see how we can apply it. Glassmorphism effect using HTML and CSS You only need two important CSS properties to apply the effect: a transparent background and the properties. The amount of blur or transparency can be changed based on your needs. backdrop-filter: blur(10px); Add the following styles to the element: .card .card { background: rgba( , , , );
	-webkit-backdrop-filter: blur( px);
	backdrop-filter: blur( px);
} /* other styles */ 255 255 255 .7 10 10 But you might be asking, where's the effect? You don't see it yet, because there is no shape or image behind the card. This is how the card should look like right now: Let's add an image just after the opening of the tag: body <img = src= alt= > class "shape" "https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" "" Then apply the following styles to the element using CSS: .shape .shape { : absolute;
  width: px;
  top: rem;
  left: rem;
} position 150 .5 .5 Awesome! The final result should look like this: If you want the code for this tutorial, check out this . codepen Browser support One of setbacks of this new design trend is that Internet Explorer does not support the property, and Firefox has it disabled by default. backdrop-filter Other than that, all major browsers support the properties necessary to create the glassmorphism effect. You can check out the support browsers on . caniuse.com Conclusion I hope that this article was helpful for you to understand more about this new design trend and how the effect can be achieved. Me and my friend from Themesberg have been working on a new CSS UI library that will be using the new glassmorphism design trend, called . It will be open source under the MIT license. ui.glass You can sign up to get updates about progress and be notified when the project will be launched. It will be available via NPM and also CDN. Thanks for reading! Leave your thoughts in the comments section below about glassmorphism.

How to Implement Glassmorphism via HTML and CSS

If you are familiar with Stripe, you know how big of a player they are in the online payment processing field.  Their API not only allows programmers to easily create one-time payments for sites such as e-commerce stores, but also provides quick integrations for monthly subscriptions and routing payouts.  If new to Django and Stripe, check out our recent on integrating one time payments.  Otherwise, let's get into setting up monthly payments with Django and Stripe. article Why a Monthly Subscription? Monthly subscriptions are a common practice found across the web especially among companies who promote software-as-a-service (SAAS) as their delivery model.  For example, SAAS companies such as Hubspot (marketing), Dropbox (data storage), and Mailchimp (email marketing) all offer tiered pricing options to their prospective customers.  Many consider this model to be favorable given that revenue is easier to predict once basic metrics are calculated (customer acquisition cost, lifetime value, churn rate). Predictable revenue of course creates stability and produces more accurate financial forecasts. Mailchimp pricing page Django Setup Start by setting up a virtual environment and creating a basic Django project.  We'll create a new virtual environment called . saas on Mac, use instead of for all commands Note: python3 py C:\Users\Owner\Desktop\code>py -m venv saas Next change directory into the virtual environment, install Django, and setup your project and app. C:\Users\Owner\Desktop\code>cd saas

C:\Users\Owner\Desktop\code\saas>Scripts\activate

(saas) C:\Users\Owner\Desktop\code\saas>pip install Django

(saas) C:\Users\Owner\Desktop\code\saas>django-admin startproject mysite

(saas) C:\Users\Owner\Desktop\code\saas\mysite>py manage.py startapp main Add main app to the in . settings.py mysite settings.py INSTALLED_APPS = [ , , , , , , ,
] 'main.apps.MainConfig' #add this 'django.contrib.admin' 'django.contrib.auth' 'django.contrib.contenttypes' 'django.contrib.sessions' 'django.contrib.messages' 'django.contrib.staticfiles' Create in the folder and include in . urls.py main mysite > urls.py mysite > urls.py django.contrib admin django.urls path, include urlpatterns = [
	path( , include( )), path( , admin.site.urls),
] from import from import #add include '' 'main.urls' #add path 'admin/' Stripe Integration Start by installing the official library for connecting to Stripe's API. pip install --upgrade stripe Next create a Stripe account and create products in their dashboard.  While this can be performed using Stripe CLI's we'll use the dashboard since we are already on the page from creating an account.  Make sure you are in test mode and can only view test data.  By default, you should be in test mode after creating an account.  Click products in the left-hand side navigation menu.  Create two new products: Name the product Premium Plan Add description "paid plan for advanced features" Use standard pricing Enter $15.00 and ensure "recurring" is selected Keep billing period as "monthly" Name the product Enterprise Plan Add description "enterprise plan for advanced features" Use standard pricing Enter $30.00 and ensure "recurring" is selected Keep billing period as "monthly" Now let's sync the product in the Stripe dashboard.  While we could create a model and store the relevant product information, such as as product id, as model fields, an easier solution is to simply install the and use the sync command.  We also add need to add our API keys in .  Note your live keys should always be secured and never listed in the settings.  For more information on securing environment variables, check out Python securing. dj-stripe package settings.py pip install dj-stripe mysite/settings.py STRIPE_TEST_PUBLIC_KEY = STRIPE_TEST_SECRET_KEY = STRIPE_LIVE_MODE = DJSTRIPE_WEBHOOK_SECRET = 'pk_test_E52Nh0gTCRpJ7h4JhuEX7BIO006LVew6GG' 'sk_test_L87kx7GQNbz9tajOluDts7da00mSbze3dW' False # Change to True in production "whsec_xxx" Finally migrate the database. Note: if database is sqlite, migrating make take longer than usual. py manage.py migrate Add products to database automatically with the following command: py manage.py djstripe_sync_plans_from_stripe View the admin page to see the changes we just made.  First create an admin user. Include an email such as since we'll use this as the Stripe customer name then visit .   You should see a variety of new models including our newly created products as well as plans for the products. test@example.com http://127.0.0.1:8000/admin/ py manage.py createsuperuser Checkout Page Now that we have our data synced, let's create a checkout page where users can select their plan and checkout. We'll start with the view and checkout template. Note: we have imported the Bootstrap CDN in home.html: views.py django.shortcuts render, redirect stripe json django.http JsonResponse djstripe.models Product django.contrib.auth.decorators login_required render(request, ) products = Product.objects.all() render(request, ,{ : products}) from import import import from import from import from import # Create your views here. : def homepage (request) return "home.html" @login_required : def checkout (request) return "checkout.html" "products" checkout.html {% extends "home.html" %}

{% block content %} {% for p in products %} {{p.name}} {{p.description}} {% for plan in p.plan_set.all %} {{ plan.human_readable_price }} {% endfor %} {% endfor %} Checkout Enter card details.  Your subscription will start immediately Plan: Total: Loading... Subscribe {% endblock %} < = > script src "https://js.stripe.com/v3/" </ > script < > br < > br < = > div class "container " < = > div class "row " < = > div class "col-6" < = = > div class "card mx-5 shadow" style "border-radius: 10px; border:none; " < = > div class "card-body" < = > h5 class "card-title font-weight-bold" </ > h5 < = > p class "card-text text-muted" < = = = = = = > svg class "bi bi-check" width "1em" height "1em" viewBox "0 0 16 16" fill "currentColor" xmlns "http://www.w3.org/2000/svg" < = = /> path fill-rule "evenodd" d "M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z" </ > svg </ > p < > h5 </ > h5 < = > div class "text-right" < = = = = > input type "checkbox" name "{{p.name}}" value "{{p.id}}" onclick "planSelect('{{p.name}}' ,'{{plan.human_readable_price}}', '{{plan.id}}')" </ > div </ > div </ > div </ > div </ > div < > br < > br < > hr < > br < > br < > div < = > div class "row" < = > div class "col-12" < = = > div class "card mx-5 shadow rounded" style "border-radius:50px;border:none" < = > div class "card-body" < = > h5 class "card-title font-weight-bold" </ > h5 < = > p class "text-muted " </ > p < = > div class "row" < = > div class "col-6 text-muted" < > p </ > p < > p </ > p </ > div < = > div class "col-6 text-right" < = > p id "plan" </ > p < = > p id "price" </ > p < = > p hidden id "priceId" </ > p </ > div </ > div < > br < = > form id "subscription-form" < = = > div id "card-element" class "MyCardElement"  </ > div  < = = > div id "card-errors" role "alert" </ > div < = = > button id "submit" type "submit" < = = = > div class "spinner-border  spinner-border-sm text-light hidden" id "spinner" role "status" < = > span class "sr-only" </ > span </ > div < = > span id "button-text" </ > span </ > button </ > form </ > div </ > div </ > div </ > div </ > div </ > div Now that we have a template for selecting the subscription plan. Let's add some styling and setup the credit card form by using Stripe Elements, a pre-built set of UI components. < > {


    .StripeElement { : border-box; : ; : ; : solid transparent; : ; : white; : ; : box-shadow ease; : box-shadow ease;
    } { : ;
    } { : ;
    } { : ;
    } { : none;
    } { : (120%);
    } { : ; : ; : ; : ; : ; : ; : ; : -apple-system,BlinkMacSystemFont,sans-serif; : ; : ; : normal; : break-word; : border-box; : inherit; : visible; : button; : antialiased; : ; : inherit; : transparent; : ; : ; : ; : none; : none; : none; : ; : ; : (--radius); : ; : ; : ; : ; : pointer; : all . ease; : block; : (0,0,0,.07); : ; : (--button-color);
    }

</ > style body box-sizing height 40px padding 10px 12px border 1px border-radius 4px background-color box-shadow 0 1px 3px 0 #e6ebf1 -webkit-transition 150ms transition 150ms .StripeElement--focus box-shadow 0 1px 3px 0 #cfd7df .StripeElement--invalid border-color #fa755a .StripeElement--webkit-autofill background-color #fefde5 !important .hidden display #submit :hover filter contrast #submit font-feature-settings "pnum" --body-color #f7fafc --button-color #556cd6 --accent-color #556cd6 --gray-border #e3e8ee --link-color #fff --font-color #697386 --body-font-family --radius 4px --form-width 400px -webkit-box-direction word-wrap box-sizing font overflow -webkit-appearance -webkit-font-smoothing margin 0 font-family -webkit-tap-highlight-color font-size 16px padding 0 12px line-height 32px outline text-decoration text-transform margin-right 8px height 36px border-radius var color #fff border 0 margin-top 16px font-weight 600 cursor transition 2s display box-shadow 0 4px 5.5px 0 rgba width 100% background var style .getElementById( ).disabled = ;

stripeElements(); {
  stripe = Stripe( ); ( .getElementById( )) { elements = stripe.elements(); style = { : { : , : , : , : , : { : }
    	}, : { : , : }
    };


    card = elements.create( , { : style });

    card.mount( );

    card.on( , { el = .getElementById( );
      el.classList.add( );
    });

    card.on( , { el = .getElementById( );
      el.classList.remove( );
    });

    card.on( , {
      displayError(event);
    });
  } } { displayError = .getElementById( ); (event.error) {
    displayError.textContent = event.error.message;
  } {
    displayError.textContent = ;
  }
} document "submit" true ( ) function stripeElements 'pk_test_E52Nh0gTCRpJ7h4JhuEX7BIO006LVew6GG' if document 'card-element' let // Card Element styles let base color "#32325d" fontFamily '"Helvetica Neue", Helvetica, sans-serif' fontSmoothing "antialiased" fontSize "16px" "::placeholder" color "#aab7c4" invalid color "#fa755a" iconColor "#fa755a" 'card' style '#card-element' 'focus' ( ) function let document 'card-errors' 'focused' 'blur' ( ) function let document 'card-errors' 'focused' 'change' ( ) function event //we'll add payment form handling here ( ) function displayError event let document 'card-errors' if else '' This should allow the credit card form to render.  First, we disabled the subscribe button and then called to create and then mount the credit card form.  Next, we  add a small script to update the template with the selected subscription plan and to re-enable the subscribe button if a plan is selected. stripeElements() { inputs = .getElementsByTagName( ); ( i = ; i<inputs.length; i++){
			inputs[i].checked = ; (inputs[i].name== name){

				inputs[i].checked = ;
			}
		} n = .getElementById( ); p = .getElementById( ); pid = .getElementById( );
		n.innerHTML = name;
		p.innerHTML = price;
		pid.innerHTML = priceId; .getElementById( ).disabled = ;


	} ( ) function planSelect name, price, priceId var document 'input' for var 0 false if true var document 'plan' var document 'price' var document 'priceId' document "submit" false Now we need to handle the payment form submission. We'll add the first code block to the end of the function.  First grab the form by its ID and add an event listener.  After preventing the default form submission, we change the loading state of the form in order to prevent any issues associated with double clicking the subscribe button.  Finally, with the inputted card information, we create a payment method and submit this data to our server along with the price id of the selected subscription. stripeElements() As demonstrated, we use Django's CSRF token to authorize the submission to our server. Note: Stripe's documentation includes some additional validation that you should check out if interested.  Also, unlike the documentation, we create a customer and subscription in one request to the server instead of sending separate requests. paymentForm = .getElementById( ); (paymentForm) {

		paymentForm.addEventListener( , {
			evt.preventDefault();
			changeLoadingState( ); createPaymentMethod({ card });
	  });
	}

} { billingName = ;

  stripe
    .createPaymentMethod({ : , : card, : { : billingName,
      },
    })
    .then( { (result.error) {
        displayError(result);
      } { paymentParams = { : .getElementById( ).innerHTML, : result.paymentMethod.id,
      };
      fetch( , { : , : { : , : ,
        }, : , : .stringify(paymentParams),
      }).then( { response.json(); 
      }).then( { (result.error) { result;
        } result;
      }).then( { (result && result.status === ) { .location.href = ;
      	};
      }).catch( {
          displayError(result.error.message);

      });
      }
    });
} changeLoadingState = { (isLoading) { .getElementById( ).disabled = ; .querySelector( ).classList.remove( ); .querySelector( ).classList.add( );
	} { .getElementById( ).disabled = ; .querySelector( ).classList.add( ); .querySelector( ).classList.remove( );
	}
}; //we'll add payment form handling here let document 'subscription-form' if 'submit' ( ) function evt true // create new payment method & create subscription ( ) function createPaymentMethod { card } // Set up payment method for recurring usage let '{{user.username}}' type 'card' card billing_details name ( ) => result if else const price_id document "priceId" payment_method "/create-sub" method 'POST' headers 'Content-Type' 'application/json' 'X-CSRFToken' '{{ csrf_token }}' credentials 'same-origin' body JSON ( ) => response return ( ) => result if // The card had an error when trying to attach it to a customer throw return ( ) => result if 'active' window '/complete' ( ) function error var ( ) function isLoading if document "submit" true document "#spinner" "hidden" document "#button-text" "hidden" else document "submit" false document "#spinner" "hidden" document "#button-text" "hidden" Add url paths for creating a subscription/customer and when payment is complete. main/urls.py django.urls path . views

app_name = urlpatterns = [
	path( , views.homepage, name= ),
	path( , views.checkout, name= ),
	path( , views.logout_request, name= ),
	path( , views.login_request, name= ),
	path( , views.register, name= ),
	path( , views.create_sub, name= ), path( , views.complete, name= ), ] from import from import "main" "" "homepage" "checkout" "checkout" "logout" "logout_request" "login" "logout_request" "register" "register" "create-sub" "create sub" #add "complete" "complete" #add Next, create a view to handle creating a Stripe customer and subscription.  The customer and subscription should also be stored in our local database.  Luckily, we can easily syn our data using dj-stripe. main/views.py ... stripe json django.http JsonResponse djstripe.models Product django.contrib.auth.decorators login_required djstripe django.http HttpResponse

... request.method == : data = json.loads(request.body)
	    payment_method = data[ ]
	    stripe.api_key = djstripe.settings.STRIPE_SECRET_KEY

	    payment_method_obj = stripe.PaymentMethod.retrieve(payment_method)
	    djstripe.models.PaymentMethod.sync_from_stripe_data(payment_method_obj) : customer = stripe.Customer.create(
	            payment_method=payment_method,
	            email=request.user.email,
	            invoice_settings={ : payment_method
	            }
	        )

	        djstripe_customer = djstripe.models.Customer.sync_from_stripe_data(customer)
	        request.user.customer = djstripe_customer subscription = stripe.Subscription.create(
	            customer=customer.id,
	            items=[
	                { : data[ ],
	                },
	            ],
	            expand=[ ]
	        )

	        djstripe_subscription = djstripe.models.Subscription.sync_from_stripe_data(subscription)

	        request.user.subscription = djstripe_subscription
	        request.user.save() JsonResponse(subscription) Exception e: JsonResponse({ : (e.args[ ])}, status = ) : HTTPresponse( ) import import from import from import from import import from import @login_required : def create_sub (request) if 'POST' # Reads application/json and returns a response 'payment_method' try # This creates a new Customer and attaches the PaymentMethod in one API call. 'default_payment_method' # At this point, associate the ID of the Customer object with your # own internal representation of a customer, if you have one. # print(customer) # Subscribe the user to the subscription created "price" "price_id" "latest_invoice.payment_intent" return except as return 'error' 0 403 else return 'requet method not allowed' Also add a view function for the payment complete page: render(request, ) : def complete (request) return "complete.html" Go through and test the integration.  As suggested by Stripe, use "4242 4242 4242 4242" as the test credit card and view the results upon submitting your payment.  Click on "Subscriptions" under "Customers" in your Stripe dashboard to view the newly created subscription and customer.  You should see something similar as below: Conclusion Thanks for reading about using Django and Stripe to create monthly subscriptions. Hopefully this provides a foundation for creating your own SAAS project.  We plan on writing additional pieces on Django and Stripe to cover topics such as routing payments with Stripe Connect, the underlying payment technology behind Lyft, Postmates, Kickstarter, and more. Also if you have any suggestions on other Django integrations that you'd like to read about, leave a comment below. Previously published at https://www.ordinarycoders.com/blog/article/django-stripe-monthly-subscription

Setting up Subscriptions And  Recurring Payments Using Django and Stripe

Today I wanted to try and recreate a super cool I came across. dribbble shot from Dede Dwiyansyah It's actually a Figma tutorial on how to create the frosted credit card effect. I decided to try and recreate this amazing shot in HTML! (With an own twist) So time to give it my own take on CSS. I knew it was possible to do this effect, but normally people leverage a background image filter blur, which in this case wouldn't work with the balls behind it. So I decided to do some research, and this is my end result. I'll be guiding you through how to make this in CSS. HTML Structure Let's start by defining the HTML structure for this project. 8293 3412 5976 1254 12/24 Insert Visa logo here < = > div class "holder" < = > div class "card" < = > div class "card__text" < /> br < > small </ > small </ > div < > svg </ > svg </ > div </ > div As you can see I'm using a holder div, we need this div for the two orbiting balls. Then we have the card, which contains another container for the text, and at the end, an SVG for the visa logo. Note: The full SVG visa logo can be found on the Codepen. Now it's time to start the fun bit, the CSS. CSS Frosted blurry glass effect I'm going to be guiding you through all the little pieces we need to re-create this cool CSS frosted glass effect. First, we need to use a font that resembles a credit card font. I found the works pretty well. Inconsolata font on Google fonts @ url( ); import 'https://fonts.googleapis.com/css2?family=Inconsolata&display=swap' With this line, we . import the font directly from Google fonts Next, we add a small reset to get rid of the default margins and paddings. * { : ; : ;
} margin 0 padding 0 Now let's style the body. In the dribbble shot, we saw the person used a gradient background, I decided to give it a background image. { : ( )
    no-repeat center center; : cover; : grid; : , monospace; : ; : center;
} body background url 'https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260' background-size display font-family 'Inconsolata' min-height 100vh place-items I'm also using the to get the card centered on our page. In this spot, we are also loading our fonts. CSS grid center method As mentioned we are using the holder to place our two orbiting balls in. We will be using pseudo-elements to create these balls, so our holder will need to be a relative element. { : relative;
} .holder position Now let's create the balls, the orange one will be created using the and the blue one with the . before pseudo element after pseudo element They share some similarities, in size and roundness so let's write that with a double selector. , { : orbit linear infinite; : ; : (0, 0, 0, 0.2); : ; : ; : absolute; : ;
} .holder :before .holder :after animation 5s border-radius 50% box-shadow 0 0 1rem 0 rgba content '' height 150px position width 150px This creates a round ball because of the 50% border-radius. We also add an animation called orbit. We'll create the animation in a bit. Now for the orange ball, we need to create a radial gradient. { : ; : (top right, #ffe897, #f98a05); : (to bottom left, #ffe897, #f98a05); : (top right, #ffe897, #f98a05);
} .holder :before background #ffe897 background -moz-radial-gradient background radial-gradient background -webkit-radial-gradient I used to generate the gradient. css-gradient.com Then for the blue one, we also place a radial gradient and offset it to the right side. This one also needs an animation delay, else they'll be doing the exact same thing. { : - ; : ; : (bottom right, #e0e793, #6dd0f1); : (to top left, #e0e793, #6dd0f1); : (bottom right, #e0e793, #6dd0f1); : ; : ; : - ;
} .holder :after animation-delay 2.5s background #e0e793 background -moz-radial-gradient background radial-gradient background -webkit-radial-gradient right 0 top 0 z-index 1 Then it's time to add our card. The card itself has a fixed size and a small box-shadow to make it pop a bit more: { : solid ; : ; : (0, 0, 0, 0.2); : ; : ; : hidden; : relative; : ;
} .card border 1px #fff border-radius 15px box-shadow 0 0 1rem 0 rgba font-size 2rem height 220px overflow position width 370px Then for the magic part, the blur effect we use another . :before pseudo element { : (255, 255, 255, 0.3); : (10px) (100%) (45%) (130%); : ; : ; : absolute; : ;
} .card :before background-color rgba backdrop-filter blur saturate contrast brightness content '' height 100% position width 100% The whole magic blur effect comes from the backdrop-filter this gives it the blurry look. We also use a background color with an opacity of 30% using the rgba spectrum. For the text inside we only need to offset it a bit and make sure it's on top of everything. { : ; : ; : ; : relative; : ;
} .card__text color #6f7886 margin-left 30px margin-top 100px position z-index 2 Remember we had the Visa SVG logo, we put that in the right bottom corner. { : ; : absolute; : ;
} .card svg bottom 30px position right 30px Before we talked about the orbit animation, this animation will make the two balls orbit around the card, in a circular motion. @ orbit { { : (0deg) (100px) (0deg);
  } { : (360deg) (100px) (-360deg);
  }
} keyframes from transform rotate translateX rotate to transform rotate translateX rotate This specific animation uses a two-step animation transforming the elements to rotate from 0 to 360 degrees (a full circle). It also offsets the translateX axis to make it move. The full result of this can be seen on this Codepen. Browser Support This method relies heavily on the backdrop-filter which has quite decent support. It can be safely used in all modern browsers, you can get some more support by leveraging all the prefixes for it. Thank you for reading, and let's connect! Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on or Facebook Twitter Previously published at https://daily-dev-tips.com/posts/css-frosted-glass-credit-card/

CSS Recreation: The Frosted Glass Credit Card Design

A directive is a thing I often found in many examples, yet I think it is not well explained in the official docs. I was never really sure how to use it, and I am sure I am not the only one. As I found, the general concept is not difficult, but documentation, which uses lots of big words, makes it hard to understand. I decided to create a quick user guide to describe how you can use with a short but expository example. ngTransclude ng-transclude Basic directive — without transclusion To explain transclusion in one sentence you could say that it is a way of including content from one template to another. Imagine a simple situation. You have a directive for a card with some data. It contains three elements — header, content and button. The template can look like this: <div = > <div = >{{content}}< button> class "card" {{header}} < = > h1 class "header" </ > h1 class "content" /div>
  <button
    type="submit"
    class="button"
    ng-click="buttonAction()">
    {{buttonText}}
  </ </ > div This HTML template allows you to use this card everywhere you want. This requires a code for a directive, for example, something like this: ( { ;

  angular
    .module( )
    .directive( , Card); { { : , : , : { : , : , : , : }, : };
  }
})(); ( ) function 'use strict' 'app.card' 'Card' ( ) function Card return restrict 'E' replace true scope header '@' content '@' buttonAction '&' buttonText '@' templateUrl 'card.html' It is very simple; data binding allows you to bind attributes values to this template. A , and are bound as text in the places where corresponding expressions occur. You can also pass a function to a button using . It can be done as simple as this: header content buttonText buttonAction <card 
  header= content= button-text= button-action= > "Hello" "Do you want to continue?" "Nope" "$ctrl.close()" </ > card It is a very good solution for making consistent cards in every place it is needed. When you want to change how the card looks like to the user, just apply changes to the template and you will get a discernible effect in every place that this directive is used. More flexibility — transclusion Although this directive gives you a little flexibility, it doesn’t really allow you to add something more to it. This doesn’t let us use HTML formatting in the content. Imagine that instead of simple text binding, you want now to add something more sophisticated to your card content. This is what transclusion is used for, to nest the content as HTML inside it. The brilliance of transclusion is that everything you put inside your directive tag can be displayed in a particular place in your template. As an example, you want to add a simple table to the content. First, a template should be changed. <div = > <div = ng-transclude= > <button
    type= = ng-click= >
    {{buttonText}}
  < div> class "card" {{header}} < = > h1 class "header" </ > h1 class "content" "cardContent" </ > div "submit" class "button" "buttonAction()" /button>
</ The same changes are required in the directive, now the content will be transcluded: ( { ;

  angular
    .module( )
    .directive( , Card); { { : , : , : { : }
      scope: { : , : , : }, : };
  }
})(); ( ) function 'use strict' 'app.card' 'Card' ( ) function Card return restrict 'E' replace true transclude cardContent 'cardContent' header '@' buttonAction '&' buttonText '@' templateUrl 'card.html' And now you can use it as you want. You can put whatever inside your directive html tag and it will be displayed inside a with transclusion. You can add a simple table inside: div cardContent <card 
  header= button-text= button-action= > <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr> <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr> <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr> < "Table" "Close" "$ctrl.close()" < > table </ > table /card> It will result with this HTML code in the end: <div = > <div = > <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr> <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr> <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr> < button> class "card" Table < = > h1 class "header" </ > h1 class "content" < > table </ > table /div>
  <button
    type="submit"
    class="button"
    ng-click="$ctrl.close()">
    Close
  </ </ > div As you see values of every attributes are bound to selected elements and table was inserted to content . div Conclusion The transclusion directive is something that is not described properly with AngularJS docs, but with a little explanation and real-life example, it becomes very easy. It allows you to not needlessly repeat yourself when creating directives in your application and to make your templates more versatile. I really recommend using it often across your application directives. This story was originally published on my Medium page on Nov 14, 2017 and had 1.4K views when moved to my Hackernoon page.

Understanding AngularJS Transclusion Directive 

What is a Shadow DOM (shadow tree) According to Mozilla Developer Network (MDN), a shadow tree is a tree of DOM nodes whose topmost node is a shadow root; that is, the topmost node within a shadow DOM. A shadow tree is a hidden set of standard DOM nodes which is attached to a standard DOM node that serves as a host. The hidden nodes are not directly visible using regular DOM functionality, but require the use of a special Shadow DOM API to access. Since the latest version of you can make special components called shadowed components. QCObjects What is a Shadowed Component A shadowed component is a QCObjects Component definition that you can extend to allow the content of your component to be shadowed in the browser. By the moment, QCObjects is only supporting the mode "open" for shadowed components. If you're not familiar yet with the concept of shadow root, shadow DOM or shadow tree, I highly recommend you to read this article of MDN about . Using the Shadow DOM Differences between a Shadowed Component and a Lightning Component A Lightning Component is no other thing that the same component that you're actually familiar with. On the image above, the component has a normal content, called a light DOM. This content is following the same CSS rules and scope that the rest of the document, and as a consequence, the rest of the web app. When you inject a style css rule into the content of this component, this rule will be added in runtime to the document, but it will also override any other rule that maches a conflict. This is useful most of the times, but a mess in particular others. For that particular times when you need to enclose the CSS and markup scope you got to use shadow DOM for content injection in a component. Shadow DOM is local to the component and defines its internal structure, scoped CSS, and encapsulates your implementation details. It can also define how to render markup that's authored by the consumer of your component. The above image is showing a card component that is filled up with shadowed content. To make it easy to handle when and where to put the shadow content, QCObjects has . Shadowed Components Creating Shadowed Component You have two ways to make a shadowed component in QCObjects. The first one, is to declare a component Class definition and use it in the component tag declaration. Class( ,Component,{ : , shadowed: , : , :{}
  }) // in your components package 'ShadowedCardComponent' name 'card' /* If shadowed is true, the DOM will be shadowed, default is false */ true cached false data In the above definition, you can use the hidden static property to let QCObjects to know it has to shadow the DOM of the component body. shadowed Then, you are able to use this definition into your html component tag, like this:  < = > component componentClass "ShadowedCardComponent" </ > component If you don't want to spend a special Class definition for your component, the second option is to set an attribute straight in the component tag declaration. < = = > component name "card" shadowed "true" </ > component Both ways get the same result, the component is built with shadowed DOM, and the styles into it will not follow the global css rules, and the markup inside will have an independent structure. Make sure your shadowed components are only used when needed, and you are not needing to depend on any other lighting component content to make your shadowed components visible and available, as they are completely independent. Also, it is not recommended to use lighting subcomponents into shadowed components, as the purpose of lighting components is to be absolutely available to be injected everywhere and to be interfered by external behaviours, and it is not the same purpose for shadowed components, whose are meant to be restricting the global behaviour in some ways. Both, lighting components and shadowed components are accesible from the global components stack, the main difference is that in the instance of every shadowed component will be a new hidden property (readonly) called , that is replacing the behaviour of the body, now, if you have any elements to add to the component content, you need to use instead of shadowedRoot componentInstance.shadowRoot.appendChild(element) componentInstance.body.append(element) Composition and slots In simple and easy words, is when you dynamically place elements of an object instance into blocks defined on its inherited instance. The resulting composed object instance will be mutating its behaviour as a result of the dynamic blocks mixing. Composition The shadow DOM is a hidden tree, that is allocated in a private scope, and it is populating its content to the light DOM, that is visible and accesible from the global scope. You can place light DOM elements over the shadow DOM elements, mutating the behaviour of the final flattened tree. This is called shadow DOM composition. Light DOM vs Shadow DOM The flattened DOM tree is the content that you can view opening dev tools in your browser. The flattened DOM tree of a Light DOM inside a QCObjects component will be like this: Card Title Card Description < = > component name "card"  < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < > b </ > b </ > h4 < > p </ > p </ > div </ > div </ > component On the other hand, a flattened DOM tree of a shadowed component with the exact same template content will be like this: #shadow-root Card Title Card Description < = = > component name "card" shadowed "true"  < = > div class "shadowHost" < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < > b </ > b </ > h4 < > p </ > p </ > div </ > div </ > div </ > component In this case, a light component was added dynamically to enclose the shadow DOM, this is always done by QCObjects in order to asure there will be no restrictions by the HTML spec over the different browsers that support shadow DOM. <div> The <slot> element Following the rules of the shadow DOM composition, we can go further defining some slots (a good additional example of the use of slots is in the MDN ). here  < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < = > slot name "card_title" </ > slot </ > h4 < = > slot name "card_description" </ > slot </ > div </ > div And Omg! this is becoming a bit more interesting... Card Title Card Description  < = = > component name "card" shadowed "true" < = > b slot "card_title" </ > b < = > p slot "card_description" </ > p </ > component In a shadowed component, you can override the content of the elements using custom blocks. slot And the resulting flattened DOM tree will be like this: #shadow-root Card Title Card Description  < = = > component name "card" shadowed "true"  < = > div class "shadowHost" < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < = > b slot "card_title" </ > b </ > h4 < = > p slot "card_description" </ > p </ > div </ > div </ > div </ > component And yes, you should be able to use data injectors too: {{title}} {{description}}  < = = > component name "card" shadowed "true" < = > b slot "card_title" </ > b < = > p slot "card_description" </ > p </ > component Styling In-line context based styles for shadowed components For shadowed components, it is recommended to place your style rules into the dynamic template file, commonly named with the extension , so the styles will be enabled only for the scope of the shadowed component. You can reference the main element of the shadowed DOM by using element in your style declaration, like this: tpl.html :host  < > style { : block; 
} @ url( ); :host display /* Also you can import styles from another css file */ import "./css/components/card.css" </ > style < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < = > slot name "card_title" </ > slot </ > h4 < = > slot name "card_description" </ > slot </ > div </ > div Enjoy coding! Previously published at https://devblog.qcobjects.org/shadowed-components-ck94xiira00e7s3s1os7bq7is

Shadowed Components & QCObjects

In this 2nd part of our tutorial, we are going to continue our journey of creating reset password functionality. In the , we completed the back-end with Node.js Express and Node mailer, created an API which will use in this part in Angular. Let’s get started. 1st part Creating a new angular project Let’s create a new project and run it. ng angular- - new reset password cd angular- - reset password ng serve We are going to have several pages so need to create an app-routing.module.ts for navigating needed pages in our site, { NgModule } ; {Routes, RouterModule} ; { SigninComponent } ; { SignupComponent } ; { RequestResetComponent } ; { ResponseResetComponent } ; routes: Routes = [
  { : , : SigninComponent,
  },
  { : , : SignupComponent,
  },
  { : , : RequestResetComponent,
  },
  { : , : ResponseResetComponent
    },
  { : , : }
];

@NgModule({ : [RouterModule.forRoot(routes)], : [RouterModule]
}) {} import from '@angular/core' import from '@angular/router' import from './components/signin/signin.component' import from './components/signup/signup.component' import from './components/request-reset/request-reset.component' import from './components/response-reset/response-reset.component' const path 'sign-in' component path 'sign-up' component path 'request-reset-password' component path 'response-reset-password/:token' component path '**' redirectTo 'sign-in' imports exports export class MainRoutingModule The names of each rout already makes it easier to understand which rout for what should be used. You may also notice that includes a response-reset-password :token That's the that we send via email in the back-end attached to the URL. However before creating the components for each rout we need to generate an Angular service where we will use our API from the first part. resettoken Creating an Auth service ng generate auth service Let’s update our service file: { Injectable } ; { HttpClient } ; { Observable } ; BASEURL = ;

@Injectable({ : }) { (private http: HttpClient) { }

  registerUser(body): Observable<any> { .http.post( , body);
  }

  loginUser(body): Observable<any> { .http.post( , body);
  }

  requestReset(body): Observable<any> { .http.post( , body);
  }

  newPassword(body): Observable<any> { .http.post( , body);
  }

  ValidPasswordToken(body): Observable<any> { .http.post( , body);
  }
  } import from '@angular/core' import from '@angular/common/http' import from 'rxjs' const 'http://localhost:3000/api/resetpassword' providedIn 'root' export class AuthService constructor return this ` /register` ${BASEURL} return this ` /login` ${BASEURL} return this ` /req-reset-password` ${BASEURL} return this ` /new-password` ${BASEURL} return this ` /valid-password-token` ${BASEURL} The last is for validating the token and checking if it’s still active. Other ones looks very descriptive. It’s time to create the components. ValidPasswordToken Creating a Signup component It’s time to make Signup component functional. { Component, OnInit } ; { FormBuilder, FormGroup, Validators } ; { AuthService } ; { Router } ;

@Component({ : , : , : [ ]

}) {
  SignupForm: FormGroup;
  forbiddenEmails: any;
  errorMessage: string; (
    private fb: FormBuilder,
    private authService: AuthService,
    private router: Router,
  ) { .buildSignupForm();
  }

  ngOnInit() {
  }
 
  private buildSignupForm() { .SignupForm = .fb.group({ : [ , [Validators.required]], : [ , [Validators.required, Validators.email], .forbiddenEmails], : [ , [Validators.required, Validators.minLength( )]],
    });
  }

  onSubmit() { .SignupForm.reset();
  }

  signupUser() { .authService.registerUser( .SignupForm.value).subscribe( { .SignupForm.reset();
        setTimeout( { .router.navigate([ ]);
        }, );
      },
      err => { (err.error.msg) { .errorMessage = err.error.msg[ ].message;
        } (err.error.message) { .errorMessage = err.error.message;
        }
      }
    );
  }
} import from '@angular/core' import from '@angular/forms' import from '../../services/auth.service' import from '@angular/router' selector 'app-signup' templateUrl './signup.component.html' styleUrls '../signin/signin.component.css' export class SignupComponent implements OnInit constructor this this this username null email null this password null 4 this this this => data this => () this 'sign-in' 3000 if this 0 if this As you see it’s just a simple reactive form supported by Angular. We also created function for sending the data into the server and creating the user. Let’s create an HTML template for this component. SignupUser() Sign Up {{errorMessage}} Please enter a valid username! Please
                                    enter a valid email! Password is required and must have more than 4 characters! Sign Up < = > div class "container-fluid form" < = > div class "row form-row " < = > div class "col-sm-9 col-md-7 col-lg-5 mx-auto" < = > div class "card my-5" < = > div class "card-body" < = > h5 class "card-title text-center" </ > h5 < > div < = * = > div id "errorMsg" ngIf "errorMessage" < > span </ > span </ > div < = [ ]= ( )= > form action "" formGroup "SignupForm" ngSubmit "signupUser()" < = > div class "form-group form-signup" < = = = = = = /> input _ngcontent-c0 "" class "form-control form-control-lg" placeholder "Username" type "text" id "username" formControlName "username" < * = = > span ngIf "!SignupForm.get('username').valid && SignupForm.get('username').touched" class "help-block" </ > span </ > div < = > div class "form-group" < = = = = = = /> input _ngcontent-c0 "" class "form-control form-control-lg" placeholder "E-mail" type "text" id "email" formControlName "email" < * = = > span ngIf "!SignupForm.get('email').valid && SignupForm.get('email').touched" class "help-block" </ > span </ > div < = > div class "form-group" < = = = = /> input class "form-control form-control-lg" placeholder "Password" type "password" formControlName "password" < * = = > span ngIf "!SignupForm.get('password').valid && SignupForm.get('password').touched" class "help-block" </ > span </ > div < = > div class "form-group" < = = ( )= > button type "submit" class " btn btn-primary" ngSubmit "signupUser()" </ > button </ > div </ > form </ > div </ > div </ > div </ > div </ > div </ > div It will look like this: You can style it as you wish. This tutorial is mainly about functional part and we will not spend time on CSS. That’s it. Let's create a Forgot password component where we should submit our email for receiving a link in our inbox containing a link to new page where we can change our password. Creating RequestReset Component Nothing special will be in this component. We just will create another Angular reactive form that will check if the email is valid and then will use RequestResetUser function for sending the data. () { Component, OnInit } ; { FormGroup, Validators, FormControl } ; { AuthService } ; { Router } ;

@Component({ : , : ,
}) {
  RequestResetForm: FormGroup;
  forbiddenEmails: any;
  errorMessage: string;
  successMessage: string;
  IsvalidForm = ; (
    private authService: AuthService,
    private router: Router,
   ) {

  }


  ngOnInit() { .RequestResetForm = FormGroup({ : FormControl( , [Validators.required, Validators.email], .forbiddenEmails),
    });
  }


  RequestResetUser(form) { .log(form) (form.valid) { .IsvalidForm = ; .authService.requestReset( .RequestResetForm.value).subscribe( { .RequestResetForm.reset(); .successMessage = ;
          setTimeout( { .successMessage = ; .router.navigate([ ]);
          }, );
        },
        err => { (err.error.message) { .errorMessage = err.error.message;
          }
        }
      );
    } { .IsvalidForm = ;
    }
  }
} import from '@angular/core' import from '@angular/forms' import from '../../services/auth.service' import from '@angular/router' selector 'app-request-reset' templateUrl './request-reset.component.html' export class RequestResetComponent implements OnInit true constructor this new 'email' new null this console if this true this this => data this this "Reset password link send to email sucessfully." => () this null this 'sign-in' 3000 if this else this false HTML template of this component will be almost the same as for component. SignUp Forgot Password {{errorMessage}} {{successMessage}} Please enter a valid email! Reset
                                        Password < = > div class "container-fluid form" < = > div class "row form-row " < = > div class "col-sm-9 col-md-7 col-lg-5 mx-auto" < = > div class "card my-5" < = > div class "card-body" < = > h5 class "card-title text-center" </ > h5 < > div < = * = > div id "errorMsg" ngIf "errorMessage" < > span </ > span </ > div < = * = > div id "successMsg" ngIf "successMessage" < > span </ > span </ > div < = [ ]= ( )= > form action "" formGroup "RequestResetForm" ngSubmit "RequestResetUser(RequestResetForm)" < = > div class "form-group" < = = = = = = /> input _ngcontent-c0 "" class "form-control form-control-lg" placeholder "email" type "text" id "email" formControlName "email" < * = = > span ngIf "!RequestResetForm.get('email').valid && !IsvalidForm" class "help-block" </ > span </ > div < = > div class "form-group" < > div < = = > button type "submit" class " btn btn-primary" </ > button </ > div </ > div </ > form </ > div </ > div </ > div </ > div </ > div Here is how will it look like: The last component that we are going to build is component. ResponseReset Creating ResponseReset Component This page will be navigated from your email that includes the URL with token. Let’s get started: { Component, OnInit } ; { FormBuilder, FormGroup, Validators } ; { AuthService } ; { Router, ActivatedRoute } ;

@Component({ : , : ,

}) {
  ResponseResetForm: FormGroup;
  errorMessage: string;
  successMessage: string;
  resetToken: ;
  CurrentState: any;
  IsResetFormValid = ; (
    private authService: AuthService,
    private router: Router,
    private route: ActivatedRoute,
    private fb: FormBuilder ) { .CurrentState = ; .route.params.subscribe( { .resetToken = params.token; .log( .resetToken); .VerifyToken();
    });
  }


  ngOnInit() { .Init();
  }

  VerifyToken() { .authService.ValidPasswordToken({ : .resetToken }).subscribe( { .CurrentState = ;
      },
      err => { .CurrentState = ;
      }
    );
  }

  Init() { .ResponseResetForm = .fb.group(
      { : [ .resetToken], : [ , [Validators.required, Validators.minLength( )]], : [ , [Validators.required, Validators.minLength( )]]
      }
    );
  }

  Validate(passwordFormGroup: FormGroup) { new_password = passwordFormGroup.controls.newPassword.value; confirm_password = passwordFormGroup.controls.confirmPassword.value; (confirm_password.length <= ) { ;
    } (confirm_password !== new_password) { { : };
    } ;
  }


  ResetPassword(form) { .log(form.get( )); (form.valid) { .IsResetFormValid = ; .authService.newPassword( .ResponseResetForm.value).subscribe( { .ResponseResetForm.reset(); .successMessage = data.message;
          setTimeout( { .successMessage = ; .router.navigate([ ]);
          }, );
        },
        err => { (err.error.message) { .errorMessage = err.error.message;
          }
        }
      );
    } { .IsResetFormValid = ; }
  }
} import from '@angular/core' import from '@angular/forms' import from '../../services/auth.service' import from '@angular/router' selector 'app-request-reset' templateUrl './response-reset.component.html' export class ResponseResetComponent implements OnInit null true constructor this 'Wait' this => params this console this this this this resettoken this => data this 'Verified' this 'NotVerified' this this resettoken this newPassword '' 4 confirmPassword '' 4 const const if 0 return null if return doesNotMatch true return null console 'confirmPassword' if this true this this => data this this => () this null this 'sign-in' 3000 if this else this false Firstly it verifies the token then just compares 2 passwords to see if they match and as the last step it sends the updated password to the back-end. That’s it! We can create a HTML template for it. Please Wait... Invalid URL. Set New Password {{errorMessage}} {{successMessage}} Password is required with atleast 4 characters. . Confirm Password does not match with password. Update
                                        Password < = > div class "container-fluid form" < = * = > div class "row" ngIf "CurrentState=='Wait'" < = > div class "col-md-12  close-form" < > h2 </ > h2 </ > div </ > div < = * = > div class "row" ngIf "CurrentState=='NotVerified'" < = > div class "col-md-12" < > h2 </ > h2 </ > div </ > div < = * = > div class "row" ngIf "CurrentState=='Verified'" < = > div class "col-sm-9 col-md-7 col-lg-5 mx-auto" < = > div class "card card-signin my-5" < = > div class "card-body" < = > h5 class "card-title text-center" </ > h5 < > div < = * = > div id "errorMsg" ngIf "errorMessage" < > span </ > span </ > div < = * = > div id "successMsg" ngIf "successMessage" < > span </ > span </ > div < = [ ]= ( )= > form action "" formGroup "ResponseResetForm" ngSubmit "ResetPassword(ResponseResetForm)" < = > div class "form-group" < = = = = = = /> input _ngcontent-c0 "" class "form-control form-control-lg" placeholder "Password" type "password" id "password" formControlName "newPassword" < * = = > span ngIf "!ResponseResetForm.get('newPassword').valid && !IsResetFormValid" class "help-block" </ > span </ > div < = > div class "form-group" < = = = = = = /> input _ngcontent-c0 "" class "form-control form-control-lg" placeholder "Confirm Password" type "password" id "cpassword" formControlName "confirmPassword" < * = = > span ngIf "!ResponseResetForm.get('confirmPassword').valid && !IsResetFormValid" class "help-block" </ > span < * = = > span ngIf "ResponseResetForm.get('confirmPassword').valid && (ResponseResetForm.get('confirmPassword').value != ResponseResetForm.get('newPassword').value) && !IsResetFormValid" class "help-block" </ > span </ > div < = > div class "form-group" < > div < = = > button type "submit" class "  btn btn-primary" </ > button </ > div </ > div </ > form </ > div </ > div </ > div </ > div </ > div Based on condition it shows the right part of the template. Here is how it will look like: That’s all! Hope this tutorial was helpful for you. Also don’t forget to include components in app.module.ts Conclusion You can get the full source code here: Github

CLASSCARD

classcardapp.com

-- employees

Since n.d.

COMPANY RANKING

CLASSCARD

EVERGREEN INDEX #2741

Representing this company? Click here to claim and customize this page!

Classcard WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

CLASSCARD

classcardapp.com

-- employees

Since n.d.

COMPANY RANKING

CLASSCARD

EVERGREEN INDEX #2741

RELATED COMPANIESRANK

STORIES ABOUT CLASSCARD

Representing this company? Click here to claim and customize this page!

Classcard WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!