feat: choose language on register and login forms (#969)

app/Http/Middleware/ShareInertiaData.php

@@ -2,8 +2,8 @@
 
 namespace App\Http\Middleware;
 
-use App\Helpers\LocaleHelper;
 use Inertia\Inertia;
+use App\Helpers\LocaleHelper;
 use Illuminate\Support\Facades\Session;
 
 /**
@@ -27,6 +27,7 @@ public function handle($request, $next)
                 return [
                     'flash' => $request->session()->get('flash', []),
                     'languages' => LocaleHelper::getLocaleList(),
+                    'enableSignups' => config('officelife.enable_signups'),
                 ];
             },
             'user' => function () use ($request) {

app/Services/User/CreateAccount.php

@@ -4,6 +4,7 @@
 
 use App\Models\User\User;
 use Illuminate\Support\Str;
+use App\Helpers\LocaleHelper;
 use App\Services\BaseService;
 use Illuminate\Validation\Rule;
 use Illuminate\Support\Facades\Hash;
@@ -34,6 +35,11 @@ public function rules(): array
             'last_name' => 'nullable|string|max:255',
             'middle_name' => 'nullable|string|max:255',
             'nickname' => 'nullable|string|max:255',
+            'locale' => [
+                'nullable',
+                'string',
+                Rule::in(config('lang-detector.languages')),
+            ],
         ];
     }
 
@@ -77,6 +83,10 @@ public function execute(array $data): User
     private function createUser(array $data): void
     {
         $uuid = Str::uuid()->toString();
+        $locale = $this->valueOrNull($data, 'locale');
+        if (! $locale) {
+            $locale = LocaleHelper::getLocale();
+        }
 
         $this->user = User::create([
             'email' => $data['email'],
@@ -86,6 +96,7 @@ private function createUser(array $data): void
             'middle_name' => $this->valueOrNull($data, 'middle_name'),
             'nickname' => $this->valueOrNull($data, 'nickname'),
             'uuid' => $uuid,
+            'locale' => $locale,
         ]);
     }
 }

resources/js/Pages/Auth/Login.vue

@@ -54,10 +54,12 @@
     </form>
 
     <template #footer>
+      <languages />
+
       <inertia-link v-if="canResetPassword" :href="route('password.request')" class="f6">
         {{ $t('passwords.forgot_password_link') }}
       </inertia-link>
-      <p class="f6">
+      <p v-if="$page.props.jetstream.enableSignups" class="f6">
         {{ $t('auth.login_no_account') }}
         <inertia-link :href="route('register')">{{ $t('auth.login_register') }}</inertia-link>
       </p>
@@ -72,6 +74,7 @@ import TextInput from '@/Shared/TextInput';
 import Errors from '@/Shared/Errors';
 import LoadingButton from '@/Shared/LoadingButton';
 import { useForm } from '@inertiajs/inertia-vue3';
+import Languages from './Partials/Languages';
 
 export default {
   components: {
@@ -80,6 +83,7 @@ export default {
     TextInput,
     Errors,
     LoadingButton,
+    Languages,
   },
 
   props: {
@@ -91,10 +95,6 @@ export default {
       type: String,
       default: '',
     },
-    enableSignup: {
-      type: Boolean,
-      default: false,
-    }
   },
 
   data() {
@@ -109,12 +109,6 @@ export default {
     };
   },
 
-  computed: {
-    loadingState() {
-      return this.form.processing ? 'loading' : '';
-    }
-  },
-
   mounted() {
     document.title = 'Login';
   },

resources/js/Pages/Auth/Partials/Languages.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="f7 mr4 mb4">
+    🌍
+    <ul class="list">
+      <li class="di silver">
+        {{ $t('auth.change_language') }}
+      </li>
+      <li v-for="language in $page.props.jetstream.languages" :key="language.lang" :title="language['name-orig']" class="di ml1">
+        <a v-if="language.lang !== lang" :href="url+'?lang='+language.lang" :title="language['name-orig']"
+           @click.prevent="lang = language.lang"
+        >
+          {{ language.lang }}
+        </a>
+        <template v-else class="silver">
+          {{ language.lang }}
+        </template>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+
+  model: {
+    event: 'update:lang'
+  },
+
+  data() {
+    return {
+      l: null,
+    };
+  },
+
+  computed: {
+    lang: {
+      get() {
+        return this.l ? this.l : document.querySelector('html').getAttribute('lang');
+      },
+      set(value) {
+        this.loadLanguage(value, true);
+        this.$emit('update:lang', value);
+        this.l = value;
+      }
+    },
+    url: function() {
+      return window.location;
+    },
+  },
+};
+</script>

resources/js/Pages/Auth/Register.vue

@@ -47,6 +47,8 @@
     </form>
 
     <template #footer>
+      <languages @update:lang="form.locale = $event" />
+
       <p class="f6">
         {{ $t('auth.register_already_an_account') }}
         <inertia-link :href="route('login')">{{ $t('auth.register_sign_in') }}</inertia-link>
@@ -62,6 +64,7 @@ import Checkbox from '@/Shared/Checkbox';
 import TextInput from '@/Shared/TextInput';
 import LoadingButton from '@/Shared/LoadingButton';
 import { useForm } from '@inertiajs/inertia-vue3';
+import Languages from './Partials/Languages';
 
 export default {
   components: {
@@ -70,6 +73,7 @@ export default {
     Checkbox,
     TextInput,
     LoadingButton,
+    Languages,
   },
 
   props: {
@@ -89,6 +93,7 @@ export default {
         email: '',
         password: '',
         terms: false,
+        locale: null,
       }),
       errorTemplate: Error,
     };

resources/js/Shared/Layout/AuthenticationCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ph2 ph0-ns">
-    <div class="cf mt6 mw6 center br3 mb4 bg-white box pa3">
+    <div class="cf mt6 mw6 center br3 mb2 bg-white box pa3">
       <div class="w-100 relative">
         <slot name="logo"></slot>
       </div>

resources/lang/en/auth.php

@@ -40,4 +40,5 @@
     'invitation_unlogged_choice_login_desc' => 'Use this option if you already have an account on OfficeLife',
     'invitation_unlogged_choice_account' => 'Create an account',
     'invitation_unlogged_choice_login' => 'Sign in to your account',
+    'change_language' => 'Change language:',
 ];