Goatworks/Capital
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🌐 Localize sign in & sign up page

Browse Source
This commit is contained in:
LittleSheep
2024-08-13 17:43:44 +08:00
parent 4e5bcaad94
commit 4e42b44958
12 changed files with 96 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/Copyright.vue
View File

@@ -1,12 +1,14 @@
<template>
<div class="text-xs text-grey" :class="(props.centered ?? true) ? 'text-center' : 'text-left'">
<p>Copyright © {{ new Date().getFullYear() }} Solsynth LLC</p>
<div class="text-xs text-grey" :class="props.noCentered ? 'text-left' : 'text-center'">
<p>{{ t("copyright") }} © {{ new Date().getFullYear() }} {{ t("brandNameFormal") }}</p>
<p>Powered by <a class="underline" :href="projects[props.service][1]">{{ projects[props.service][0] }}</a></p>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{ service: string, centered?: boolean }>()
const props = defineProps<{ service: string, noCentered?: boolean }>()
const { t } = useI18n()
const projects: { [id: string]: [string, string] } = {
"passport": ["Hydrogen.Passport", "https://git.solsynth.dev/Hydrogen/Passport"],

9
components/UserMenu.vue
View File

@@ -12,12 +12,12 @@
<v-divider class="border-opacity-50 my-2" />
<v-list-item title="Dashboard" prepend-icon="mdi-account-supervisor" exact to="/users/me" />
<v-list-item title="Sign out" prepend-icon="mdi-logout" @click="signOut"></v-list-item>
<v-list-item :title="t('userMenuDashboard')" prepend-icon="mdi-account-supervisor" exact to="/users/me" />
<v-list-item :title="t('userMenuSignOut')" prepend-icon="mdi-logout" @click="signOut"></v-list-item>
</v-list>
<v-list density="compact" v-else>
<v-list-item title="Sign in" prepend-icon="mdi-login-variant" to="/auth/sign-in" />
<v-list-item title="Create account" prepend-icon="mdi-account-plus" to="/auth/sign-up" />
<v-list-item :title="t('userMenuSignIn')" prepend-icon="mdi-login-variant" to="/auth/sign-in" />
<v-list-item :title="t('userMenuSignUp')" prepend-icon="mdi-account-plus" to="/auth/sign-up" />
</v-list>
</v-menu>
</template>
@@ -26,6 +26,7 @@
import { defaultUserinfo, useUserinfo } from "@/stores/userinfo"
import { computed } from "vue"
const {t} = useI18n()
const config = useRuntimeConfig()
const id = useUserinfo()

14
components/auth/Authenticate.vue
View File

@@ -1,19 +1,20 @@
<template>
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="submit">
<v-text-field label="Username" variant="solo" density="comfortable" class="mb-3" :hide-details="true"
<v-text-field :label="t('username')" variant="solo" density="comfortable" class="mb-3" :hide-details="true"
:disabled="props.loading" v-model="probe" />
<v-text-field label="Password" variant="solo" density="comfortable" type="password" :disabled="props.loading"
<v-text-field :label="t('password')" variant="solo" density="comfortable" type="password"
:disabled="props.loading"
v-model="password" />
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
{{ t("errorOccurred", [error]) }}
</v-alert>
</v-expand-transition>
<div class="flex justify-between">
<v-btn type="button" variant="plain" color="grey-darken-3" to="/auth/sign-up">Sign up</v-btn>
<v-btn type="button" variant="plain" color="grey-darken-3" to="/auth/sign-up">{{ t("userMenuSignUp") }}</v-btn>
<v-btn
type="submit"
@@ -23,7 +24,7 @@
append-icon="mdi-arrow-right"
:disabled="props.loading"
>
Next
{{ t("next") }}
</v-btn>
</div>
</v-form>
@@ -31,8 +32,7 @@
</template>
<script setup lang="ts">
import { ref } from "vue"
const { t } = useI18n()
const config = useRuntimeConfig()
const probe = ref("")

10
components/auth/AuthenticateCompleted.vue
View File

@@ -2,21 +2,19 @@
<div>
<v-icon icon="mdi-lan-check" size="32" color="grey-darken-3" class="mb-3" />
<h1 class="font-bold text-xl">All Done!</h1>
<p>Welcome back! You just signed in right now! We're going to direct you to dashboard...</p>
<h1 class="font-bold text-xl">{{ t("signInCompleted") }}</h1>
<p>{{ t("signInCompletedCaption") }}</p>
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
{{ t("errorOccurred", [error]) }}
</v-alert>
</v-expand-transition>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue"
import { useRoute, useRouter } from "vue-router"
const { t } = useI18n()
const config = useRuntimeConfig()
const route = useRoute()

11
components/auth/FactorApplicator.vue
View File

@@ -2,7 +2,7 @@
<div class="flex items-center">
<v-form class="flex-grow-1" @submit.prevent="submit">
<div v-if="inputType === 'one-time-password'" class="text-center">
<p class="text-xs opacity-90">Check your inbox!</p>
<p class="text-xs opacity-90">{{ t("multiFactorHint") }}</p>
<v-otp-input
class="pt-0"
variant="solo"
@@ -15,7 +15,7 @@
</div>
<v-text-field
v-else
label="Password"
:label="t('password')"
type="password"
variant="solo"
density="comfortable"
@@ -25,7 +25,7 @@
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
{{ t("errorOccurred", [error]) }}
</v-alert>
</v-expand-transition>
@@ -38,7 +38,7 @@
append-icon="mdi-arrow-right"
:disabled="loading"
>
Next
{{ t("next") }}
</v-btn>
</div>
</v-form>
@@ -46,8 +46,7 @@
</template>
<script setup lang="ts">
import { computed, ref } from "vue"
const { t } = useI18n()
const config = useRuntimeConfig()
const password = ref("")

9
components/auth/FactorPicker.vue
View File

@@ -17,13 +17,13 @@
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
{{ t("errorOccurred", [error]) }}
</v-alert>
</v-expand-transition>
<div class="flex justify-end">
<v-btn variant="text" color="primary" class="justify-self-end" append-icon="mdi-arrow-right" @click="submit">
Next
{{ t("next") }}
</v-btn>
</div>
</div>
@@ -31,8 +31,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue"
const { t } = useI18n()
const config = useRuntimeConfig()
const focus = ref<number | null>(null)
@@ -78,7 +77,7 @@ async function submit() {
function getFactorType(item: any) {
switch (item.type) {
case 1:
return { icon: "mdi-email-fast", label: "Email Validation" }
return { icon: "mdi-email-fast", label: t('multiFactorTypeEmail') }
}
}

24
lang/en-US.json
View File

@@ -10,5 +10,27 @@
"indexProductListHint": "See some of our products just there",
"indexActivities": "Activities",
"indexActivitiesCaption": "Keep in touch,\nand learn what we doing recently.",
"indexActivitiesHint": "See some posts in our realm just here"
"indexActivitiesHint": "See some posts in our realm just here",
"userMenuDashboard": "Dashboard",
"userMenuSignOut": "Sign Out",
"userMenuSignIn": "Sign In",
"userMenuSignUp": "Create Account",
"next": "Next",
"errorOccurred": " Something went wrong... {0}",
"username": "Name",
"nickname": "Nick",
"email": "Email Address",
"password": "Password",
"copyright": "Copyright",
"signUpTitle": "Create an account",
"signUpCaption": "Create an account on Solar Network. Then enjoy all our services.",
"signUpCompleted": "You successfully created an account on Solar Network. Now sign in to your account and start exploring!",
"signUpCompletedAction": "Let's go!",
"signInTitle": "Sign In",
"signInCaption": "Sign in via your account to access the entire Solar Network.",
"multiFactorCaption": "We need to verify that the person trying to access your account is you.",
"multiFactorHint": "Check your inbox",
"multiFactorTypeEmail": "Email One-time-password",
"signInCompleted": "All Done",
"signInCompletedCaption": "Welcome back! You just signed in right now! We're going to direct you to dashboard..."
}

24
lang/zh-CN.json
View File

@@ -10,5 +10,27 @@
"indexProductListHint": "在这里看看我们的一些产品",
"indexActivities": "动态",
"indexActivitiesCaption": "开发软件，闭门造车是大忌，了解我们最近在做什么。",
"indexActivitiesHint": "看看我们领域中的一些帖子"
"indexActivitiesHint": "看看我们领域中的一些帖子",
"userMenuDashboard": "仪表盘",
"userMenuSignOut": "登出",
"userMenuSignIn": "登陆",
"userMenuSignUp": "注册帐号",
"next": "下一步",
"errorOccurred": "发生错误了… {0}",
"username": "用户名",
"nickname": "显示名",
"email": "邮件地址",
"password": "密码",
"copyright": "版权所有",
"signUpTitle": "创建账号",
"signUpCaption": "在 Solar Network 上创建一个帐号，以享受我们所有的服务。",
"signUpCompleted": "您已成功创建 Solar Network 账户。现在登录您的账户，开始探索吧！",
"signUpCompletedAction": "出发",
"signInTitle": "登陆",
"signInCaption": "通过您的账户登录以访问整个 Solar Network。",
"multiFactorCaption": "我们需要验证试图访问您账户的人是您本人。",
"multiFactorHint": "检查您的收件箱",
"multiFactorTypeEmail": "电子邮件一次性密码",
"signInCompleted": "完成",
"signInCompletedCaption": "欢迎回来！您刚刚登录成功！我们将引导您进入仪表板..."
}

