Create a Beautiful Login Form With Angular Material

Create a Beautiful Login Form With Angular Material

Creating a clean, intuitive user interface is a key part of designing web applications. This has historically been challenging, however, because web apps don’t have a common design language like desktop apps do.

Enter Material Design. Google released Material Design in 2014 with the goal of creating a common user experience across Android devices and web apps. Material design has components that developers can use for both Android and JavaScript applications.

Material Design has become very popular. Developers have created libraries that incorporate Material Design components into existing frameworks. Within Angular applications, you can use the angular-material library, which makes all Material components available for your Angular templates. The catch is that you use Material Design in your application, you should be sure to use it across all parts of your app—it’s a common design language, after all. 

As you’re building your next app, you may want to use a single sign-on service like Okta. In its default configuration, Okta redirects users to a hosted login page and redirects them back to the app when they sign in successfully. If you’re using Material Design with your application, you might want to create your own login form to match the rest of your app, but you can still do this with Okta!

In this tutorial, I’ll show you how to create a login form like the one above. You’ll create an Angular app, use Material Design, and make it require user login. Okta provides a library specifically for Angular applications but I will be using the more low-level okta-auth-js library. This library allows you to have full control over your HTML and just handles communication with Okta’s API. All of Okta’s JavaScript libraries are built on top of okta-auth-js. To make the application a bit more interesting, I will be creating a small tic-tac-toe game that will be protected using Okta for authentication.

To get started, you will need to install the Angular command-line tool. I will assume that you have some familiarity with JavaScript and that you have Node installed on your system together with the Node Package Manager npm. Open a terminal and type the following command.

Depending on your operating system, you might have to run this using the sudo command. This will install the Angular command-line tool on your system. It lets you use the ng command to set up and manipulate Angular applications. To create a new application navigate to a directory of your choice and run the following.

You will be asked two questions. Answer Yes to the first question. This will include and set up the router in your application. The router is responsible for letting the user navigate between different parts of the app and updating the browser’s URL without actually reloading the page. For the second question, accept the default choice CSS. This application will use simple CSS stylesheets but you can see how easy it is to switch to a different stylesheet technology with Angular.

Once the wizard has completed you should see a new folder called material-tic-tac-toe. Navigate into the folder and install some packages you will need for the application by running the command below.

The @angular/material package provides the components of the Material Design, @angular/cdk is a component development kit that is needed for the Material components to work and hammerjs is a library that provides smooth animations for the component. @angular/flex-layout provides a flexible and responsive grid. It is independent of the Material components but is often used together with it. Finally, tic-tac-toe-minimax is a ready-to-go tic-tac-toe game with a computer player.

The Material components do not include the web-font for the Material Icon set. In order to use the icons, open src/index.html in your IDE and add the following line inside the <head> tag.

To make hammerjs available to the application open src/main.ts and add the following import to the top of the file.

Next, add the Material Design stylesheet to your application. Open src/styles.css and paste the code below into the file.

The @import statement imports a pre-built theme into the CSS file. I have also added a bit of styling for the body and h1 elements. Next, you need to import all the modules you will be needing into the application.

Open src/app/app.module.ts and add the imports below to the top of the file.

Now scroll down in the same file and find the imports declaration. Change it to match the following.

Now that you’re done with all the preliminaries, it’s time to start implementing the game application.

Start with the main application component. Open src/app/app.component.html and replace the default contents with the following code.

This code contains the main toolbar and menu of the application. Only a small amount of styling is needed. Paste the following into src/app/app.component.css.

Now, open src/app/app.component.ts and modify the component title and add an isAuthenticated property. The contents of the file should look like this.

Open your terminal again and create two components home, and game by running the commands below.

The home component simply contains a splash screen with the game title. Replace the contents of src/app/home/home.component.html with the following line.

The game component will need a bit more editing. Start with the template and open src/app/game/game.component.html. Replace the contents of the file with the following code.

The code above defined two cards. The top card contains the current game state. It also lets the user click on any of the fields to make a move. The bottom card contains the game controls. Add some styling by pasting the following code into src/app/game/game.component.css.

