From 966420334d36b6d9d1ce157db6b8bc9745cc3082 Mon Sep 17 00:00:00 2001 From: Ruslan Arkhipau Date: Sat, 25 Mar 2017 20:13:17 -0700 Subject: [PATCH] chore(demo): move demo sources to the master branch Demo sources now live in master. Use `npm run demo:publish` to publish demo to gh-pages branch --- .npmignore | 5 +- demo/.gitignore | 4 + demo/Gemfile | 2 + demo/Gemfile.lock | 204 ++++++++++++++++++ demo/_config.yml | 22 ++ demo/_layouts/example.html | 91 ++++++++ demo/css/main.scss | 85 ++++++++ demo/example-forms.md | 13 ++ demo/example-invisible.md | 11 + demo/example-language.md | 11 + demo/example-preload-api.md | 29 +++ demo/examples/app/basic-demo.component.html | 4 + demo/examples/app/basic-demo.component.ts | 11 + demo/examples/app/basic-demo.main.ts | 16 ++ demo/examples/app/forms-demo.component.html | 14 ++ demo/examples/app/forms-demo.component.ts | 17 ++ demo/examples/app/forms-demo.main.ts | 23 ++ .../app/invisible-demo.component.html | 10 + demo/examples/app/invisible-demo.component.ts | 15 ++ demo/examples/app/invisible-demo.main.ts | 16 ++ .../examples/app/language-demo.component.html | 4 + demo/examples/app/language-demo.component.ts | 11 + demo/examples/app/language-demo.main.ts | 26 +++ .../app/preload-api-demo.component.html | 4 + .../app/preload-api-demo.component.ts | 11 + demo/examples/app/preload-api-demo.main.ts | 35 +++ demo/examples/ng-lint.json | 25 +++ demo/examples/package.json | 19 ++ demo/examples/tsconfig.json | 19 ++ demo/examples/tslint.json | 45 ++++ demo/images/angular.svg | 16 ++ demo/index.md | 12 ++ package.json | 7 +- tsconfig.json | 3 +- 34 files changed, 835 insertions(+), 5 deletions(-) create mode 100644 demo/.gitignore create mode 100644 demo/Gemfile create mode 100644 demo/Gemfile.lock create mode 100644 demo/_config.yml create mode 100644 demo/_layouts/example.html create mode 100644 demo/css/main.scss create mode 100644 demo/example-forms.md create mode 100644 demo/example-invisible.md create mode 100644 demo/example-language.md create mode 100644 demo/example-preload-api.md create mode 100644 demo/examples/app/basic-demo.component.html create mode 100644 demo/examples/app/basic-demo.component.ts create mode 100644 demo/examples/app/basic-demo.main.ts create mode 100644 demo/examples/app/forms-demo.component.html create mode 100644 demo/examples/app/forms-demo.component.ts create mode 100644 demo/examples/app/forms-demo.main.ts create mode 100644 demo/examples/app/invisible-demo.component.html create mode 100644 demo/examples/app/invisible-demo.component.ts create mode 100644 demo/examples/app/invisible-demo.main.ts create mode 100644 demo/examples/app/language-demo.component.html create mode 100644 demo/examples/app/language-demo.component.ts create mode 100644 demo/examples/app/language-demo.main.ts create mode 100644 demo/examples/app/preload-api-demo.component.html create mode 100644 demo/examples/app/preload-api-demo.component.ts create mode 100644 demo/examples/app/preload-api-demo.main.ts create mode 100644 demo/examples/ng-lint.json create mode 100644 demo/examples/package.json create mode 100644 demo/examples/tsconfig.json create mode 100644 demo/examples/tslint.json create mode 100644 demo/images/angular.svg create mode 100644 demo/index.md diff --git a/.npmignore b/.npmignore index a3a8e3c..5c51be8 100644 --- a/.npmignore +++ b/.npmignore @@ -1,9 +1,8 @@ # Editor settings .vscode/ -# typings -typings/ -typings.json +# demo sources +demo/ # TypeScript-related files *.ts diff --git a/demo/.gitignore b/demo/.gitignore new file mode 100644 index 0000000..e6276ab --- /dev/null +++ b/demo/.gitignore @@ -0,0 +1,4 @@ +# jekyll +_site +.sass-cache +.jekyll-metadata diff --git a/demo/Gemfile b/demo/Gemfile new file mode 100644 index 0000000..37f5eaa --- /dev/null +++ b/demo/Gemfile @@ -0,0 +1,2 @@ +source 'https://rubygems.org' +gem 'github-pages', group: :jekyll_plugins diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock new file mode 100644 index 0000000..1a3c9d3 --- /dev/null +++ b/demo/Gemfile.lock @@ -0,0 +1,204 @@ +GEM + remote: https://rubygems.org/ + specs: + activesupport (4.2.7) + i18n (~> 0.7) + json (~> 1.7, >= 1.7.7) + minitest (~> 5.1) + thread_safe (~> 0.3, >= 0.3.4) + tzinfo (~> 1.1) + addressable (2.5.0) + public_suffix (~> 2.0, >= 2.0.2) + coffee-script (2.4.1) + coffee-script-source + execjs + coffee-script-source (1.12.2) + colorator (1.1.0) + ethon (0.10.1) + ffi (>= 1.3.0) + execjs (2.7.0) + faraday (0.11.0) + multipart-post (>= 1.2, < 3) + ffi (1.9.18) + ffi (1.9.18-x64-mingw32) + forwardable-extended (2.6.0) + gemoji (2.1.0) + github-pages (113) + activesupport (= 4.2.7) + github-pages-health-check (= 1.3.0) + jekyll (= 3.3.1) + jekyll-avatar (= 0.4.2) + jekyll-coffeescript (= 1.0.1) + jekyll-default-layout (= 0.1.4) + jekyll-feed (= 0.8.0) + jekyll-gist (= 1.4.0) + jekyll-github-metadata (= 2.3.0) + jekyll-mentions (= 1.2.0) + jekyll-optional-front-matter (= 0.1.2) + jekyll-paginate (= 1.1.0) + jekyll-readme-index (= 0.0.3) + jekyll-redirect-from (= 0.11.0) + jekyll-relative-links (= 0.2.1) + jekyll-sass-converter (= 1.3.0) + jekyll-seo-tag (= 2.1.0) + jekyll-sitemap (= 0.12.0) + jekyll-swiss (= 0.4.0) + jekyll-theme-architect (= 0.0.3) + jekyll-theme-cayman (= 0.0.3) + jekyll-theme-dinky (= 0.0.3) + jekyll-theme-hacker (= 0.0.3) + jekyll-theme-leap-day (= 0.0.3) + jekyll-theme-merlot (= 0.0.3) + jekyll-theme-midnight (= 0.0.3) + jekyll-theme-minimal (= 0.0.3) + jekyll-theme-modernist (= 0.0.3) + jekyll-theme-primer (= 0.1.5) + jekyll-theme-slate (= 0.0.3) + jekyll-theme-tactile (= 0.0.3) + jekyll-theme-time-machine (= 0.0.3) + jekyll-titles-from-headings (= 0.1.3) + jemoji (= 0.7.0) + kramdown (= 1.11.1) + liquid (= 3.0.6) + listen (= 3.0.6) + mercenary (~> 0.3) + minima (= 2.0.0) + rouge (= 1.11.1) + terminal-table (~> 1.4) + github-pages-health-check (1.3.0) + addressable (~> 2.3) + net-dns (~> 0.8) + octokit (~> 4.0) + public_suffix (~> 2.0) + typhoeus (~> 0.7) + html-pipeline (2.5.0) + activesupport (>= 2) + nokogiri (>= 1.4) + i18n (0.8.1) + jekyll (3.3.1) + addressable (~> 2.4) + colorator (~> 1.0) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 1.1) + kramdown (~> 1.3) + liquid (~> 3.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (~> 1.7) + safe_yaml (~> 1.0) + jekyll-avatar (0.4.2) + jekyll (~> 3.0) + jekyll-coffeescript (1.0.1) + coffee-script (~> 2.2) + jekyll-default-layout (0.1.4) + jekyll (~> 3.0) + jekyll-feed (0.8.0) + jekyll (~> 3.3) + jekyll-gist (1.4.0) + octokit (~> 4.2) + jekyll-github-metadata (2.3.0) + jekyll (~> 3.1) + octokit (~> 4.0, != 4.4.0) + jekyll-mentions (1.2.0) + activesupport (~> 4.0) + html-pipeline (~> 2.3) + jekyll (~> 3.0) + jekyll-optional-front-matter (0.1.2) + jekyll (~> 3.0) + jekyll-paginate (1.1.0) + jekyll-readme-index (0.0.3) + jekyll (~> 3.0) + jekyll-redirect-from (0.11.0) + jekyll (>= 2.0) + jekyll-relative-links (0.2.1) + jekyll (~> 3.3) + jekyll-sass-converter (1.3.0) + sass (~> 3.2) + jekyll-seo-tag (2.1.0) + jekyll (~> 3.3) + jekyll-sitemap (0.12.0) + jekyll (~> 3.3) + jekyll-swiss (0.4.0) + jekyll-theme-architect (0.0.3) + jekyll (~> 3.3) + jekyll-theme-cayman (0.0.3) + jekyll (~> 3.3) + jekyll-theme-dinky (0.0.3) + jekyll (~> 3.3) + jekyll-theme-hacker (0.0.3) + jekyll (~> 3.3) + jekyll-theme-leap-day (0.0.3) + jekyll (~> 3.3) + jekyll-theme-merlot (0.0.3) + jekyll (~> 3.3) + jekyll-theme-midnight (0.0.3) + jekyll (~> 3.3) + jekyll-theme-minimal (0.0.3) + jekyll (~> 3.3) + jekyll-theme-modernist (0.0.3) + jekyll (~> 3.3) + jekyll-theme-primer (0.1.5) + jekyll (~> 3.3) + jekyll-theme-slate (0.0.3) + jekyll (~> 3.3) + jekyll-theme-tactile (0.0.3) + jekyll (~> 3.3) + jekyll-theme-time-machine (0.0.3) + jekyll (~> 3.3) + jekyll-titles-from-headings (0.1.3) + jekyll (~> 3.3) + jekyll-watch (1.5.0) + listen (~> 3.0, < 3.1) + jemoji (0.7.0) + activesupport (~> 4.0) + gemoji (~> 2.0) + html-pipeline (~> 2.2) + jekyll (>= 3.0) + json (1.8.6) + kramdown (1.11.1) + liquid (3.0.6) + listen (3.0.6) + rb-fsevent (>= 0.9.3) + rb-inotify (>= 0.9.7) + mercenary (0.3.6) + mini_portile (0.6.2) + minima (2.0.0) + minitest (5.10.1) + multipart-post (2.0.0) + net-dns (0.8.0) + nokogiri (1.6.6.4) + mini_portile (~> 0.6.0) + nokogiri (1.6.6.4-x64-mingw32) + mini_portile (~> 0.6.0) + octokit (4.6.2) + sawyer (~> 0.8.0, >= 0.5.3) + pathutil (0.14.0) + forwardable-extended (~> 2.6) + public_suffix (2.0.5) + rb-fsevent (0.9.8) + rb-inotify (0.9.8) + ffi (>= 0.5.0) + rouge (1.11.1) + safe_yaml (1.0.4) + sass (3.4.23) + sawyer (0.8.1) + addressable (>= 2.3.5, < 2.6) + faraday (~> 0.8, < 1.0) + terminal-table (1.7.3) + unicode-display_width (~> 1.1.1) + thread_safe (0.3.6) + typhoeus (0.8.0) + ethon (>= 0.8.0) + tzinfo (1.2.2) + thread_safe (~> 0.1) + unicode-display_width (1.1.3) + +PLATFORMS + ruby + x64-mingw32 + +DEPENDENCIES + github-pages + +BUNDLED WITH + 1.14.6 diff --git a/demo/_config.yml b/demo/_config.yml new file mode 100644 index 0000000..8103851 --- /dev/null +++ b/demo/_config.yml @@ -0,0 +1,22 @@ +# Site settings +title: ng-recaptcha +description: "Angular component for Google reCAPTCHA" +baseurl: "/ng-recaptcha" # the subpath of your site, e.g. /blog +cacheBusterVer: "2.0.2" +exclude: [ + 'Gemfile', + 'Gemfile.lock', + 'examples/node_modules', + 'examples/package.json', + 'examples/tsconfig.json', + 'examples/tslint.json', + 'examples/ng-lint.json', +] + +# SystemJS mapping for ng2-recaptcha component +recaptchaMapping: "https://npmcdn.com/ng-recaptcha@2.0.2" # stick to a particular version to avoid caching confusion +# Uncomment to debug (you must run `cd examples && npm run latest` in order for that to work) +#recaptchaMapping: "./examples/node_modules/ng-recaptcha" + +# Build settings +markdown: kramdown diff --git a/demo/_layouts/example.html b/demo/_layouts/example.html new file mode 100644 index 0000000..b0c151a --- /dev/null +++ b/demo/_layouts/example.html @@ -0,0 +1,91 @@ + + + + + {{ page.title }} | ng-recaptcha + + + + + + + + + + + + + + + + {{ page.headextras }} + + + +
+
+
+ + {{ site.title }} +  – {{ site.description }} +
+ +
+
+ Basic + Forms + Invisible + Language + Preloaded +   +
+
+
+
+
+ + {{ content }} + +
+ +
+ +
+
+ {{page.feature}}.component.html + {{page.feature}}.component.ts + main.ts + {% if page.addlCodeTitle1 %}{{ page.addlCodeTitle1 }}{% endif %} +
+ +
+ {% capture html_content %}{% include_relative examples/app/{{page.feature}}.component.html %}{% endcapture %} + 
{{ html_content | escape }}
+
+
+ 
{% include_relative examples/app/{{page.feature}}.component.ts %}
+
+
+ 
{% include_relative examples/app/{{page.feature}}.main.ts %}
+
+ {% if page.addlCodeContent1 %} +
+ 
{% if page.addlCodeType1 == 'html' %}{{ page.addlCodeContent1 | escape }}{% else %}{{ page.addlCodeContent1 }}{% endif %}
+
+ {% endif %} +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/demo/css/main.scss b/demo/css/main.scss new file mode 100644 index 0000000..3e2c212 --- /dev/null +++ b/demo/css/main.scss @@ -0,0 +1,85 @@ +--- +# Only the main Sass file needs front matter (the dashes are enough) +--- +@charset "utf-8"; + +$example-border-color: rgb(63,81,181); + +.example-container { + min-height: 100px; + margin: 20px 0 40px; + padding: 20px; + border-radius: 20px; + border: 5px dashed $example-border-color; + + .is-small-screen & { + padding: 10px; + border-radius: 5px; + border-width: 2px; + } +} + +.button-dropdown.mdl-button { + height: auto; + text-transform: none; +} + +.mdl-menu__item.menu-link-item a { + color: inherit; + text-decoration: none; +} + +pre.prettyprint { + overflow: auto; +} + +.mdl-tabs__tab code { + text-transform: none; +} + + +.mdl-tabs .mdl-tabs__tab-bar { + justify-content: flex-start; +} + +.code-samples { + &.mdl-tabs .mdl-tabs__tab-bar { + padding: 8px; + flex-wrap: wrap; + height: auto; + background: rgb(63,81,181); + + .mdl-tabs__tab { + height: 30px; + line-height: 30px; + padding: 0 5px; + margin: 2px 5px; + + // button-like styles + background: rgb(68,138,255); + color: rgb(255,255,255); + + &.is-active { + background: #fff; + + &:after { + height: 0; + } + } + } + } +} + +.is-small-screen { + .mdl-layout__tab-bar-button { + width: 30px; + } + + .mdl-layout__tab-bar { + padding: 0 30px; + } + + .mdl-layout__header-row { + padding-left: 16px; + } +} \ No newline at end of file diff --git a/demo/example-forms.md b/demo/example-forms.md new file mode 100644 index 0000000..36ea0c8 --- /dev/null +++ b/demo/example-forms.md @@ -0,0 +1,13 @@ +--- +layout: example +title: Forms Example +permalink: /forms +feature: forms-demo +backlink: example-forms +includeForms: true +headextras: | + + +--- diff --git a/demo/example-invisible.md b/demo/example-invisible.md new file mode 100644 index 0000000..ce8730a --- /dev/null +++ b/demo/example-invisible.md @@ -0,0 +1,11 @@ +--- +layout: example +title: Invisible reCAPTCHA API Example +permalink: /invisible +feature: invisible-demo +backlink: example-invisible +headextras: | + +--- diff --git a/demo/example-language.md b/demo/example-language.md new file mode 100644 index 0000000..c7694ac --- /dev/null +++ b/demo/example-language.md @@ -0,0 +1,11 @@ +--- +layout: example +title: Language Example +permalink: /language +feature: language-demo +backlink: example-language +headextras: | + +--- diff --git a/demo/example-preload-api.md b/demo/example-preload-api.md new file mode 100644 index 0000000..3b02484 --- /dev/null +++ b/demo/example-preload-api.md @@ -0,0 +1,29 @@ +--- +layout: example +title: Preloaded reCAPTCHA API Example +permalink: /preload-api +feature: preload-api-demo +backlink: example-preload-api +addlCodeTitle1: index.html +addlCodeType1: html +addlCodeContent1: | + + + + +headextras: | + + +--- diff --git a/demo/examples/app/basic-demo.component.html b/demo/examples/app/basic-demo.component.html new file mode 100644 index 0000000..f01a420 --- /dev/null +++ b/demo/examples/app/basic-demo.component.html @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/demo/examples/app/basic-demo.component.ts b/demo/examples/app/basic-demo.component.ts new file mode 100644 index 0000000..373775f --- /dev/null +++ b/demo/examples/app/basic-demo.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'recaptcha-demo', + templateUrl: './examples/app/basic-demo.component.html', +}) +export class BasicDemoComponent { + public resolved(captchaResponse: string) { + console.log(`Resolved captcha with response ${captchaResponse}:`); + } +} diff --git a/demo/examples/app/basic-demo.main.ts b/demo/examples/app/basic-demo.main.ts new file mode 100644 index 0000000..e9c9474 --- /dev/null +++ b/demo/examples/app/basic-demo.main.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { RecaptchaModule } from 'ng-recaptcha'; + +import { BasicDemoComponent } from './basic-demo.component'; + +@NgModule({ + bootstrap: [BasicDemoComponent], + declarations: [BasicDemoComponent], + imports: [BrowserModule, RecaptchaModule.forRoot()], +}) +export class DemoModule { } + +platformBrowserDynamic().bootstrapModule(DemoModule); diff --git a/demo/examples/app/forms-demo.component.html b/demo/examples/app/forms-demo.component.html new file mode 100644 index 0000000..0d0adce --- /dev/null +++ b/demo/examples/app/forms-demo.component.html @@ -0,0 +1,14 @@ +
+ +
Captcha must be solved
+
Captcha is valid
+
The form must be filled out
+
The form is valid
+ +
\ No newline at end of file diff --git a/demo/examples/app/forms-demo.component.ts b/demo/examples/app/forms-demo.component.ts new file mode 100644 index 0000000..335f145 --- /dev/null +++ b/demo/examples/app/forms-demo.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; + +export interface FormModel { + captcha?: string; +} + +@Component({ + selector: 'recaptcha-demo', + styles: [` + .error { color: crimson; } + .success { color: green; } + ` ], + templateUrl: './examples/app/forms-demo.component.html', +}) +export class FormsDemoComponent { + public formModel: FormModel = {}; +} diff --git a/demo/examples/app/forms-demo.main.ts b/demo/examples/app/forms-demo.main.ts new file mode 100644 index 0000000..d8640a3 --- /dev/null +++ b/demo/examples/app/forms-demo.main.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { RecaptchaModule } from 'ng-recaptcha'; +import { RecaptchaFormsModule } from 'ng-recaptcha/forms'; + +import { FormsDemoComponent } from './forms-demo.component'; + +@NgModule({ + bootstrap: [FormsDemoComponent], + declarations: [FormsDemoComponent], + imports: [ + RecaptchaModule.forRoot(), + RecaptchaFormsModule, + BrowserModule, + FormsModule, + ], +}) +export class DemoModule { } + +platformBrowserDynamic().bootstrapModule(DemoModule); diff --git a/demo/examples/app/invisible-demo.component.html b/demo/examples/app/invisible-demo.component.html new file mode 100644 index 0000000..a47c753 --- /dev/null +++ b/demo/examples/app/invisible-demo.component.html @@ -0,0 +1,10 @@ + + + +
reCAPTCHA response log:
+{{ captchaResponse || '(empty)' }}
diff --git a/demo/examples/app/invisible-demo.component.ts b/demo/examples/app/invisible-demo.component.ts new file mode 100644 index 0000000..a14a633 --- /dev/null +++ b/demo/examples/app/invisible-demo.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'recaptcha-demo', + templateUrl: './examples/app/invisible-demo.component.html', +}) +export class InvisibleDemoComponent { + public captchaResponse: string = ''; + public resolved(captchaResponse: string) { + const newResponse = captchaResponse + ? `${captchaResponse.substr(0, 7)}...${captchaResponse.substr(-7)}` + : captchaResponse; + this.captchaResponse += `${JSON.stringify(newResponse)}\n`; + } +} diff --git a/demo/examples/app/invisible-demo.main.ts b/demo/examples/app/invisible-demo.main.ts new file mode 100644 index 0000000..f4702d3 --- /dev/null +++ b/demo/examples/app/invisible-demo.main.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { RecaptchaModule } from 'ng-recaptcha'; + +import { InvisibleDemoComponent } from './invisible-demo.component'; + +@NgModule({ + bootstrap: [InvisibleDemoComponent], + declarations: [InvisibleDemoComponent], + imports: [BrowserModule, RecaptchaModule.forRoot()], +}) +export class DemoModule { } + +platformBrowserDynamic().bootstrapModule(DemoModule); diff --git a/demo/examples/app/language-demo.component.html b/demo/examples/app/language-demo.component.html new file mode 100644 index 0000000..f01a420 --- /dev/null +++ b/demo/examples/app/language-demo.component.html @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/demo/examples/app/language-demo.component.ts b/demo/examples/app/language-demo.component.ts new file mode 100644 index 0000000..0c3b992 --- /dev/null +++ b/demo/examples/app/language-demo.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'recaptcha-demo', + templateUrl: './examples/app/language-demo.component.html', +}) +export class LanguageDemoComponent { + public resolved(captchaResponse: string) { + console.log(`Resolved captcha with response ${captchaResponse}:`); + } +} diff --git a/demo/examples/app/language-demo.main.ts b/demo/examples/app/language-demo.main.ts new file mode 100644 index 0000000..2453239 --- /dev/null +++ b/demo/examples/app/language-demo.main.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { + RECAPTCHA_LANGUAGE, + RecaptchaLoaderService, + RecaptchaModule, +} from 'ng-recaptcha'; + +import { LanguageDemoComponent } from './language-demo.component'; + +@NgModule({ + bootstrap: [LanguageDemoComponent], + declarations: [LanguageDemoComponent], + imports: [BrowserModule, RecaptchaModule.forRoot()], + providers: [ + { + provide: RECAPTCHA_LANGUAGE, + useValue: 'fr', + }, + ], +}) +export class DemoModule { } + +platformBrowserDynamic().bootstrapModule(DemoModule); diff --git a/demo/examples/app/preload-api-demo.component.html b/demo/examples/app/preload-api-demo.component.html new file mode 100644 index 0000000..f01a420 --- /dev/null +++ b/demo/examples/app/preload-api-demo.component.html @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/demo/examples/app/preload-api-demo.component.ts b/demo/examples/app/preload-api-demo.component.ts new file mode 100644 index 0000000..5b7126f --- /dev/null +++ b/demo/examples/app/preload-api-demo.component.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'recaptcha-demo', + templateUrl: './examples/app/preload-api-demo.component.html', +}) +export class PreloadApiDemoComponent { + public resolved(captchaResponse: string) { + console.log(`Resolved captcha with response ${captchaResponse}:`); + } +} diff --git a/demo/examples/app/preload-api-demo.main.ts b/demo/examples/app/preload-api-demo.main.ts new file mode 100644 index 0000000..8b335b0 --- /dev/null +++ b/demo/examples/app/preload-api-demo.main.ts @@ -0,0 +1,35 @@ +import { Injectable, NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { Observable } from 'rxjs/Observable'; + +import { RecaptchaLoaderService, RecaptchaModule } from 'ng-recaptcha'; + +import { PreloadApiDemoComponent } from './preload-api-demo.component'; + +@Injectable() +export class PreloadedRecaptchaAPIService { + public ready: Observable; + + constructor() { + const readySubject = new BehaviorSubject(grecaptcha); + this.ready = readySubject.asObservable(); + } +} + +@NgModule({ + bootstrap: [PreloadApiDemoComponent], + declarations: [PreloadApiDemoComponent], + imports: [BrowserModule, RecaptchaModule.forRoot()], + providers: [ + { + provide: RecaptchaLoaderService, + useValue: new PreloadedRecaptchaAPIService(), + }, + ], +}) +export class DemoModule { } + +platformBrowserDynamic().bootstrapModule(DemoModule); diff --git a/demo/examples/ng-lint.json b/demo/examples/ng-lint.json new file mode 100644 index 0000000..be92f8c --- /dev/null +++ b/demo/examples/ng-lint.json @@ -0,0 +1,25 @@ +{ + "rulesDirectory": [ + "node_modules/codelyzer" + ], + "rules": { + "directive-selector": [true, "attribute", ["recaptcha"], "camelCase"], + "component-selector": [true, "element", ["recaptcha"], "kebab-case"], + + "use-input-property-decorator": true, + "use-output-property-decorator": true, + "use-host-property-decorator": true, + "no-attribute-parameter-decorator": true, + "no-input-rename": true, + "no-output-rename": true, + "no-forward-ref": true, + "use-life-cycle-interface": true, + "use-pipe-transform-interface": true, + + "component-class-suffix": [true, "Component"], + "directive-class-suffix": [true, "Directive"], + "templates-use-public": true, + "no-access-missing-member": true, + "invoke-injectable": true + } +} diff --git a/demo/examples/package.json b/demo/examples/package.json new file mode 100644 index 0000000..78ac230 --- /dev/null +++ b/demo/examples/package.json @@ -0,0 +1,19 @@ +{ + "name": "ng-recaptcha-demo", + "version": "0.0.0", + "private": true, + "scripts": { + "preinstall": "npm uninstall ng-recaptcha" + }, + "dependencies": { + "@angular/common": "^4.0.0", + "@angular/compiler": "^4.0.0", + "@angular/core": "^4.0.0", + "@angular/forms": "^4.0.0", + "@angular/platform-browser": "^4.0.0", + "@angular/platform-browser-dynamic": "^4.0.0", + "ng-recaptcha": "../../", + "rxjs": "^5.2.0", + "zone.js": "^0.8.5" + } +} diff --git a/demo/examples/tsconfig.json b/demo/examples/tsconfig.json new file mode 100644 index 0000000..1292701 --- /dev/null +++ b/demo/examples/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "declaration": true, + "removeComments": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "noFallthroughCasesInSwitch": true, + "noImplicitAny": true, + "noImplicitReturns": true, + "noLib": false, + "stripInternal": true + }, + "exclude": [ + "node_modules" + ] +} diff --git a/demo/examples/tslint.json b/demo/examples/tslint.json new file mode 100644 index 0000000..331f320 --- /dev/null +++ b/demo/examples/tslint.json @@ -0,0 +1,45 @@ +{ + "extends": [ + "tslint:latest", + "./ng-lint.json" + ], + "rules": { + "interface-name": [ + true, + "never-prefix" + ], + "no-any": true, + "no-default-export": true, + "no-invalid-this": true, + "no-require-imports": true, + "no-switch-case-fall-through": true, + "no-use-before-declare": true, + "object-literal-key-quotes": [ + true, + "as-needed" + ], + "ordered-imports": [ + true + ], + "quotemark": [ + true, + "single" + ], + "variable-name": [ + true, + "ban-keywords", + "check-format", + "allow-leading-underscore" + ], + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-module", + "check-operator", + "check-separator", + "check-type", + "check-typecast" + ] + } +} diff --git a/demo/images/angular.svg b/demo/images/angular.svg new file mode 100644 index 0000000..96301ef --- /dev/null +++ b/demo/images/angular.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/demo/index.md b/demo/index.md new file mode 100644 index 0000000..644e3d0 --- /dev/null +++ b/demo/index.md @@ -0,0 +1,12 @@ +--- +layout: example +title: Basic Example +permalink: / +feature: basic-demo +backlink: example-basic +headextras: | + + +--- diff --git a/package.json b/package.json index 1995f64..40c5e19 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,12 @@ "version": "2.0.2", "description": "Angular component for Google reCAPTCHA", "scripts": { + "demo": "cd demo && bundle exec jekyll serve", + "demo:build": "cd demo && bundle exec jekyll build", + "demo:install": "npm run transpile && cd demo/examples && npm install && cd ../.. && npm run clean", + "demo:publish": "npm run demo:build && gh-pages -d demo/_site/", "transpile": "ngc -p ./tsconfig.json", - "clean": "del-cli '{recaptcha/,index,forms}*.{js,d.ts,js.map,metadata.json}' factories", + "clean": "del-cli './{recaptcha/,index,forms}*.{js,d.ts,js.map,metadata.json}' factories", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", "lint:prod": "tslint --project ./tsconfig.json --type-check", "lint": "npm run lint:prod -- --force", @@ -45,6 +49,7 @@ "codelyzer": "^3.0.0-beta.4", "conventional-changelog-cli": "^1.3.1", "del-cli": "^0.2.1", + "gh-pages": "^0.12.0", "husky": "^0.13.3", "rxjs": "^5.2.0", "tslint": "^4.5.1", diff --git a/tsconfig.json b/tsconfig.json index 4e0e492..9a5132c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,8 @@ "stripInternal": true }, "exclude": [ - "node_modules" + "node_modules", + "demo" ], "angularCompilerOptions": { "genDir": "factories"