2
nuxt.config.ts
View File

@@ -19,7 +19,7 @@ export default defineNuxtConfig({
useCookie: true,
cookieCrossOrigin: true,
cookieKey: "__capital_i18n",
redirectOn: "root",
redirectOn: "no prefix",
},
locales: [
{ code: "en", name: "English", file: "en-US.json" },

9
pages/auth/sign-in.vue
View File

@@ -6,9 +6,9 @@
<v-card-text class="card-grid pa-9">
<div>
<v-avatar color="accent" icon="mdi-login-variant" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Sign in</h1>
<p v-if="ticket">We need to verify that the person trying to access your account is you.</p>
<p v-else>Sign in via your Solar ID to access the entire Solar Network.</p>
<h1 class="text-2xl">{{ t("signInTitle") }}</h1>
<p v-if="ticket" class="max-w-5/6">{{ t("multiFactorCaption") }}</p>
<p v-else class="max-w-5/6">{{ t("signInCaption") }}</p>
</div>
<v-window :touch="false" :model-value="panel" class="pa-2 mx-[-0.5rem]">
@@ -26,12 +26,13 @@
<script setup lang="ts">
import { type Component, onMounted, ref } from "vue"
import { useRoute } from "vue-router"
import FactorPicker from "~/components/auth/FactorPicker.vue"
import FactorApplicator from "~/components/auth/FactorApplicator.vue"
import AccountAuthenticate from "~/components/auth/Authenticate.vue"
import AuthenticateCompleted from "~/components/auth/AuthenticateCompleted.vue"
const { t } = useI18n()
definePageMeta({
alias: ["/auth/mfa"],
})

25
pages/auth/sign-up.vue
View File

@@ -6,8 +6,8 @@
<v-card-text class="card-grid pa-9">
<div>
<v-avatar color="accent" icon="mdi-login-variant" size="large" class="card-rounded mb-2" />
<h1 class="text-2xl">Create an account</h1>
<p>Create an account on Solar Network. Then enjoy all our services.</p>
<h1 class="text-2xl">{{ t("signUpTitle") }}</h1>
<p class="max-w-5/6">{{ t("signUpCaption") }}</p>
</div>
<div class="flex items-center">
@@ -16,7 +16,7 @@
<v-col :cols="6">
<v-text-field
hide-details
label="Name"
:label="t('username')"
autocomplete="username"
variant="solo"
density="comfortable"
@@ -26,7 +26,7 @@
<v-col :cols="6">
<v-text-field
hide-details
label="Nick"
:label="t('nickname')"
autocomplete="nickname"
variant="solo"
density="comfortable"
@@ -36,7 +36,7 @@
<v-col :cols="12">
<v-text-field
hide-details
label="Email Address"
:label="t('email')"
type="email"
variant="solo"
density="comfortable"
@@ -46,7 +46,7 @@
<v-col :cols="12">
<v-text-field
hide-details
label="Password"
:label="t('password')"
type="password"
autocomplete="new-password"
variant="solo"
@@ -58,17 +58,17 @@
<v-expand-transition>
<v-alert v-show="error" variant="tonal" type="error" class="text-xs mb-3">
Something went wrong... {{ error }}
{{ t("errorOccurred", [error]) }}
</v-alert>
</v-expand-transition>
<div class="flex justify-between">
<v-btn type="button" variant="plain" color="grey-darken-3" to="/auth/sign-in">
Sign in
{{ t("userMenuSignIn") }}
</v-btn>
<v-btn type="submit" variant="text" color="primary" append-icon="mdi-arrow-right" :disabled="loading">
Next
{{ t("next") }}
</v-btn>
</div>
</v-form>
@@ -79,11 +79,11 @@
<v-dialog v-model="done" class="max-w-[560px]">
<v-card title="Congratulations">
<template #text>
You successfully created an account on Solar Network. Now sign in to your account and start exploring!
{{ t("signUpCompleted") }}
</template>
<template #actions>
<div class="flex flex-grow-1 justify-end">
<v-btn @click="callback">Let's go</v-btn>
<v-btn @click="callback">{{ t("signUpCompletedAction") }}</v-btn>
</div>
</template>
</v-card>
@@ -99,6 +99,7 @@ import { useRoute, useRouter } from "vue-router"
const error = ref<string | null>(null)
const { t } = useI18n()
const config = useRuntimeConfig()
const route = useRoute()
@@ -137,7 +138,7 @@ function callback() {
if (route.params["closable"]) {
window.close()
} else {
router.push({ name: "auth.sign-in" })
router.push("/auth/sign-in")
}
}
</script>

2
pages/users/me.vue
View File

@@ -36,7 +36,7 @@
</div>
<div class="mb-5 mx-[2.5ch]">
<copyright service="passport" :centered="false" />
<copyright service="passport" no-centered />
</div>
</div>
</v-container>