The actual game logic lives in src/app/game/game.component.ts. It is using the tic-tac-toe-minimax library to calculate computer moves and determine the winner. Replace the contents of the file with the code below.

To complete the game, you will need to define the routes to the two components.

Open src/app/app-routing.module.ts and add the following imports to the top of the file.

Next, change the routes array to match the following.

This completes the implementation of the game. You should now be able to open a terminal and run the following command:

Open your browser and navigate to http://localhost:4200. Click on the Play link in the top menu and you should see a fully functional tic-tac-toe game. Note that the Login link is not yet wired up. If you click on it nothing will happen and you can see an error message in the browser’s console.

Before you can start implementing the login page you need to register with Okta. Creating an account is simple and free. Just open a browser and navigate to Click Create Free Account and complete the registration process.

When you are done you will be redirected to your Okta developer dashboard. Register a new application by going to Applications > Add Application. On the next screen, choose Single Page App and click Next.

On the following screen, you can edit the application’s settings. Make sure that the port number is 4200 and the base URI is http://localhost:4200/. Change the Login Redirect URI to http://localhost:4200/login. Once you are done, you should now see a Client ID which you will need later in your code.

You will be implementing a login form as part of your application. Before continuing, a few warnings. If you decide to run a production environment in which you host your own login form, make sure that you are using the secure HTTPS protocol and you are hosting your site with a valid SSL certificate. Also, make sure to never store the login data in a session variable or the browser’s storage. If you fail to take the necessary security precautions, your site may be vulnerable to attacks. As mentioned above, you will not be using any of the Angular-specific Okta libraries. Instead, install the okta-auth-js package by opening the terminal in the project’s root folder and typing the following command.

With this, you are ready to create the authentication service. In the terminal, type the following command.

Now open the newly created file src/app/auth.service.ts. This file is where all the magic happens. Paste the following contents into the file. I will walk you through the code step-by-step below.

The AuthService defines a member authClient that is initialized to be an OktaAuth object. This object encapsulates the authentication, session management, and communication with the Okta servers. The OktaAuth constructor takes several options. The options provided here are the issuer and the clientId. In these options, you will have to replace {YourOktaDomain} with your Okta domain that you can find on the Okta dashboard. The {ClientId} needs to be replaced with the client ID you obtained when you registered your application with Okta.

The isAuthenticated property is a behavior subject that reflects whether the user is logged in or not. The AuthService also defines three asynchronous methods. The checkAuthenticated() method checks whether a user session exists and returns the outcome. It also updates the isAuthenticated subject. The login() method sends a sign-in request to the Okta server. On success, the user is authenticated and a session is established. The logout() method will sign out the user and redirect them to a specified route.

Now that the service is in place, you can use it in the application component. Open src/app/app.component.ts and modify the contents to match the code below.

The isAuthenticated variable is now initialized and updated by the authentication service. And the logout() method will sign the user out and redirect them to the home page.

Now create the login component. In the terminal, run the command below.

Open src/app/login/login.component.html and add the following login form.

Everything is contained in a <mat-card> element again. Note how the <mat-form-field> elements each contain an <input> as well as a <mat-error> element. The <mat-error> works seamlessly with Angular’s form validation to provide useful feedback. As you might have guessed by now, src/app/login/login.component.css contains some styling. Paste the code below into the file.

Now open src/app/login/login.component.ts and paste in the implementation of the login component.

There is not much happening here. ngOnInit() sets up the form. If the user is already authenticated it requests the router to navigate to a different URL. The onSubmit() function handles the form submission. It extracts the values from the form elements and attempts to log in using AuthService.

The application is almost done. You have the authentication service and the login form in place. But you also want to prevent the user from navigating to a part of the application that they are not authorized to see. Angular uses route guards for this. Create a new service by running the following command in the terminal.

The guard implements the CanActivate interface and must implement the canActivate() function. Replace the contents of src/app/auth-guard.service.ts with the following.

