{"id":20533671,"url":"https://github.com/nicolasroehm/logincomponent","last_synced_at":"2026-05-12T19:06:05.647Z","repository":{"id":39576550,"uuid":"135462334","full_name":"NicolasRoehm/LoginComponent","owner":"NicolasRoehm","description":"Angular library providing login component using Angular Material","archived":false,"fork":false,"pushed_at":"2023-01-07T02:22:07.000Z","size":2347,"stargazers_count":0,"open_issues_count":29,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-16T13:19:53.671Z","etag":null,"topics":["angular","angular-component","angular-material","form","login"],"latest_commit_sha":null,"homepage":"https://caliatys.github.io/LoginComponent/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NicolasRoehm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-30T15:24:09.000Z","updated_at":"2020-09-24T13:27:46.000Z","dependencies_parsed_at":"2023-02-06T10:30:35.342Z","dependency_job_id":null,"html_url":"https://github.com/NicolasRoehm/LoginComponent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasRoehm%2FLoginComponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasRoehm%2FLoginComponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasRoehm%2FLoginComponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasRoehm%2FLoginComponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NicolasRoehm","download_url":"https://codeload.github.com/NicolasRoehm/LoginComponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242138885,"owners_count":20078006,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-component","angular-material","form","login"],"created_at":"2024-11-16T00:23:08.445Z","updated_at":"2026-05-12T19:06:00.623Z","avatar_url":"https://github.com/NicolasRoehm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Login Form Component\nAngular component providing login and password management using [Angular Material 8](https://material.angular.io/) library.\n\n\u003ca href=\"https://www.npmjs.com/package/@caliatys/login-form\" target=\"_blank\"\u003e\n  \u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/@caliatys/login-form.svg?style=flat-square\"/\u003e\n\u003c/a\u003e\n\n## Table of contents\n- [Example](#example)\n- [Demo](#demo)\n- [Installation](#installation)\n- [Usage](#usage)\n  * [Inputs](#inputs)\n  * [Outputs](#outputs)\n  * [Functions](#functions)\n- [Dependencies](#dependencies)\n- [Roadmap](#roadmap)\n  * [In progress](#in-progress)\n  * [Planning](#planning)\n  * [Contributions](#contributions)\n- [Development](#development)\n\n## Example\nCheck out the **[StackBlitz demo](https://cal-login-component.stackblitz.io/)**\n\n\u003cdetails\u003e\n  \u003csummary\u003eScreenshot\u003c/summary\u003e\n  \u003cdiv align=center\u003e\u003cimg alt=\"Screenshot\" src=\"src/assets/img/example.png\"\u003e\u003c/div\u003e\n\u003c/details\u003e\n\n## Demo\n\n```sh\ngit clone https://github.com/Caliatys/LoginComponent\ncd LoginComponent/\nnpm install\nng build login-form --prod\nng serve\n```\n\n## Installation\nInstall `@caliatys/login-form` in your project :\n```sh\nnpm install @caliatys/login-form@3.0.1 --save\n```\n\nImport the `LoginFormModule` inside a `login.module.ts` :\n```typescript\nimport { LoginFormModule } from '@caliatys/login-form';\n\n@NgModule({\n  imports: [\n    LoginFormModule\n  ],\n})\nexport class LoginModule { }\n```\n\n## Usage\nAdd the `cal-login-form` component inside a `login.component.html` :\n```html\n\u003ccal-login-form #loginForm \n  (initialized)=\"initialized()\" \n  (signUp)=\"signUp()\" \n  (login)=\"login($event)\" \n  (loginSocial)=\"loginSocial($event)\" \n  (forgotPwd)=\"forgotPassword($event)\" \n  (sendFirstPwd)=\"firstPassword($event)\" \n  (sendResetPwd)=\"resetPassword($event)\" \n  (saveMfaKey)=\"saveMfaKey($event)\" \n  (sendMfaCode)=\"sendMfaCode($event)\" \n  (stepUsr)=\"stepUsr($event)\" \n  (stepPwd)=\"stepPwd($event)\"\u003e\n\u003c/cal-login-form\u003e\n```\n\nSee the example in [src/app/app.component.ts](https://github.com/Caliatys/LoginComponent/blob/master/src/app/app.component.ts)\n\n#### Inputs\n```typescript\n// Wrap the component inside a container\n@Input() fixedWidth        : boolean = false;\n// Display login form like Google \u0026 Microsoft (step by step)\n@Input() googleStyle       : boolean = false;\n// Display Google button with the supplied theme : light (by default) / dark \n@Input() googleTheme       : string  = null;\n// Display forms inside a layout : tab (by default) / modal / inline\n// The inline layout is only available for the MFA form\n@Input() customLayouts : any = {\n  pwd      : 'modal',\n  mfaSetup : 'tab',\n  mfa      : 'inline'\n};\n\n// Optional policy applied on the username input : email / phone / regex\n// Be careful, you must double all the backslashes used in the supplied regex\n@Input() customUsrPolicy   : string = null;\n// Policies applied on the password input\n@Input() customPwdPolicies : any = {\n  range : {\n    min : 8,\n    max : 128,\n  },\n  char   : true,\n  number : true,\n  lower  : true,\n  upper  : true\n};\n// Remove password field controls on the login form (except required)\n@Input() hidePwdPolicyOnLogin : boolean = false;\n// Dislay icon inside inputs on the login form\n@Input() customIcons : any = {\n  iconUsr       : 'person',\n  iconPwd       : 'lock',\n  iconVerifCode : 'fingerprint'\n};\n// Display buttons with events\n@Input() customButtons : any = {\n  forgotPassword : true,\n  signUp         : true,\n  google         : true,\n  facebook       : true\n};\n// Display clear \u0026 show/hide buttons inside inputs\n@Input() customActions : any = {\n  clearUsr  : true,\n  clearCode : true,\n  showPwd   : true\n};\n// Display error messages\n@Input() customErrors : any = {\n  login : true,\n  pwd   : true,\n  mfa   : true\n};\n// Labels\n@Input() customLabels : any = {\n  header : {\n    titlePwd         : 'Lost password',\n    subtitlePwd      : 'Please enter the confirmation code',\n    titlePwdSetup    : 'Password setup',\n    subtitlePwdSetup : 'Please enter a new password',\n    titleMfa         : 'MFA',\n    subtitleMfa      : 'Please enter the confirmation code',\n    titleMfaSetup    : 'MFA setup',\n    subtitleMfaSetup : 'Save this secret key for future connection'\n  },\n  input : {\n    username         : 'Username',\n    password         : 'Password',\n    verificationCode : 'Verification code',\n    newPassword      : 'New password'\n  },\n  button : {\n    signIn         : 'Sign in',\n    signUp         : 'Sign up',\n    submit         : 'Submit',\n    next           : 'Next',\n    back           : 'Back',\n    send           : 'Send',\n    save           : 'Save',\n    forgotPassword : 'Forgot password',\n    googleSignIn   : 'Sign in with Google',\n    facebookSignIn : 'Sign in with Facebook'\n  },\n  policy : {\n    required      : 'This field is required',\n    nonWhitespace : 'This value must not contain any spaces',\n    email         : 'This value must be an email',\n    phone         : 'This value must be a phone number',\n    sixDigits     : 'This value must contains six digits',\n    customRegex   : 'This value must match the custom regex provided',\n    pwdLength     : 'Minimum password length ({{min}} to {{max}})',\n    pwdUppercase  : 'Require at least one uppercase letter (A to Z)',\n    pwdLowercase  : 'Require at least one lowercase letter (a to z)',\n    pwdNumber     : 'Require at least one number (0 to 9)',\n    pwdSpecial    : 'Require at least one nonalphanumeric character ! @ # $ % ^ \u0026 * ( ) _ + - = [ ] { } | \\''\n  }\n};\n// Classes\n@Input() customClasses : any = {\n  // Input colors (primary / accent / warn)\n  loginInputsColor : 'primary',\n  pwdInputsColor   : 'primary',\n  mfaInputsColor   : 'primary',\n  // Button classes (Example : mat-raised-button mat-accent)\n  signIn           : null,\n  signUp           : null,\n  forgotPassword   : null,\n  backStep         : null,\n  nextStep         : null,\n  google           : null,\n  facebook         : null,\n  closeTag         : null,\n  closeDialog      : null\n};\n```\n\n#### Outputs\n```typescript\n@Output() initialized  : EventEmitter\u003cany\u003e;\n@Output() signUp       : EventEmitter\u003cany\u003e;\n@Output() login        : EventEmitter\u003cany\u003e;\n/* username : string\n*  password : string */\n@Output() loginSocial  : EventEmitter\u003cany\u003e;\n/* username : string\n*  password : string\n*  social   : string */\n@Output() forgotPwd    : EventEmitter\u003cany\u003e;\n/* username : string */\n@Output() sendResetPwd : EventEmitter\u003cany\u003e;\n/* password : string\n*  verificationCode : string */\n@Output() sendFirstPwd : EventEmitter\u003cany\u003e;\n/* username : string\n*  password : string */\n@Output() saveMfaKey   : EventEmitter\u003cany\u003e;\n/* verificationCode : string */\n@Output() sendMfaCode  : EventEmitter\u003cany\u003e;\n/* verificationCode : string */\n@Output() stepUsr      : EventEmitter\u003cany\u003e;\n/* username : string */\n@Output() stepPwd      : EventEmitter\u003cany\u003e;\n/* username : string\n*  password : string */\n```\n\n#### Functions\n```typescript\n// Show functions\n// Show MFA form to get verification code.\nLoginFormComponent.showMfaForm() : void\n// Show MFA setup form to initialize first TOTP (Time-based One-time Password).\nLoginFormComponent.showMfaSetupForm(code : string, qrCode : string) : void\n// Show password form either to initialize first password or to reset forgot password.\nLoginFormComponent.showPwdForm(isFirst : boolean) : void\n// Show password input (for google-style form)\nLoginFormComponent.showPwdStep(userInfo? : string, userImage? : string) : void\n\n// Hide functions\nLoginFormComponent.hideMfaForm() : void\nLoginFormComponent.hideMfaSetupForm() : void\nLoginFormComponent.hidePwdForm(updatePwdField ?: string) : void\n\n// Access functions\nLoginFormComponent.getForm() : any\nLoginFormComponent.setForm(obj : any) : void\n```\n\n## Dependencies\n\n**Important Note** : This project uses the following dependencies :\n```json\n\"peerDependencies\"     : {\n  \"@angular/common\"    : \"^6.0.0-rc.0 || ^6.0.0\",\n  \"@angular/core\"      : \"^6.0.0-rc.0 || ^6.0.0\",\n  \"@angular/material\"  : \"^6.0.0-rc.0 || ^6.0.0\",\n  \"rxjs\"               : \"^6.0.0\",\n  \"rxjs-compat\"        : \"^6.0.0\",\n  \"bootstrap\"          : \"^4.0.0\"\n},\n\"optionalDependencies\" : {\n  \"angularx-qrcode\"    : \"^1.1.7\"\n}\n```\n\n## Roadmap\n\n### In progress\n- Repeat password (optional)\n- Dynamic display password policies\n\n### Planning\n- Captcha\n- GoogleStyle : user informations (image)\n- Test GoogleStyle on mobile (1/3)\n- Remove Bootstrap 4 dependency\n- Dissociate forgot password from setup password\n- Forgot password : Try to get the username ? display it (optional) : ask for it inside pwd form\n- Fix Angular 6 Library assets\n- Deploy with [Travis](https://travis-ci.org/) \u0026 Test Coverage with [Coveralls](https://coveralls.io/)\n\n### Contributions\n\nContributions are welcome, please open an issue and preferably submit a pull request.\n\nFor example, if we replace Bootstrap 4 classes by hand-made style we can reduce the amount of required dependencies.\n\n## Development\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.5.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasroehm%2Flogincomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicolasroehm%2Flogincomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasroehm%2Flogincomponent/lists"}