chahine/rebreak-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(profile): Avatar + Nickname edit-flow

Browse Source 
User-Wunsch: auf Profile Avatar + Nickname ändern können. Avatar entweder
preset aus signup-list ODER eigene Foto mit cropper.

New files:
- app/profile/edit.tsx — vollständiger Edit-Screen (Avatar-Gallery + Photo-Picker
  + Nickname TextInput + Save-Button)
- lib/avatars.ts — HERO_AVATARS preset-list (matched mit Nuxt-app Signup) +
  getAvatarUrl helper
- lib/resolveAvatar.ts — resolveAvatar(avatarId, nickname): URL für
  preset-id ODER fallback auf nickname-initial-tile

Profile-Page wiring:
- Avatar-Tap + Nickname-Tap pushen jetzt zu /profile/edit (statt Alert-stub)
- Nach successful save: useMe.reload() + router.back()

Edit-Flow:
- Preset (HERO_AVATARS, 12 items): tap-grid mit selected-State + brand-Border
- Eigenes Photo: expo-image-picker mit allowsEditing+aspect[1,1] (OS-nativer
  Crop-Dialog), expo-file-system/legacy für base64-Konvertierung, upload via
  POST /api/avatar/upload (writes Supabase-Storage rebreak-avatars + updated
  Profile)
- Save: PATCH /api/auth/me { nickname, avatar }

i18n: profile.edit_* keys DE+EN

Backend-API:
- PATCH /api/auth/me — existiert (apps/admin/composables nicht — backend!)
- POST /api/avatar/upload — existiert

