Initial commit of akmon project

pages/user/register.uvue

@@ -0,0 +1,634 @@
+<template>
+  <!-- Single scrollable container for tablet optimization -->
+  <scroll-view class="register-container" scroll-y="true" show-scrollbar="false">    <!-- Language switch positioned absolutely -->
+    <view class="language-switch">
+      <button class="language-btn" @click="toggleLanguage">
+        {{ currentLocale === 'zh-CN' ? 'EN' : '中' }}
+      </button>
+    </view>
+    
+    <!-- Main content wrapper -->
+    <view class="content-wrapper">
+      <!-- Logo and title section -->
+      <view class="logo-section">
+        <text class="app-title">Akmon</text>
+        <text class="page-title">{{ $t('user.register.title') }}</text>
+        <text class="page-subtitle">{{ $t('user.register.subtitle') }}</text>
+      </view>
+      
+      <!-- Form container with all content inside -->
+      <view class="form-container">
+        <form @submit="onSubmit">
+          <!-- Email input -->
+          <view class="input-group" :class="{ 'input-error': emailError }">
+            <text class="input-label">{{ $t('user.register.email') }}</text>
+            <input 
+              class="input-field" 
+              name="email"
+              type="text" 
+              v-model="email" 
+              :placeholder="$t('user.register.email_placeholder')" 
+              @blur="validateEmail"
+            />
+            <text v-if="emailError" class="error-text">{{ emailError }}</text>
+          </view>
+          
+          <!-- Password input -->
+          <view class="input-group" :class="{ 'input-error': passwordError }">
+            <text class="input-label">{{ $t('user.register.password') }}</text>
+            <view class="password-input-container">
+              <input 
+                class="input-field" 
+                name="password"
+                :type="showPassword ? 'text' : 'password'" 
+                v-model="password" 
+                :placeholder="$t('user.register.password_placeholder')" 
+                @blur="validatePassword"              />              <view class="password-toggle" @click="togglePasswordVisibility">
+                <text class="toggle-icon">{{ showPassword ? '👁' : '🙈' }}</text>
+              </view>
+            </view>
+            <text v-if="passwordError" class="error-text">{{ passwordError }}</text>
+          </view>
+          
+          <!-- Confirm Password input -->
+          <view class="input-group" :class="{ 'input-error': confirmPasswordError }">
+            <text class="input-label">{{ $t('user.register.confirm_password') }}</text>
+            <view class="password-input-container">
+              <input 
+                class="input-field" 
+                name="confirmPassword"
+                :type="showConfirmPassword ? 'text' : 'password'" 
+                v-model="confirmPassword" 
+                :placeholder="$t('user.register.confirm_password_placeholder')" 
+                @blur="validateConfirmPassword"              />              <view class="password-toggle" @click="toggleConfirmPasswordVisibility">
+                <text class="toggle-icon">{{ showConfirmPassword ? '👁' : '🙈' }}</text>
+              </view>
+            </view>
+            <text v-if="confirmPasswordError" class="error-text">{{ confirmPasswordError }}</text>
+          </view>
+          
+          <!-- Username input (optional) -->
+          <view class="input-group" :class="{ 'input-error': usernameError }">
+            <text class="input-label">{{ $t('user.register.username') }}</text>
+            <input 
+              class="input-field" 
+              name="username"
+              type="text" 
+              v-model="username" 
+              :placeholder="$t('user.register.username_placeholder')" 
+              @blur="validateUsername"
+            />
+            <text v-if="usernameError" class="error-text">{{ usernameError }}</text>
+          </view>
+          
+          <!-- Terms and conditions -->
+          <view class="checkbox-container" :class="{ 'input-error': termsError }">
+            <checkbox :checked="agreeTerms" @click="agreeTerms = !agreeTerms" color="#2196f3" />
+            <view class="terms-text">
+              <text>{{ $t('user.register.agree_terms_part1') }} </text>
+              <text class="terms-link" @click="showTerms">{{ $t('user.register.terms_link') }}</text>
+              <text>{{ $t('user.register.agree_terms_part2') }}</text>
+            </view>
+          </view>
+          <text v-if="termsError" class="error-text terms-error">{{ termsError }}</text>
+          
+          <!-- Register button -->
+          <button form-type="submit" class="register-button" :disabled="isLoading" :loading="isLoading">
+            {{ $t('user.register.button') }}
+          </button>
+          
+          <!-- General error message -->
+          <text v-if="generalError" class="general-error">{{ generalError }}</text>
+        </form>
+        
+        <!-- Login option -->
+        <view class="login-option">
+          <text class="login-text">{{ $t('user.register.already_account') }}</text>
+          <text class="login-link" @click="navigateToLogin">{{ $t('user.register.login') }}</text>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script lang="uts">
+import type { AkReqOptions, AkReqResponse, AkReqError } from '@/uni_modules/ak-req/index.uts';
+import supa from '@/components/supadb/aksupainstance.uts';
+import { switchLocale, getCurrentLocale } from '@/utils/utils.uts';
+
+export default {
+  data() {
+    return {
+      email: "",
+      password: "",
+      confirmPassword: "",
+      username: "",
+      emailError: "",
+      passwordError: "",
+      confirmPasswordError: "",
+      usernameError: "",
+      termsError: "",
+      generalError: "",
+      isLoading: false,
+      showPassword: false,
+      showConfirmPassword: false,
+      agreeTerms: false,
+      currentLocale: getCurrentLocale()
+    };
+  },
+  methods: {
+    toggleLanguage() {
+      const newLocale = this.currentLocale === 'zh-CN' ? 'en-US' : 'zh-CN';
+      switchLocale(newLocale);
+      this.currentLocale = newLocale;
+      
+      uni.showToast({
+        title: this.$t('user.register.language_switched'),
+        icon: 'success'
+      });
+    },
+    onSubmit(e: UniFormSubmitEvent) {
+      this.handleRegister();
+    },
+    togglePasswordVisibility() {
+      this.showPassword = !this.showPassword;
+    },
+    toggleConfirmPasswordVisibility() {
+      this.showConfirmPassword = !this.showConfirmPassword;    },
+    validateEmail() {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (this.email.trim() === "") {
+        this.emailError = this.$t('user.register.email_required');
+        return false;
+      } else if (!emailRegex.test(this.email)) {
+        this.emailError = this.$t('user.register.email_invalid');
+        return false;
+      } else {
+        this.emailError = '';
+        return true;
+      }
+    },
+    validatePassword() {
+      if (this.password.trim() === "") {
+        this.passwordError = this.$t('user.register.password_required');
+        return false;
+      } else if (this.password.length < 6) {
+        this.passwordError = this.$t('user.register.password_too_short');
+        return false;
+      } else {
+        this.passwordError = '';
+        this.validateConfirmPassword(); // Re-validate confirm password when password changes
+        return true;
+      }
+    },
+    validateConfirmPassword() {
+      if (this.confirmPassword.trim() === "") {
+        this.confirmPasswordError = this.$t('user.register.confirm_password_required');
+        return false;
+      } else if (this.confirmPassword !== this.password) {
+        this.confirmPasswordError = this.$t('user.register.passwords_not_match');
+        return false;
+      } else {
+        this.confirmPasswordError = '';
+        return true;
+      }
+    },
+    validateUsername() {
+      if (this.username.trim() !== "" && this.username.length < 3) {
+        this.usernameError = this.$t('user.register.username_too_short');
+        return false;
+      } else {
+        this.usernameError = '';
+        return true;
+      }
+    },
+    validateTerms() {
+      if (!this.agreeTerms) {
+        this.termsError = this.$t('user.register.terms_required');
+        return false;
+      } else {
+        this.termsError = '';
+        return true;
+      }
+    },
+    validateForm() {
+      const emailValid = this.validateEmail();
+      const passwordValid = this.validatePassword();
+      const confirmPasswordValid = this.validateConfirmPassword();
+      const usernameValid = this.validateUsername();
+      const termsValid = this.validateTerms();
+      
+      return emailValid && passwordValid && confirmPasswordValid && usernameValid && termsValid;    },
+    randomPasswordHash(password: String): String {
+        const salt = Math.random().toString(36).substring(2, 10);
+        const base = password + salt + Date.now();
+        return btoa(base);
+        },
+    async handleRegister() {
+      this.generalError = '';
+      if (!this.validateForm()) {
+        return;
+      }
+      
+      this.isLoading = true;
+      try {
+        console.log('register: attempting to create account for', this.email);
+        
+        // Call signup method from supa
+        const result = await supa.signUp(
+        this.email, this.password
+        );
+        
+        if (result!=null && result.user!=null) {
+          // Show success message
+          uni.showToast({
+            title: this.$t('user.register.success'),
+            icon: 'success'
+          });
+          const user=result.get("user") as UTSJSONObject;
+		  const auth_id =user.get("id")
+          // Create user profile in ak_users table
+          const userData = {
+            auth_id: auth_id,
+			// auth_id:1,
+            email: this.email,
+            username: this.username ?? this.email.split('@')[0],
+            password_hash: this.randomPasswordHash(this.password)
+            // preferred_language: this.$locale
+          } as UTSJSONObject;
+          
+          try {
+            await supa.insert('ak_users', userData );
+          } catch (profileErr) {
+            console.error('Failed to create user profile:', profileErr);
+            // Continue anyway, as auth account was created
+          }
+          
+          // Redirect to login page after registration
+          setTimeout(() => {
+            uni.redirectTo({
+              url: '/pages/user/login'
+            });
+          }, 1500);
+        } else {
+          throw new Error(this.$t('user.register.failed'));
+        }
+      } catch (err) {
+        const errObj = err as UniError; // or UtsError
+        if (typeof errObj.message === 'string') {
+          this.generalError = errObj.message;
+        } else {
+          this.generalError = this.$t('user.register.unknown_error');
+        }
+      }
+      this.isLoading = false;
+    },
+    navigateToLogin() {
+      uni.navigateTo({
+        url: '/pages/user/login'
+      });
+    },
+    showTerms() {
+      uni.navigateTo({
+        url: '/pages/user/terms'
+      });
+    }
+  }
+}
+</script>
+
+<style>
+/* Single scrollable container for tablet optimization */
+.register-container {
+  width: 100%; /* #ifdef APP-PLUS */
+  padding: 20rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  padding: 40rpx;
+  /* #endif */
+  background-color: #f8f9fa;
+  box-sizing: border-box;
+}
+
+/* Content wrapper for centered layout */
+.content-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding-bottom: 40rpx;
+  /* 确保内容足够高以触发滚动 */
+  /* #ifdef APP-PLUS */
+  min-height: 1000rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  min-height: 1200rpx;
+  /* #endif */
+}
+
+/* Language switch button - positioned absolutely */
+.language-switch {
+  position: absolute;
+  /* #ifdef APP*/
+  top: 30rpx;
+  right: 50rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  top: 40rpx;
+  right: 40rpx;
+  /* #endif */
+  z-index: 10;
+}
+
+.language-btn {
+  /* #ifdef APP-PLUS */
+  width: 50rpx;
+  height: 50rpx;
+  border-radius: 25rpx;
+  font-size: 18rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
+  /* #endif */  background-color: rgba(33, 150, 243, 0.8);
+  color: #fff;
+  font-weight: normal;
+  border: 2rpx solid rgba(255, 255, 255, 0.3);
+  text-align: center;
+  box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
+}
+
+/* Logo and title section */
+.logo-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* #ifdef APP-PLUS */
+  margin-top: 60rpx;
+  margin-bottom: 25rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  margin-top: 80rpx;
+  margin-bottom: 40rpx;
+  /* #endif */
+}
+
+.app-title {
+  /* #ifdef APP-PLUS */
+  font-size: 28rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 36rpx;
+  /* #endif */
+  font-weight: bold;
+  color: #2196f3;
+}
+
+.page-title {
+  /* #ifdef APP-PLUS */
+  font-size: 32rpx;
+  margin-top: 12rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 48rpx;
+  margin-top: 20rpx;
+  /* #endif */
+  font-weight: bold;
+  color: #333;
+}
+
+.page-subtitle {
+  /* #ifdef APP-PLUS */
+  font-size: 18rpx;
+  margin-top: 6rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 28rpx;
+  margin-top: 10rpx;
+  /* #endif */
+  color: #666;
+}
+
+/* Form container */
+.form-container {
+  width: 100%;
+  /* #ifdef APP-PLUS */
+  max-width: 500rpx;
+  padding: 25rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  max-width: 680rpx;
+  padding: 40rpx;
+  /* #endif */
+  background-color: #ffffff;
+  border-radius: 20rpx;
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/* Input groups */
+.input-group {
+  /* #ifdef APP-PLUS */
+  margin-bottom: 15rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  margin-bottom: 30rpx;
+  /* #endif */
+}
+
+.input-label {
+  /* #ifdef APP-PLUS */
+  font-size: 20rpx;
+  margin-bottom: 6rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 28rpx;
+  margin-bottom: 10rpx;
+  /* #endif */
+  font-weight: 400;
+  color: #333;
+  display: block;
+}
+
+.input-field {
+  width: 100%;
+  /* #ifdef APP-PLUS */
+  height: 60rpx;
+  padding: 0 20rpx;
+  font-size: 22rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  height: 90rpx;
+  padding: 0 30rpx;
+  font-size: 28rpx;
+  /* #endif */
+  border-radius: 10rpx;
+  border: 2rpx solid #ddd;
+  background-color: #f9f9f9;
+  box-sizing: border-box;
+}
+
+.input-error .input-field {
+  border-color: #f44336;
+}
+
+.error-text {
+  /* #ifdef APP-PLUS */
+  font-size: 18rpx;
+  margin-top: 4rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 24rpx;
+  margin-top: 6rpx;
+  /* #endif */
+  color: #f44336;
+}
+
+/* Password input */
+.password-input-container {
+  position: relative;
+}
+
+.password-toggle {
+  position: absolute;
+  /* #ifdef APP-PLUS */
+  right: 12rpx;
+  top: 17rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  right: 20rpx;
+  top: 25rpx;
+  /* #endif */
+  z-index: 1;
+}
+
+.toggle-icon {
+  /* #ifdef APP-PLUS */
+  font-size: 20rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 30rpx;
+  /* #endif */
+  color: #666;
+}
+
+/* Checkbox for terms */
+.checkbox-container {
+  display: flex;
+  flex-direction: row;
+  /* #ifdef APP-PLUS */
+  margin-bottom: 6rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  margin-bottom: 10rpx;
+  /* #endif */
+}
+
+.terms-text {
+  /* #ifdef APP-PLUS */
+  font-size: 18rpx;
+  margin-left: 6rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 26rpx;
+  margin-left: 10rpx;
+  /* #endif */
+  color: #666;
+  flex: 1;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.terms-link {
+  color: #2196f3;
+}
+
+.terms-error {
+  /* #ifdef APP-PLUS */
+  margin-bottom: 12rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  margin-bottom: 20rpx;
+  /* #endif */
+}
+
+/* Register button */
+.register-button {
+  width: 100%;
+  /* #ifdef APP-PLUS */
+  height: 60rpx;
+  font-size: 24rpx;
+  margin: 12rpx 0;
+  border-radius: 30rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  height: 90rpx;
+  font-size: 32rpx;
+  margin: 20rpx 0;  border-radius: 45rpx;
+  /* #endif */
+  background-image: linear-gradient(to right, #2196f3, #03a9f4);
+  color: #fff;
+  font-weight: normal;
+  text-align: center;
+  box-shadow: 0 10rpx 20rpx rgba(3, 169, 244, 0.2);
+}
+
+.register-button[disabled] {
+  background: #ccc;
+    box-shadow: none;
+}
+
+/* General error */
+.general-error {
+  width: 100%;
+  text-align: center;
+  color: #f44336;
+  /* #ifdef APP-PLUS */
+  font-size: 20rpx;
+  margin-top: 12rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 28rpx;
+  margin-top: 20rpx;
+  /* #endif */
+}
+
+/* Login option */
+.login-option {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  /* #ifdef APP-PLUS */
+  margin-top: 25rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  margin-top: 40rpx;
+  /* #endif */
+}
+
+.login-text {
+  /* #ifdef APP-PLUS */
+  font-size: 20rpx;
+  margin-right: 5rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 28rpx;
+  margin-right: 8rpx;
+  /* #endif */
+  color: #666;
+}
+
+.login-link {
+  /* #ifdef APP-PLUS */
+  font-size: 20rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 28rpx;
+  /* #endif */
+  color: #2196f3;
+  font-weight: normal;
+}
+</style>