Finally, add the login route and the route guard to the router setup. Open src/app/app-routing.module.ts again and add the two imports below.

Now, change the routes array to look like the following.

Well done, that’s it. The application is complete!

When you run the ng serve command and navigate to http://localhost:4200 you should now be able to log in and out of the application. The login form uses Material Design and should look something like the image below.

Make Angular Tests Pass With Angular Material

You generated a lot of code in this tutorial. When you created components, tests were created for those components as well. The tests merely verify the components render. If you run ng test, most of them will fail because the tests don’t have the imports for the components you added. If you’d like to see what it takes to make all the tests pass, see this commit.

In this tutorial, I showed you how to implement your own login form in an Angular application using Material Design and the Angular Material library. Coding up your own form may be a viable option if you want to present a uniform user experience. Much of this tutorial can be used for other design libraries and is not limited to Material Design but Google’s Material Design standard is probably one of the most recognized user interface standards nowadays. Using it will improve the usability of your web application.

You can download the code for this tutorial from oktadeveloper/okta-angular-material-login-example.

If you want to learn more about Angular, Material Design, or ways to use Okta with Angular, feel free to check out the links below.

As usual, follow us @oktadev on Twitter and subscribe to our YouTube channel for more excellent content!

Source link

Bitrise's State of Mobile App Development

Bitrise’s State of Mobile App Development

In 2019 we spent a great deal of time visiting developers that use Bitrise, traveling around the globe with cross-functional teams, and continued talking to a lot of companies developing mobile apps. We also regularly analyzed a ton of behavioral data to understand how we could improve Bitrise to give the best experience for mobile developers. We’ve drawn our conclusions and thought it would be interesting to break them down into numbers and share the big picture with you.

Some questions we asked:

  • What is the most popular platform?
  • How quickly were the new Xcode versions adopted?
  • GitHub/Bitbucket/GitLab?
  • How many apps do companies have?
  • How much time did builds run on Bitrise?
  • What integrations or steps are most frequently used?
  • Which 3rd party integrations are the most popular?
  • Which open source projects were updated the most times and who were the most active contributors to Bitrise?
  • How do these compare to our findings in the past 3 years?

In 2019, your builds ran for 2,820,001 hours, that is 117,500 days or 3,863 months or 321.9 years

This and all results presented below were compiled from the data taken from all the active apps of last year on Bitrise. Our users ran almost the same number of builds in 2018 as they did in the last quarter of 2019, so we had plenty of apps, builds and customers to draw relevant conclusions on the state of app development in 2019. 

You may also enjoy How to Adopt Mobile DevOps Practices: Mindset and Technologies

Mobile Platforms

Native Development in Decline

In 2016, of all the apps added to Bitrise, 67% were iOS, 22% Android. In 2017, Bitrise kept introducing out of the box support for more platforms, but unsurprisingly, the two most popular platforms were iOS with 44.3% and Android with 36.1%. In 2018, the two most popular platforms were still iOS with 39.2% and Android with 38% and in 2019, 39.3% of all the apps added to Bitrise were iOS, and 31% were Android. 

Based on the platform distribution above, there seems to be a continuous downward trend in the percentage of native apps, which, at the same time, also means…

The Rise of Cross-Platform

In 2016, of all the apps added to Bitrise, 12% were Xamarin. In 2017 Xamarin was still the third with 11%, while React Native apps came fourth with 6%. In 2018, there was a serious change in the runners-up: surprisingly, Xamarin dropped from 11% to 3.7%, with half as many apps as in 2017. The biggest decline of the year 2019 happened to Xamarin again: there was a 28% decrease in active repositories and their share dropped to 2%.

In 2018, React Native came up to 13.3% from 6% with 3 times as many active apps on Bitrise as before. In 2019, React Native was still the most popular way to develop cross-platform apps, increasing their share further from 2018’s 13.3% to 14.1%.

“In 2019, React Native was still the most popular way to develop cross-platform apps, increasing their share further to 14.1%.”

