From 4d13c5f831ac2b9b3e84a3c62ca1efa88f7d3ab2 Mon Sep 17 00:00:00 2001 From: Dustin Noyes Date: Tue, 21 Aug 2018 12:41:26 -0700 Subject: [PATCH 1/2] initial style commit --- .../{ionic.scss => ionic.css} | 54 ++- .../src/aws-amplify-ionic-module.ts | 2 +- .../authenticator.component.core.ts | 2 +- .../authenticator.component.ionic.ts | 78 +++-- .../confirm-sign-in-component.ionic.ts | 27 +- .../confirm-sign-up.component.ionic.ts | 46 ++- .../forgot-password.component.ionic.ts | 64 ++-- .../require-new-password.component.ionic.ts | 112 ++----- .../sign-in.component.ionic.ts | 58 ++-- .../sign-up.component.ionic.ts | 307 +++++++++++++++--- .../chatbot/chatbot.component.ionic.ts | 12 +- .../photo-picker.component.ionic.ts | 26 +- .../s3-album.component.ionic.ts | 21 +- .../s3-image.component.ionic.ts | 12 +- 14 files changed, 521 insertions(+), 300 deletions(-) rename packages/aws-amplify-angular/{ionic.scss => ionic.css} (73%) diff --git a/packages/aws-amplify-angular/ionic.scss b/packages/aws-amplify-angular/ionic.css similarity index 73% rename from packages/aws-amplify-angular/ionic.scss rename to packages/aws-amplify-angular/ionic.css index 05937ae33fe..cdf8542ae0c 100644 --- a/packages/aws-amplify-angular/ionic.scss +++ b/packages/aws-amplify-angular/ionic.css @@ -70,4 +70,56 @@ --ion-color-dark-contrast-rgb: 255,255,255; --ion-color-dark-shade: #1e1e1e; --ion-color-dark-tint: #383838; -} \ No newline at end of file +} + +:host { + --padding-start: 0px; +} + +.amplify-input-label-ionic { + height: 18px; + width: 280.32px; + color: #152939; + font-family: "Amazon Ember"; + font-size: 14px; + letter-spacing: 0.4px; + line-height: 18px; +} + +.amplify-input-ionic { + padding-top: 16px; + padding-bottom: 17px; + padding-right: 8px; + padding-bottom: 8px; +} + +.amplify-authenticator-ionic { + box-shadow: none !important; +} + +.amplify-form-button-ionic { + height: 50px; + width: 289px; +} + +.amplify-form-header-ionic { + width: 275px !important; + font-family: "Amazon Ember"; +} + +.amplify-phone-ionic-selection { + min-width: 100px; +}; + +.amplify-phone-ionic-input { + max-width: 264px; +} + +.amplify-interactions-container-ionic { + width: 430px !important; +} + +.amplify-form-input-interactions-ionic { + width: 100%; + margin: 0.5em 0; +} diff --git a/packages/aws-amplify-angular/src/aws-amplify-ionic-module.ts b/packages/aws-amplify-angular/src/aws-amplify-ionic-module.ts index e45e4591691..44311365e76 100644 --- a/packages/aws-amplify-angular/src/aws-amplify-ionic-module.ts +++ b/packages/aws-amplify-angular/src/aws-amplify-ionic-module.ts @@ -39,7 +39,7 @@ const components = [ entryComponents: [ ...components ], - providers: [ AmplifyService ], + providers: [ AmplifyService], schemas: [CUSTOM_ELEMENTS_SCHEMA], exports: [ ...components diff --git a/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.core.ts b/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.core.ts index 298029e9657..d7037230c53 100644 --- a/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.core.ts +++ b/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.core.ts @@ -49,7 +49,7 @@ const template = ` }) export class AuthenticatorComponentCore { authState: AuthState = { - state: 'loading', + state: 'signIn', user: null }; diff --git a/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.ionic.ts b/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.ionic.ts index 931b26599b9..7574bf5b882 100644 --- a/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.ionic.ts @@ -4,48 +4,44 @@ import { AmplifyService, AuthState } from '../../../providers'; import { AuthenticatorComponentCore } from './authenticator.component.core'; const template = ` -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+
+ + + + + + + + + + + + + +
-` +`; @Component({ selector: 'amplify-authenticator-ionic', diff --git a/packages/aws-amplify-angular/src/components/authenticator/confirm-sign-in-component/confirm-sign-in-component.ionic.ts b/packages/aws-amplify-angular/src/components/authenticator/confirm-sign-in-component/confirm-sign-in-component.ionic.ts index f1e1d8534d8..ce0fb680195 100644 --- a/packages/aws-amplify-angular/src/components/authenticator/confirm-sign-in-component/confirm-sign-in-component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/authenticator/confirm-sign-in-component/confirm-sign-in-component.ionic.ts @@ -5,30 +5,27 @@ import { ConfirmSignInComponentCore } from './confirm-sign-in-component.core' const template = `
- -
-
- Back to Sign In -
-
- +
Confirm your sign in code
- - Code + + Code * - Confirm +
+
+ Confirm Code +
+
{{ errorMessage }}
diff --git a/packages/aws-amplify-angular/src/components/authenticator/confirm-sign-up-component/confirm-sign-up.component.ionic.ts b/packages/aws-amplify-angular/src/components/authenticator/confirm-sign-up-component/confirm-sign-up.component.ionic.ts index f170b67fa2e..77d8141e7ab 100644 --- a/packages/aws-amplify-angular/src/components/authenticator/confirm-sign-up-component/confirm-sign-up.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/authenticator/confirm-sign-up-component/confirm-sign-up.component.ionic.ts @@ -3,46 +3,44 @@ import { AmplifyService, AuthState } from '../../../providers'; import { ConfirmSignUpComponentCore } from './confirm-sign-up.component.core'; const template = ` -
+
- -
- -
- Back to Sign In -
- -
- +
Confirm your sign up code
- - Username + + Username * - - Code + + Code * - Confirm - Resend - +
+
+ Confirm Code +
+
+ +
+
+ +
-
{{ errorMessage }}
diff --git a/packages/aws-amplify-angular/src/components/authenticator/forgot-password-component/forgot-password.component.ionic.ts b/packages/aws-amplify-angular/src/components/authenticator/forgot-password-component/forgot-password.component.ionic.ts index 5fe703631d0..3eca428e94a 100644 --- a/packages/aws-amplify-angular/src/components/authenticator/forgot-password-component/forgot-password.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/authenticator/forgot-password-component/forgot-password.component.ionic.ts @@ -4,68 +4,62 @@ import { ForgotPasswordComponentCore } from './forgot-password.component.core'; import { includes } from '../common'; const template = ` -
+
-
Sign in to your account
-
You will receive a verification code
-
Enter the code you received and set a new password
+
Reset your password
+
You will receive a verification code to reset your password
- + - - Username + + Username * - - Code + + Code * - - Password + + Password * - -
- Submit - +
+ Submit + Verify + >Verify +
+
+ +
+
+
- - - - Resend Code - - - - Back to Sign in - - -
⚠ diff --git a/packages/aws-amplify-angular/src/components/authenticator/require-new-password-component/require-new-password.component.ionic.ts b/packages/aws-amplify-angular/src/components/authenticator/require-new-password-component/require-new-password.component.ionic.ts index b5c76eabfe8..5daabe1b465 100644 --- a/packages/aws-amplify-angular/src/components/authenticator/require-new-password-component/require-new-password.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/authenticator/require-new-password-component/require-new-password.component.ionic.ts @@ -2,56 +2,50 @@ import { Component, Input } from '@angular/core'; import { AmplifyService, AuthState } from '../../../providers'; import { RequireNewPasswordComponentCore } from './require-new-password.component.core'; -const templatetemp = ` -
+const template = ` +
- -
- -
- Back to Sign In -
- -
- +
Reset your password
- - - Username - - + + Username + + - - Code - - + + Code + + - - Password - - - - + + Password + + + +
Send Code Submit
@@ -61,43 +55,7 @@ const templatetemp = `
-` - -const template = ` -
-
-
-
- Back to Sign In -
-
- - - - Password - - - - -
- Submit -
-
-
-
{{ errorMessage }}
-
- -
-` +`; @Component({ selector: 'amplify-auth-require-new-password-ionic', diff --git a/packages/aws-amplify-angular/src/components/authenticator/sign-in-component/sign-in.component.ionic.ts b/packages/aws-amplify-angular/src/components/authenticator/sign-in-component/sign-in.component.ionic.ts index 8c58056d4c0..841859a5809 100644 --- a/packages/aws-amplify-angular/src/components/authenticator/sign-in-component/sign-in.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/authenticator/sign-in-component/sign-in.component.ionic.ts @@ -3,54 +3,44 @@ import { AmplifyService, AuthState } from '../../../providers'; import { SignInComponentCore } from './sign-in.component.core'; const template = ` -
+
-
Sign in to your account
+
Sign in to your account
- - Username - + Username * + - - - Password + + + Password * - - - - Forgot Password? - Reset your password + > - - - Sign In - -
- -
-
- ⚠ -
{{ errorMessage }}
- × +
+
+ Sign In +
+
+ +
+
+ +
-
` diff --git a/packages/aws-amplify-angular/src/components/authenticator/sign-up-component/sign-up.component.ionic.ts b/packages/aws-amplify-angular/src/components/authenticator/sign-up-component/sign-up.component.ionic.ts index 62bda8bb8b4..18aeaa727ab 100644 --- a/packages/aws-amplify-angular/src/components/authenticator/sign-up-component/sign-up.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/authenticator/sign-up-component/sign-up.component.ionic.ts @@ -3,77 +3,296 @@ import { AmplifyService, AuthState } from '../../../providers'; import { SignUpComponentCore } from './sign-up.component.core'; const template = ` -
+
- -
- -
- Sign In -
- -
- Sign Up -
- -
- - +
Create a new account
- - - Username + + Username * - - Password + + Password * - - Email + + Email * - - Phone Number - + + Phone Number * + + + + + USA (+1) + UK (+44) + Algeria (+213) + Andorra (+376) + Angola (+244) + Anguilla (+1264) + Antigua & Barbuda (+1268) + Argentina (+54) + Armenia (+374) + Aruba (+297) + Australia (+61) + Austria (+43) + Azerbaijan (+994) + Bahamas (+1242) + Bahrain (+973) + Bangladesh (+880) + Barbados (+1246) + Belarus (+375) + Belgium (+32) + Belize (+501) + Benin (+229) + Bermuda (+1441) + Bhutan (+975) + Bolivia (+591) + Bosnia Herzegovina (+387) + Botswana (+267) + Brazil (+55) + Brunei (+673) + Bulgaria (+359) + Burkina Faso (+226) + Burundi (+257) + Cambodia (+855) + Cameroon (+237) + Canada (+1) + Cape Verde Islands (+238) + Cayman Islands (+1345) + Central African Republic (+236) + Chile (+56) + China (+86) + Colombia (+57) + Comoros (+269) + Congo (+242) + Cook Islands (+682) + Costa Rica (+506) + Croatia (+385) + Cuba (+53) + Cyprus North (+90392) + Cyprus South (+357) + Czech Republic (+42) + Denmark (+45) + Djibouti (+253) + Dominica (+1809) + Dominican Republic (+1809) + Ecuador (+593) + Egypt (+20) + El Salvador (+503) + Equatorial Guinea (+240) + Eritrea (+291) + Estonia (+372) + Ethiopia (+251) + Falkland Islands (+500) + Faroe Islands (+298) + Fiji (+679) + Finland (+358) + France (+33) + French Guiana (+594) + French Polynesia (+689) + Gabon (+241) + Gambia (+220) + Georgia (+7880) + Germany (+49) + Ghana (+233) + Gibraltar (+350) + Greece (+30) + Greenland (+299) + Grenada (+1473) + Guadeloupe (+590) + Guam (+671) + Guatemala (+502) + Guinea (+224) + Guinea - Bissau (+245) + Guyana (+592) + Haiti (+509) + Honduras (+504) + Hong Kong (+852) + Hungary (+36) + Iceland (+354) + India (+91) + Indonesia (+62) + Iran (+98) + Iraq (+964) + Ireland (+353) + Israel (+972) + Italy (+39) + Jamaica (+1876) + Japan (+81) + Jordan (+962) + Kazakhstan (+7) + Kenya (+254) + Kiribati (+686) + Korea North (+850) + Korea South (+82) + Kuwait (+965) + Kyrgyzstan (+996) + Laos (+856) + Latvia (+371) + Lebanon (+961) + Lesotho (+266) + Liberia (+231) + Libya (+218) + Liechtenstein (+417) + Lithuania (+370) + Luxembourg (+352) + Macao (+853) + Macedonia (+389) + Madagascar (+261) + Malawi (+265) + Malaysia (+60) + Maldives (+960) + Mali (+223) + Malta (+356) + Marshall Islands (+692) + Martinique (+596) + Mauritania (+222) + Mayotte (+269) + Mexico (+52) + Micronesia (+691) + Moldova (+373) + Monaco (+377) + Mongolia (+976) + Montserrat (+1664) + Morocco (+212) + Mozambique (+258) + Myanmar (+95) + Namibia (+264) + Nauru (+674) + Nepal (+977) + Netherlands (+31) + New Caledonia (+687) + New Zealand (+64) + Nicaragua (+505) + Niger (+227) + Nigeria (+234) + Niue (+683) + Norfolk Islands (+672) + Northern Marianas (+670) + Norway (+47) + Oman (+968) + Palau (+680) + Panama (+507) + Papua New Guinea (+675) + Paraguay (+595) + Peru (+51) + Philippines (+63) + Poland (+48) + Portugal (+351) + Puerto Rico (+1787) + Qatar (+974) + Reunion (+262) + Romania (+40) + Russia (+7) + Rwanda (+250) + San Marino (+378) + Sao Tome & Principe (+239) + Saudi Arabia (+966) + Senegal (+221) + Serbia (+381) + Seychelles (+248) + Sierra Leone (+232) + Singapore (+65) + Slovak Republic (+421) + Slovenia (+386) + Solomon Islands (+677) + Somalia (+252) + South Africa (+27) + Spain (+34) + Sri Lanka (+94) + St. Helena (+290) + St. Kitts (+1869) + St. Lucia (+1758) + Sudan (+249) + Suriname (+597) + Swaziland (+268) + Sweden (+46) + Switzerland (+41) + Syria (+963) + Taiwan (+886) + Tajikstan (+7) + Thailand (+66) + Togo (+228) + Tonga (+676) + Trinidad & Tobago (+1868) + Tunisia (+216) + Turkey (+90) + Turkmenistan (+7) + Turkmenistan (+993) + Turks & Caicos Islands (+1649) + Tuvalu (+688) + Uganda (+256) + Ukraine (+380) + United Arab Emirates (+971) + Uruguay (+598) + USA (+1) + Uzbekistan (+7) + Vanuatu (+678) + Vatican City (+379) + Venezuela (+58) + Vietnam (+84) + Virgin Islands - British (+1284) + Virgin Islands - US (+1340) + Wallis & Futuna (+681) + Yemen (North)(+969) + Yemen (South)(+967) + Zambia (+260) + Zimbabwe (+263) + + + + + + + + -
-
- Confirm a Code +
+
+ Sign Up +
+
+ +
+
+
- Sign Up
{{ errorMessage }}
diff --git a/packages/aws-amplify-angular/src/components/interactions/chatbot/chatbot.component.ionic.ts b/packages/aws-amplify-angular/src/components/interactions/chatbot/chatbot.component.ionic.ts index 18b716c8d87..8ff864a580e 100644 --- a/packages/aws-amplify-angular/src/components/interactions/chatbot/chatbot.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/interactions/chatbot/chatbot.component.ionic.ts @@ -3,7 +3,7 @@ import { ChatbotComponentCore } from './chatbot.component.core' import { AmplifyService } from '../../../providers'; const template = ` -
+
@@ -31,7 +31,7 @@ const template = `
- + {{message.me}} @@ -54,13 +54,13 @@ const template = `
- Send + (ionChange)="onInputChange($event.target.value)"> + Send
diff --git a/packages/aws-amplify-angular/src/components/storage/photo-picker-component/photo-picker.component.ionic.ts b/packages/aws-amplify-angular/src/components/storage/photo-picker-component/photo-picker.component.ionic.ts index 3675f6b48b7..314ff31edd9 100644 --- a/packages/aws-amplify-angular/src/components/storage/photo-picker-component/photo-picker.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/storage/photo-picker-component/photo-picker.component.ionic.ts @@ -1,10 +1,14 @@ -import { Component, Input, ViewEncapsulation, Injector, ElementRef } from '@angular/core'; +import { Component } from '@angular/core'; import { AmplifyService, AuthState } from '../../../providers'; import { PhotoPickerComponentCore } from './photo-picker.component.core'; + const template = ` +
+
Select Photos
+
-
+
+
-
-` +
+
+ ⚠ +
{{ errorMessage }}
+ × +
+
+
+`; @Component({ selector: 'amplify-photo-picker-ionic', diff --git a/packages/aws-amplify-angular/src/components/storage/s3-album-component/s3-album.component.ionic.ts b/packages/aws-amplify-angular/src/components/storage/s3-album-component/s3-album.component.ionic.ts index 189c503b11c..fe68480b2d6 100644 --- a/packages/aws-amplify-angular/src/components/storage/s3-album-component/s3-album.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/storage/s3-album-component/s3-album.component.ionic.ts @@ -2,17 +2,18 @@ import { Component, Input, ViewEncapsulation, Injector, ElementRef } from '@angu import { AmplifyService, AuthState } from '../../../providers'; import { S3AlbumComponentCore } from './s3-album.component.core'; -const template = ` - -
- +const template = ` +
+
+ +
-` +`; diff --git a/packages/aws-amplify-angular/src/components/storage/s3-image-component/s3-image.component.ionic.ts b/packages/aws-amplify-angular/src/components/storage/s3-image-component/s3-image.component.ionic.ts index 142e906eeeb..f8ef7c0e963 100644 --- a/packages/aws-amplify-angular/src/components/storage/s3-image-component/s3-image.component.ionic.ts +++ b/packages/aws-amplify-angular/src/components/storage/s3-image-component/s3-image.component.ionic.ts @@ -3,12 +3,12 @@ import { AmplifyService, AuthState } from '../../../providers'; import { S3ImageComponentCore } from './s3-image.component.core'; const template = ` - -` + +`; @Component({ selector: 'amplify-s3-image-ionic', From 48279c5279edd2cbb0c17312adf719ae14fed0f9 Mon Sep 17 00:00:00 2001 From: Dustin Noyes Date: Tue, 21 Aug 2018 12:47:06 -0700 Subject: [PATCH 2/2] cleaning up --- packages/aws-amplify-angular/ionic.css | 9 --------- .../authenticator/authenticator.component.core.ts | 2 +- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/aws-amplify-angular/ionic.css b/packages/aws-amplify-angular/ionic.css index cdf8542ae0c..f788d1ce7bb 100644 --- a/packages/aws-amplify-angular/ionic.css +++ b/packages/aws-amplify-angular/ionic.css @@ -72,10 +72,6 @@ --ion-color-dark-tint: #383838; } -:host { - --padding-start: 0px; -} - .amplify-input-label-ionic { height: 18px; width: 280.32px; @@ -97,11 +93,6 @@ box-shadow: none !important; } -.amplify-form-button-ionic { - height: 50px; - width: 289px; -} - .amplify-form-header-ionic { width: 275px !important; font-family: "Amazon Ember"; diff --git a/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.core.ts b/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.core.ts index d7037230c53..298029e9657 100644 --- a/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.core.ts +++ b/packages/aws-amplify-angular/src/components/authenticator/authenticator/authenticator.component.core.ts @@ -49,7 +49,7 @@ const template = ` }) export class AuthenticatorComponentCore { authState: AuthState = { - state: 'signIn', + state: 'loading', user: null };