Authenticator "modal" variation (#757)

docs/src/pages/components/authenticator/LabelsAndTextDemo.tsx

@@ -73,11 +73,11 @@ function Screen({ Component }: ScreenProps) {
 export function LabelsAndTextDemo({ Component }: ScreenProps) {
  return (
  <Authenticator.Provider>
- <View data-amplify-authenticator="">
- <View data-authenticator-variation="modal" />
-
+ <View data-amplify-authenticator="" data-variaton="modal">
  <View data-amplify-container="">
- <Screen Component={Component} />
+ <View data-amplify-body>
+ <Screen Component={Component} />
+ </View>
  </View>
  </View>
  </Authenticator.Provider>

docs/src/pages/components/authenticator/index.page.mdx

@@ -264,6 +264,38 @@ For your [configured social providers](https://docs.amplify.aws/lib/auth/social/
  </p>
 </Example>
 
+### `variation`
+
+The Authenticator has multiple variations to meet the needs of your application.
+
+<Tabs>
+ <TabItem title="default">
+ By default, the Authenticator will render as a centered card within the container:
+
+ <Fragment>
+ {({ platform }) => import(`./variation.default.${platform}.mdx`)}
+ </Fragment>
+
+ <Example>
+ <Authenticator />
+ </Example>
+
+ </TabItem>
+
+ <TabItem title="modal">
+ The `modal` variation overlays the entire screen with the Authenticator:
+
+ <Fragment>
+ {({ platform }) => import(`./variation.modal.${platform}.mdx`)}
+ </Fragment>
+
+ <Example>
+ <Authenticator variation="modal" />
+ </Example>
+
+ </TabItem>
+</Tabs>
+
 ## Customization
 
 ### Headers & Footers

docs/src/pages/components/authenticator/quick-start.react.mdx

@@ -1,6 +1,23 @@
-For React, import and wrap your app using the `withAuthenticator`
+import { Tabs, TabItem } from '@aws-amplify/ui-react';
+
+For React, you can use the `Authenticator` component directly, or wrap your app in `withAuthenticator`
 [Higher-Order Component](https://reactjs.org/docs/higher-order-components.html):
 
+<Tabs>
+ <TabItem title="Authenticator">
+
+```js{3-4,11-12} file=../../../../../examples/next/pages/ui/components/authenticator/sign-in-with-username/index.page.tsx
+
+```
+
+ </TabItem>
+ <TabItem title="withAuthenticator">
+
+The `withAuthenticator` automatically sets the [`variation`](#variation) to `modal`.
+
 ```js{3-4,9,18} file=../../../../../examples/next/pages/ui/components/authenticator/withAuthenticator/index.page.tsx
 
 ```
+
+ </TabItem>
+</Tabs>

docs/src/pages/components/authenticator/variation.default.angular.mdx

@@ -0,0 +1,3 @@
+```html{1} file=../../../../../examples/angular/src/pages/ui/components/authenticator/sign-in-with-username/sign-in-with-username.component.html
+
+```

docs/src/pages/components/authenticator/variation.default.react.mdx

@@ -0,0 +1,3 @@
+```tsx{3} file=../../../../../examples/next/pages/ui/components/authenticator/sign-in-with-username/index.page.tsx#L9-
+
+```

docs/src/pages/components/authenticator/variation.default.vue.mdx

@@ -0,0 +1,3 @@
+```html{2} file=../../../../../examples/vue/src/pages/ui/components/authenticator/sign-in-with-username/index.vue#L10-
+
+```

docs/src/pages/components/authenticator/variation.modal.angular.mdx

@@ -0,0 +1,3 @@
+```html{1} file=../../../../../examples/angular/src/pages/ui/components/authenticator/modal/modal.component.html
+
+```

docs/src/pages/components/authenticator/variation.modal.react.mdx

@@ -0,0 +1,3 @@
+```tsx{3} file=../../../../../examples/next/pages/ui/components/authenticator/modal/index.page.tsx#L9-
+
+```

docs/src/pages/components/authenticator/variation.modal.vue.mdx

@@ -0,0 +1,3 @@
+```html{2} file=../../../../../examples/vue/src/pages/ui/components/authenticator/modal/index.vue#L10-
+
+```

docs/src/styles/docs/example.scss

@@ -2,22 +2,11 @@
  width: 100%;
 }
 
-/* Inline the Authenticator instead of full-screen */
-.example [data-amplify-authenticator] {
+.example [data-amplify-authenticator][data-variation='modal'] {
  position: relative;
  width: 100%;
- height: auto;
-
- /* Don't go on top of docs' nav */
- z-index: auto;
-
- /* Allow space for shadows */
- padding: 1rem;
-}
-
-.example [data-amplify-authenticator] [data-authenticator-variation='modal'] {
- /* Hide the modal texture */
- display: none;
+ height: 100%;
+ padding: 5em;
 }
 
 .example pre {
@@ -39,7 +28,7 @@
 .docs-component-demo {
  width: 100%;
  margin-bottom: var(--amplify-space-large);
- 
+
  & .example-copy-button {
  bottom: var(--amplify-space-small);
  top: auto;

examples/angular/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { I18nComponent } from 'src/pages/ui/components/authenticator/i18n/i18n.component';
+import { ModalComponent } from 'src/pages/ui/components/authenticator/modal/modal.component';
 import { ResetPasswordComponent } from 'src/pages/ui/components/authenticator/reset-password/reset-password.component';
 import { SignInFederatedComponent } from 'src/pages/ui/components/authenticator/sign-in-federated/sign-in-federated.component';
 import { SignInSMSMFAComponent } from 'src/pages/ui/components/authenticator/sign-in-sms-mfa/sign-in-sms-mfa.component';
@@ -26,6 +27,10 @@ const routes: Routes = [
  path: 'ui/components/authenticator/custom-slots',
  component: CustomSlotsComponent,
  },
+ {
+ path: 'ui/components/authenticator/modal',
+ component: ModalComponent,
+ },
  {
  path: 'ui/components/authenticator/reset-password',
  component: ResetPasswordComponent,

examples/angular/src/app/app.module.ts

@@ -12,6 +12,7 @@ import { AppComponent } from './app.component';
 import { CustomSignUpFieldsComponent } from 'src/pages/ui/components/authenticator/custom-sign-up-fields/custom-sign-up-fields.component';
 import { CustomSlotsComponent } from 'src/pages/ui/components/authenticator/custom-slots/custom-slots.component';
 import { I18nComponent } from 'src/pages/ui/components/authenticator/i18n/i18n.component';
+import { ModalComponent } from 'src/pages/ui/components/authenticator/modal/modal.component';
 import { ResetPasswordComponent } from 'src/pages/ui/components/authenticator/reset-password/reset-password.component';
 import { SignInFederatedComponent } from 'src/pages/ui/components/authenticator/sign-in-federated/sign-in-federated.component';
 import { SignInSMSMFAComponent } from 'src/pages/ui/components/authenticator/sign-in-sms-mfa/sign-in-sms-mfa.component';
@@ -32,6 +33,7 @@ import { SignUpWithUsernameComponent } from 'src/pages/ui/components/authenticat
  CustomSignUpFieldsComponent,
  CustomSlotsComponent,
  I18nComponent,
+ ModalComponent,
  ResetPasswordComponent,
  SignInFederatedComponent,
  SignInSMSMFAComponent,

examples/angular/src/pages/ui/components/authenticator/modal/modal.component.html

@@ -0,0 +1,10 @@
+<amplify-authenticator variation="modal">
+ <ng-template
+ amplifySlot="authenticated"
+ let-user="user"
+ let-signOut="signOut"
+ >
+ <h2>Welcome, {{ user.username }}!</h2>
+ <button (click)="signOut()">Sign Out</button>
+ </ng-template>
+</amplify-authenticator>

examples/angular/src/pages/ui/components/authenticator/modal/modal.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { Amplify } from 'aws-amplify';
+
+import awsExports from '@environments/auth-with-username-no-attributes/src/aws-exports';
+
+@Component({
+ selector: 'modal',
+ templateUrl: 'modal.component.html',
+})
+export class ModalComponent {
+ constructor() {
+ Amplify.configure(awsExports);
+ }
+}

examples/angular/src/styles.scss

@@ -2,12 +2,3 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
 @import '~@aws-amplify/ui-angular/theme.css';
-
-body {
- justify-content: center;
- background-color: var(--amplify-colors-background-secondary);
-}
-
-h3.amplify-heading {
- font-weight: 600;
-}

examples/next/pages/_document.page.tsx

@@ -19,7 +19,8 @@ class MyDocument extends Document {
  />
  </Head>
  <body>
- <h1>React Example</h1>
+ <title>React Example App</title>
+ <h1>React Example App</h1>
 
  <Main />
  <NextScript />

examples/next/pages/ui/components/authenticator/custom-sign-up-fields/index.page.tsx

@@ -14,44 +14,46 @@ import '@aws-amplify/ui-react/styles.css';
 import awsExports from '@environments/auth-with-email-and-custom-attributes/src/aws-exports';
 Amplify.configure(awsExports);
 
-function App({ signOut }) {
- return <button onClick={signOut}>Sign out</button>;
-}
-
-export default withAuthenticator(App, {
- // Default to Sign Up screen
- initialState: 'signUp',
- components: {
- // Customize `Authenticator.SignUp.FormFields`
- SignUp: {
- FormFields() {
- const { validationErrors } = useAuthenticator();
+export default function App({ signOut }) {
+ return (
+ <Authenticator
+ // Default to Sign Up screen
+ initialState="signUp"
+ components={{
+ // Customize `Authenticator.SignUp.FormFields`
+ SignUp: {
+ FormFields() {
+ const { validationErrors } = useAuthenticator();
 
- return (
- <>
- {/* Re-use default `Authenticator.SignUp.FormFields` */}
- <Authenticator.SignUp.FormFields />
+  return (
+  <>
+  {/* Re-use default `Authenticator.SignUp.FormFields` */}
+  <Authenticator.SignUp.FormFields />
 
- {/* Append & require Terms & Conditions field to sign up */}
- <CheckboxField
- errorMessage={validationErrors.acknowledgement}
- hasError={!!validationErrors.acknowledgement}
- name="acknowledgement"
- value="yes"
- label="I agree with the Terms & Conditions"
- />
- </>
- );
- },
- },
- },
- services: {
- async validateCustomSignUp(formData) {
- if (!formData.acknowledgement) {
- return {
- acknowledgement: 'You must agree to the Terms & Conditions',
- };
- }
- },
- },
-});
+ {/* Append & require Terms & Conditions field to sign up */}
+ <CheckboxField
+ errorMessage={validationErrors.acknowledgement}
+ hasError={!!validationErrors.acknowledgement}
+ name="acknowledgement"
+ value="yes"
+ label="I agree with the Terms & Conditions"
+ />
+ </>
+ );
+ },
+ },
+ }}
+ services={{
+ async validateCustomSignUp(formData) {
+ if (!formData.acknowledgement) {
+ return {
+ acknowledgement: 'You must agree to the Terms & Conditions',
+ };
+ }
+ },
+ }}
+ >
+ {({ signOut }) => <button onClick={signOut}>Sign out</button>}
+ </Authenticator>
+ );
+}

examples/next/pages/ui/components/authenticator/modal/index.page.tsx

@@ -0,0 +1,15 @@
+import { Amplify } from 'aws-amplify';
+
+import { Authenticator } from '@aws-amplify/ui-react';
+import '@aws-amplify/ui-react/styles.css';
+
+import awsExports from '@environments/auth-with-username-no-attributes/src/aws-exports';
+Amplify.configure(awsExports);
+
+export default function App({ signOut }) {
+ return (
+ <Authenticator variation="modal">
+ {({ signOut }) => <button onClick={signOut}>Sign out</button>}
+ </Authenticator>
+ );
+}

examples/next/pages/ui/components/authenticator/sign-in-with-username/index.page.tsx

@@ -1,13 +1,20 @@
 import { Amplify } from 'aws-amplify';
 
-import { withAuthenticator } from '@aws-amplify/ui-react';
+import { Authenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
 
 import awsExports from '@environments/auth-with-username-no-attributes/src/aws-exports';
 Amplify.configure(awsExports);
 
-function App({ signOut }) {
- return <button onClick={signOut}>Sign out</button>;
+export default function App() {
+ return (
+ <Authenticator>
+ {({ signOut, user }) => (
+ <>
+ <h1>Hello {user.username}</h1>
+ <button onClick={signOut}>Sign out</button>
+ </>
+ )}
+ </Authenticator>
+ );
 }
-
-export default withAuthenticator(App);

examples/vue/src/main.ts

@@ -2,7 +2,6 @@ import { Amplify } from 'aws-amplify';
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
-import './styles.scss';
 
 // This only exists to expose `Amplify` & its categories on `window` for e2e testing
 if (typeof window !== 'undefined') {

examples/vue/src/pages/ui/components/authenticator/modal/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import Amplify from 'aws-amplify';
+import { Authenticator } from '@aws-amplify/ui-vue';
+import '@aws-amplify/ui-vue/styles.css';
+import aws_exports from '@environments/auth-with-username/src/aws-exports';
+
+Amplify.configure(aws_exports);
+</script>
+
+<template>
+ <authenticator variation="modal">
+ <template v-slot="{ user, signOut }">
+ <h1>Hello {{ user.username }}!</h1>
+ <button @click="signOut">Sign Out</button>
+ </template>
+ </authenticator>
+</template>