By the end of 2019, 7.6% of active apps on Bitrise were being built in Flutter. If Flutter continues this growth trajectory over 2020, by Q4 of this year, Flutter projects will outnumber React Native ones on Bitrise.

If Flutter continues this growth trajectory over 2020, by Q4 of this year, Flutter projects will outnumber React Native ones on Bitrise.

In 2019, we also saw some very notable apps make the transition to Flutter, including the Tonal companion app, as the Tonal team explained in a recent video.

MacOS saw a very slight decrease in percentage keeping roughly the same amount of active repos, so the demand seems to be steady.

In 2017, Ionic and Cordova both hovered around 1% share of active apps on the platform. Just a year later, both counted almost 3x as many apps on Bitrise, only to further grow to close to 3.7% of total apps being built in Ionic over 2019, versus 1.3% of apps built using Cordova.

In two years, Ionic usage increased steadily: they almost 6x-ed the number of active apps on Bitrise, so that now they are almost twice as big as Xamarin.

Xcode Adoption Rate

Bitrise is dedicated to providing the latest, the safest, the more feature-rich versions of developer tools, so our infra-engineers work hard to provide our users with the newest Xcode versions in 48 hours after release. 

Our users seem to appreciate this approach and adopt the new Xcode versions quickly. This chart shows trends in the adoption of Xcode versions released in 2019.

  • By the time a new Xcode version was officially released, it was always available on Bitrise.
  • Xcode 11.3 was only released on December 10, 2019 but by end of the year, 17% of all Xcode builds happened on it (peach area on the chart).
  • 10.1 was used by 75% at one point and 10.2 by 76%.
  • 10.3 reached its max. at 24%
  • Xcode 11.0 with the Swift UI framework was released on September 20, 2019, followed by 3 versions in relatively quick succession.
  • By the end of the year, only 25.9% used a 10.x or below version.

Where the rate of adoption for both Xcode 11 and Xcode 10 was very similar in the initial weeks, soon a change appeared. From week 3-4 on, the rate of adoption of Xcode 11 slowed down considerably compared to 10, indicating that developers opted to continue building on the previous Xcode version. Even though it’s speculation from our side, it seems like some issues with the initial Xcode 11 versions made developers hesitant to switch their build environments over.

Git Hosting in the Cloud

No real changes here since 2016. Even though Microsoft acquired GitHub and there was some migration, GitHub kept its first place with 56% (2017: 53%, 2018: 54%). Bitbucket, the second major player keeps loosing repos (2017: 34%, 2018: 30%), in 2019, 24% of the apps on Bitrise were stored there. Custom solutions were used by 2% more than last year, and GitLab also gained 2%. Self-hosted GitLab 3x-ed their number of repos used on Bitrise.

Apps and Their Owners

An average company has 6.47 apps on Bitrise, which almost is the double of last year’s 3.35. Most of these two apps naturally are iOS and Android. 

About our Steps/Integrations

There are currently around 280 steps and integrations in the Bitrise ecosystem. Each of these steps are responsible for a small task, that can be inserted in the build workflow. These can range from running tests, archiving the app, deploying, releasing or notifying team members, among others.

The Most Used Ones

Our Script step ran the most times in 2019, about as many times in the last quarter of 2019 as in 2018. This step is used when someone needs to run a custom command or install/update a tool that is not (yet) available on our virtual machines. (This is also the step that fails the most times, so we suggest to use the official steps if possible.)

Otherwise, developers deployed to Bitrise a lot, (this is done to help deployment to either testers or the app stores.) Our users also tend to take advantage of the Caching solutions Bitrise provides.

The 15 most used steps of 2019 are:

  1. Script
  2. Deploy to Bitrise
  3. Cache:Pull
  4. Cache:Push
  5. Send a Slack message
  6. Install missing Android SDK components
  7. Certificate and profile installer
  8. Gradle Runner
  9. fastlane
  10. Run CocoaPods install
  11. Run npm command
  12. Run yarn command
  13. Xcode Archive & Export for iOS
  14. Xcode Test for iOS
  15. GitHub status