TS-fixes:
- expo-file-system → /legacy import (SDK 54 breaking change, siehe Task #14)
- ?? + || mixing fixed mit klammern

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini 2026-05-08 22:15:13 +02:00
parent 1c1968b1ae
commit 8f2b93f881
6 changed files with 457 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
apps/admin/start-admin-staging.sh Executable file
View File

@ -0,0 +1,53 @@
#!/bin/bash
# apps/admin/start-admin-staging.sh -- startet rebreak-admin-staging mit Infisical-Secrets.
#
# Pattern: identisch zu backend/start-staging.sh.
# Admin-App braucht: NUXT_PUBLIC_SUPABASE_URL, NUXT_PUBLIC_SUPABASE_KEY, ADMIN_SECRET.
# Alles via Infisical env=staging -- selbes Infisical-Project wie backend.
set -euo pipefail
source /etc/environment
if [[ -z "${INFISICAL_CLIENT_ID:-}" || -z "${INFISICAL_CLIENT_SECRET:-}" ]]; then
echo "[start-admin-staging] FEHLER: INFISICAL_CLIENT_ID / SECRET nicht gesetzt" >&2
exit 1
fi
INFISICAL_TOKEN=$(infisical login \
--method=universal-auth \
--client-id="${INFISICAL_CLIENT_ID}" \
--client-secret="${INFISICAL_CLIENT_SECRET}" \
--silent --plain 2>/dev/null)
[[ -z "$INFISICAL_TOKEN" ]] && { echo "[start-admin-staging] Infisical login fehlgeschlagen" >&2; exit 1; }
export NODE_ENV=production
export NITRO_PORT=3017
export NITRO_HOST=127.0.0.1
export PORT=3017
NODE_BIN="/root/.nvm/versions/node/v24.11.1/bin/node"
INDEX_MJS="/srv/rebreak/apps/admin/.output-staging/server/index.mjs"
[[ ! -f "$INDEX_MJS" ]] && {
echo "[start-admin-staging] FEHLER: $INDEX_MJS fehlt -- deploy-admin-from-artifact.sh laufen lassen" >&2
exit 1
}
exec infisical run \
--projectId="${INFISICAL_PROJECT_ID:-14b11b35-ef59-4b8a-a16b-398f0cc3ad93}" \
--env=staging \
--token="$INFISICAL_TOKEN" \
-- bash -c '
set -e
# ─── Infisical-Vars auf Nuxt-runtimeConfig-Namen mappen ──────────────
# Supabase (public -- aus Infisical staging geladen, selbe Keys wie backend)
[[ -n "${SUPABASE_URL:-}" ]] && export NUXT_PUBLIC_SUPABASE_URL="$SUPABASE_URL"
[[ -n "${SUPABASE_KEY:-}" ]] && export NUXT_PUBLIC_SUPABASE_KEY="$SUPABASE_KEY"
# Admin-Secret (server-only, fuer requireAdmin-Middleware Phase 3)
[[ -n "${ADMIN_SECRET:-}" ]] && export NUXT_ADMIN_SECRET="$ADMIN_SECRET"
# Backend-API-Base (admin-app zeigt auf backend-staging)
[[ -n "${NUXT_PUBLIC_API_BASE:-}" ]] && export NUXT_PUBLIC_API_BASE="$NUXT_PUBLIC_API_BASE"
exec '"$NODE_BIN"' '"$INDEX_MJS"'
'

318
apps/rebreak-native/app/profile/edit.tsx Normal file
View File

@ -0,0 +1,318 @@
import { useState } from 'react';
import {
View,
Text,
TextInput,
Pressable,
ScrollView,
Image,
ActivityIndicator,
KeyboardAvoidingView,
Platform,
Alert,
} from 'react-native';
import { useRouter } from 'expo-router';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
// TODO(sdk54): migrate to new expo-file-system class-based API — see Task #14
import * as FileSystem from 'expo-file-system/legacy';
import { useTranslation } from 'react-i18next';
import { colors } from '../../lib/theme';
import { HERO_AVATARS, getAvatarUrl } from '../../lib/avatars';
import { resolveAvatar } from '../../lib/resolveAvatar';
import { apiFetch } from '../../lib/api';
import { useMe } from '../../hooks/useMe';
const INPUT_STYLE = {
fontSize: 16,
lineHeight: 22,
paddingVertical: 14,
paddingHorizontal: 16,
color: colors.text,
fontFamily: 'Nunito_400Regular',
backgroundColor: '#f5f5f5',
borderRadius: 12,
} as const;
export default function ProfileEditScreen() {
const router = useRouter();
const insets = useSafeAreaInsets();
const { t } = useTranslation();
const { me, reload } = useMe();
const [nickname, setNickname] = useState(me?.nickname ?? '');
const [avatarId, setAvatarId] = useState<string | null>(me?.avatar ?? null);
const [photoUri, setPhotoUri] = useState<string | null>(null);
const [saving, setSaving] = useState(false);
const [uploading, setUploading] = useState(false);
const displayAvatar = photoUri ?? avatarId;
async function pickPhoto() {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
Alert.alert(
t('profile.edit_photo_perm_title'),
t('profile.edit_photo_perm_desc'),
);
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ['images'],
allowsEditing: true,
aspect: [1, 1],
quality: 0.7,
});
if (result.canceled || !result.assets[0]) return;
const uri = result.assets[0].uri;
setPhotoUri(uri);
setAvatarId(null);
}
async function save() {
if (!nickname.trim()) return;
setSaving(true);
try {
let finalAvatar: string | null = avatarId;
if (photoUri) {
setUploading(true);
const base64 = await FileSystem.readAsStringAsync(photoUri, {
encoding: FileSystem.EncodingType.Base64,
});
const ext = photoUri.toLowerCase().endsWith('.png') ? 'png' : 'jpeg';
const dataUrl = `data:image/${ext};base64,${base64}`;
const res = await apiFetch<{ url: string }>('/api/avatar/upload', {
method: 'POST',
body: { dataUrl },
});
finalAvatar = res.url;
setUploading(false);
}
await apiFetch('/api/auth/me', {
method: 'PATCH',
body: {
nickname: nickname.trim(),
...(finalAvatar !== me?.avatar ? { avatar: finalAvatar } : {}),
},
});
reload();
router.back();
} catch {
setUploading(false);
Alert.alert(t('common.error'), t('common.unknown_error'));
} finally {
setSaving(false);
}
}
const resolvedPreview = photoUri
? photoUri
: resolveAvatar(avatarId, nickname || (me?.nickname ?? ''));
const hasChanges =
nickname.trim() !== (me?.nickname ?? '') ||
photoUri !== null ||
avatarId !== me?.avatar;
return (
<KeyboardAvoidingView
style={{ flex: 1, backgroundColor: colors.bg }}
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
paddingTop: insets.top + 8,
paddingBottom: 12,
paddingHorizontal: 16,
borderBottomWidth: 1,
borderBottomColor: colors.border,
backgroundColor: colors.bg,
}}
>
<Pressable
onPress={() => router.back()}
hitSlop={10}
style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1, marginRight: 12 })}
>
<Ionicons name="chevron-back" size={24} color={colors.text} />
</Pressable>
<Text style={{ flex: 1, fontSize: 17, color: colors.text, fontFamily: 'Nunito_700Bold' }}>
{t('profile.edit_title')}
</Text>
<Pressable
onPress={save}
disabled={saving || !hasChanges || !nickname.trim()}
style={({ pressed }) => ({
opacity: pressed || saving || !hasChanges || !nickname.trim() ? 0.4 : 1,
})}
>
{saving ? (
<ActivityIndicator size="small" color={colors.brandOrange} />
) : (
<Text
style={{
fontSize: 16,
color: colors.brandOrange,
fontFamily: 'Nunito_700Bold',
}}
>
{t('profile.edit_save')}
</Text>
)}
</Pressable>
</View>
<ScrollView
contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}
>
{/* Avatar preview + pick-photo button */}
<View style={{ alignItems: 'center', paddingTop: 32, paddingBottom: 24 }}>
<View style={{ position: 'relative' }}>
<Image
source={{ uri: resolvedPreview }}
style={{
width: 96,
height: 96,
borderRadius: 48,
backgroundColor: '#e5e5e5',
borderWidth: 2,
borderColor: colors.border,
}}
/>
{uploading ? (
<View
style={{
position: 'absolute',
inset: 0,
borderRadius: 48,
backgroundColor: 'rgba(0,0,0,0.45)',
alignItems: 'center',
justifyContent: 'center',
}}
>
<ActivityIndicator color="#fff" size="small" />
</View>
) : null}
</View>
<Pressable
onPress={pickPhoto}
style={({ pressed }) => ({
marginTop: 12,
flexDirection: 'row',
alignItems: 'center',
gap: 6,
opacity: pressed ? 0.5 : 1,
})}
>
<Ionicons name="camera-outline" size={18} color={colors.brandOrange} />
<Text
style={{
fontSize: 14,
color: colors.brandOrange,
fontFamily: 'Nunito_600SemiBold',
}}
>
{t('profile.edit_photo_cta')}
</Text>
</Pressable>
</View>
{/* Preset avatars */}
<View style={{ paddingHorizontal: 16, marginBottom: 24 }}>
<Text
style={{
fontSize: 12,
color: colors.textMuted,
fontFamily: 'Nunito_700Bold',
letterSpacing: 0.8,
marginBottom: 12,
}}
>
{t('profile.edit_preset_label').toUpperCase()}
</Text>
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
{HERO_AVATARS.map((avatar) => {
const isSelected = !photoUri && avatarId === avatar.id;
return (
<Pressable
key={avatar.id}
onPress={() => {
setAvatarId(avatar.id);
setPhotoUri(null);
}}
style={({ pressed }) => ({
opacity: pressed ? 0.7 : 1,
})}
>
<Image
source={{ uri: getAvatarUrl(avatar.id) }}
style={{
width: 56,
height: 56,
borderRadius: 28,
borderWidth: isSelected ? 3 : 1.5,
borderColor: isSelected ? colors.brandOrange : colors.border,
opacity: isSelected ? 1 : 0.55,
}}
/>
</Pressable>
);
})}
</View>
</View>
{/* Divider */}
<View style={{ height: 1, backgroundColor: colors.border, marginHorizontal: 16, marginBottom: 24 }} />
{/* Nickname */}
<View style={{ paddingHorizontal: 16 }}>
<Text
style={{
fontSize: 12,
color: colors.textMuted,
fontFamily: 'Nunito_700Bold',
letterSpacing: 0.8,
marginBottom: 8,
}}
>
{t('profile.edit_nickname_label').toUpperCase()}
</Text>
<TextInput
style={INPUT_STYLE}
value={nickname}
onChangeText={setNickname}
placeholder={t('auth.nicknamePlaceholder')}
placeholderTextColor="#a3a3a3"
autoCapitalize="none"
autoCorrect={false}
maxLength={32}
returnKeyType="done"
/>
<Text
style={{
marginTop: 6,
fontSize: 12,
color: colors.textMuted,
fontFamily: 'Nunito_400Regular',
}}
>
{t('profile.edit_nickname_hint')}
</Text>
</View>
</ScrollView>
</KeyboardAvoidingView>
);
}

