initial commit

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.exclude": {
+    "amplify/.config": true,
+    "amplify/**/*-parameters.json": true,
+    "amplify/**/amplify.state": true,
+    "amplify/**/transform.conf.json": true,
+    "amplify/#current-cloud-backend": true,
+    "amplify/backend/amplify-meta.json": true,
+    "amplify/backend/awscloudformation": true
+  }
+}

amplify/README.md

@@ -0,0 +1,8 @@
+# Getting Started with Amplify CLI
+This directory was generated by [Amplify CLI](https://docs.amplify.aws/cli).
+
+Helpful resources:
+- Amplify documentation: https://docs.amplify.aws
+- Amplify CLI documentation: https://docs.amplify.aws/cli
+- More details on this folder & generated files: https://docs.amplify.aws/cli/reference/files
+- Join Amplify's community: https://amplify.aws/community/

amplify/hooks/README.md

@@ -0,0 +1,7 @@
+# Command Hooks
+
+Command hooks can be used to run custom scripts upon Amplify CLI lifecycle events like pre-push, post-add-function, etc.
+
+To get started, add your script files based on the expected naming convention in this directory.
+
+Learn more about the script file naming convention, hook parameters, third party dependencies, and advanced configurations at https://docs.amplify.aws/cli/usage/command-hooks

amplify/hooks/post-push.sh.sample

@@ -0,0 +1,24 @@
+# This is a sample hook script created by Amplify CLI.
+# To start using this post-push hook please change the filename:
+# post-push.sh.sample  ->  post-push.sh
+#
+# learn more: https://docs.amplify.aws/cli/usage/command-hooks
+
+if [ -z "$(which jq)" ]; then
+    echo "Please install jq to run the sample script."
+    exit 0
+fi
+
+parameters=`cat`
+error=$(jq -r '.error // empty' <<< "$parameters")
+data=$(jq -r '.data' <<< "$parameters")
+
+# 
+# Write code here:
+#
+if [ ! -z "$error" ]; then
+    echo "Amplify CLI emitted an error:" $(jq -r '.message' <<< "$error")
+    exit 0
+fi
+echo "project root path:" $(pwd);
+echo "Amplify CLI command:" $(jq -r '.amplify | .command' <<< "$data")

amplify/hooks/pre-push.js.sample

@@ -0,0 +1,27 @@
+/**
+ * This is a sample hook script created by Amplify CLI.
+ * To start using this pre-push hook please change the filename:
+ * pre-push.js.sample  ->  pre-push.js
+ *
+ * learn more: https://docs.amplify.aws/cli/usage/command-hooks
+ */
+
+/**
+ * @param data { { amplify: { environment: string, command: string, subCommand: string, argv: string[] } } }
+ * @param error { { message: string, stack: string } }
+ */
+const hookHandler = async (data, error) => {
+  // TODO write your hook handler here
+};
+
+const getParameters = async () => {
+  const fs = require("fs");
+  return JSON.parse(fs.readFileSync(0, { encoding: "utf8" }));
+};
+
+getParameters()
+  .then((event) => hookHandler(event.data, event.error))
+  .catch((err) => {
+    console.error(err);
+    process.exitCode = 1;
+  });

src/Authenticator.js

@@ -32,18 +32,18 @@ class Authenticator extends React.Component {
                 <p
                   onClick={() => this.switchState('showSignUp')}
                   {...css(styles.toggle)}
-                >Need an account? Sign Up</p>
+                >新規登録</p>
                 <p
                   onClick={() => this.switchState('showForgotPassword')}
                   {...css(styles.toggle)}
-                >Forgot your password?</p>
+                >パスワードをお忘れですか？</p>
               </div>
                 ) : (
               <div {...css(styles.linkContainer)}>
                 <p
                   {...css(styles.toggle)}
                   onClick={() => this.switchState('showSignIn')}
-                >Already have an account? Sign In</p>
+                >すでにアカウントをお持ちの方はこちら</p>
               </div>
             )
           }

src/Container.js