Most Used Third-Party Integrations

Our users love getting automated messages to their Slack channels about their builds: Slack is by far the most popular third-party integration with close to 1.6 million runs in Q4 of 2019, being the 5th most used step of all.

“Slack is by far the most popular third-party integration with close to 1.6 million runs in Q4 of 2019”

The second most used integration is Codecov and Google Play Deploy comes third.

  1. Send a Slack message
  2. Codecov
  3. Google Play Deploy
  4. Deploy to iTunes Connect & Deploy to iTunes Connect – Application Loader
  5. HockeyApp Android + iOS Deploy
  6. Fabric / Crashlytics deployer
  7. Amazon S3 File uploader
  8. Send Microsoft Teams message
  9. SonarQube Scanner
  10. Gifs with Giphy

Most Used Community Steps

We’re very grateful to the community using Bitrise and most of all to those who contribute to our service. Our users can contribute to Bitrise by writing new steps or upgrading previous ones as all Bitrise steps are open source. The following steps were all written by the members of our community, thank you for all of them!

Trigger Bitrise workflow step was used close to 100,000 times in Q4, becoming the top performed community step. Install specific bundler version came in second and Set iOS Info.plist - Bundle Version and Bundle Short Version String third.

  1. Trigger Bitrise workflow by @koral— of DroidsOnRoids
  2. Install specific bundler version by @igorcferreira of Future Workshops
  3. Set iOS Info.plist – Bundle Version and Bundle Short Version String by @KirillAshikhmin
  4. Amazon S3 File uploader by @scruffyfox
  5. Set Android Manifest Version Code and Name by @jamesmontemagno

Thank you!

Most used steps per category

  1. Gradle Runner
  2. Xcode Archive & Export for iOS
  3. Android Build & Android Build for UI testing
  4. Xamarin Archive
  5. Flutter Build

  1. Xcode Test for iOS
  2. Android Unit Test
  3. Android Lint
  4. Gradle Unit Test
  5. Codecov
  6. [BETA] Virtual Device Testing for Android
  7. Flutter Test
  8. Danger

  1. Deploy to – Apps, Logs, Artifacts
  2. Deploy to iTunes Connect & Deploy to iTunes Connect – Application Loader
  3. Deploy to Google Play
  4. HockeyApp (Android + iOS)
  5. Fabric / Crashlytics deployer

  1. Send a Slack message
  2. Send Microsoft Teams message
  3. Comment on GitHub Pull Request
  4. Post Jira Comment
  5. Send Email with Mailgun

  1. Script
  2. Git Clone Repository
  3. Cache:Pull
  4. Cache:Push
  5. fastlane

Open-Source Apps

The most frequently built open-source apps on Bitrise are:

  1. Arrow  by @arrow-kt
  2. DuckDuckGo Android and iOS by @duckduckgo
  3. Lockwise (Android) by @mozilla-lockwise
  4. Tusky by @tuskyapp
  5. Wulcanowy by @Wulkanowy

Automate Everything!

We hope these insights were as interesting for you as for us. We love feedback, so Tweet us or comment on our social pages if you have any suggestions, or if we missed anything you might be interested in! We’re proud to help so many great people saving countless hours and ensuring code quality, making sure that you have more time for your ideas and for your code.

Happy building in 2020!

Further Reading

Our partner Bitrise’s Mobile DevOps blog

Why Mobile App Companies Need to Adopt Mobile DevOps Practices

Android Continuous Integration and Delivery

Source link

Post image

Looking for a basic drag and drop program/web app to create …

I’m currently testing a website called Figma but it I think even that has too many features. I’ve been messing with the font system for 45 minutes now trying to get the right font (it doesn’t give you previews). I think I might sink hours into this thing as there are too many bells and whistles and need to whip up something fast.

I need to build a mockup customer dashboard, something like my screenshot below.

Are there any template builder web apps out there, that I can just drag and drop boxes around and create fake pie charts etc

I don’t have experience in adobe before somebody recommends it.

Post image

Source link