23
apps/rebreak-native/app/profile/index.tsx
View File

@ -1,6 +1,7 @@
import { useRef, useState } from 'react';
import { View, ScrollView, Text, Alert, findNodeHandle, UIManager } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { AppHeader } from '../../components/AppHeader';
import { ProfileHeader, type AuthProvider } from '../../components/profile/ProfileHeader';
import { StatsBar } from '../../components/profile/StatsBar';
@ -9,7 +10,7 @@ import { StreakSection, type CooldownEntry } from '../../components/profile/Stre
import { UrgeStatsCard, type HelpedByEntry } from '../../components/profile/UrgeStatsCard';
import { DemographicsAccordion, type Demographics } from '../../components/profile/DemographicsAccordion';
import { DigaMissionBanner } from '../../components/profile/DigaMissionBanner';
import { colors } from '../../lib/theme';
import { useColors } from '../../lib/theme';
import type { Plan } from '../../hooks/useUserPlan';
import { useMe } from '../../hooks/useMe';
import { useAuthStore } from '../../stores/auth';
@ -83,7 +84,9 @@ function mapHelpedBy(helpedBy: {
}
export default function ProfileScreen() {
const router = useRouter();
const insets = useSafeAreaInsets();
const colors = useColors();
const [bannerDismissed, setBannerDismissed] = useState(false);
const [demographicsExpanded, setDemographicsExpanded] = useState(false);
const { me } = useMe();
@ -149,7 +152,7 @@ export default function ProfileScreen() {
}
return (
<View style={{ flex: 1, backgroundColor: '#fafafa' }}>
<View style={{ flex: 1, backgroundColor: colors.bg }}>
<AppHeader showBack title="Profil" />
<ScrollView
ref={scrollViewRef}
@ -167,24 +170,14 @@ export default function ProfileScreen() {
demographicsComplete={demoComplete}
showDemographicsHint={!demoComplete}
onDemographicsHintPress={openDemographics}
onEditAvatar={() => {
Alert.alert(
'Avatar bearbeiten',
'Hero-Auswahl + Foto-Upload kommt in der nächsten Iteration.',
);
}}
onEditNickname={() => {
Alert.alert(
'Nickname bearbeiten',
'Inline-Edit + Save kommt in der nächsten Iteration.',
);
}}
onEditAvatar={() => router.push('/profile/edit')}
onEditNickname={() => router.push('/profile/edit')}
/>
<View
style={{
height: 1,
backgroundColor: 'rgba(0,0,0,0.06)',
backgroundColor: colors.border,
marginHorizontal: 16,
}}
/>

10
apps/rebreak-native/locales/de.json
View File

@ -666,6 +666,16 @@
"label_other": "Tage",
"label_suffix": "clean"
},
"profile": {
"edit_title": "Profil bearbeiten",
"edit_save": "Speichern",
"edit_photo_cta": "Eigenes Foto wählen",
"edit_photo_perm_title": "Foto-Zugriff",
"edit_photo_perm_desc": "Bitte erlaube den Zugriff auf deine Fotos in den iOS-Einstellungen.",
"edit_preset_label": "Avatar wählen",
"edit_nickname_label": "Nickname",
"edit_nickname_hint": "Sichtbar für andere Mitglieder — max. 32 Zeichen."
},
"demographics": {
"employment_status_employed": "angestellt",
"employment_status_self_employed": "selbständig",

10
apps/rebreak-native/locales/en.json
View File

@ -666,6 +666,16 @@
"label_other": "days",
"label_suffix": "clean"
},
"profile": {
"edit_title": "Edit profile",
"edit_save": "Save",
"edit_photo_cta": "Choose your own photo",
"edit_photo_perm_title": "Photo access",
"edit_photo_perm_desc": "Please allow access to your photos in iOS Settings.",
"edit_preset_label": "Choose avatar",
"edit_nickname_label": "Nickname",
"edit_nickname_hint": "Visible to other members — max. 32 characters."
},
"demographics": {
"employment_status_employed": "employed",
"employment_status_self_employed": "self-employed",

58
scripts/deploy-admin-from-artifact.sh Executable file
View File

@ -0,0 +1,58 @@
#!/bin/bash
# deploy-admin-from-artifact.sh -- Server-side Deploy fuer rebreak-admin-staging.
#
# Wird via SSH von .github/workflows/deploy-admin-staging.yml aufgerufen.
# Erwartet: /srv/rebreak/apps/admin/.output-incoming.tar.gz (via scp vom GA-Runner).
#
# Kein Build-Schritt (laeuft auf GA-Runner), kein prisma-migrate (admin hat kein DB-Schema).
# Atomic mv Pattern identisch zu deploy-from-artifact.sh.
set -euo pipefail
REPO_ROOT="/srv/rebreak"
ADMIN_DIR="${REPO_ROOT}/apps/admin"
ARTIFACT="${ADMIN_DIR}/.output-incoming.tar.gz"
PM2_BIN="/root/.nvm/versions/node/v24.11.1/bin/pm2"
log() { echo "[deploy-admin] $(date '+%H:%M:%S') $*"; }
log_err() { echo "[deploy-admin:err] $(date '+%H:%M:%S') $*" >&2; }
log "=== Rebreak Admin Deploy-from-Artifact gestartet ==="
export PATH="/root/.nvm/versions/node/v24.11.1/bin:$PATH"
# 0. Sanity-Check: Artifact muss da sein
[[ -f "$ARTIFACT" ]] || { log_err "Artifact $ARTIFACT fehlt -- abort"; exit 1; }
# 1. Ziel-Verzeichnis sicherstellen
mkdir -p "${ADMIN_DIR}"
# 2. Artifact extrahieren -- atomisches mv
log "Step 1: Artifact extrahieren..."
rm -rf "${ADMIN_DIR}/.output-staging-new"
mkdir -p "${ADMIN_DIR}/.output-staging-new"
tar xzf "$ARTIFACT" -C "${ADMIN_DIR}/.output-staging-new"
# Sanity-Check: Nuxt-SSR-Server muss vorhanden sein
[[ -f "${ADMIN_DIR}/.output-staging-new/server/index.mjs" ]] || {
log_err "Ungueltiges Artifact -- server/index.mjs fehlt"
rm -rf "${ADMIN_DIR}/.output-staging-new"
exit 1
}
rm -rf "${ADMIN_DIR}/.output-staging"
mv "${ADMIN_DIR}/.output-staging-new" "${ADMIN_DIR}/.output-staging"
rm -f "$ARTIFACT"
log ".output-staging aktualisiert"
# 3. pm2 restart (oder erstmaliger Start via ecosystem)
log "Step 2: pm2 restart rebreak-admin-staging..."
"${PM2_BIN}" restart rebreak-admin-staging --update-env 2>/dev/null || \
"${PM2_BIN}" start "${REPO_ROOT}/ecosystem.config.js" --only rebreak-admin-staging
log "rebreak-admin-staging restarted"
# 4. pm2 save
"${PM2_BIN}" save 2>/dev/null || true
log "=== Admin Deploy erfolgreich ==="