Merge branch 'development' into feature/issue-427-fix-ui-user-setting

Author: NEKOYASAN

nuxt.config.js

@@ -1,5 +1,4 @@
 import i18nConfig from './nuxt-i18n.config.js'
-const colors = require('vuetify/es5/util/colors').default
 const environment = process.env.NODE_ENV || 'development'
 
 export default {
@@ -83,7 +82,10 @@ export default {
   /*
    ** Global CSS
    */
-  css: [],
+  css: [
+    'vuetify/dist/vuetify.min.css',
+    '@mdi/font/css/materialdesignicons.css',
+  ],
   /*
    ** Plugins to load before mounting the App
    */
@@ -92,6 +94,7 @@ export default {
       src: '@/plugins/amplify',
       ssr: false,
     },
+    '@/plugins/vuetify',
   ],
   /*
    ** Nuxt.js dev-modules
@@ -100,7 +103,7 @@ export default {
     // Doc: https://github.com/nuxt-community/stylelint-module
     '@nuxtjs/stylelint-module',
     '@nuxt/typescript-build',
-    '@nuxtjs/vuetify',
+    '@nuxtjs/style-resources',
   ],
   typescript: {
     typeCheck: true,
@@ -129,27 +132,6 @@ export default {
       families: ['Roboto&display=swap', 'NotoSansJP&&display=swap'],
     },
   },
-  /*
-   ** vuetify module configuration
-   ** https://github.com/nuxt-community/vuetify-module
-   */
-  vuetify: {
-    customVariables: ['~/assets/variables.scss'],
-    theme: {
-      dark: false,
-      themes: {
-        dark: {
-          primary: colors.blue.darken2,
-          accent: colors.grey.darken3,
-          secondary: colors.amber.darken3,
-          info: colors.teal.lighten1,
-          warning: colors.amber.base,
-          error: colors.deepOrange.accent4,
-          success: colors.green.accent3,
-        },
-      },
-    },
-  },
   env: {
     APIKEY: process.env.APIKEY,
     AUTHDOMAIN: process.env.AUTHDOMAIN,
@@ -208,4 +190,7 @@ export default {
       }
     },
   },
+  styleResources: {
+    scss: ['~/assets/variables.scss'],
+  },
 }

package.json

@@ -31,6 +31,7 @@
     "@nuxtjs/axios": "^5.12.2",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/pwa": "^3.0.2",
+    "@nuxtjs/style-resources": "^1.0.0",
     "@types/node": "^14.11.2",
     "aws-amplify": "^3.3.3",
     "cookieparser": "^0.1.0",
@@ -46,15 +47,16 @@
     "nuxt-webfontloader": "^1.1.0",
     "uuid": "^8.3.1",
     "vue-property-decorator": "^9.0.2",
+    "vuetify": "^2.3.13",
     "vuex": "^3.5.1",
     "vuex-class-component": "^2.3.5"
   },
   "devDependencies": {
+    "@mdi/font": "^5.6.55",
     "@nuxt/types": "^2.14.6",
     "@nuxt/typescript-build": "^2.0.3",
     "@nuxtjs/eslint-config-typescript": "^3.0.0",
     "@nuxtjs/stylelint-module": "^4.0.0",
-    "@nuxtjs/vuetify": "^1.11.2",
     "@types/jest": "^26.0.14",
     "@vue/test-utils": "^1.1.0",
     "babel-core": "^6.26.3",
@@ -70,9 +72,11 @@
     "husky": "^4.3.0",
     "jest": "^26.4.2",
     "lint-staged": "^10.4.0",
+    "node-sass": "^4.14.1",
     "nodemon": "^2.0.4",
     "prettier": "^2.1.2",
     "rimraf": "^3.0.2",
+    "sass-loader": "^10.0.3",
     "stylelint": "^13.7.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",

src/assets/locales/ja.json

@@ -9,7 +9,8 @@
         "logout": "ログアウト",
         "ok": "OK",
         "save": "保存する",
-        "change": "変更する"
+        "change": "変更する",
+        "verify": "認証する"
       },
       "error": {
         "default": "何らかのエラーが発生しました。時間をおいて再度お試しください。"
@@ -46,7 +47,8 @@
         "password": "パスワード",
         "password_rules": "パスワードは6文字以上で設定してください",
         "password_not_acceptable": "パスワードが条件を満たしていません",
-        "password_not_same": "パスワードが一致していません"
+        "password_not_same": "パスワードが一致していません",
+        "verification_code":"認証コード"
       }
     },
     "agree_terms": {

src/pages/user/signup.vue

@@ -80,21 +80,6 @@
     <v-snackbar v-model="error" :timeout="5000" top color="#C01B61">
       {{ $t('common.general.error.default') }}
     </v-snackbar>
-    <v-dialog v-model="completion" max-width="460px">
-      <v-card class="DialogCard">
-        <v-container class="DialogCardContentContainer">
-          {{ $t('pages.user_signup.success.message') }}
-        </v-container>
-        <v-card-actions class="DialogCardButtons px-4">
-          <base-action-button
-            :text="$t('pages.user_signup.success.go_back_to_top')"
-            theme="border"
-            class="my-3"
-            @click="$router.push('/')"
-          />
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
   </div>
 </template>
 
@@ -166,7 +151,10 @@ export default Vue.extend({
         .then(() => {
           this.completion = true
           this.loading = false
-          this.$router.push('/user/verify')
+          this.$router.push({
+            name: 'user-verify',
+            params: { email: this.email },
+          })
         })
         .catch(() => {
           this.error = true

src/pages/user/verify.vue

@@ -73,7 +73,7 @@ export default Vue.extend({
   layout: 'background',
   data() {
     return {
-      email: '',
+      email: this.$route.params.email,
       verification_code: '',
       loading: false,
       error: false,
@@ -114,6 +114,7 @@ export default Vue.extend({
 }
 .SignIn-Item {
   margin: 20px 0;
+  display: flex;
 }
 .SignIn-ButtonOuter {
   justify-content: space-between;

src/plugins/vuetify.ts

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import colors from 'vuetify/es5/util/colors'
+
+Vue.use(Vuetify)
+
+// @ts-ignore
+export default (ctx) => {
+  const vuetify = new Vuetify({
+    theme: {
+      dark: false,
+      themes: {
+        dark: {
+          primary: colors.blue.darken2,
+          accent: colors.grey.darken3,
+          secondary: colors.amber.darken3,
+          info: colors.teal.lighten1,
+          warning: colors.amber.base,
+          error: colors.deepOrange.accent4,
+          success: colors.green.accent3,
+        },
+      },
+    },
+  })
+
+  ctx.app.vuetify = vuetify
+  ctx.$vuetify = vuetify.framework
+}