Master2

amplify-backup/auth/resource.ts

@@ -0,0 +1,11 @@
+import { defineAuth } from "@aws-amplify/backend";
+
+/**
+ * Define and configure your auth resource
+ * @see https://docs.amplify.aws/gen2/build-a-backend/auth
+ */
+export const auth = defineAuth({
+  loginWith: {
+    email: true,
+  },
+});

amplify-backup/backend.ts

@@ -0,0 +1,8 @@
+import { defineBackend } from '@aws-amplify/backend';
+import { auth } from './auth/resource.js';
+import { data } from './data/resource.js';
+
+defineBackend({
+  auth,
+  data,
+});

amplify-backup/data/resource.ts

@@ -0,0 +1,66 @@
+import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
+
+/*== STEP 1 ===============================================================
+The section below creates a Todo database table with a "content" field. Try
+adding a new "isDone" field as a boolean. The authorization rule below
+specifies that any user authenticated via an API key can "create", "read",
+"update", and "delete" any "Todo" records.
+=========================================================================*/
+const schema = a.schema({
+  Todo: a
+    .model({
+      content: a.string(),
+    //  isDone: a.boolean(),
+    }),
+  Profile: a
+    .model({
+      name: a.string(),
+      tel: a.string(),
+      address1: a.string(),
+      address2: a.string(),
+      city: a.string(),
+      country: a.string(),
+    })
+    .authorization((allow) => [allow.owner()]),
+});
+
+export type Schema = ClientSchema<typeof schema>;
+
+export const data = defineData({
+  schema,
+  authorizationModes: {
+    defaultAuthorizationMode: "userPool",
+    apiKeyAuthorizationMode: {
+      expiresInDays: 30,
+    },
+  },
+});
+
+/*== STEP 2 ===============================================================
+Go to your frontend source code. From your client-side code, generate a
+Data client to make CRUDL requests to your table. (THIS SNIPPET WILL ONLY
+WORK IN THE FRONTEND CODE FILE.)
+
+Using JavaScript or Next.js React Server Components, Middleware, Server 
+Actions or Pages Router? Review how to generate Data clients for those use
+cases: https://docs.amplify.aws/gen2/build-a-backend/data/connect-to-API/
+=========================================================================*/
+
+/*
+"use client"
+import { generateClient } from "aws-amplify/data";
+import type { Schema } from "@/amplify/data/resource";
+
+const client = generateClient<Schema>() // use this Data client for CRUDL requests
+*/
+
+/*== STEP 3 ===============================================================
+Fetch records from the database and use them in your frontend component.
+(THIS SNIPPET WILL ONLY WORK IN THE FRONTEND CODE FILE.)
+=========================================================================*/
+
+/* For example, in a React component, you can use this snippet in your
+  function's RETURN statement */
+// const { data: todos } = await client.models.Todo.list()
+
+// return <ul>{todos.map(todo => <li key={todo.id}>{todo.content}</li>)}</ul>

amplify-backup/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

amplify-backup/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "paths": {
+      "$amplify/*": [
+        "../.amplify/generated/*"
+      ]
+    }
+  }
+}

amplify/data/resource.ts

@@ -10,16 +10,28 @@ const schema = a.schema({
   Todo: a
     .model({
       content: a.string(),
+    //  isDone: a.boolean(),
     })
-    .authorization((allow) => [allow.publicApiKey()]),
+    .authorization((allow) => [allow.owner()]),
+  Profile: a
+   .model({
+  name: a.string(),
+  tel: a.string(),
+  address1: a.string(),
+  address2: a.string(),
+  city: a.string(),
+  country: a.string(),
+})
+.authorization((allow) => [allow.owner()]),
+
 });
 
 export type Schema = ClientSchema<typeof schema>;
 
 export const data = defineData({
   schema,
   authorizationModes: {
-    defaultAuthorizationMode: "apiKey",
+    defaultAuthorizationMode: "userPool",
     apiKeyAuthorizationMode: {
       expiresInDays: 30,
     },

app/Startpage.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { generateClient } from "aws-amplify/data";
+import type { Schema } from "@/amplify/data/resource";
+import "./app.css";
+import { Amplify } from "aws-amplify";
+import outputs from "@/amplify_outputs.json";
+import "@aws-amplify/ui-react/styles.css";
+import { Authenticator } from '@aws-amplify/ui-react';
+import React from 'react';
+import { useAuthenticator } from '@aws-amplify/ui-react';
+Amplify.configure(outputs);
+
+const client = generateClient<Schema>();
+
+
+
+
+
+export const Startpage = () => {
+    const { user, signOut } = useAuthenticator();
+
+    const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);
+
+  function listTodos() {
+    client.models.Todo.observeQuery().subscribe({
+      next: (data) => setTodos([...data.items]),
+    });
+  }
+
+  useEffect(() => {
+    listTodos();
+  }, []);
+
+  function createTodo() {
+    client.models.Todo.create({
+      content: window.prompt("Todo content"),
+    });
+  }
+
+  function deleteTodo(id: string) {
+    client.models.Todo.delete({ id })
+  }
+  return (
+
+    <main>
+      <h1>{user?.username}</h1>
+              <h1>{user?.signInDetails?.loginId}'s todos</h1>
+      <h1>My todos</h1>
+            <button onClick={signOut}>Sign out</button>
+      <button onClick={createTodo}>+ new</button>
+      <ul>
+
+        {
+        todos.map((todo) => (
+          <li 
+          onClick={() => deleteTodo(todo.id)}
+          key={todo.id}>{todo.content}</li>
+        ))}
+      </ul>
+      <div>
+        🥳 App successfully hosted. Try creating a new todo.
+        <br />
+        <a href="https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/">
+          Review next steps of this tutorial.
+        </a>
+      </div>
+    </main>
+
+  );
+}

app/app.css

@@ -1,65 +1,3 @@
-body {
-    margin: 0;
-    background: linear-gradient(180deg, rgb(117, 81, 194), rgb(255, 255, 255));
-    display: flex;
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    height: 100vh;
-    width: 100vw;
-    justify-content: center;
-    align-items: center;
-  }
-
-  main {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #1a1a1a;
-    cursor: pointer;
-    transition: border-color 0.25s;
-    color: white;
-  }
-  button:hover {
-    border-color: #646cff;
-  }
-  button:focus,
-  button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-  }
-
-  ul {
-    padding-inline-start: 0;
-    margin-block-start: 0;
-    margin-block-end: 0;
-    list-style-type: none;
-    display: flex;
-    flex-direction: column;
-    margin: 8px 0;
-    border: 1px solid black;
-    gap: 1px;
-    background-color: black;
-    border-radius: 8px;
-    overflow: auto;
-  }
-
-  li {
-    background-color: white;
-    padding: 8px;
-  }
-
-  li:hover {
-    background: #dadbf9;
-  }
-
-  a {
-    font-weight: 800;
-    text-decoration: none;
-  }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;