@@ -11,7 +11,6 @@ function Container({ children }) {
 
 const styles = {
   container: {
-    width: 900,
     margin: '0 auto',
     '& h1': {
       textAlign: 'left'

src/ForgotPassword.js

@@ -39,15 +39,14 @@ class ForgotPassword extends React.Component {
         {
           !this.state.showConfirmation && (
             <div {...css(styles.formContainer)}>
-              <h2 {...css(styles.signInHeader)}>Forgot Password?</h2>
               <input
                 onChange={evt => this.onChange('username', evt.target.value)}
                 {...css(styles.input)}
-                placeholder='username'
+                placeholder='メールアドレス又は電話番号'
 
               />
               <div {...css(styles.button)} onClick={this.forgotPassword}>
-                <p {...css(styles.buttonText)}>Get Authentication Code</p>
+                <p {...css(styles.buttonText)}>認証コードを送る</p>
               </div>
             </div>
           )
@@ -58,16 +57,16 @@ class ForgotPassword extends React.Component {
               <input
                 onChange={evt => this.onChange('confirmationCode', evt.target.value)}
                 {...css(styles.input)}
-                placeholder='Confirmation Code'
+                placeholder='認証コード'
               />
               <input
                 onChange={evt => this.onChange('password', evt.target.value)}
                 {...css(styles.input)}
                 type='password'
-                placeholder='New Password'
+                placeholder='新しいパスワード'
               />
               <div {...css(styles.button)} onClick={this.forgotPasswordSubmit}>
-                <p {...css(styles.buttonText)}>Reset Password</p>
+                <p {...css(styles.buttonText)}>パスワードの再設定</p>
               </div>
             </div>
           )

src/Header.js

@@ -10,31 +10,27 @@ class Header extends React.Component {
     const isLoaded = this.context.isLoaded
     return (
       <div {...css(styles.container)}>
-        <img
-          style={styles.amplifyLogo}
-          src={require('./assets/amplifywhite.png')}
-        />
-        <Link to='/' {...css(styles.link)}>
-          <h2 {...css(styles.title)}>AWS Amplify Auth Starter</h2>
-        </Link>
         <div {...css(styles.navContainer)}>
-          <Link to='/' {...css(styles.link)}>
-            <p {...css(styles.navItem)}>Home</p>
-          </Link>
-          <Link to='/private' {...css(styles.link)}>
-            <p {...css(styles.navItem)}>Private</p>
-          </Link>
           {
             isLoaded ? isAuthenticated ? (
-              <Link to='/profile' {...css(styles.link)}>
-                <p {...css(styles.navItem)}>Profile</p>
-              </Link>
+              <>
+                <Link to='/profile' {...css(styles.link)}>
+                  <p {...css(styles.navItem)}>検索</p>
+                </Link>
+                <Link to='/' {...css(styles.link)}>
+                  <p {...css(styles.navItem)}>掲示板</p>
+                </Link>
+                <Link to='/private' {...css(styles.link)}>
+                  <p {...css(styles.navItem)}>メール</p>
+                </Link>
+              </>
             ) : (
               <Link to='/auth' {...css(styles.link)}>
-                <p {...css(styles.navItem)}>Sign In</p>
+                <p {...css(styles.navItem)}>ログイン</p>
               </Link>
             ) : null
           }
+
         </div>
       </div>
     )
@@ -56,7 +52,7 @@ const styles = {
   navContainer: {
     display: 'flex',
     flex: 1,
-    paddingLeft: 50,
+    paddingLeft: 10,
     marginTop: 6
   },
   link: {
@@ -72,7 +68,7 @@ const styles = {
     }
   },
   container: {
-    height: '80px',
+    height: '50px',
     alignItems: 'center',
     width: '100%',
     backgroundColor: '#FF9900',

src/Private.js

@@ -1,15 +1,120 @@
 import React from 'react'
-
+import { css } from 'glamor'
 import Container from './Container'
+import UserContext from './UserContext'
 
 class Private extends React.Component {
+  state = {
+    message: '',
+    receiverID: ''
+  }
+
+  static contextType = UserContext
+
+  sendMsg = () => {
+    // var docClient = new AWS.DynamoDB.DocumentClient();
+    // var params = {
+    //     TableName: Chatting001,
+    //     Item:{
+    //          identityId: identityId, // ★prime partition key
+    //          email: _self.state.email,
+    //          username: _self.state.username,
+    //          filename: filepath,
+    //          thumbnail: thumbnail,
+    //          type: fileType,
+    //          title: title,
+    //          story: story,
+    //          imageOverwrite: _self.state.imageOverwrite,
+    //          mapUse: _self.state.mapUse,
+    //          position: _self.state.position,
+    //          uploadTime: uploadTime, // ★prime & secondary sort key
+    //          uploadDate: uploadDate,
+    //          partitionYear: partitionYear, //★secondary partition key
+    //          refCounter: 0
+    //     }
+    // };
+    // docClient.put(params, function(err, data) {
+    //     if(err) {
+    //         console.log("Err: table put :" +err);
+    //     } else {
+    //         console.log("Success: table put ok");
+    //     }
+    // });
+  }
+
+  onChange = (key, value) => {
+    this.props.updateErrorMessage(null)
+    this.setState({
+      [key]: value
+    })
+  }
+
   render() {
     return (
       <Container>
-        <h1>Private Route</h1>
+        <h1>メッセージ</h1>
+        <output id="testoutput2"></output>
+        <div {...css(styles.container)}>
+        {
+          <div {...css(styles.formContainer)}>
+            <input
+              onChange={evt => this.onChange('message', evt.target.value)}
+              {...css(styles.input)}
+              placeholder='メッセージ'
+            />
+            <div {...css(styles.button)} onClick={this.sendMsg}>
+              <p {...css(styles.buttonText)}>送信</p>
+            </div>
+          </div>
+        }
+      </div>
       </Container>
     )
   }
 }
 
+const styles = {
+  button: {
+    padding: '10px 60px',
+    backgroundColor: '#ffb102',
+    marginTop: 10,
+    marginBottom: 10,
+    cursor: 'pointer',
+    borderRadius: '30px',
+    ':hover': {
+      backgroundColor: '#ffbb22'
+    }
+  },
+  buttonText: {
+    margin: 0,
+    color: 'white'
+  },
+  input: {
+    height: 40,
+    marginBottom: '10px',
+    border: 'none',
+    outline: 'none',
+    borderBottom: '2px solid #ffb102',
+    fontSize: '16px',
+    '::placeholder': {
+      color: 'rgba(0, 0, 0, .3)'
+    }
+  },
+  container: {
+    flex: 1,
+    paddingTop: '15px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  formContainer: {
+    padding: 20,
+    width: 400,
+    display: 'flex',
+    flexDirection: 'column',
+    boxShadow: "0px 0px 2px rgba(0, 0, 0, .2)",
+    borderRadius: 20
+  }
+}
+
 export default Private

src/SignIn.js

@@ -49,35 +49,35 @@ class SignIn extends React.Component {
         {
           !this.state.showConfirmation && (
             <div {...css(styles.formContainer)}>
-              <h2 {...css(styles.signInHeader)}>Sign In</h2>
               <input
                 onChange={evt => this.onChange('username', evt.target.value)}
                 {...css(styles.input)}
-                placeholder='username'
+                placeholder='ユーザー名'
 
               />
               <input
                 type='password'
                 onChange={evt => this.onChange('password', evt.target.value)}
                 {...css(styles.input)}
-                placeholder='password'
+                placeholder='パスワード'
               />
               <div {...css(styles.button)} onClick={this.signIn}>
-                <p {...css(styles.buttonText)}>Sign In</p>
+                <p {...css(styles.buttonText)}>ログイン</p>
               </div>
             </div>
           )
         }
         {
           this.state.showConfirmation && (
             <div {...css(styles.formContainer)}>
+              <h2 {...css(styles.signInHeader)}>Sign In</h2>
               <input
                 onChange={evt => this.onChange('authCode', evt.target.value)}
                 {...css(styles.input)}
-                placeholder='Confirmation Code'
+                placeholder='認証コード'
               />
               <div {...css(styles.button)} onClick={this.confirmSignIn.bind(this)}>
-                <p {...css(styles.buttonText)}>Confirm Sign In</p>
+                <p {...css(styles.buttonText)}>ログイン</p>
               </div>
             </div>
           )